这批笔记是 NNGroup「设计模式」里覆盖层 / 滚动 / 移动与响应式三块的子集，13 个模式。它们其实围绕一根主线：当界面"盖在内容上"(覆盖层、底部弹窗、教学蒙层、Cookie 弹窗、权限弹窗)或"动起来"(无限滚动、滚动渐隐、滚动劫持、断点重排)时，用户最容易迷失、误操作、丢工作。
三句话先抓住全局：
- 覆盖层(Overlay)= 浮在当前内容之上的临时层(菜单、产品详情、购物车、提示)。它最大的病是关闭方式不统一——用户猜不到该点 X、点空白、还是按返回键，一猜错就把整页/整个浏览器关了，工作全丢。
- 滚动是用户最自动化、最不假思索的动作。一旦你改了它的速度/方向(滚动劫持)、或让内容淡入淡出(滚动渐隐)，用户立刻迷失——除非这种"动"真有功能价值。
- 移动优先(Mobile-First)是好趋势,但照搬到桌面会"内容分散":大图、大字、大留白把信息撑得到处都是,桌面用户得疯狂滚动。
全文五块：覆盖层与蒙层 → 滚动行为(无限滚动·位置保存·渐隐·劫持) → 移动与响应式(断点·移动优先弊端·任务切换) → 移动引导上手(引导·权限请求) → Cookie 权限。每节给心法 / Why / 反例。
一、覆盖层与蒙层:浮层一多就乱(Overlays, Bottom Sheets & Coach Marks)
这一块三个模式——通用覆盖层误关、底部弹窗(覆盖层的一种特例)、教学蒙层(覆盖层用来教学)——共享同一组病根：用户分不清浮层和真实页面，关错了就丢工作。
1.1 移动覆盖层的"意外关闭"(Accidental Dismissal of Overlays)
心法:覆盖层在移动端无处不在(导航菜单、底部弹窗、产品详情、购物车、应用内浏览器),但关闭方法五花八门(点 X、点浮层外部、向下滑、按系统/浏览器返回键),用户无法预测哪种能得到想要的结果——一猜错,轻则退回错误页面,重则关掉整个浏览器、丢失全部导航记录。
三类典型问题：
| 问题 | 怎么发生 | 真实反例 |
|---|---|---|
| ① 选错关闭方法 | 不同 App 的关闭手势不一致,用户凭习惯猜 | LinkedIn 安卓:用户在职业菜单里按系统"返回"想退回上级,结果直接跳回主页;沃尔玛:用户点左上大 X 想关评价层,却关掉了整个应用内浏览器退回 Instagram |
| ② 工作丢失 | 错误关闭把当前导航/选择清空 | Overstock 顺序菜单(先选主类再选子类),菜单外误点一下就关掉、丢失已选子类 |
| ③ 叠加层放大混乱 | 多个浮层堆叠,用户分不清在关哪一层 | Google Maps:看餐厅详情后向下滑想退回列表,却一次性关掉所有层,直接弹回最初地图视图 |
5 条防呆设计（按优先级）：
| # | 做法 | 为什么 |
|---|---|---|
| 1 | 优先用替代模式,能不用覆盖层就不用 | 需即时上下文的信息(如地图旁的餐厅列表)才适合浮层;产品详情/评论这类完全可以用独立页面(Revolve)或手风琴 Accordion(Nordstrom)承载,从根上消灭误关 |
| 2 | 部分覆盖 优于 全屏覆盖(Partial > Full-Page) | 部分覆盖(留出周边背景,如 Gmail、Neiman Marcus)让用户一眼认出"这是个浮层、不是新页面",就不会去按浏览器/手机返回键关它。但内容多到要滚动时反而用全屏,避免滚动时误触背景 |
| 3 | 不要叠加多个覆盖层 | 堆叠是误关的最大放大器 |
| 4 | 放一个显眼的关闭按钮(X)——尤其底部弹窗 | 可以同时支持向下滑手势,但显眼的 X 是兜底,不依赖用户会猜手势 |
| 5 | 让系统/浏览器内置返回键也能关掉浮层 | 这样即使用户习惯性按返回键,也只是按预期退回上一视图,而不是关掉整页或整个浏览器(Dillard's 官网即支持浏览器返回键关全屏覆盖) |
一句话:覆盖层是移动端常态,但天生易误关、易丢工作,叠加时尤甚。能用手风琴/独立页就别用浮层;必须用,就让它好认(部分覆盖)+ 好关(显眼 X + 返回键 + 不叠加)。
1.2 底部弹窗(Bottom Sheets):覆盖层的"贴底"特例
定义:固定在移动屏幕底部、用户点击时弹出的覆盖层,属于渐进式揭示(Progressive Disclosure)——平时不显示、临时展示上下文信息或相关操作。
两个优势:① 保留当前上下文,不用跳页面,减轻记忆负担;② 比全屏对话框遮得少,操作时还能参考背景信息。
反直觉点:很多人以为"放底部更好点"。错——用户握手机姿势千差万别,屏幕中部反而是最易点的区域,底部不等于顺手。
三种类型：
| 类型 | 行为 | 例子 | 何时用 |
|---|---|---|---|
| 模态 Modal | 必须先处理/关闭才能做别的,背景被半透明遮罩盖住表示不可用 | UniFi:设备没连上网时弹出,背景仍显示网络名供参考 | 用户必须先解决某事、但可能要参考背景信息时 |
| 非模态 Non-Modal | 不强制,弹窗在底部、背景仍可交互 | Google Maps:底部显示目的地详情+导航操作,同时仍能平移缩放地图 | 想同时展示详情又不打断主界面操作时 |
| 可扩展 Expandable | 点击/上滑可扩成全屏(收起时非模态、展开后变模态) | Apple Podcasts:小卡显示正在播放的剧集,拖动顶部"抓手 Grabber"可扩成全屏,下滑收起 | 信息有"概览→详情"两层时 |
三大可用性问题 + 对策：
| 问题 | 对策 | 反例 |
|---|---|---|
| 缺乏清晰关闭方式 | ① 全屏时支持返回键关闭;② 顶部放显眼 X 按钮(滑动手势易出错,且对屏幕阅读器/行动不便者不友好) | Pocket 全页底部表单只能下滑关,抓手位置易误触系统面板、还要长距离滑 |
| 叠加多个底部弹窗 | 别拿底部弹窗代替正常页面跳转——它是临时 UI,适合短暂中断/分支,不适合主路径 | 沃尔玛把产品详情做成底部弹窗,点评论又叠一层,返回键关一层、X 关整摞,用户混淆按错 |
| 遮挡重要背景内容 / 长内容误关 | 只用于短时互动,长内容会让用户在滚动时误触下滑而意外关闭 | Soundbrenner:课程列表→课程详情两层堆叠,浏览时误下滑直接弹回主页 |
心法:底部弹窗 = "短、临时、保留上下文"的浮层。展示少量选项/补充信息时它最香;一旦内容长、要多层导航,就老老实实用独立页面。
1.3 教学蒙层与提示标记(Instructional Overlays & Coach Marks)
指 App 里那种"半透明蒙层 + 箭头/手写字 + 提示"的新手教学层。核心矛盾:用户打开 App 是为了快速干活,不是来读说明书的——他们会飞快忽略提示。所以教学蒙层要做到让人觉得有帮助、而不是要跳过的障碍。
5 条要点：
| # | 要点 | Do / Don't | 反例 |
|---|---|---|---|
| 1 | 短小且聚焦 | 一次只讲单一交互,别一屏标注所有功能 | Morningstar iPad:一次性标注全屏所有功能(很多本该自解释),徒增认知负担 → YouTube 安卓:只聚焦单个元素的交互 |
| 2 | 避免连串提示 | 别用一连串提示屏强迫用户记多步操作 | Makr iPad:每个新界面都来一串纯文字提示,用户直接跳过、零吸收 |
| 3 | 优先视觉表达 | 图示 + 极简文字,减少阅读量和记忆负担 | Makr 改版建议:用一个简短提示模态把主操作以图示+少量文字呈现 |
| 4 | 明显区别于真实控件 | 提示要和可交互元素一眼可分(如用手写体/插画风) | Wimbledon iPad 蒙层太精致,用户误以为提示图标可点;Ness iPhone 提示风格和隐藏功能撞车 |
| 5 | 内容简洁可扫描 | 只讲主任务或不常见交互,视觉+精炼文字提升可扫描性 | —— |
Why:教学蒙层本质是在替"界面不够自解释"擦屁股。上策永远是把界面做得不用教;真要教,就短、视、可跳。(更系统的"能不引导就不引导"见下文第四块「移动引导」。)
二、滚动行为:别乱动用户最自动化的动作(Scroll Behavior)
四个模式:无限滚动的替代方案、滚动位置该不该保存、滚动渐隐、滚动劫持。共同原则——滚动是用户最固定、最不假思索的行为,任何对它的改动都得有真功能价值,否则纯添乱。
2.1 无限滚动的 3 个替代方案(3 Alternatives to Infinite Scrolling)
无限滚动(刷到底自动加载下一批)有几个老毛病:内容流不停让人难看清整页、容易产生"内容已到底"的错觉、到不了页尾(页脚永远在逃)。三个替代:
| 方案 | 好处 | 缺点 | 适合 |
|---|---|---|---|
| ① 无限滚动 + "加载更多"按钮 | 暂停内容流(看得清整页)、避免完整性错觉(明示下方还有)、给低带宽/限流用户控制权 | 多一次点击的互动成本,可能减少消费量、促使用户切走 | 想保留流畅感又要明确边界时 |
| ② 集成分页的无限滚动(Integrated Pagination) | 页码当导航标记(帮用户记住"在第几页"、快速跳转、跳过不需要的内容) | 仍到不了页尾;模式较新,用户熟悉前可能困惑 | 内容长、用户要回头找之前看过的项时 |
| ③ 经典分页(Classic Pagination) | 切成多页,解决无限滚动绝大多数可用性问题 | 打断连续性(体验不那么流畅)、多点击=略增互动成本 | 任务型、需要精确定位的内容 |
怎么选:没有万能方案,按"网站情况 + 用户目标"权衡每个方案的优劣。
2.2 滚动位置:几乎总该"保存"(Save Scroll Position)
问题叫"Pogo Sticking(弹簧跳)":从列表页进详情页再返回,页面却跳回顶端而非原位置,逼用户重新滚——白白增加操作成本(研究里 Spotify 浏览播客就这样)。
心法:几乎总该保存滚动位置,尤其"同一会话内返回 + 内容没变"时价值最大(电商比价场景:Muji 在详情⇄列表间切换能直接回到原浏览位;Ravelry 分页列表从第 8 页进详情、返回精确回到第 8 页)。
但有例外——这几种情况该"重置"位置：
| 例外 | 为什么重置 | 例子 |
|---|---|---|
| 内容频繁更新 | 留旧位置会让用户错过新信息 | The Score 体育应用返回聊天界面时,自动把最新消息滚入视野并用动画提示已更新 |
| 离开时间过长(超 ~30–60 分钟) | 时间越久越忘了离开前的位置和目的 | 手机浏览器开一堆标签,几小时/几天后回来自动刷新重置,帮用户重建上下文 |
意图不明时,选"最不打扰"的默认:一般 = 默认保存位置 + 提供"跳到最新"的快捷入口(如固定输入框/"跳到最新消息"按钮)。
反例:ChatGPT 每次切换对话都跳到底部,打断了正在上方阅读的用户节奏——更好的做法是保留位置 + 给"跳到最新"选项。心法:滚动位置是"做对了没人察觉、做错了格外烦"的细节,按内容类型/更新频率/用户行为判断。
2.3 滚动渐隐(Scroll Fading):元素随滚动淡入淡出
定义:用户滚到某处时,触发元素淡入/淡出(常用于分隔信息块,帮用户逐步消化)。和滚动劫持的区别很关键——渐隐不改变你的滚动操作(只是触发动画),劫持则改变滚动速度/方向。两者可结合但要极谨慎(见 2.4)。
用途:引导浏览长页、配合懒加载省带宽、及时呈现支持信息(Crypto.com 滚到"安全"段弹出手机通知)、提升可信度(UT Austin 实时计数器营造"实时更新"感)。
研究发现 + 最佳实践：
| 发现 / 实践 | 要点 |
|---|---|
| 动画只触发一次 | 元素淡入后保持可见,方便用户返回重读/比较;反例:Crypto.com 在线计算器输出随渐隐反复出现消失,用户没法看结果 |
| 避免"内容已完整"错觉 | 上方留白过多或被广告打断,用户会误以为到底了;减少留白 + 露出下一区块一角鼓励继续滚(Crypto.com 案例:回报率信息藏在看似空白区下方,用户差点以为没有) |
| 文字要简洁清晰 | 短而有力的文字 + 动画最易理解(Apple Card 反响好);反例:MagicLinks 一连串淡入淡出文本,用户被迫重读 |
| 加载过慢会掉品牌分 | 图片渐隐若加载慢,用户会怀疑内容(Cigna 案例);务必快加载 |
| 别在滚动劫持页里再加渐隐 | 两者叠加 = 过度视觉运动 + 失控感 = 认知负担爆炸 |
| 渐隐速度 100–400ms | 太慢用户快速滚会跳过内容 |
| 每次只淡入一种元素 | 别文字图片同时渐隐(Apple.com 文字图片交替渐隐,引导更有效) |
| 应用接近/闭合的格式塔原则 | 减少内容块间距、露出下一块一部分,引导自然下滚 |
| 移动端尽量避免 | 研究显示渐隐在移动端可用性问题更严重 |
心法:渐隐用对了能提可读性/品牌感/加载速度,用错了重伤体验——所以要"少量、快速"地用,只为引导和分隔内容服务。
2.4 滚动劫持(Scrolljacking):高风险模式
定义:改变页面滚动的正常速度或方向(甚至强制横向滚动),或滚动时触发动画/额外内容,违背用户对"垂直、匀速、跟手"的默认预期,削弱控制感(Apple 网站:滚动不下移页面,而是触发文字/动画出现)。
为什么有人用(三个合理动机):① 分解信息(Apple Watch Ultra 逐步展示 8 个功能细节避免过载);② 指导叙事/渐进式披露(BBC 滚动展示爆炸前后对比图);③ 传达品牌个性(Therabody 用它强化"创新"形象)。
7 个研究发现：
- 滚动劫持引发迷失方向——尤其覆盖大部分内容时,用户以为页面坏了、刷新或退出(Crypto.com 整页劫持,所有用户都迷失)。
- 有功能价值时容忍度更高(BBC 这类逐步披露相关信息),但仍有人困惑。
- 较快的滚动速率更好——过慢令人疲劳、过快错过信息,需测试找最佳速率。
- 任务型用户最不耐烦(Reachdesk、UT Austin 上劫持严重干扰目标任务)。
- 同时改方向 + 动态文字 = 最差体验(ReachDesk 测试里所有用户都不适)。
- 移动端更糟——屏幕小、加载慢放大问题,部分网站移动端还看不到导航菜单。
- 粘性导航(Sticky Navigation)是逃生口——劫持让用户迷路时,常驻导航是恢复控制的关键工具。
7 条最佳实践：① 只用来逐步披露有价值的信息(别为复杂而复杂);② 测试并优化滚动速率;③ 页面保留正常滚动区域提升熟悉感/控制感;④ 避免改变滚动方向;⑤ 限制文字量(别让用户边读边滚来回切);⑥ 移动端避免使用;⑦ 只放在首屏折叠以下(Below the Fold),别在顶部就劫持、阻断主任务。
怎么判断该不该上:它适合媒体叙事/品牌展示/产品故事这类视觉体验型;不适合金融、教育、SaaS、工具类等效率型产品(任务型用户对干扰极敏感)。即便设计得当,也必须经充分用户测试和功能性验证。
附:用什么方法验证——滚动劫持的好坏靠可用性测试(Usability Testing,定性方法)判断:招真实用户做真实任务(理解某信息/找特定内容/比较两段差异),观察其滚动、停顿、回退、迷失、刷新等即时行为。它能捕捉专家评审/访谈/A-B 测试看不到的"滚动过程中的微行为"(迷失点、阅读断点、操作停顿);局限是样本小、无统计意义,但能揭示深层体验问题。(可用性测试方法论详见 NNGroup 可用性测试与十大可用性启发式(10 条启发式完整表 · 复杂应用应用 · 用户愉悦层级 · 测试方法 5 人法则/招募/远程/任务场景/分步任务/态度vs行为/4步分析/小样本误差/竞争性评估))
三、移动与响应式:从手机到桌面的重排陷阱(Mobile & Responsive)
三个模式:响应式断点、移动优先的桌面弊端、任务切换。
3.1 响应式断点(Breakpoints in Responsive Design)
几个基础概念:栅格(Grid)=由列/间隙/边距组成、给页面布局的结构骨架;布局(Layout)=内容和 UI 元素在屏上的排列;断点(Breakpoint)=屏幕宽度达到某临界值时、布局需切换的那个点(如调浏览器窗口大小时布局从 4 列变 2 列)。实践中"断点"常指一个宽度范围(最小~最大),而非单一尺寸(如桌面断点可能是 1200–1400px)。
断点数量:越多越能适应细微尺寸变化,但资源有限时通常只设 2–3 个主断点。
四种常见断点(T 恤尺寸命名法)：
| 断点类别 | 屏幕范围 | 栅格列数 | 设备示例 |
|---|---|---|---|
| 额外小 Extra-small | 小于 500px | 4 列 | 手机 |
| 小 Small | 500px – 1200px | 8 列 | 平板 |
| 中 Medium | 1200px – 1400px | 12 列 | 笔记本 |
| 大 Large | 1400px 及以上 | 12 列 | 大尺寸显示器 |
常见布局变化:导航变化(左侧导航从中屏到小屏折叠成汉堡菜单)、列折叠(右列折进主内容区)、可见内容变化(每行卡片/产品数随列数增减)。
真实案例:Warby Parker 中屏三列→小屏单列;IBM 大屏左侧导航默认可见→中屏折成顶部汉堡;Airbnb 大屏列表+地图同显→小屏默认显列表、地图折在按钮后。
设计技巧:① 定义断点(基于用户常用设备范围、制定命名规则、随设备趋势更新如适配大屏手机);② 带着断点思考设计(优化各尺寸下的关键内容、调整布局流动性、例外处理——如把大屏右列的重要操作按钮在小屏移到显眼位);③ 和开发团队对齐断点定义与设计变化,确保实现准确。
3.2 移动优先的桌面弊端:内容分散(The Negative Impact of Mobile-First on Desktop)
心法:移动优先(Mobile-First,先为手机设计再扩展到平板/桌面)是好趋势,但扩展到桌面时常导致"内容分散(Content Dispersion)"——大图、多余留白、放大字体把内容撑得过散过长,用户被迫疯狂滚动。
三种叠加成因:① 移动优先(扩展手法不当);② 极简主义(大量负空间+简化内容,代价是页变长、信息密度降低);③ 大图设计(高清图拉伸了文本内容,如 Waze 官网图片占近 2/3 视窗宽、信息密度极低)。
研究:13 次质性可用性测试,对比四种原型——主页/产品页 × 分散布局/紧凑布局(分散原型基于真实页如 Robinhood 重建并去品牌,紧凑版用同样文本内容、更高密度)。
6 个负面影响:① 增加页面长度和交互成本(找信息要大量滚动);② 增加认知负担(内容分割到不同视窗,逼用户记住再来回滚比较;紧凑版用 2×2 网格让用户同屏比较多项);③ 难以建立概念模型;④ 增加挫败感;⑤ 完整性错觉(屏底无"下方还有"的提示,用户以为到底了);⑥ 降低可信度(以为信息难找或被刻意隐藏)。
但分散也有正面用途:① 帮用户专注于特定内容(减少同屏内容、逐一理解);② 适合高价值图像(图本身有信息时,大图帮用户看清细节)。
5 条设计建议:① 优化桌面呈现(重要内容在桌面易浏览扫描);② 评估图像价值(优先用能提供上下文理解的大图,避免装饰性大图);③ 保持相关内容整体性(尽量同视窗、减少回溯滚动);④ 避免移动端专属交互(少用手风琴等,或换更适合桌面的呈现);⑤ 适当利用分散(对复杂内容分散展示帮逐一理解)。
结论:极简的分散布局能聚焦重点,但桌面端往往徒增滚动量和认知负担——谨慎应用移动优先理念,别让桌面用户买单。
3.3 任务切换的设计(Designing for Task Switching)
心法:网页"多任务"是个误区——人其实做的是串行任务切换(Serial Task Switching)而非真并行。大脑无法高效同时处理多个用相似认知资源的任务(连"阅读+搜索"这种简单任务都难并行),每次切换都要重新获取上下文,导致注意力分散、效率降低。
串行切换的三大代价:① 错误率上升(易忽略细节,如边写邮件边开会会误听/打错字);② 效率降低(阻碍进入"心流 flow");③ 压力增加(大脑反复重聚焦→精神疲劳)。
支持任务切换的界面模式:① 分屏(Split Screen)——可伸缩侧边栏让用户同处理多任务(Google Workspace、Zoom;macOS/Windows 多窗口并排保持视觉连续);② 画中画(Picture-in-Picture)——视频在角落播放、同时干别的(边看 YouTube 边查天气);③ 并行任务保持可用——等客服回复时仍能浏览(SF Travel);④ 屏蔽干扰——"专注模式/请勿打扰"(macOS Focus Mode);⑤ 自动记笔记——AI 工具(Otter.ai、Granola)捕捉会议行动项/问答,确保信息不漏。
5 条设计建议:① 允许用户自定义工作区(可拆卸面板、并排视图、可折叠模块;Zoom 可拖动排列聊天/投票/笔记面板);② 保持用户定位清晰(面包屑、明确区块标题、清晰按钮文案;Framer 用面包屑显路径);③ 支持任务并行(后台上传时仍能操作,Google Drive 上传中仍可浏览管理);④ 预防与恢复错误(高风险操作加确认弹窗、提供撤销、清晰错误提示、自动保存未完成内容;Gmail"撤回发送")。
四、移动引导上手:能不打扰就不打扰(Onboarding & Permission Requests)
4.1 移动 App 新手引导(Mobile-App Onboarding)
定义:帮用户熟悉新界面的过程(功能推广、个性化设置、操作指引),不只服务首次用户,也用于新功能/界面发布时引导现有用户。
心法:能不引导就尽量不引导(Skip Onboarding Whenever Possible)。Why:① 增加交互成本(即便选跳过,也多了操作、拖长完成任务时间);② 记忆负担(引导靠用户记界面操作,但人类记忆有限,效果差);③ 可能根本没用(研究表明教程式引导未显著提高任务完成效率)。对策:把资源投到提升界面可用性上,而非造复杂引导。
什么时候才真需要引导:① 启动就需要用户信息(银行 App 要注册/验证身份);② 功能高度个性化(饮食追踪要体重信息);③ 独特功能/流程(移动支票存款首次推出值得介绍)。
三类引导组件：
| 组件 | 建议 | 反例 |
|---|---|---|
| 功能推广 Feature Promotion | 别在首次启动时推广,这类信息更适合放应用商店页或靠上下文提示 | Chase 卡片式引导简短可跳;Productive 把功能推广放应用商店页而非首启 |
| 个性化 Customization | 内容个性化(选语言/水平)适合首启;视觉个性化(颜色主题)不适合首启——多数人选默认,额外选择只增认知负担 | Reflectly 首启强制选颜色主题(多余);Any.do 把主题选择移到设置;Fitplan 用简短可跳调查+进度指示器定制体验(好) |
| 操作指引 Instructions | 帮用户懂界面,但不该用来弥补界面设计缺陷 | 见下表三种形式 |
操作指引的三种形式（按推荐度）：
| 形式 | 优点 | 缺点 | 推荐度 |
|---|---|---|---|
| 卡片式教程 Decks of Cards | 简短传达基本信息 | 对记忆要求高、显得界面复杂 | 不推荐(What the Forecast?!! 用它讲标准图标位置,浪费时间) |
| 覆盖式提示 Instructional Overlays | 结合操作展示信息、更直观 | 易过度使用、增加干扰 | 谨慎用(NOAA Weather 提示过多干扰;详见 §1.3) |
| 交互式演练 Interactive Walkthroughs | 让用户动手学、有效降低认知负担 | 简单流程上用属多余 | 首选(《神庙逃亡 2》在简单关卡里及时指示、让用户实际练;MindNode 让用户造一个简单思维导图熟悉控件,且可跳过) |
心法:做比看记得牢——用上下文相关提示和交互式演练,而不是开头甩一摞卡片。所有引导都要可跳过。
4.2 移动权限请求(Mobile-App Permission Requests)
定义:App 访问设备资源(相机/定位/麦克风)前弹出的授权对话框——形式由操作系统决定,但设计影响用户接不接受。意义:保护隐私(给用户对敏感数据的控制权)+ 增强信任。常见病:解释不合理、时机不当、不支持撤回。
三大设计考量：
① 内容(Copy):讲清原因能把接受率平均提高 12%。写法——避免技术术语(用大白话)、强调用户收益(不是列依赖权限的功能)、避免空话("提升体验"这种)。
- OK:"Snapchat 需要访问您的相机以拍摄照片。"
- 更好:"允许 Snapchat 访问相机,这样您可以拍照并与好友分享。"
- 正例 Instagram(请求照片库时明说"分享照片""保存编辑后照片");反例 United Airlines(文案含糊如"扫描旅行文件"、无明确收益)。
- 安卓额外建议:安卓没有 iOS 的"目的字符串(Purpose String)",应加前置介绍屏提前解释理由(Any.do 启动时介绍"访问联系人=回电提醒",但首启就请求时机可能不当)。
② 时机(Timing):上下文相关的请求最自然(用户点麦克风按钮时才弹录音权限——Waze 安卓的正例)。反例:Google Maps iOS 在用户即将点"开始导航"时突然弹媒体库权限(时机不对、用户在赶路);Viber 首启连弹 5 个权限,引发疲劳反感。优化:别在装完就请求所有权限、只请求核心功能所需、用户尝试用某功能时再请求相关权限、非关键权限先提供价值再请求。
③ 支持撤回(Decision Reversal):用户可能先拒后想开。设计应——功能因缺权限不可用时说清影响 + 给直达设备设置的链接(Venmo:相机权限被拒时显示错误提示+"打开设置"链接直达,唯一可改进是让链接更像链接、别被当成普通文本)。
避免暗黑模式(Dark Patterns):反例 WeChat 把权限请求伪装成信息对话框、推荐"OK"、隐藏拒绝选项——不道德且破坏信任。建议:给足信息让用户自由选 + 尊重决策 + 易用的撤回设计。
三句总结:内容清晰(大白话+讲收益)、时机合理(上下文中请求别打断)、支持撤回(随时能调)。
五、Cookie 权限(Cookie Permissions 101)
背景:Cookie = 网站存在你浏览器里的小数据文件,记录偏好/历史/交互(用于个性化、分析、保存登录/购物车、定向广告、第三方集成、跨站追踪建兴趣档案)。随 GDPR、CCPA 等法规出台,网站用/存数据前需获用户同意;GDPR 要求用户主动勾选(默认为拒绝),且应能按类别选择(分析/营销/第三方)。
研究:全球 10 名参与者、覆盖移动+桌面的 UX 研究,识别出 5 类用户:
| 用户类型 | 行为 |
|---|---|
| 拒绝者 | 每次都调设置、尽量少共享数据 |
| 怀疑者 | 只对熟悉/可信网站分享 |
| 技术控 | 接受所有 Cookie,但事后清除 |
| 急性子 | 快速接受所有以去掉弹窗 |
| 分享爱好者 | 愿分享数据换个性化体验 |
理解这些类型能帮你识别哪些设计会疏远用户——只给"接受全部"会让谨慎用户感觉被强迫。
7 条设计指南(用户普遍觉得 Cookie 弹窗烦,合理设计能减轻)：
| # | 指南 | 反例 / 正例 |
|---|---|---|
| 1 | 提供明确的 Cookie 选择(接受全部/拒绝全部/仅必要/管理设置) | 缺选择会让用户失控失信任;Raidboxes 粒度不够,无法个性化选 |
| 2 | 选项直接可见,避免多层点击 | Harper's Bazaar 要点"了解更多"才见完整选项,不利快速决策 |
| 3 | 避免欺骗性设计(暗黑模式) | 含糊标签("禁止出售我的个人信息")、高对比"接受全部"按钮、含糊的 X/关闭;Skillshare 含糊切换开关让人不确定 |
| 4 | 用易扫描的描述,避免相似/不明确的选项名 | Cricut 两个选项都以"接受"开头、无明显区别,给人"没得选"的印象;Fenwick & West 清晰区分支持快速决策(正例) |
| 5 | 用简洁方式描述(如项目符号) | Wellcome.ac.uk 用简短要点描述不同 Cookie 类型(正例) |
| 6 | 尽量减小弹窗尺寸 | 过大弹窗遮内容;小弹窗让用户先看内容再决定;英国政府网用大横幅但放页面顶部,造成"遮得少"的错觉(取巧但有效);DHL 用模态横幅、决定后才能导航 |
| 7 | 避免多个弹窗重叠 | The Ordinary 同时弹 Cookie+优惠券+聊天,用户感觉被"攻击";有人把右侧新闻订阅误当 Cookie 框 |
心法:Cookie 权限不只是合规要求,更是建立信任的机会——尊重隐私 + 改善体验 = 增强忠诚度。
源自 NNGroup Topics / Design Patterns - 设计模式(覆盖层·滚动·移动子集,13 个模式)。其中 Scrolljacking 在原批次有两个文件(「滚动劫持入门」概念版 + 「滑动可用性测试」方法版),已合并为 §2.4 一节。设计模式其余子集(反馈/对话框、导航/搜索)见 NNGroup 交互模式·反馈·对话框·通知·加载·提示·空状态·数据呈现(15 个模式 · 何时用/怎么选/反例) / NNGroup 交互模式·导航与搜索(25 个模式 · 全局导航/本地导航/面包屑/汉堡菜单/上下文菜单/菜单 17 条/标签页/手风琴/页脚/粘性头/目录/页内链接/空间记忆/站内搜索/SERP/筛选/分页/树测试);移动与平板专题见 NNGroup 移动与平板设计(19 篇 · 触控物理/拇指区 Fitts/微会话 15s/底部弹窗/覆盖层误关/标签轮播/移动表单结账/时区选择/数据表格/系统状态三态/错误消息评分/推送5错/上手教程无效/响应式内容分散/二维码13条/智能手表6型/横幅盲视);十大可用性启发式与可用性测试方法见 NNGroup 可用性测试与十大可用性启发式(10 条启发式完整表 · 复杂应用应用 · 用户愉悦层级 · 测试方法 5 人法则/招募/远程/任务场景/分步任务/态度vs行为/4步分析/小样本误差/竞争性评估)。图片/视频(spotify_resets.mp4、ritual.mov、Apple/BBC/Crypto 滚动演示等)与原档保留在 sources。
来源与关联资料
- NNGroup 交互模式·反馈·对话框·通知·加载·提示·空状态·数据呈现(15 个模式 · 何时用/怎么选/反例)
- NNGroup 交互模式·导航与搜索(25 个模式 · 全局导航/本地导航/面包屑/汉堡菜单/上下文菜单/菜单 17 条/标签页/手风琴/页脚/粘性头/目录/页内链接/空间记忆/站内搜索/SERP/筛选/分页/树测试)
- NNGroup 移动与平板设计(19 篇 · 触控物理/拇指区 Fitts/微会话 15s/底部弹窗/覆盖层误关/标签轮播/移动表单结账/时区选择/数据表格/系统状态三态/错误消息评分/推送5错/上手教程无效/响应式内容分散/二维码13条/智能手表6型/横幅盲视)
- NNGroup 可用性测试与十大可用性启发式(10 条启发式完整表 · 复杂应用应用 · 用户愉悦层级 · 测试方法 5 人法则/招募/远程/任务场景/分步任务/态度vs行为/4步分析/小样本误差/竞争性评估)