2017 Material Design完整中文版：第五章节《组件》 第四部分
【站酷首发】10大章79小节重译！半年心血只为让更多人正确认识、学习MD。由于单篇文章字数限制，全文将分为N篇文章陆续发布。
对话框用于告知用户当前需要完成的特殊任务，里面可能包括关键的信息，需要用户决策的操作或者牵扯到的其他任务。
对话框中包含有文本和UI控件。对话框出现后，用户需要通过进一步的操作才能退出对话框。因为对话框容易中断（干扰）用户操作，所以需谨慎使用。
一些对话框类型：
警告对话框应用于紧急情况下中断用户操作，然后告知用户当前情况并需要用户确认。
简易菜单（Simple menus）简单的展示了当前项目列表中所包含的选项，而简易对话框（simple dialogs）则进一步提供列表中选项所包含的详细信息以及用户操作。
确定对话框需要用户明确当前选择。
行为
保持对话框出现后所处的位置（Z轴）在所有视觉元素之上。当用户完成进一步的操作后对话框才会消失。
全屏对话框（仅限移动端）
对于复杂任务的处理，满屏对话框非常适用（或需要输入法编辑器）。
超越标准对话框的对话框
对话框是模态窗口的一种，下面我们会以标准的material系统对话框为参考进一步描述对话框。（这里我们不以其他模态窗口来做参考是因为它们结构的变化太多，比如购买流程的品牌按钮，非标准的UI元素，或者罕见的界面布局等等）
减少干扰
对话框很容易打断用户操作，所以你需要谨慎使用对话框。不是每一次选择，设置或者授权都需要通过打断用户来实现，除对话框外是否还有更合适的解决方式（比如使用菜单或展开内联（inline expansion）的方式替代）。
凸显对话框
当对话框出现时，保持它所处的位置（Z轴）在所有视觉元素之上。当用户完成进一步的操作后对话框才会消失。
对话框需要避免：
在对话框内打开对话框
包含可滚动的内容
全屏对话框（例外）
在全屏对话框中可以打开其他对话框（比如picker），因为在全屏对话框中打开其他对话框并不会在视觉层面上明显增加用户对应用Z轴上的感知以及视觉噪音。
对话框中的内容
全屏对话框
可滚动的内容（例外）
一些对话框的内容可以滚动，比如铃声列表。
对于可滚动的列表选项，对话框的标题需保持固定在顶部不动。不管内容如何滚动，确保标题可见。
对话框的操作也是如此，当内容滚动时操作保持在当前位置不动。
对话框是从底层父级material对象中分离出来，这就意味着对话框中的内容滚动不会影响到它的父级material对象。
显示附加内容
如果需要显示对话框中的附加内容，在内容区域使用内联展开的方式显示。或者考虑使用其他能够对内容数量进行优化的组件。
离开对话框
通过轻触/点击对话框的外部区域或使用系统的后退按钮（Android）离开对话框。当然，用户也可以选择对话框中的操作结束对话框。
对于可滚动的列表选项，对话框的标题需保持固定在顶部不动。不管内容如何滚动，确保标题可见。
警告对话框应用于紧急情况下中断用户操作，然后告知用户当前情况并需要用户确认。
使用snackbar确认：用户完成操作后出现snackbar进行再次确认，例如确认删除草稿。snackbar一般用于提醒用户并允许用户撤销刚刚进行的操作。
警告对话框不带标题栏
警告对话框不需要使用标题栏。
对话框中的内容表述需要简洁明了 ：
直接提出问题（如“Delete this conversation?”）
操作按钮的表述应与问题的描述相关联
可行
如图，按钮文本使用了“Discard”。该描述清晰、准确的指明了做出该决定后的结果。
不可行
如图，虽然“NO”也表明了意思，但是这会导致用户理解上出现困惑，所以我们不建议使用这种描述。取而代之的方案有“Cancel”和“Delete”。
警告对话框带标题栏
只有在高风险的情况下对话框才需要使用标题栏，例如潜在的链接丢失提醒。用户应能够理解标题和按钮文本并单独进行选择。
标题应该：
简洁明了（在内容区域可以进行详细说明），例如”Erase USB storage?”
避免使用客套话，含糊不清的语句或向用户提问题，例如“Warning!” or “Are you sure?”
可行
标题简洁明了，内容阐述明白，并提供了确切的操作
不可行
标题含糊不清，内容描述不清
仅限移动端和平板端
使用简易菜单来呈现选中列表项目后出现的选项。详情请看 简易菜单 。
避免模棱两可：还可以使用 简易对话框 来呈现选中列表项目后出现的选项。除此之外，简易对话框还能够提供相关联的操作。虽然简易对话框与简易菜单都能作为呈现项目选项的显示方式，但是，因为简易菜单不容易打断用户，所以它更适合用于显示项目中的详细选项。
简易菜单
简易对话框能够提供列表项目中所包含的详细选项和操作。例如，简易对话框能够显示头像、icon、副标题或者操作（如添加账户）
行为：
选中选项后按提交并关闭菜单
轻按对话框外部区域，或者按后退键来取消操作并关闭对话框
减少干扰
简易对话框相对简易菜单来说更容易打断用户，所以应谨慎使用简易对话框。
简易对话框
以56dp为一个单位
移动端上的最小宽度=56dp*5=280dp
避免直接的取消按钮
简易对话框不应该出现明确的接受或取消操作。
不可行
避免出现明确的"取消"按钮
避免出现明确的"取消"按钮
尺寸说明
简易对话框中的行高可以灵活改变
简易对话框的中心对齐至屏幕中心
简易对话框左右距离屏幕边缘至少40dp，上下距离至少24dp
简易对话框中的内容距离对话框边缘24dp
避免文本换行
面对简易菜单中有文本需要换行才能显示完整的情况，我们可以使用简易对话框来代替。
可行
简易对话框中的行高可以灵活改变
确定对话框用于用户完成操作后进行再次确认。例如，用户选中多个歌曲播放后，按下“OK”后才能播放。
点击“取消”或者“后退”按钮取消操作，并关闭对话框。
避免在对话框中打开对话框
避免在确定对话框中打开其他对话框（如简易对话框或简易菜单），因为多个对话框存在会增加Z轴上的层级，从而导致视觉混乱。如果需要，可以考虑使用 全屏对话框 替代。
用户点击“OK”后才能完成设置
确定对话框
仅可使用一种数值类型
确定对话框除了列表式布局外还可以使用其他布局，如 选择器。但是只能使用一种数值类型（如下图所示，只能选择日期，不能同时出现日期和时间供用户选择）。
选择日期
选择时间
取消和确定按钮
确定对话框提供了确定和取消按钮。点击取消或后退按钮，抑或离开确定对话框将会取消操作。
可行
提供确定和取消按钮
不可行
对话框只有一个按钮会让系统的后退按钮的作用变得含糊不清：按后退按钮是取消还是确定？
仅限移动端：由于屏幕大小限制的问题，全屏对话框更适合用于移动端设备。
用法
全屏对话框能够同时对系列任务（比如创建一个日程）进行操作。点击“保存”才能够对已选择的项目进行保存。点"X"放弃更改并退出对话框。
全屏对话框能够拥有丰富的页面布局。它能够有效减少对话框堆叠导致的视觉混乱（就是在对话框中打开对话框），同时还可以让用户对应用高度（Z轴）感知暂时重置到一个更高的基线上。也就是说，在全屏对话框中再打开简易菜单或简易对话框是没有任何问题的。
满足以下条件的内容或者任务可使用全屏对话框：
对话框包含的组件（如选择器或表单字段）允许使用输入法编辑器（IME），比如键盘。
没有实时保存需要
应用没有保存草稿的功能
提交前允许批量操作
全屏对话框支持打开简易对话框
全屏对话框中可以打开日期选择器
操作
全屏对话框的顶部放置确定和取消操作
确定
确定操作使用描述性动词，如：保存、发送、分享、更新或创建。不要使用词意含糊不清的操作，如：完成、ok或关闭。
在所有强制性输入字段完成输入后才开启确定操作。
放弃（Discard）
使用放弃（页面顶部左侧的“X”icon）或后退按钮放弃当前操作并关闭全屏对话框。
如果用户对内容没有进行更改，那么就不需要提示用户内容更改是否放弃，而是直接关闭对话框
反之，需要提示用户确认是否放弃更改
不可行
使用词意含糊不清的操作，“关闭”
可行
因为用户对内容进行了更改，所以当用户按下“X”键后需要弹出对话框进行确认。
导航
在全屏对话框中，“X”键的使用有别于返回按钮（up arrow）。使用返回按钮的页面中，页面的状态会被不断保存。例如，“设置”里有使用返回按钮的页面中，内容的更改系统会自动进行保存，并且使用返回按钮后能够直接退出当前页面而不需要任何确定或取消操作的提示。
使用返回按钮的设置页面中，页面的状态会被不断保存
使用"X"按钮的设置页面中，更改内容后需要手动进行保存。
标题
全屏对话框的标题不要使用动态调整。
标题需要简洁明了。如有必要，标题可以进行一次换行，换行后超出部分需要省略。
如果全屏对话框使用了长度动态变化的标题或者长标题（例如，因为不同语言中的文字长度不一，有些可能会很长），那么可以将标题文本的放置位置从应用栏改为对话框中的内容区域。
不可行
避免在应用栏中使用长度动态变化的标题
可行
将长标题放置在全屏对话框中的内容区域
对话框由内容、操作和标题（可选）组成。
标题（可选）
标题大概描述了用户当前所面临的选择。只有必要的时候才使用标题。标题的文字应全部显示出来，不能够被省略。
内容
对话框的内容通常由文本和/或UI控件组成。一般用于描述内容详情，比如确定删除某个项目或者选中完成某个设置。
对话框由内容、操作和标题（可选）组成
操作
对话框向用户呈现的操作是有选择范围限制的，一般由肯定或否定意思的操作组成：
肯定操作放置在否定操作右边，选中后进入下一步。肯定操作有时候也是消极的，比如“删除”
否定操作放置在肯定操作左边，选中后返回打开的页面或上一步
否定和肯定操作的文本应该直接向用户表述出选择后会发生的结果。文本一般采用特定的主动动词或动词短语，如“Cancel”/“OK”
不可行
否定操作放置在肯定操作左边
对话框的操作需要与标题和内容相关联，并能够向用户传达清楚。
不可行
避免使用向用户传达意思含糊不清的词语。
确认操作（Acknowledgement actions）
只有用户确认对话框内容后才能进入到下一步，需要注意的是一个警告对话框只能存在一个确认操作。此外，由于使用警告对话框容易打断用户，所以可以考虑使用其他方式提示用户，比如内联。
操作的数量
对话框只能包含两个以内的操作。
避免使用“了解更多（Learn more）”操作来访问帮助文档，但可以使用内联展开的方式替代。如果需要向用户传达详细信息，最好在进入对话框之前提供。
不可行
点击“了解更多”后会离开当前对话框，这样可能会导致对话框所示的任务被忽视。
颜色
对话框中的操作一般使用系统默认的颜色，当然你也可以使用体现产品调性的色板中的颜色。举个例子，使用色板中的强调色来区分对话框中的操作和内容。
没有大写格式的语言
对于那些没有大写格式的语言（比如中文、日文和韩文），只能通过位置、间距和颜色去区别文本之间的关系。
通过操作的位置摆放和文本颜色来帮助用户区分操作和普通文本
当选项被选择后，肯定操作对用户开启
内容尺寸说明
内容区域四周的内边距：24dp
文字和详情文本之间的内边距：20dp
按钮四周的内边距：8dp
按钮高：36dp
操作区域高：52dp
对话框高度（Z轴）：24dp
各内容模块的内边距
在对话框中，在详情文本下方增加24dp内边距有助于区分对话框的内容和操作
对话框内容底部内边距：24dp
按钮高：36dp
按钮外边距：8dp
内容滚动状态下的对话框的内边距
按钮的宽和内边距
按钮高：36dp
按钮的宽最小为：64dp
按钮内部的内边距：8dp
按钮之间的内边距：8dp
按钮的宽和内边距
按钮区域细节
对话框中的内容滚动时需要添加分隔线以区分操作和内容
并排按钮
建议操作按钮的标签宽度没有超出最大按钮宽度时使用并排按钮的排列方式。例如经常使用的OK/Cancel按钮。
通过以下公式计算出对话框中的最大按钮宽度：
举个例子：
在280dp宽的对话框中最大按钮宽度=（280dp-8dp-8dp-8dp）/2=128dp
按钮高：36dp
文本和操作区域间的内边距：24dp
按钮四周的内边距：8dp
全宽按钮
当文本标签超出最大按钮宽度时使用全宽按钮的排列方式。肯定操作的按钮放置在否定操作按钮的上方。
按钮触发区域的高：48dp
文本和触发区域间的内边距：24dp
触发区域和对话框底部边缘的内边距：8dp
按钮文本距离对话框右侧边缘的内边距：16dp
简单的对话框参考线
参考线距离对话框左右边缘24dp。文本内容距离左侧边缘80dp。
简单的对话框参考线
简单的对话框内容尺寸说明
一般情况下推荐简易对话框使用标题。当然，如果产品需要可将标题省去。
标题
上内边距：24dp
下内边距：20dp
文字大小：Roboto Medium 20sp
文本行高：28dp
内容
带有头像的行高：56dp
距离底部边缘内边距：8dp
简易对话框尺寸说明
全屏对话框标题
如有必要，标题可以进行一次换行，换行后超出部分需要省略。标题应简明扼要，但是在某些情况下，如同一标题在不同语言下文字长度可能过长的情况，标题需要进行上述换行操作。
应用栏高（单行标题文本）：56dp
应用栏高（两行标题文本）：80dp
标题文本距页面左侧边缘：72dp
标题文本：20sp
标题文本的上、下内边距：20dp
否定操作距离页面左侧边缘的内边距：16dp
肯定按钮的文本：14sp
肯定按钮的左、右内边距：16dp
全屏对话框的应用栏
全屏对话框中的应用栏（单行标题文本）
上图仅供参考。全屏对话框中的应用栏（两行标题文本）
分隔线看起来像一条细线，在应用中一般用于对页面布局和列表中的内容进行分组。
分隔线有助于组织页面内容并对其进行分层。
全出血（Full-bleed）分隔线能够将整块内容区域进行分隔，这种明显的视觉分隔效果很好的将分离开的内容区域突显出来。此外，可替代全出血分隔线作用的方案有：留白，副标题或
内嵌分隔线。
宫格列表中基于图像的内容不需要用到分隔线。因为宫格列表本身通过留白+副标题的方式就能实现内容分隔的效果，所以不需要用到分隔线。
用法
用于列表中分隔内容。
分隔线的类型
全出血分隔线用于需要清晰突显分隔的内容的地方
内嵌分隔线用于分隔相关联的内容
尺寸说明
粗细：1dp
不透明度：12%黑或12%白
位置：对齐到内容区域的底部边缘
页面中的内容可以通过分隔线来创建层次感，并且以此帮助用户理解内容是如何被组织起来的。但是，如果大量使用分隔线的话可能会适得其反，造成不必要的视觉混乱。
全出血分隔线能够将整块内容区域进行分隔，这种明显的视觉分隔效果很好的将分离开的内容区域突显出来。但是，如果不需要如此明显的分隔效果的话，可以考虑使用留白，副标题或内嵌分隔线代替。
没有锚点元素的项目
当项目没有锚点元素时（如头像、icon），仅靠间距是很难对内容进行区分的。在下面例子中，使用了全出血分隔线来帮助创建内容之间的层次感并对内容进行区分。
全出血分隔线：对邮件进行区分
表单中全出血分隔线的应用
基于图像的内容
因为宫格列表本身就能够实现内容分隔的视觉效果，所以不需要用到分隔线。在下面例子中，宫格列表利用留白+副标题来分离内容。
使用留白+副标题分隔相片内容
可行
使用内嵌分隔线区分出主要内容
可行
使用内嵌分隔线和锚点元素（如头像）结合的方式对内容进行分隔
不可行
过量使用分隔线容易造成视觉混乱
不可行
内嵌分隔线结合锚点元素使用可以有效减少视觉噪音，但如果过量使用内嵌分隔线的话，效果减弱的同时有可能导致视觉混乱。
全出血分隔线
全出血分隔线不仅能够区分清楚大的内容区块（如联系信息），还可以清晰区分页面布局或列表中的内容元素（如列表项）。
全出血分隔线也能区分展开的内容。
全出血分隔线
全出血分隔线
内嵌分隔线
内嵌分隔线用于分隔相关联的内容，比如联系人列表或邮件列表。
内嵌分隔线需要结合锚点元素一起使用，比如icon、头像（头像对齐至标题参考线处）。
内嵌分隔线
内嵌分隔线
副标题和分隔线
当使用分隔线+副标题结合的方式时，将分隔线放置在副标题的上方能够加强副标题和内容之间的联系。
分隔线放置在副标题上方
分隔线放置在副标题上方
分隔线粗细是1dp。浅色背景下分隔线的不透明度是12%黑色，暗色背景下则是12%白色。
分隔线的位置对齐到内容区域的底部边缘，并独立于栅格之外。
分隔线的位置在所处的内容区域之内
扩展面板包括流程创建以及对元素进行轻度编辑。
扩展面板是一个轻量级的容器，它能够独立与其他面存在，也可以与其他面相互关联（如卡片）。
扩展面版能够用于处理：
编辑设置
为活动收集信息
用法
编辑
流程创建
行为
展开
折叠
聚焦
扩展面板是一个轻量级的容器，它能够独立与其他面存在，也可以与其他面相互关联（如卡片）。
编辑
扩展面板最适合对元素进行轻度编辑，比如在设置中选择一个值。
举个例子，表格中可以使用扩展面板来调整表格中的元素。
创建流程
扩展面板能够运用在表单流程中。
举个例子，利用表单中的扩展面板为活动收集信息。
多种扩展面板
列表内容：15sp Roboto Regular，87% 黑色
分隔线：1dp粗细，12% 黑色
辅助内容：12sp Roboto Regular，54% 黑色
展开icon：24dp x 24dp，38% 黑色
折叠面板
折叠面板显示概要信息。点选折叠面板后会展开面板并显示其中的详细信息。
折叠面板
展开面板
折叠面板展开后即为展开面板。展开面板允许用户添加或编辑信息。
面板中添加帮助文本可以提示用户操作。
展开面板
聚焦状态
扩展面板（列表项）聚焦时使用灰色背景提供视觉反馈。
使用键盘输入方式时，用户可以通过使用Tab键进行选择（聚焦）。
背景色：
灰色200
展开icon悬停和按下状态：
24dp x 24dp
54%黑色
标签（label）
字体：Roboto Regular 15sp
内边距（padding）
上、下内边距：16dp
左、右内边距：24dp
