组件 对话框

对话框

对话框会提醒用户特殊的任务,可能会包括关键信息、作出决策或者执行分支任务。

对话框包含文本和 UI 控件,它们始终处于焦点,直到用户关闭或执行了必要的操作。谨慎的使用对话框,因为它会打断用户流程。

对话框的类型包括:

  • 警告框是紧急情况下的提示,并且需要确认用户了解该信息。
  • 简单菜单会展示选项列表,而简单对话框可以提供列表项的详细信息或操作。
  • 确认对话框需要用户明确作出选择。

行为

对话框不能被其他元素遮挡,也不能超出屏幕边缘。并且始终保持聚焦状态,直到用户关闭或执行了必要的操作。

全屏对话框(仅手机端)

全屏对话框最适合用于复杂的或需要用户输入的任务,因为在它会任务分组然后一起保存。

行为 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

标准对话框进阶

对话框是模态框的子类型,这里所涉及的例子是标准的 Material Design 系统对话框。(模态框的种类繁多,因此其他模态框在此并没有涉及到,例如购买流程的品牌按钮、非标准的 UI 表单元素或独特的布局)。

减少干扰

谨慎使用对话框,因为它会打断用户流程。它们突然的出现会迫使用户停止当前的任务,并聚焦于对话框。不是所有选择、设置或细节都需要打断用户。不打断用户流程的可替代方案包括行内菜单和行内展开。

突显对话框

对话框绝不能被其他元素遮挡,并且始终处于焦点,直到被用户关闭或触发了必要的操作(例如选择了一个设置项)。

对话框应当避免:

  • 在对话框内触发新的对话框
  • 包含可滚动的内容

全屏对话框的例外

全屏对话框可以打开其他对话框,例如选择器,因为它们被设计成可容纳额外的图层,而不会刻意的增加应用的深度和视觉干扰。

对话框示例

全屏对话框示例

可滚动内容的例外

一些对话框内容需要滚动,例如铃声列表。

  • 对于可滚动的选项列表,对话框标题应固定在顶部。让用户可以在列表的任何位置同时看到标题和所选项。
  • 否则,标题会随着内容的滚动而消失。操作按钮应始终保持固定。

对话框与底层的元素相互独立,不会随之滚动。

显示额外内容

要在对话框中显示额外的内容,请在内容区域使用行内展开,或考虑其他可容纳更多内容的替代组件。

关闭对话框

用户可以轻触/点击对话框之外的区域、或者使用系统返回键(Android)来关闭对话框。不过,这种行为可以被覆盖,你可以让用户必须作出明确的选择后才可关闭对话框。

当对话框的内容滚动时,请将标题固定,以确保标题和已选项同时可见。

警告框 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

警告框是紧急情况下的提示,并且需要确认用户了解该信息。

与 Snackbars 的区别:Snackbars 在操作之后提供可选信息,例如确认丢弃草稿。它们通常允许用户撤销刚才的操作。

没有标题栏的警告框

多数警告框并不需要标题

用一两句话来说明:

  • 询问操作(例如「删除此会话?」)
  • 对操作进行相关说明

肯定按钮的文本「Discard」清楚地表明了操作的后果。

取消按钮的文本「No」回答了提问,但没有明确表明之后会发生什么。好的按钮文本应当明确,例如「Cancel」和「Delete」。

带标题栏的警告框

仅在高风险情况下使用带标题栏的警告框,例如网络连接断开。用户用当仅看标题和按钮文本就能明白选项。

如果需要标题:

  • 在内容区域写明的问题和解释,例如「抹掉 USB 储存设备?」
  • 避免使用表示歉意、存在歧义或表示疑问的语句,例如「警告!」或「你确定吗?」

对话框提出了具体的问题,简要阐述了其影响,并提供了明确的操作。

对话框提出了模糊的问题,但从问题无法得知所产生的影响。

简单菜单 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

仅适用于手机和平板

简单菜单显示列表的选项,并且会在用户选择后立即提交选择。更多详情请参考简单菜单

消除歧义简单对话框可以展示详细的列表选项,也可以提供了相关性的操作。它的展示内容可以和简单菜单相同,但为了降低对用户情境的干扰,请优先考虑简单菜单。

简单菜单示例

简单对话框 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

简单对话框可以提供有关列表项的详细信息或操作。例如,它们可以显示头像、图标、说明文本或正向的操作(例如添加账号)。

轻触行为:

  • 选择一个选项后将立即提交该选项并关闭菜单
  • 轻触对话框之外的区域或按下后退键,会取消操作并关闭对话框

降低干扰

简单对话框比简单菜单更打扰用户,所以请谨慎使用。

简单对话框示例

手机上对话框的宽度为既定单位的倍数。

每个单位宽 56dp
手机上最小宽度为 56dp * 5 = 280dp

没有明确的取消按钮

简单对话框没有明确的按钮来执行确认或取消操作。

简单对话框有明确的「Cancel」按钮。

简单对话框有明确的「Cancel」按钮。

规格

  • 简单对话框中的行高可以不同。
  • 简单对话框位于屏幕的中心。
  • 对话框与屏幕的左右边距至少 40dp,上下边距至少 24dp。
  • 对话框的内容距离对话框边缘 24dp。

避免文本换行

如果简单菜单中的文本需要换行,请使用简单对话框来替代。

简单对话框可以有不同的行高。

确认对话框 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

确认对话框要求用户在提交前再次确认他们的选择。例如,用户可以试听多个铃声,在轻触「好」之后才会提交选择。

轻触对话框中的「取消」或按下后退键会放弃所有修改并关闭对话框。

避免在对话框内触发新的对话框

避免在确认对话框中触发其他简单对话框或简单菜单,这增加应用的复杂性和深度。如果确实需要,请考虑使用全屏对话框来替代。

在用户轻触「OK」之后才会确认已选的铃声

文本左侧带有控件的确认对话框

确认一个数值

确认对话框内除了展示列表外还可以展示其他布局,例如日期选择器,但选择时依然专注于单一的数值(选择日期,而不是日期和时间)。

用户轻触日期并按下「OK」来确认日期。

用户移动指针并按下「OK」来确认时间。

取消和确认按钮

确认对话框同时提供明确的确认和取消按钮。轻触取消按钮或返回键来离开确认对话框,并放弃所有更改。

提供明确的确认和取消按钮

对话框中只有一个按钮会让系统的返回操作出现起义:返回意味着取消还是确认?

全屏对话框 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

仅限手机:由于手机的屏幕空间有限,全屏对话框会更适合手机,而不适用于大屏幕的设备上。

用法

全屏对话框会在用户提交或放弃之前将任务(例如创建日历)分组。在轻触「保存」之前不会保存任何数据。轻触「X」会放弃所有更改并退出对话框。

全屏对话框可以使用复杂的布局,将材料的堆积(对话框再加对话框)最小化,而且暂时提高应用的基准海拔(以对话框为基准)。这就允许在复杂的任务中出现新的简单菜单和对话框。

满足以下条件的内容或任务可以使用全屏对话框:

  • 该对话框包含需要用户输入(IME)的组件(选择器或表单)。
  • 不需要实时保存更改
  • 应用没有草稿功能
  • 在提交前需要进行批处理或更改队列

全屏对话框支持使用简单对话框来选择日期

从全屏对话框中打开日期选择器

操作

在全屏对话框的顶部放置确认和取消按钮。

确认

确认按钮在屏幕的右上角,并使用描述性的动词,例如:保存、发送、共享、更新或创建。不要使用模糊的动词,例如:完成、好、关闭。

对话框中的所有字段都通过校验之后,确认操作才可以使用。

舍弃

返回键和舍弃操作(屏幕左上角的「X」)都会关闭全屏对话框并放弃更改。

  • 如果未进行更改,对话框会直接关闭,不需要进行丢弃确认。
  • 如果用户进行了更改,则需要再次确认舍弃操作。

不要使用模糊的术语,如「Close」来确认操作。

如果用户进行了更改,则需要再次确认舍弃操作。

导航

全屏对话框中的「X」不同于返回箭头,返回箭头表示页面信息会被保存。例如,「设置」中的返回箭头表示立即提交所有更改,而无需确认或取消操作。

轻触返回箭头后任何更改都将会保存。

轻触「X」不会保存任何更改。只有轻触「保存」之后才会保存信息。

标题

不要使用动态的文本作为全屏对话框的标题。

标题应当简明扼要。必要时可以换行,超过两行的内容将会被截断。

如果全屏对话框的标题长度不同或过长(例如,某些语言下的标题会变得很长),请将标题文本放在对话框的内容区域,不要放在应用栏中。

避免在应用栏中使用不同长度的标题

将长标题放置在对话框的内容区域

规格 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

对话框包含内容、操作和可选的标题。

可选标题

标题简要描述了用户需要确认的选择类型。标题尽在必要时才使用,并且应当始终显示完整。例如,标题可以让指明对话框所关联的任务,或者决定后会影响到那些内容。

内容

对话框内容通常由文本和/或 UI 控件组成。它专注于特定的任务,例如确认删除或选择。

对话框包含标题、内容和操作

操作

对话框的操作要聚焦于任务目标且数量不宜多,通常是肯定和否定操作。

  • 肯定的操作放在右侧,表示继续进程。肯定操作可能具有破坏性,例如「删除」或「移除」。
  • 否定的操作直接放在肯定操作的左侧,并在点击后返回到初始界面,或者跳过这一步。
  • 肯定和否定操作文本可以是「取消」/「好」或者表示操作结果的动词。

否定操作总是放在肯定操作的左侧

对话框操作应该根据标题来提供明确的相关操作。

避免向用户提供有歧义的选择。在此示例中,「Cancel」与标题无关,因为没有指出明确的操作。

确知操作

通常是需要用户确实了解对话框中的内容,然后再继续进程。此对话框仅有一个操作。为了避免打扰用户请谨慎的使用此对话框。考虑使用其他的方案来把信息传递给用户,例如在视图中直接展示信息。

操作数量

对话框不应有两个以上的操作。第三个操作,例如「了解更多」可能会在用户尚未完成任务时离开对话框。

避免使用「了解更多」操作来访问帮助文档;在对话框内使用可展开内容代替。如果确实需要其他信息,请在进入对话框之前提供。

「了解更多」操作会离开此对话框,使其处于不确定的状态

颜色

对话框操作默认使用系统颜色,但它应该反映产品的调色板。使用高对比度的颜色,例如强调色,来区分对话框的操作和内容。

没有大写字母的语言

对于没有大写字母的语言(例如中文、日文和韩文),需要保持一致的位置、间距和颜色,来区分操作和普通文本。

一致的位置和文本颜色有助于区分操作和普通文本,即使肯定操作处于禁用状态。

在做出选择前,肯定按钮更有可能处于禁用状态,取消按钮绝不会被禁用。

内容规格

内容区域的内边距:24dp
标题和正文的间距:20dp
按钮外边距:8dp
按钮高度:36dp
操作区域高度:52dp
对话框海拔:24dp

内容间距

在内容区域中,24dp 的下边距有助于将其与操作分隔开。

对话框的内容与底部的间距:24dp
按钮高度:36dp
按钮外边距:8dp

滚动状态的内容间距

按钮的宽度和间距

按钮高度:36dp
按钮最小宽度:64dp
按钮内边距:8dp
按钮之间的间距:8dp

按钮的宽度和间距细节

按钮高度:36dp
按钮区域高度:52dp
按钮区域左边距:24dp
按钮区域右边距:8dp
按钮之间的间距:8dp

按钮区域细节

滚动状态下,对话框的内容和操作之间的描边

并排按钮

当每个按钮的文本不超过最大按钮宽度时,建议使用并排按钮,例如常用的好/取消按钮。

使用以下公式计算给定对话框的最大按钮宽度:

对话框按钮的最大宽度 =

(对话框宽度 - 8dp - 8dp - 8dp)/2

例如:

宽度为 280dp 的对话框的按钮最大宽度 =

(280dp - 8dp - 8dp - 8dp)/2 = 128dp

按钮高度:6dp
正文和操作区域的间距:24dp
按钮的外边距:8dp

竖排全宽按钮

当文本长度超过按钮的最大宽度时,请使用竖排按钮来放置文本。肯定的操作在否定的操作上方。

每个按钮的触控范围:48dp
正文和触控范围的间距:24dp
触控范围与对话框的下边距:8dp
按钮文本与对话框的右边距:16dp

简单对话框的关键线

垂直关键线在对话框左右边缘的 24dp 处。与图标或头像相关联的内容在距离对话框左侧 80dp 处。

简单对话框的关键线

简单对话框的内容规格

建议简单对话框要有标题,可以根据产品需要来取舍。

标题

  • 上边距:24dp
  • 下边距:20dp
  • 字体:20sp Roboto Medium
  • 行高:28dp

内容

  • 含头像的单行文本行高:56dp
  • 下边距:8dp

简单对话框的标注

全屏对话框的标题

必要时标题可以换行,超过两行的内容将会被截断。标题应当简明扼要,某些情况下(使用其他语言时标题会变长)标题可能需要换行。


有单行文本的应用栏高度:56dp
有两行文本的应用栏高度:80dp
标题文本关键线:72dp
标题文本:20sp
标题文本的上下边距:20dp
否定操作的左边距:16dp
肯定操作文本:14sp
肯定操作文本左右边距:16dp

全屏对话框的应用栏细节

有单行文本应用栏的全屏对话框

请注意,此图片仅供参考。长标题应该放置在全屏对话框的内容区域。