这批笔记讲的是"小屏幕、手指操作、碎片化使用"这套约束下，界面该怎么设计。手机不是缩小的电脑：屏幕小、靠拇指点、用户经常只有 15 秒、还经常一边走路一边用。全文八块——
(1) 物理约束(Fitts 法则的点击代价 + 15 秒微会话)是地基；(2) 覆盖层与导航(底部弹窗/覆盖层误关/标签/轮播)是移动端最容易做砸的一类控件；(3) 表单与录入(结账/时区/数据表格)是"在小屏上让用户少打字"的硬仗；(4) 系统状态三态(指示器/验证/通知)告诉你"该用哪种方式跟用户说话"；(5) 错误消息给一套可打分的评分标准 + 写法；(6) 推送通知列五个让用户卸载 App 的错误；(7) 上手引导用实验数据证明"教程基本无用，要做上下文帮助"；(8) 跨设备与物理-数字桥(响应式内容分散/二维码/智能手表/横幅盲视)。
一条贯穿全篇的心法：移动端的每一次点击、每一次滚动、每一秒等待，代价都比桌面端高——所以省点击、省打字、省记忆，永远是对的。
一、移动交互的物理约束：Fitts 法则 + 15 秒微会话
这是整本笔记的物理学。Fitts 法则(Fitts's Law) 是一条经过几十年验证的定律：用户把指针(鼠标光标或手指)移到一个目标上所需的时间，由目标的大小和距离共同决定——移动时间 T ∝ log(距离 D / 宽度 W)。两个直觉结论：目标越大越快点中，距离越近越快点中。注意是对数(log)关系，所以距离翻倍，时间增加但不会整整翻倍(人移动时先加速、接近时减速)。
| 设计杠杆 | 怎么用 | Why / 反例 |
|---|---|---|
| 把目标做大 | 按钮、图标、可点区域尽量大 | 大目标少误触、点得快 |
| 图标加文字标签 | 标签会扩大整个可点区域 | 纯图标点击区小；加"Delete"文字后区域变大、还更好懂 |
| 把相关控件放近 | 表单"提交"放最后一个输入框旁，不放页面顶部 | 减少手指/光标的移动距离(丝芙兰把 Save 放表单远端 = 反例) |
| 别挤太密 | 目标之间留足留白边距 | 挨太近会误触(呼应错误预防) |
| 边缘"无限目标"——只在鼠标界面成立 | macOS 菜单栏贴屏幕顶、Windows 任务栏贴底——光标冲不出屏幕边，无需减速，移动时间极短 | 触屏上反过来：手指可能滑出屏幕边界导致误触，所以触屏的边缘目标反而更难点，别把关键操作塞屏幕边 |
菜单几何：线性菜单(上下排)远端项难点；矩形/大型菜单(Mega Menu)同时用横竖两个方向、缩短平均距离；圆形菜单(Pie Menu)让每项到中心等距，效率最高。把触发手柄对齐线性菜单中部也能压低平均移动时间。
移动微会话(Mobile Microsessions)——Fitts 法则在时间维度的延伸。定义：时长少于 15 秒的手机操作(术语源自 Ferreira 等人的研究，他们发现 40% 以上的移动会话是微会话；老年用户阈值可放宽到约 22 秒)。心法：就算任务本身复杂，缩短"完成它所需的步骤时间"仍然改善体验。支撑微会话的四种设计：
| 方法 | 怎么做 | 关键点 / 反例 |
|---|---|---|
| 通知 Notifications | 约 60% 的微会话是读/操作通知 | 通知要自足(不打开 App 就够用，如 Lyft 直接显司机+到达时间)；内容截断也要留够线索(YouTube 截断标题但关键词"Everleigh"足以判断)；支持直接在通知里操作。反例：亚马逊只说"已送达"不说送了啥 |
| 小组件 Widgets | 主屏上的压缩版 App 视图，显动态信息 | 别截断关键信息(CNN 小组件放大后仍截断标题=逼用户开 App)；允许有限交互(Gmail 小组件可滚动);聚焦一项数据 |
| 快捷操作 Quick Actions | 长按 App 图标直达任务(美联航长按→直接登机办理) | 只放高频重要任务，别放"邀请好友"(Airbnb)、"你的贡献"(Google Maps)这类低频项；数量有限 |
| 语音助手 Siri/Google Assistant | 语音指令直达(PayPal 建议给常用转账设快捷词"Cheese") | 结合时间地点更智能；分析行为主动推荐快捷方式 |
现状：除通知外，小组件/快捷操作/语音助手的用户使用率仍低——但对会用的人效率提升显著。要靠 App 内宣传教育来提高知晓率。
二、移动覆盖层与导航控件：底部弹窗、覆盖层误关、标签、轮播
这几个是移动端最容易做砸的控件，共性问题都是"用户分不清这是什么、怎么关、关了会丢什么"。
2.1 底部弹窗 Bottom Sheets
定义：从屏幕底部弹出的覆盖层，显额外信息或操作。它是渐进式披露(Progressive Disclosure) 的一种——平时藏着、需要时才出现，因为会遮内容，所以只适合临时信息/操作，不适合常驻的工具。三种形态 + 五条指南：
| 形态 | 含义 | 例子 |
|---|---|---|
| 模态 Modal | 不处理完不能干别的，常带半透明遮罩 | UniFi 网络未连接提示(必须先解决) |
| 非模态 Nonmodal | 不强制交互，背景仍可操作 | Google Maps 目的地详情(同时还能平移缩放地图) |
| 可扩展 Expandable | 点/拖可放大到全屏，最小化时非模态、展开后变模态 | Apple 播客的迷你播放条→全屏 |
| 指南 | 要点 | 反例 |
|---|---|---|
| 1 支持"返回"键关闭 | 全屏弹窗易被当普通页面，用户会按返回键 | 很多弹窗不支持，打破习惯 |
| 2 给明确的 X 关闭按钮 | 不是所有人都会"顶部抓手柄下滑"，滑动还依赖手势精度 | Pocket 抓手柄在屏幕顶、易误开通知栏，且要长距离连续下滑才关 |
| 3 不堆叠多个弹窗 | 多层叠加分不清是关顶层还是整摞 | Walmart 在底部弹窗里开产品详情、再叠评论弹窗，"返回"关一层、"X"关整摞，用户混淆 |
| 4 仅用于短暂交互 | 是临时 UI，别放需长时间阅读/浏览的内容 | Soundbrenner 把课程内容放弹窗，滚动时误下滑直接被弹回主页 |
常见误区：以为底部弹窗"更好点"(更靠近拇指)。其实屏幕底部不一定最好点——取决于用户怎么握手机。
2.2 覆盖层意外关闭 Accidental Dismissal of Overlays
覆盖层(Overlays)= 盖在主内容上的层(导航菜单、底部弹窗、产品详情、App 内浏览器)。两个维度分类：部分覆盖 vs 全屏覆盖(全屏几乎和普通页面无法区分)、模态 vs 非模态。关闭方式有四种(X/返回按钮、点外部空白、下滑手势、设备返回键),问题就出在用户预测不了哪种方式会得到想要的结果：
- 选错关闭方式：Walmart 点 X 关掉了整摞而非顶层；LinkedIn 用返回键关子菜单结果退回初始页丢了导航记录；Instagram 误返回主界面而非上一层。
- 工作丢失：Overstock 误点外部关掉菜单丢了所选子分类。
- 堆叠加剧混乱：Google Maps 想关餐厅详情回列表，结果关了所有覆盖层回到地图、得重新搜索。
防止办法：① 优先用替代设计(独立页面 / 手风琴菜单)避开覆盖层；② 必须用就优先部分覆盖(更易识别、减少误用返回键，但需滚动的长内容除外)；③ 不堆叠；④ 给明确 X 按钮(Best Buy 正例)；⑤ 支持设备返回键关闭覆盖层而非直接退页(Dillards 正例)。
2.3 标签 Tabs
标签让用户从多选项里挑一个看其面板。两类标签别混用——这是核心：
| 维度 | 导航标签 Navigation Tabs | 页面内标签 In-page Tabs |
|---|---|---|
| 内容 | 范围广、彼此无关、内容不同 | 范围窄、彼此相关、内容相似 |
| 位置 | 视口顶部/左侧(移动端常在底部) | 不固定，嵌在页面布局里 |
| 滚动 | 有时固定在视口 | 很少固定 |
| 用户期望 | 跳到新视图、可能有加载延迟 | 留在当前视图、立即加载 |
| 默认选中 | 通常有(从页脚链接进可能没有) | 始终有 |
何时用标签：内容长且分组清晰、分组少(越少越好)、重要性不均(默认标签最受关注)、标签名可简短、不需同时对比多个面板。反例：Google 广告管理用标签分类，用户得不停切换才看全，麻烦(应改单页)。与手风琴比：手风琴适合移动端 + 长标签名 + FAQ 短内容；标签适合桌面 + 长内容 + 复杂布局。
视觉最佳实践(浓缩)：①至少用 2 种选中指示器(共同区域/下划线/字体加粗/尺寸/图标——只有 2 个标签时尤其要多重指示，CNN 仅微弱加粗=反例)；②未选中标签也要清晰可读(MongoDB 未选中标签对比度太低被当不可点=反例)；③选中标签与面板要靠近相连(PaneraBread 大内边距+全宽线把标签与面板割裂=反例)；④只用一行、不堆叠(2000 年亚马逊堆叠标签是经典反例：点后排标签要么断连要么打乱顺序)；⑤标签列表放面板上方(Okta 放右侧+动画自动跳下一个=反例)。内容实践：高频内容放首位并默认选中；标签名 1-2 词、描述性、别全大写(全大写损可读性、Penguin Random House=反例)；标签管理功能(增/删/重命名)别只靠右键(Excel=反例)。无障碍：键盘可导航(回车/空格选)、高对比焦点、正确 ARIA 角色。
2.4 轮播 Carousels
多个横幅轮流展示，省空间但 UX 常不理想。挑战：①用户常忽略它、当成广告直接划过(对策：关键信息别只放轮播、别处也重复);②自动播放——移动端不推荐自动播放，桌面端用测试定播放间隔、定不了就禁用、永远让用户能手动切;③导航控件(小圆点/箭头)难发现难点(对策:用大按钮/滑动手势、显部分下一帧给视觉线索);④移动端用户通常只看 3-4 帧(对策:限制帧数 ≤3-4、内容主题别太散);⑤可能稀释关键内容(对策:评估每帧是否够重要、必要时只放一张关键横幅)。
团队冲突解法：轮播常被用来"摆平内部对页面资源的争抢"。如果争论太多，干脆用单张横幅逼团队聚焦最重要的信息。
三、移动表单与录入：结账、时区选择器、数据表格
主战场是"在小屏上让用户少打字、少滚动"。
3.1 移动结账 The Mobile Checkout Experience
结账直接影响转化和收入。四组要点：
| 环节 | 该做 | 反例 |
|---|---|---|
| 购物车与结账入口 | 点购物车图标一键直达完整购物车；明确"移除"按钮；变更自动生效不要"更新"按钮；跨设备同步(Apple Handoff 在 iPhone/iPad/Mac 间接力)；访客结账优先于登录注册 | PSSW 要多点才进完整车；HP 要把数量改成 0 才能删；ThingsRemembered 要点"更新"才保存 |
| 订单摘要与提货 | 摘要放页面顶部并展开显示每个明细；用定位估税费、给附近门店提货(Target) | Adidas 摘要在底部且折叠，价格构成看不清 |
| 表单字段与输入 | 每个字段配对应键盘(数字字段数字键盘、邮箱键盘带@和.);按邮编自动填城市州(可改);兼容浏览器自动填充;用开放输入框替长下拉(州名、信用卡有效期打字比滚下拉快) | Staples 让用户从长下拉里滚选州名 |
| 移动支付 | 提供 PayPal/Apple Pay 等，但别太多免选择困难，最常用的放首位/最显眼(Vineyard Vines 在车和支付页都放 PayPal 防错过);支持拍照识别信用卡(Safari 自动填充) | —— |
3.2 时区选择器 Time-Zone Selectors
看似简单实则很难(时区随夏令时变、种类多、用户认知方式各异、无全球统一组织法)。研究数据(定性 8 国 13 人 + 定量 4 国 83 人)：
- 73% 能准确写出自己的时区名(如"太平洋时间")，18% 用偏移量(如 UTC-3)——所以别只按偏移量排序(Google Calendar/Slack 按偏移量排=反例，多数人不懂偏移量含义)。
- GMT 比 UTC 熟：55% 知道自己的 GMT 偏移、仅 34% 知道 UTC 偏移(尤其英国用户)。
- 搜索几乎是刚需：禁用搜索时几乎所有人都去找搜索框；首次搜索 44% 用城市名、24% 用时区名。
- 分组(按地区/大陆)比纯偏移量排序更快定位。
设计建议：①自动定位时区并允许改(或把用户时区高亮置顶);②提供搜索(激活时可见);③按城市名字母序排，旁标国家/州+偏移量;④分组显示、主要地区置顶、避免按偏移量排;⑤针对英国用户可用 GMT 替 UTC。
3.3 数据表格的四种用户任务 Data Tables(偏平板/桌面，但移动同理)
表格比卡片/模块化展示更可扩展、更便于直接比较(卡片要求眼睛在卡间反复重定位，比较费认知)。围绕四种核心任务设计：
| 任务 | 设计要点 |
|---|---|
| 1 查找符合条件的记录 | 首列用可读标识符(人名/记录名)而非自动生成 ID；列序反映重要性、相关列相邻；过滤器可发现+快+直观，且明显提示"当前是过滤后的数据" |
| 2 比较数据 | 冻结表头行 + 首列(投影暗示浮在数据上方)、浅色边框、斑马纹辅助视觉扫描；易隐藏/重排列、明显状态提示(如"已隐藏 15 列") |
| 3 查看/编辑/新增单条 | 窄表用行内编辑(编辑态外观要不同防误操作)；非模态侧栏最佳(能编辑同时看其他数据)；模态弹窗遮内容不推荐；手风琴展开后用户常忘了收、界面乱 |
| 4 对记录操作 | 单条操作按钮放行内(太多会挤或藏 hover 降可发现性)；批量操作用复选框+"全选" |
四、系统状态三态：指示器 vs 验证 vs 通知
"系统状态可见性"是十大可用性启发式之一(见 NNGroup 可用性测试与十大可用性启发式(10 条启发式完整表 · 复杂应用应用 · 用户愉悦层级 · 测试方法 5 人法则/招募/远程/任务场景/分步任务/态度vs行为/4步分析/小样本误差/竞争性评估))。但用错沟通方式会害体验。三种方式按三个维度区分：
| 状态指示 Indicators | 验证 Validations | 通知 Notifications | |
|---|---|---|---|
| 全局 vs 上下文 | 上下文 | 上下文 | 全局或上下文 |
| 被动 vs 需操作 | 被动 | 需操作 | 需操作或被动 |
| 谁触发 | 用户操作或系统事件 | 用户操作 | 系统事件 |
| 实现 | 图标/字体变化/尺寸动画 | 红字+图标标错字段 | 弹窗/横幅/标记 |
| 例子 | Yelp 红火焰图标=热门新店;未读邮件标识;股票涨跌箭头 | 表单"请输入您的街道地址" | 订单状态更新、新消息、电量不足、App 更新 |
怎么选：①需要用户立即关注并行动(如输入错)→ 验证或"需操作通知";②信息只是补充(动态数据变化)→ 状态指示;③紧急的系统事件→ 通知(弹窗/横幅突出)。心法：被动信息别做成打断式通知，需立即处理的别做成易被忽略的被动指示。反例：Visual Comfort 把"已加入购物车"通知放在远离"加入购物车"按钮的页面顶部，用户看不到可能重复添加(Mango 占屏一部分的混合式通知反而更稳)。
五、错误消息：评分标准 + 写法
5.1 错误消息评分标准 Error Messages Scoring Rubric
一套可量化打分的工具(Tim Neusesser & Evan Sunwall 创建)：三维度 × 各 4 条准则，每条 1-4 分，平均分映射 A-D 等级。
| 维度 | 4 条准则 |
|---|---|
| 可见性 Visibility | 靠近错误源显示 / 用醒目冗余可访问的标识(图标边框阴影) / 按错误影响设计样式 / 不过早显示 |
| 沟通性 Communication | 人类可读语言(无术语) / 简明准确描述问题 / 提供建设性建议 / 积极语调不怪用户 |
| 效率性 Efficiency | 预防常见错误 / 保留用户输入 / 降低纠错成本 / 教用户理解系统 |
等级：A(4.0-3.3 顶级)/ B(3.2-2.5 良好)/ C(2.4-1.6 待改)/ D(≤1.5 严重)。实测三例：Craigslist 2.08(错误信息不靠近字段、不描述问题、清空输入)；Google Flights 3.17(沟通效率好但可见性弱、不解释原因)；J.Crew 3.67(各维度都好，仅 Items 拼成 Item)。团队用法：先统一对齐评分标准消歧、各成员独立评分避免群体思维、再取平均。
5.2 错误消息设计指南 Error-Message Guidelines
基于 Nielsen 可用性启发式：
- 可见性：靠近问题源；多通道冗余(粗体+高对比+红字+边框+图标，别只靠颜色/动画——无障碍要求);按严重程度选形式(轻微用 toast、严重用模态);别过早报错(密码这类高错率交互可实时行内验证、但别在没输完时报)。
- 沟通：大白话、少错误码；简明准确但别过度精准(以免和用户心智模型脱节);给建设性建议;积极语调——别用"无效/非法/错误"这类责备词，正确使用系统是开发者责任不是用户的错；别用幽默(高频错误场景下显得不合时宜)。
- 效率：主动防错(漏附件先提示);保留用户输入让其编辑而非重填;自动建议正确项("城市和邮编不匹配"时给候选);用超链接教用户但别滥用。
- 严重故障(服务器过载)可用新颖/有趣内容缓解(如 ChatGPT 停机时娱乐+教用户)。
六、推送通知的五大错误 Five Mistakes in Mobile Push Notifications
推送是拉活的利器，做砸了直接被卸载(2016 年用户日均收 56 条通知)。两类通知：需操作 vs 被动。五个错误 + 改法：
| # | 错误 | 改法 / 正反例 |
|---|---|---|
| 1 | 初次打开就请求通知权限 | 信任未建立易被拒。先给价值再请求：Conquest 游戏等用户首次升级后才请求(FreePrints 一进来就弹=反例) |
| 2 | 不告知通知内容 | 模糊请求易被拒。说清内容和价值：Night Sky 说明会推"观星条件、天体升起时间"(Tasty 不解释=反例) |
| 3 | 短时间内大量通知 | 烦到关通知/卸载。合并 + 提质：Instagram 把 11 个赞合并成 1 条、iOS 12 按 App 归堆(Wunderlist 每个到期任务单独推=反例) |
| 4 | 发无关内容 | 推与用户相关的：Reddit 推你订阅版块的热帖(Venmo 推朋友间与你无关的转账=反例) |
| 5 | 难以关闭通知 | 降低信任。App 内提供便捷通知设置：Elevate 设置页可逐类切换(经济时报逼用户去手机全局设置=反例) |
七、上手引导：教程基本无用，要做上下文帮助
两篇笔记用实验数据得出同一结论：别迷信教程，做随手可得的上下文帮助。
移动教程的实验(70 人、4 款冷门 iOS App、分"必读教程组 A"和"跳过组 B")：
| 指标 | 读教程组 A | 跳过组 B | 结论 |
|---|---|---|---|
| 任务成功率 | 91% | 94% | 无显著差异(p=0.443)——不看教程也能完成 |
| 难度感知(1 难-7 易) | 4.92 | 5.49 | 跳过组觉得更简单(p=0.047)——教程反让 App 显得复杂 |
| 完成时间 | 93.49s | 85.17s | 无显著差异(且这还没算读教程的时间) |
教程为什么无效(推送式揭示 Push Revelation 的通病)：打断当前任务、脱离用户真实需求的时机、易跳过、难记住、消耗精力。对策——拉取式揭示 Pull Revelation / 上下文帮助：根据用户操作信号、在他需要时才给帮助(Figma 仅当用户加了文本框才提示文本渲染变化)。实现要点：①易关闭也易重新调出(Evernote 把"What's New"留在侧边栏);②用渐进披露(Photoshop 悬停显简短动画+"了解更多");③多步流程帮助与步骤并排减记忆负担;④跳过显而易见的(齿轮=设置就别解释),把帮助留给复杂功能;⑤最重要也最难——理解用户的使用路径，靠用户研究判断何时最可能需要帮助。
建议：优先把资源投到优化界面本身、别强制教程、教程要短可跳、只给真正复杂/创新的交互做引导——教程是补充手段，不是替代直观设计的主力。
八、跨设备与物理-数字桥：响应式内容分散、二维码、智能手表、横幅盲视
8.1 移动优先对桌面的负面影响 The Negative Impact of Mobile-First on Desktop
移动流量已超 55%，移动优先成主流——但直接把移动布局放大到桌面会造成内容分散(Content Dispersion)：内容被拉伸到大片留白、巨图、大字之间，页面变长、信息密度低、要更多滚动。三大成因：移动优先、极简主义、大图设计。13 次定性测试对比"分散 vs 浓缩"原型发现的负面影响：
- 交互成本增加：页面变长要狂滚才找到信息；手风琴在桌面端反而增加点击、降低效率。
- 认知负担增加：内容被打断，用户得在多个视口间记忆比较(浓缩成 2×2 网格可同屏对比就好很多)。
- 难建概念模型 + 完整性错觉：屏幕底部没有"还有更多"的线索，用户误以为到底了、漏掉重要内容。
- 信任感降低：用户觉得内容被藏起来，怀疑公司有意隐瞒。
正面例外(可战略性使用分散)：需要用户专注复杂内容时逐一理解；高价值大图(真能看清产品细节)。建议：评估桌面端渲染是否过散、优先高价值图(纯装饰图少用)、把关键相关内容集中在同一视口、避免在桌面端硬搬移动专属交互(手风琴)。
8.2 二维码 13 条可用性指南 QR-Code Usability
二维码的三大用途：渐进式披露(超出有限空间的信息)、跨渠道过渡(物理↔数字)、减少印刷。13 条指南(浓缩)：
- 告诉用户它的作用和去向(码本身无信息线索，要配标签/短网址；Yeti 杯底无说明的码=反例)；2. 必要时标明用什么设备/App 扫；3. 链接到移动友好页(Papa Johns 链到手机显示差的页=反例)；4. 深链到相关页/操作(KFC 按系统跳 App Store 或 Google Play；Nike 鞋舌码却跳通用主页=反例)；5. 同设备显示又访问时别用码(直接给链接更方便)；6. 不要反转颜色(深码浅底);7. 用于跨设备身份验证(手机扫电视/电脑码登录，WhatsApp/智能电视);8. 渐进披露额外详情(避免"了解更多"这类泛标签);9. 保证链接信息时效(过期也应重定向到更新页;2019 传单码 2023 还链旧页=反例);10. 扫描曝光 <15 秒就用短网址替代(路边广告牌);11. 别只靠码做高频访问(码记不住);12. 放在用户会注意的地方(格式塔接近性,沃尔玛自助结账机在屏和键盘都放);13. 够大(按扫描距离调,最小 2cm × 2cm)。安全:钓鱼/恶意软件/伪造风险——只扫可信来源、点前预览、确保 HTTPS。
8.3 智能手表 6 型交互 6 Types of Useful Smartwatch Interactions
背景：到 2020 年约每 5 个美国人就有 1 人有智能手表/健身追踪器。从 11 位参与者的 200+ 实例归纳出六型交互：
| 交互类型 | 含义 | 成功要点 |
|---|---|---|
| 接收 Receiving | 手表向用户推信息求关注 | 比手机更受欢迎(无声不打扰+贴身难错过);要信息量足(不用看手机)、2-3 秒可懂、个性化、时机对;Updates/Reminders/Feedback 受欢迎、Promotions(促销)被嫌打扰 |
| 参考 Referencing | 用户主动查随时可看的信息(天气/心率/进度) | 简单只放最重要的、可视化(图表进度条)、常用信息放首页、可个性化 |
| 记录 Recording | 主动追踪事件(运动/喝水/睡眠) | 上下文提示(检测到跑步就提示记录)、数据准、易启动(快捷/语音);价值在长期汇总 |
| 控制 Controlling | 启停/调整设备(音乐/门锁/温度) | 常用功能优先显示、与其他设备同步(手表 App 落后于手机=痛点) |
| 沟通 Communicating | 收发消息/接电话 | 接收时尽量多显内容、发送优先语音输入(手表打字难) |
| 引导 Guiding | 任务中实时指导(导航/锻炼/冥想) | 独立(不用频繁碰手机)、触觉反馈(震动提示转向)、只显当前步骤 |
手表上低效的交互类型(别硬塞)：消费(看视频读文章)、创作(连文本输入都难)、浏览(用户不在手表上闲逛)、搜索(输入难+屏幕小显示结果难)——这些都该回手机做。
8.4 横幅盲视 Banner Blindness
用户已学会忽视长得像广告、靠近广告、出现在广告传统位置的内容——这是一种选择性注意(眼动研究证实用户连看都不看搜索结果页顶部的广告)。三个机制：
- 位置：忽略页面顶部横幅、右侧栏(传统广告位)，即使那里放的是正经内容。
- 视觉设计：广告样式的视觉特征触发跳过——文本中间的小矩形、花式排版、白底上的彩色背景块、图里嵌文字。
- 格式塔接近性 + 热土豆效应：靠近广告的内容被连坐当成广告忽略；一次性忽略某区域后，在别的页面/网站也持续忽略类似位置(Cascada 用户看一眼右栏后再不看)。
- 移动端：屏幕小广告反而难完全躲开(大幅广告被迫看到)，但任何与周围风格差异大的元素都可能被误当广告划过(Generac 用户跳过了含安装信息但看着像广告的区块)。
怎么避免广告"毒害"正经内容：别让重要内容看起来像广告(慎选颜色/字体/背景);可用性测试确认关键内容即使在广告传统区也被注意到;别把内容和广告混在同一区域。
源自 NNGroup Topics / Mobile & Tablet - 移动设备与平板(19 篇)。移动覆盖层/导航模式与 NNGroup 交互模式·覆盖层·滚动·移动与响应式(13 个模式 · 覆盖层误关/底部弹窗/教学蒙层/无限滚动替代/滚动位置保存/滚动渐隐/滚动劫持/Cookie权限/移动权限请求/移动引导/响应式断点/移动优先弊端/任务切换) 深度互补;系统状态可见性、错误恢复、识别优于回忆等启发式根基见 NNGroup 可用性测试与十大可用性启发式(10 条启发式完整表 · 复杂应用应用 · 用户愉悦层级 · 测试方法 5 人法则/招募/远程/任务场景/分步任务/态度vs行为/4步分析/小样本误差/竞争性评估);平板/跨设备(Split View、Handoff、iPad 多任务)与 Apple 官方规范 Apple HIG iPad & Mac 专项(平台差异/光标/导航/文案/图表/窗口/订阅/动态组件) / 流程模式(加载/引导/通知/反馈)Apple HIG 交互模式 Patterns(25 个流程模式 · 上手/输入/反馈/媒体/系统协作) 对照看。图片/视频/原档(含眼动热图、各 App 截图、craigslist/jcrew/pocket 视频)保留在 sources。
来源与关联资料
- NNGroup 交互模式·覆盖层·滚动·移动与响应式(13 个模式 · 覆盖层误关/底部弹窗/教学蒙层/无限滚动替代/滚动位置保存/滚动渐隐/滚动劫持/Cookie权限/移动权限请求/移动引导/响应式断点/移动优先弊端/任务切换)
- NNGroup 可用性测试与十大可用性启发式(10 条启发式完整表 · 复杂应用应用 · 用户愉悦层级 · 测试方法 5 人法则/招募/远程/任务场景/分步任务/态度vs行为/4步分析/小样本误差/竞争性评估)
- Apple HIG iPad & Mac 专项(平台差异/光标/导航/文案/图表/窗口/订阅/动态组件)
- Apple HIG 交互模式 Patterns(25 个流程模式 · 上手/输入/反馈/媒体/系统协作)