组件 对话框

对话框

对话框用于提示用户做一些决定,或者提供完成某个任务时需要的一些其他额外信息。

对话框包含文本和 UI 控件。对话框始终保持聚焦状态,直到被关闭或触发了必要的操作。谨慎使用对话框,因为它们会分散用户的注意力。

对话框的类型包括:

  • 警告是需要提醒用户,并需要用户确认的重要操作的提示框。
  • 简单菜单提供列表选项给用户,而简单对话框可以提供一个列表项的详细信息或操作。
  • 确认对话框是需要用户明确的确认一个选择的对话框。
行为

对话框不能被其他元素或屏幕边缘遮挡。对话框始终保持聚焦状态,直到被关闭或触发了必要的操作。

全屏对话框(仅移动端)

全屏对话框最适合用于复杂的任务、或需要一个输入法编辑器的任务,因为它们在保存之前会将一系列的任务分组在一起。

Material Design 中的对话框用于提示用户决策或提供额外信息

行为 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

标准对话框进阶

对话框是模态窗口的子类型,这里所涉及的例子是标准的 Material 系统对话框。(其他模态窗口结构在这里没有涉及到,因为它们有太多的变化,例如购买流程的品牌按钮、非标准的 UI 表单元素或独特的布局。)

减少对用户的打断

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

对话框应突出于其他元素

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

对话框应避免

  • 从对话框中打开对话框
  • 包含可滚动的内容

全屏对话框是一个例外

全屏对话框可以打开其他对话框,例如选择器,因为它们的设计可容纳额外的材料层,而不会明显地增加应用视觉上的 Z 轴深度,或造成视觉干扰。

Material Design 中的对话框示例

对话框示例

Material Design 中的全屏对话框示例

全屏对话框示例

可滚动的内容是一个例外

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

  • 对于可滚动的选项列表,对话框标题应固定在顶部。这确保了选中的条目和标题可以同时可见,而不用管条目在列表中的位置。
  • 否则,标题会随着内容的滚动而消失。操作按钮则应始终保持固定。

对话框与底层的元素保持分离,不与其一起滚动。

显示更多内容

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

关闭对话框

可以通过点击对话框外面的区域、或系统的返回按钮(Android)来关闭对话框。另外,可以禁止用户关闭对话框,使用户必须选择其中一个操作后才能继续。

Material Design 中的固定对话框标题与可滚动列表同时可见

将对话框中的可滚动列表的标题固定,以确保标题和被选中的条目可以同时可见。

警告框 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

警告框会紧急打断用户正在进行的操作,用于需要提示用户有关信息,并需要确认的情况。

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

不含标题栏的警告框

大部分警告框不需要标题

它们只用一句话或两句话来说明:

  • 提出问题(例如 “删除此会话?” )
  • 对操作按钮进行说明
Material Design 中“Discard”按钮明确操作后果

正确示例

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

Material Design 中的取消按钮应使用“Cancel”明确表达

错误示例

取消按钮的文本 “No” 回答了提问,但没有明确表明之后会发生什么。更好的按钮文本应该是更易理解的“Cancel”和“Delete”。

有标题栏的警告框

仅在高风险情况下使用有标题栏的警告框,例如网络连接断开了。用户应该要仅凭标题和按钮文本就能明白警告框的含义。

如果需要标题:

  • 在内容区域使用清楚的问题或说明进行解释,例如 “移除 USB 存储设备?”
  • 避免使用表示歉意、存在歧义、或表示疑问的语句,例如 “警告!” 或 “你确定吗?”
Material Design 中的具体问题和明确操作建议

正确示例

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

Material Design 中的模糊对话框示例

错误示例

此对话框提出了一个模糊的问题,无法根据标题知道它的作用。

简单菜单 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

仅适用手机端和平板端

简单菜单显示列表的选项,并且会在用户选择后立即提交选择。详见简单菜单

消除歧义:简单对话框显示列表的详细选项,并提供相关操作。简单对话框可以显示和简单菜单相同的内容。但是,优先使用简单菜单,因为它们对用户当前上下文的破坏较小。

Material Design 中的简单菜单示例

简单菜单示例

Material Design 中的简单菜单示例

简单对话框 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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

手势操作:

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

减少对用户的打断

简单对话框会比简单菜单更容易打断用户的操作,所以在使用时需要更为谨慎。

Material Design 中的简单对话框示例

简单对话框示例

Material Design 中对话框宽度的单位倍数设置

在移动设备上,对话框的宽度为单位的倍数。该单位可以是:

  • 一个增量
  • 距离屏幕边缘的距离

没有明确的取消按钮

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

Material Design 中的简单对话框和 “Cancel” 按钮

错误示例

这个简单对话框有一个明确的 “Cancel” 按钮。

Material Design 中的简单对话框及“Cancel”按钮

错误示例

这个简单对话框有一个明确的 “Cancel” 按钮。

规格

  • 简单对话框中的行高可以不同
  • 简单对话框在屏幕中垂直水平居中对齐
  • 对话框距离屏幕边缘左右至少 40dp,上下至少 24dp
  • 对话框的内容距离对话框边缘 24dp

避免文本换行

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

Material Design 中的简单对话框行高变化

正确示例

这个简单对话框有不同的行高。

确认框 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

确认对话框要求用户在提交选项之前先确认它们的选择。例如,用户可以收听多个铃声,但只有在触摸“确认”按钮时才会提交最终的选择。

触摸确认对话框中的 “Cancel” 或按下后退键,会取消操作,放弃所有更改,然后关闭对话框。

避免从对话框中启动其他对话框

避免从确认对话框中启动其他简单对话框或简单菜单,因为它们会增加复杂性,并增加了应用的海拔高度。如果需要从对话框中启动对话框来完成一项任务,请考虑使用全屏对话框代替。

Material Design 的铃声选择需用户点击 “OK” 提交

在用户按下 “OK” 按钮前,不会提交对话框中的铃声选择。

Material Design 中的左侧控件确认对话框示例

文本左侧有控件的确认对话框示例。

确认信息单一性

确认对话框可以使用除列表之外的其他布局,例如日期选择器,但仍然应专注于指定单个值(选择日期,但不同时选择日期和时间)。

Material Design 日期选择器的用户设置示例

用户通过选择一个日期,并按下 “OK” 按钮来设置日期。

Material Design 中的移动时钟指针设置时间

用户用过移动时钟指针,并按下 “OK” 按钮来设置时间。

取消和确认按钮

确认对话框同时提供明确的确认按钮和取消按钮。点击取消按钮、返回键或离开确认对话框将丢弃更改。

Material Design 中的确认和取消按钮

正确示例

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

Material Design 的单个对话框按钮导致返回操作不明确

错误示例

只有单个对话框按钮使系统的返回操作变得模糊:返回时是取消还是确认?

全屏对话框 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

仅限移动设备:由于空间有限,全屏对话框可能更适合用于移动设备,而不适合用在拥有更大屏幕的设备上。

用法

全屏对话框将一系列任务(例如创建日历)分组,然后用户可以选择提交或丢弃这些任务。在触摸 “保存” 按钮之前,不会保存任何数据。触摸 “X” 会丢弃所有更改并退出对话框。

全屏对话框启用复杂布局,最小化堆叠材料(对话框上方的对话框)的外观,并临时把应用的视觉高度重置为比较高的基线。它们允许使用简单菜单或简单对话框作为复杂操作的一部分。

全屏对话框可用于符合以下任何条件的内容或任务:

  • 该对话框包含需要如键盘之类的输入法编辑器(IME)的组件(如选择器或表单字段)
  • 当更改不会实时保存时
  • 当应用没有草稿功能时
  • 在提交批处理操作或队列更改之前
Material Design 中的全屏对话框选择日期

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

Material Design 中的全屏日期选择器

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

操作

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

确认

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

在对话框中所有字段都通过验证之前,确认操作将被禁用。

取消

取消操作(屏幕左上角的 “X” )和返回按钮都会关闭全屏对话框并放弃更改。

  • 如果未进行更改,对话框会直接关闭,不需要进行丢弃确认
  • 如果用户进行了更改,系统将提示用户对丢弃操作进行确认
Material Design 强调避免模糊的术语确认操作

错误示例

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

Material Design 中的操作确认提示

正确示例

如果用户进行了更改,则提示用户对丢弃操作进行确认。

导航

在全屏对话框中使用的 “X” 不同于返回箭头,使用返回箭头表示视图的状态会被实时保存。例如,“设置” 中使用返回箭头表示立即提交所有更改,而不需要进行确认或取消操作。

Material Design 中的返回箭头表示选择后保存更改

此设置示例中的返回箭头表示任何更改都将在选择后立即保存。

Material Design 中的放弃更改示例提示

点击此设置示例中的 “X” 将放弃所有更改,更改只有在点击保存按钮后才会保存。

标题

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

标题应该简洁。如果需要,它们可以换行到第二行,然后将多余的截断。

如果全屏对话框使用可变长度的标题或长标题(例如,同一个词翻译成不同语言后会变得很长),请将标题文本放在对话框的内容区域,不要放在应用栏中。

Material Design 中不应使用可变长度的标题

错误示例

避免在应用栏中使用可变长度的标题。

Material Design 中的全屏对话框长标题

正确示例

在全屏对话框的内容区域放置长标题。

规格 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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

可选的标题

标题简要描述了正在进行的选择的类型,标题应始终以整体显示,且仅在必要时使用。例如,标题可以指示对话框与任务的哪个部分相关,或确认该决定会影响到的内容。

内容

对话框内容通常由文本和 UI 控件组成。它专注于特定的任务,例如对删除操作做二次确认,或用于选择一项设置。

Material Design 对话框的标题、内容和操作

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

操作

对话框包含的操作要有明确目的和数量,通常是肯定操作或忽略操作。

  • 肯定操作放在右侧,并在点击后继续进行下一步操作。肯定操作可能具有破坏性,例如“删除”或“移除”
  • 忽略操作直接放在肯定操作的左侧,并在点击后返回到原始界面,或者跳过这一步
  • 忽略和肯定操作的文本可以是 “Cancel” / “OK” 或其他能表明操作结果的动词或动词短语
Material Design 中的取消操作在肯定操作左侧

错误示例

取消操作总是放在肯定操作的左侧。

对话框操作应该提供与对话框标题和内容直接相关的明确的选择。

Material Design 中的明确操作选择示例

错误示例

避免向用户提供模糊不清的选择。在此示例中, “Cancel” 与标题无关,因为没有指出明确的操作。

确认操作

在需要用户确认对话框内容的情况下,警告框可以仅包含一个操作。谨慎使用此类警告框,因为它会打断用户的操作。可以考虑通过其他方法把信息传递给用户,例如把信息显示在视图的内容中。

操作的数量

对话框不能包含两个以上的操作。第三个操作,例如 “了解更多” 会离开对话框,可能会留下未完成的任务。

避免使用 “了解更多” 操作来访问帮助文档;应该使用对话框内的可展开内容代替。如果需要提供更多详细信息,请在进入对话框之前提供。

Material Design 中的“了解更多”操作说明

错误示例

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

颜色

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

没有大写字母的语言

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

Material Design 中操作按钮位置和文本颜色一致,便于区分

一致的操作按钮位置、文本颜色有利于把操作和普通文本区分开来,即使操作处于禁用状态。

在 Material Design 中,肯定按钮通常默认为禁用状态

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

内容指南

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

Material Design 中的对话框内容的边距

内容的间距

Material Design 中的对话框内容区域边距与操作分隔

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

提示框内容底部边距:24dp
按钮高度:36dp
按钮外边距:8dp

Material Design 中的对话框滚动状态的内容的内边距

滚动状态的内容的内边距

按钮的宽度和内边距

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

Material Design 中的对话框按钮的宽度和边距

按钮的宽度和边距的详细信息

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

Material Design 中的对话框按钮区域的细节

按钮区域的细节

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

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

并排按钮

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

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

对话框中的按钮的最大宽度 =

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

例如

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

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

Material Design 中的并排按钮示例

按钮高度:36dp
正文和按钮区域之间的间距:24dp
按钮四周的边距:8dp

竖排全宽按钮

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

Material Design 中的竖排全宽按钮使用场景

每个按钮的可触摸高度:48dp
正文和触摸目标之间的间距:24dp
触摸目标下方和对话框边缘的间距:8dp
按钮文本右侧和对话框边缘的间距:16dp

简单对话框的参考线

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

Material Design 中的简单对话框示例

简单对话框的参考线

简单对话框的内容指南

建议简单对话框要有标题,但标题可以根据产品需要进行省略。

标题

  • 顶部边距:24dp
  • 底部边距:20dp
  • 文本尺寸:Roboto Medium 20sp
  • 文本行高:28dp

内容

  • 含头像的单行文本行高:56dp
  • 底部边距:8dp
Material Design 中的简单对话框标注

简单对话框的标注

全屏对话框的标题

如果有需要,全屏对话框的标题可以换行到第二行,然后将多余部分截断。标题应该简洁,但是在某些情况下,例如标题翻译成其他语言会变得更长时,标题可能需要换行。


含单行文本的应用栏高度:56dp
含两行文本的应用栏高度:80dp
标题文本距离屏幕左侧间距:72dp
标题文本:20sp
标题文本上下边距:20dp
取消操作距离左侧边缘的间距:16dp
肯定操作的文本:14sp
肯定操作的文本的左右内边距:16dp

Material Design 中的全屏对话框应用栏

全屏对话框应用栏的详细信息

Material Design 中的全屏对话框带单行文本应用栏

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

Material Design 中的全屏对话框示例图

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