对话框设计规范

对话框是临时交互区域。先判断用户是否必须处理当前内容，才能决定使用模态还是非模态，而不是根据视觉样式命名。

选择模态或非模态

类型	适合	不适合
模态对话框	必须先确认的破坏性操作、短小且不可中断的输入、阻止无效后续操作	普通通知、长流程、频繁操作、需要参考主页面内容的任务
非模态面板	属性检查、搜索、辅助工具、可与主内容并行的任务	必须在继续前解决的错误或确认

不要用模态框承载完整页面。内容复杂、步骤多或需要历史导航时，应使用独立页面或稳定侧栏。

模态对话框的行为

1. 打开后把焦点移入对话框，通常落在标题、首个输入项或最安全的操作上。
2. Tab 和 Shift+Tab 在对话框内循环，背景内容不可交互。
3. 提供清晰标题和可访问名称；描述只包含理解当前决定所需的信息。
4. 提供可见的关闭或取消按钮。Escape 通常关闭可取消对话框，但不能静默丢失关键输入。
5. 关闭后把焦点返回触发控件；若触发控件已不存在，返回合理的后续位置。
6. 避免嵌套模态框。确需二次确认时，优先重构流程或在同一对话框内切换状态。

遮罩只是视觉提示，不能替代焦点约束和背景禁用。是否允许点击遮罩关闭取决于数据丢失风险，不能作为统一规则。

操作与文案

• 按钮使用具体动词，例如“删除项目”“放弃更改”，避免只有“确定”。
• 主操作与取消操作位置保持产品内一致。
• 破坏性操作明确对象和后果；可撤销时优先直接执行并提供撤销。
• 校验错误放在对应字段附近，并保留用户已经输入的内容。
• 自动关闭只用于无需决策的短暂反馈；需要阅读或操作的内容由用户关闭。

页面切换与状态

非模态面板在页面切换后是否保留，取决于任务连续性：

• 页面专属工具通常随页面卸载关闭。
• 跨页面任务可以保留，但必须让用户理解它仍处于活动状态。
• 模态框不应在后台页面上悬空；导航前先完成、取消或明确保存草稿。

实现时把对话框视为一个状态机：closed -> opening -> open -> submitting -> closed/error。显式状态比散落的显示与隐藏调用更容易处理重复提交、异步失败和导航中断。

发布前检查

• 仅用键盘能否打开、操作并关闭？
• 屏幕阅读器能否读到标题、描述和错误？
• 焦点是否始终可见，关闭后是否回到合理位置？
• 缩放和小屏下内容是否可滚动且按钮可达？
• 异步提交期间是否阻止重复操作并说明当前状态？

---

来源：CSDN 原文，首次发布于 2025-07-09。