交互控件科普系列！Dialogs 的常见样式和设计注意事项总结

两篇文章中家介绍过 Snackbars  Banners 两轻级提示控件的用法，今天就让我们继续详解一下 BOSS 级的提示控件 Dialogs 族。

什么是Dialog

Dialog 正是我们熟称的「弹窗」，该控件属提示控件中的一种，通常用强干扰的信息提示，该提示打断用户的当前操，用户必须执行对应操才以对其进行取消。

Dialogs 因为属于强干扰，在示时的霸气程会远远大于 Banner 和 Snackbar，我们来看看它的霸气到体现在哪里。

视觉层：

• Dialog 显示时用深遮挡背，并居中显示在页面中央，使用户不得不将注意力部集中 Dialog 之上；
• Banner 显示时仅占据页面顶，形成的视觉干扰；
• Snackbar 显示时展示页面底部，几秒之后就会自己悄悄溜走。

操作层：

• Dialog 持续期间禁止用户进行其它页面操；
• Banner 会长时间持续，但会影响户进行它操作；
• Snackbar 仅会持续几秒，用户行其它操作时它会立即识趣走。

综上述，个示控件的干扰从强到弱序可视为：Dialog > Banner > Snackbar。Dialog 虽然霸气非凡，但对户过份霸气终究是一件好事，毕竟强制中断户行为会引起使者强烈的反感。

因此我们不得不建议产品理设师，尽谨慎使用 Dialog 控件，采用相对柔的控件承载提示操作，譬如 Menus、Bottom sheet、Action sheet 或者 Activity view。当然家不必急，这些控件稍后我也会行一一解析。本篇文章还留给 Dialogs 家族的员们。

Alert dialogs 警告对话框

 Google Material Design  iOS Human Interface Guidelines 中都对其规范义，属于两端皆可使用的原控件。

1. 使用场景

Alert dialog 通于紧急可逆情况的示，需要户确认该信息。

2. 注意事项

• 不要在标题中使用「抱歉扰」、「危险！」、「你确定？」此类道歉、警告或含糊不清的标题；
• 不要打乱按钮顺序，肯定按钮在右，否定按钮在左；
• 建议使种按钮案，确定案（如删除/导）、驳案（如取消）和确认案（如我知道了/好的）；
• 不滥用，无预的频繁打断用户会引发反感；
• 绝不能被其他元素遮挡，需保持焦到被关闭或某个动作已被执。

3. 样式类型

左侧竖为 Android 样式，右侧竖为 iOS 样式。

仅高风险况下使用标题栏的 Alert。

4. 显示与消失

显示

Alert 显示时，背显示深遮罩，并立即中断用户正在进行的操。

消失

Alert 仅支持 2 种关闭方式：

• 点击确定按钮后立即执行并关闭；
• 点击取消按钮取消操并关闭。

5. 范例

有云笔记在删除文档时，使用 Alert 以警告用户删除内容将法恢复。

Simple dialogs 简易对话框

特属于 Google Material Design 中义的原 Dialog 控件。

1. 使用场景

Simple dialog 通于供列表项的详细信息或操作。

2. 注意事项

• 不要使用确的按钮进行确认或取消操作；
• 在能够使用 Menus、Bottom sheets、Action sheet（iOS）或 Activity view（iOS）的情况下不要使用 Simple dialogs；
• 绝对被他元素遮挡，需一直保持焦点直到被闭或某个作已被执行。

式类型：

3. 显示与消失

显示

Simple dialog 显示时，背景显示深色遮罩，并会立即中断户正在进行的操作。

消失

Simple dialog 支持 3 种闭方式：

• 点击一个选项立即执行并关闭；
• 点击 dialog 外任意区域取消操作并闭；
• 点击 Android 系统返回键取消操作并关闭。

4. 范例

安卓端的 Keep 用 Simple dialog 来承载题举报的操，用户点击任意一选项触提。（在iOS端使用的是 Action sheet）

Confirm dialogs 确认对话框

属于 Google Material Design 中定义的生 Dialog 控件。

1. 使用场景

Confirm dialog 常用于复杂操作前最终确认，使其有会在必要时改变主意。

2. 注意事项

• 需同时供明确的确认和取消按钮；
• 能够使用Menus、Bottom sheets、Action sheet（iOS）或Activity view（iOS）的况下不使用 Confirm dialogs；
• 绝不能被其他元素遮挡，需保持焦到被关闭或某个动作已被执。

3. 样式类型

支持嵌套 Selection controls。

4. 显示与消失

显示

Confirm dialog 显示背景显示深色遮罩，并会立即中断用户正在进行的操作。

消失

Confirm dialog 支持 4 种关闭方式：

• 击确定按钮后立即执并关闭；
• 点击取消按钮后取消操作并关闭；
• 点击 dialog 外任意区域取消操并关闭；
• 点击 Android 系统返键取消操作并闭。

5. 内容滚动处理

应尽量避免内容滑动，当确实需要滑动，标题需固定在顶部，按钮固定在底部，保证滚动的同仍然可见标题和按钮。Dialogs 存在禁止滚动对话框以外的素，例如背景。

6. 范例

生安卓系统使用 Confirm dialog 来承载彩铃置功能。

Full-screen dialogs 全屏对话框

特属于 Google Material Design 定义原生 Dialog 控件。

1. 使用场景

Full-screen dialog 常用于系列复杂任务分组。

2. 注意事项

仅在以下场景使用 Full-screen dialog：

• 需用户输入的选择器或表单时；
• 编辑内容法实时保存时；
• 没有本地动保存的草稿功能；
• 在提前需要进行批量处理或更改列时。

Full-screen dialog 仅限于在移动端使用。

3. 样式类型

在 Top app bar 上需展示「X」按钮和确定性按钮。

4. 显示与消失

显示

Full-screen dialog 显示时填充全屏，使用沉浸式的全屏布局。

消失

Full-screen dialog 支持 3 种关闭方式：

• 点击确定性按钮后立即执行并闭；
• 点击「X」按钮并确认取消操作后关闭；
• 击 Android 系统返回键并确认取消操作后关闭。

5. 二次确认

点击「X」按钮或系统返键时，将丢弃有更改信息并退，如果户发生了字更改，需给予 Confirm Dialog 进行二次确认。

6. 范例

Teambition 使 Full-screen dialog 来承载 Date picker 和 Time picker 的多重时间设置。

提示控件的用法总结

俗说得，「钢用在刀刃上」，产品经理和设计师应当尽量将 Dialogs 应用非常重要的使用场（里也包含我们定的活动弹窗）。所谓物以稀为贵，少量使用以凸显出其重要，度使用则使人感到异常反感。

那么如何更好地择控件呢？

我们可以以内信息的重程度判断基准：

• 重要程：户可注意或操作；
• 一般重程度：用户可稍后注意或稍后操作；
• 很要程度：用户必须立即注意或立即操作。

若不重，请使用 Toast 或 Snackbar；若一般重，请使用 Banner；若很重，请尽先考虑使用 Bottom sheets（Android）、Action sheet（iOS）或 Activity view（iOS）模态控件。若以不能满足需求，再使用 Dialogs。

欢迎关注作者微信公众号：「愚者笔记」