ux-modals-and-dialogs

模态框与对话框技能

此技能的工作方式（请先阅读）

这是一项生成式技能。默认的失败模式包括：事事打断用户（成功消息、提示、新闻简报都用模态框，仿佛注意力取之不尽）、困住用户（没有明显的关闭方式、不支持 Esc、层层叠加模态框），以及含糊不清的选项（“确定吗？”→ 是/否）。模态框会挟持整个界面——只有在高风险时刻才值得这样做，而代价必须通过目的明确、退出轻松来弥补。此技能设有以下关卡：

1. 把关是否打断——这里真的有必要使用模态框吗？最重要的决定在任何设计开始之前就要做出。
2. 应用始终适用的核心原则——标题说明目的、按钮含义明确、易于关闭、妥善管理焦点。
3. 明确类型和时机的选择（弹窗／全屏／弹出层／底部弹出表单、权限请求预热），并权衡利弊。

随后将交由 ux-heuristics-audit、ux-accessibility-audit、ux-aesthetics-audit、ux-microcopy-audit 和 ux-dark-patterns-audit 进行验证。

---

步骤 0 — 把关是否打断（最重要的决定）

模态框会阻断所有操作。只有在高风险时刻才值得使用：

• 确认破坏性或不可逆的操作（删除帐户、丢弃草稿）——说明影响（“将删除 12 个文件”）。
• 严重错误或警告（系统重启、未保存的更改面临丢失风险）。
• 继续当前任务所必需的信息（登录后才能保存、付款详情）。

其他情况——成功消息、提示、告知信息、促销内容——都应使用非模态模式：行内消息、轻提示、横幅、弹出层。此外还要明确：

• 由谁触发？ 用户主动触发的模态框（点击按钮）符合预期；系统主动触发的模态框（定时弹窗、催促升级的提示）会毫无预警地打断用户——除非确实紧急（会话过期、关键更新），否则应避免。
• 时机——绝不要打断正在进行的高风险流程（结账途中是典型反面案例）。
• 平台——遵循桌面端警告框与 iOS 警告框／Android 对话框的惯例；移动端操作列表应使用底部弹出表单／操作表单。

如果内容未通过高风险测试，请停止设计模态框，改用行内消息／轻提示。

---

始终适用的核心原则（适用于所有通过关卡的模态框）

目的、标题与按钮

• 标题应传达完整信息——用户可能会快速浏览或跳过正文。“丢弃草稿？”而不是“警告。”正文补充原因和背景；任何关键信息都不能只放在正文里。
• 按钮标签应明确回应标题： ❌“是”／“否”／“取消” ✅“丢弃草稿”／“继续编辑”。用户无需阅读其他内容，就必须知道每个按钮的作用。
• 最多两个操作按钮。 第三个按钮（“了解更多”）会让用户偏离当前决策。
• 不要在退出选项标签中责怪或羞辱用户（“不了，谢谢，我讨厌省钱”→ 标记为暗黑模式）。

关闭是一项权利，而非一项功能

• 提供多个明显的退出方式： 关闭／取消按钮 + 角落里的 × + 桌面端按 Esc／移动端返回。
• 点击／轻触外部区域即可关闭——前提是不会丢失已输入的数据；只有在关闭会导致工作内容丢失时才禁用此行为。
• 绝不叠加模态框。 在模态框上再开一个模态框，就像挟持事件中又多加了几道关卡。

焦点与注意力机制

• 在模态框后方添加深色遮罩——聚焦注意力、阻止与外部交互，并可作为关闭区域。
• 打开时将键盘焦点移入模态框（聚焦主操作）；所有控件都必须可通过键盘访问。
• 居中放置——移动端正中；桌面端水平居中并略高于垂直中心（调整窗口大小时保持稳定）。
• 严重警告应有严重警告的样式： 对于破坏性／紧急确认，使用红色强调色和警告图标，避免习惯性操作的用户不假思索地关闭提示。

依赖上下文的决策（呈现出来，不要自动应用）

决策	适用情况	避免／调整的情况	默认建议
弹出式模态框	遮罩内容上方用于打断用户的标准高风险提示	需要整页展示的内容	默认模态框类型
全屏模态框	复杂、需要专注的任务：多步表单、付款、条款与条件、移动端聚焦时刻	简单确认（过度设计）；用户可能需要快速退出的任何情况——应让关闭方式一目了然	仅当任务确实需要占满整个屏幕时使用
弹出框	锚定在某个元素上的补充详情／选项，不阻挡页面	关键信息（太容易被忽略）	情境化帮助的非模态默认方案
灯箱	放大图片／视频并提供导航、说明文字、缩放	非媒体内容	仅用于媒体内容丰富的产品
底部操作面板（移动端）	按操作系统惯例展示相关操作或分享目标列表	关键确认（使用警报／对话框）	操作列表使用 Android 底部操作面板／iOS 操作面板
成功反馈	行内或页面内状态	成功模态框——打断用户只为告知“操作成功”	仅当用户必须确认后才能继续时，才使用成功模态框
权限请求	在功能需要权限的情境下提出；先用权限说明进行预先铺垫；一次请求一项权限；给出充分理由（授权可能性提高 81%）	首次启动时、批量请求、使用“推荐”等施压标签，或任务进行中	预先铺垫 → 情境化请求 → 提供妥善撤销拒绝操作的途径
系统主动发起的模态框	真正紧急的情况：会话过期、安全问题、数据丢失	订阅催促、限时促销、索要评分	几乎绝不使用；改用横幅／徽章

---

验证结果（编排）

交接时，请使用各审核视角对应的可安装技能 name。只有在该技能已安装时才调用；如果未安装，本技能的核心规则已涵盖这些要求——继续处理即可，不要因此阻塞。

生成或修订后，应将结果交由审核视角检查，而不是直接宣布完成。这些都是候选审核视角——具体执行方式由 docs/orchestration-policy.md 决定，也可以将整个内容交由 ux-design-review 审核。此处，heuristics、microcopy 和 dark-patterns 属于 A 级（自动运行）；accessibility、aesthetics 和 mobile-responsiveness 属于 B 级（可选）——在现有设计系统下，aesthetics 不予审核，accessibility 的范围会缩小到使用方式；mobile-responsiveness 仅适用于移动端。如果用户调用此技能是为了处理某个特定事项，应尊重其范围。

• ux-heuristics-audit （A 级）——用户控制权与自主性（退出方式）、错误预防（明确确认）、符合预期（平台惯例）。
• ux-accessibility-audit （B 级——可选；在设计系统下缩小范围）——焦点陷阱是否正确、键盘关闭方式、屏幕阅读器播报、遮罩内容的对比度。
• ux-aesthetics-audit （B 级——可选；在设计系统下不予审核）——模态框的视觉层次、遮罩处理、警报样式的克制程度。
• ux-microcopy-audit （A 级）——标题是否清晰、按钮说明是否明确、正文是否简洁、权限请求理由的措辞。
• ux-dark-patterns-audit （A 级）——本技能涉及的中断行为属于暗黑模式的高发领域：系统模态框的反复催促、羞辱式退出选项、权限施压、难以找到的关闭方式。
• ux-mobile-responsiveness-audit （B 级——可选；仅适用于移动端）——在移动端情境下检查操作面板惯例、关闭手势和全屏行为。

如果审核发现冲突（例如，增长团队希望页面加载时弹出注册模态框，而用户控制权要求避免打扰），应优先保障主要任务：用户正在做某件事——模态框必须保护该任务，或者为其让路。

---

常见的正确做法与错误做法

❌ 不要这样做	✅ 应该这样做
用模态框显示成功消息或提示	使用内联状态 / toast；仅在涉及重大事项时使用模态框
用户阅读到一半时弹出限时订阅窗口	由用户主动触发模态框；仅在情况紧急时由系统中断
“确定吗？”→“是” / “否”	“放弃草稿？”→“放弃” / “继续编辑”
三个或更多按钮，包括“了解更多”	提供两个与标题相呼应的操作
没有 ×、不支持 Esc、点击外部无法关闭	提供关闭按钮 + Esc / 返回键 + 点击外部关闭（安全时）
在另一个模态框上方打开模态框	一次只显示一个模态框
关键信息埋在正文里	在标题中传达核心信息
首次启动时批量请求权限	做好铺垫，在恰当的上下文中逐项请求，并说明原因
“不了，谢谢，我就喜欢错过”	使用中立、尊重用户的拒绝选项文案
焦点停留在模态框后面的页面上	将焦点移入模态框，并置于主要操作上
未经检查就发布	依据启发式原则、无障碍性、美观度、微文案和暗黑模式进行检查

---

来源课程（Uxcel）

• UI 模态框的类型
• UI 模态框设计最佳实践
• 设计移动端通知和对话框
• 如何在不打扰用户的情况下请求权限