Dialog 对话框

对话框就是界面说:“这件事先处理一下,再继续。”所以它要有充分理由,不能把普通内容都变成打断。一个好对话框应该让用户快速完成一个小任务或风险确认,然后清楚回到原来的流程。

关键结构图

背景页面变暗,中央对话框突出显示,焦点箭头从页面移到对话框按钮。

Dialog 是界面暂时把用户叫住,让他处理一个集中任务或确认一个风险。

Dialog 对话框是在当前页面之上打开的临时交互层,用于让用户处理一个集中任务、确认一个风险或补充必要信息。Modal dialog 会让背景内容暂时不可交互。

StructureDialog = 临时中断 + 聚焦任务 + 明确返回路径

当用户必须先确认删除、补充少量信息、选择影响当前流程的选项,或必须立即知道一个重要反馈时,使用对话框。

标题说明任务,正文只放必要信息,主按钮和取消按钮语义清楚。打开后管理焦点,关闭后把焦点送回合理位置,并让键盘用户也能完成。

删除项目时弹出对话框,标题写删除这个项目?,正文说明影响,按钮分别是取消和删除项目。这是合理中断。

把一篇长营销文案塞进弹窗,要求用户读完再继续,通常不是好 dialog,而是对当前任务的打扰。

类型:可访问性规范 / 设计系统实践

事实线:WAI-ARIA Modal Dialog Pattern 强调 modal dialog 会让窗口下方内容不可交互,并需要正确管理键盘焦点;Material Design 也把 dialogs 定义为要求用户关注特定任务或信息的窗口。

依据:WAI-ARIA APG Dialog Modal Pattern、Material Design dialogs、Atlassian Modal Dialog。

边界:适合短任务、风险确认和必要补充信息;不适合长篇说明、复杂流程或营销打扰。

常见误读:不要把任何浮层都叫 dialog。真正的对话框通常会中断当前流程,需要更严格的焦点和关闭规则。