组件– 对话框

对话框

滑块控件允许用户通过移动滑块从一系列的值中进行选择。

滑块是用于调整反映强度级别（如音量、亮度或色彩饱和度）的设置的理想组件。

滑块可以在滑动条的两端有反映强度值的图标。将滑块范围的最小值放在左侧，最大值放在右侧。

  • 连续滑块
  • 连续滑块允许用户在主观范围内选择一个值。它们不需要特定的值来进行调整，尽管在某些情况下，它们可以提供可编辑的数值。
  • 间续滑块
间续滑块允许用户从一个范围中选择特定值。

连续滑块

间续滑块

在不要求精准、以主观感觉为主的设置中使用连续滑块，让使用者做出更有意义的调整。

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

亮色主题 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

打开时的滑块：Swatch 200，不透明度 100%<br />打开时的轨道：Swatch 200，不透明度 100%

关闭时的滑块：#FFFFFF，不透明度 30%<br />关闭时的轨道：#FFFFFF，不透明度 30%

禁用状态（不相连）：#FFFFFF，不透明度 30%

暗色主题

不同的滑块行为

图标与滑块栏左/右的间距：

滑块中图标的间距示例。

  • 滑块在正常、鼠标悬停、聚焦、点击和禁用状态下的示例。
  • 含可编辑的数值

用于需要设置精确值的设置项，通过点击滑块，文本框会变成可编辑状态以供输入文本，并且自动移动滑块来更新滑块的值。

具有可编辑数值的滑块示例

Material Design 中的对话框示例

具有可编辑数值的滑块在正常、鼠标悬停、聚焦、点击和禁用状态下的示例。

Material Design 中的全屏对话框示例

间续滑块会恰好咬合到在滑动条上平均分布的间续标记上。在要求精准、以客观设定为主的设置项中使用间续滑块，让使用者做出更有意义的调整。应当对每个间续标记设定一定的等级区间进行分隔，使得其调整效果对于使用者来说显而易见。这些生成区间的值应当是预先设定好的，使用者不可对其进行编辑。

含数值标签

用于用户需要知道精确数值的设置项。

  • 亮色主题
  • 暗色主题

间续滑块的动画效果

Material Design 中的滑块控件用于选择值

Material Design 亮色主题的连续滑块

Material Design 暗色主题的连续滑块

Material Design 中滑块图标的间距示例

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

Material Design 中的滑块状态示例

打开时的滑块：Swatch 500，不透明度 100%<br />打开时的轨道：Swatch 500，不透明度 100% Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Material Design 具有可编辑数值的滑块示例

Material Design 中可编辑的滑块在不同状态下的示例

Material Design 亮色主题的间续滑块

Material Design 暗色主题的间续滑块

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

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

正确示例

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

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

错误示例

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

有标题栏的警告框

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

如果需要标题：

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

正确示例

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

Material Design 中的模糊对话框示例

错误示例

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

关闭时的滑块：#000000，不透明度 26%<br />关闭时的轨道：#000000，不透明度 26% Expand and collapse content An arrow that points down when collapsed and points up when expanded.

仅适用手机端和平板端

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

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

Material Design 中的简单菜单示例

简单菜单示例

Material Design 中的简单菜单示例

关闭时聚焦和点击状态的滑块：#000000，不透明度 38% <br />关闭时聚焦和点击时的轨道：#000000，不透明度 38% 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 中的简单对话框行高变化

正确示例

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

禁用状态（不相连）：#000000，不透明度 26% 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 中的全屏对话框示例图

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