产品须知设计规范——对话框 Dialogs

一、定义

Material Design解释，对话框是一种模态窗口，出现在应用里面，负责将一个或多个任务告知用户，其中可以包含关键信息、需求决策。它出现时，应用内所有其他功能无法使用，并保持在屏幕中，直到窗口中的任务被确认、关闭或者采取有关操作。出现对话框是有目的性的中断用户当前行为，所以应该谨慎使用。

对话框的设计应当遵循以下原则：

1. 聚焦

   大多数应用中可以发现，对话框出现时屏幕其他部分会有遮罩层，打断用户的其他操作，使用户的注意力全部集中在对话框中。

2. 直接

   对话框中的出现是目的明确的，否则中断用户的行为会导致极差的产品体验。如需要警示时，对话框会直接询问用户“是否继续后续操作”，而非无缘无故的出现。

3. 帮助

   对话框中应该含有上下文相关的信息，并且信息应该是直接的、清晰的，让用户明确知道下一步骤如何做，力求促进用户完成任务。

二、分解

以下是标准形式的对话框分解图：

（按照序号依次是：容器、标题、辅助说明、按钮、遮罩层）

1. 标题

   对话框的标题是简明扼要的说明或问题，直接告诉用户需要中断当前行为的原因。避免在标题使用“抱歉中断”、“警告”、“你确定吗”等含糊不清的话语。

2. 辅助说明

   辅助说明是对标题的补充，此时解释为什么要中断用户当前操作，告诉用户继续的操作会有什么后果。

3. 按钮

   一个按钮代表一个操作项，一个对话框里最多两个操作项。

   操作项有三种类型：确认操作（Confirming Actions）、取消操作(Dismissive Actions)和确定操作（Acknowledgment Actions）。确认操作允许用户进行下一步骤，如用户要删除内容，对话框询问用户“是否删除”（此时确认按钮的文字最好使用“删除”而非“确定”）。取消操作允许用户返回上一步骤和关闭对话框。确定操作相当于通知、提醒，通常在对话框中单独存在，如对话框告知用户“内容已被删除”（此时确定按钮上的文字是“知道的”、“好的”），还可以使用Snackbar代替确定对话框。

4. 遮罩层

   遮罩层挡住了除对话框外的画面，让用户的注意力集中在对话框中。

三、类型

在Material Design中，对话框分为以下几种类型：

1. 警告对话框（Alert Dialog）

   中断用户行为，并且显示重要信息、警告操作等。用户必须要作出选择才能关闭窗口。

2. 简单对话框（Simple Dialog）

   显示选中后会立即生效的项目列表。与其他对话框不同，简单对话框没有文字按钮。

3. 确认对话框（Confirmation Dialog）

   要求用户作出选择后才会消失。确认对话框可以有多种布局和组件的形式出现，通常有列表、日期选择器和时间选择器。

4. 全屏对话框（Full-screen Dialog）

   如文字所描述，此对话框会占满整个屏幕，其中包含一系列要求用户完成的任务操作，如创建事件标题、日期、位置等。全屏对话框不是模态窗口，因此可以让其他对话框覆盖其上。

四、交互方式

1. 滑动

   弹窗相对屏幕的位置是固定的，但是弹窗里面的内容可以滑动。滑动时，标题和底部的按钮固定，仅可以滑动中间内容部分。

2. 关闭

3. 转场

   Material Design建议对话框使用“淡入、淡出”的转场动画。
   

五、设计规范

六、对比

Android系统中有三个组件有通知、提醒，打断用户当前行为的功能。但是每个组件对用户的干扰程度不同。

Snackbars	轻度	自动消失，不影响用户其他操作
Banners	中强度
Dialog	最强度

七、跨平台

IOS系统中类似Android系统的对话框组件有Alerts，Activity Views和Action Sheets。

---

参考文章：

1. 《Material Design：Dialogs 》

   https://material.io/components/dialogs#usage

2. 《Human Interface Guidelines》

   https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/