2017 Material Design完整中文版：第六章节《模式》 第一部分
【站酷首发】10大章79小节重译！半年心血只为让更多人正确认识、学习MD。由于单篇文章字数限制，全文将分为N篇文章陆续发布。
当用户在应用中发起某项操作，你需要通过文本的形式确定或确认该操作。
确定和确认操作可以帮助减少已经发生或将要发生事情的不确定性。同时，它还可以防止用户在那些有可能会后悔操作的地方犯错误。
确定需要用户核对他们下一步要进行的操作。
确认需要让用户知道他们的操作已经完成。
不是所有的操作都需要确定或确认。
确定的指令要求用户核对是否继续刚才的操作。它的作用在于一方面是引起用户注意，另一方面是提醒用户关于该操作的关键信息。
站在用户角度，一个需要用户确定的模态对话框必须是对用户操作的回应，同时它必须对用户有意义，也就是说不是所有的用户操作都需要进行确定。
当用户的一个操作可以被撤销或者可以忽略不计的话，那就不需要用户进行确定。举个例子，你通过勾选复选框挑选图片，那挑选完毕后就不需要额外进行确定。
如图，当用户从图库中删除相簿的时候，系统会弹窗提醒并告知用户如果确定删除，该相簿将不复存在。
在启动安卓Beam之后，用户会被提示选择要分享的内容。如果用户选择不分享，那么只要把手机远离对方的手机即可结束分享。
确认用以消除因系统潜在操作所带来的不确定性。其中它还可能带有一个撤销选项供用户操作。
如图，如果用户在编辑邮件的时候退出了当前编辑页面，应用会自动保存这份邮件草稿。当保存为草稿的时候，确认框从屏幕底部弹出，几秒后消失。
如图，当用户删除列表中的一个对话的之后底部会出现一个确认框，确认框中包含撤销操作。如果用户不管这个确认框转而进行其他操作的时候（比如滚动屏幕），该确认框也会消失。
使用不同的数据格式表示不同类型的数字和语言数据。
根据不同的使用场景，使用不同日期和时间数值的格式去描述范围、时区、缩写等等。
数据的编辑和省略指导我们如何省略数字和隐藏敏感数据。
表达格式
时间
年，月，日
近似时间
绝对时间
时区
缩写
取整
译者注：以下格式使用方式是基于英语语言国家使用习惯及书写格式展开。
日期和时间
选择日期和时间的格式需要注意以下几点：
如果是当前的时间或日期
使用十二小时制还是二十四小时自制
日期和时间的展示需要具体到什么程度
| 类型 | 描述 | 案例 |
| 时间 | 展示当前时间，如果是十二小时制就要使用AM或PM区分时段，如果是二十四小时制，就不需要使用AM/PM。一些非英语语言的国家会使用小写的am和pm。 | 2:00 PM 14:00 |
| 年月日 | 在当前年份下，要么只展示日期，要么展示日期的同时加上年份。 | January 14 14 January 2012 |
| 近似时间 | 近似时间综合了四舍五入的方法和最近的日期或时间单位的使用。 | In 5 minutes 3 days ago |
| 绝对时间 | 如果用近似时间不合适，那么就使用具体的日期或时间来展示。 | Today, 10:00 AM |
时间和日期的范围
根据以下几点确定时间和日期范围的格式：
范围内的时间处于同一年份
范围内的时间处于当前年份
范围内的时间是否有相同的AM或PM
| 范围类型 | 描述 | 案例 |
| 破折号 | 区分范围内的两个时间使用破折号而不是使用空格。当拼写月份的时候使用空格以消除歧义。 | 8:00 AM–12:30 PM 6 Jan – 2 Feb |
| 年份 | 显示一年中开头和结尾的时间范围，除非范围内两个时间所处的年份不同。 | Dec 6, 2013–Jan 2, 2014 January 4–6, 2014 |
| AM/PM | 如果范围内的时间处于同一个时间段的话，那只需要在时间范围结束的地方加一个AM/PM即可。 | 8:00–10:30 AM |
时区
明确不同地区所处的时区。
| 时区的类型 | 描述 | 案例 |
| 个位数小时 | 当小时是个位数的时候，不需要在个位数前面加0 | UTC+5:00 |
| 单一时区 | 为了表示单一时区的时间情况应只使用该时区的缩写，不应该附加S（标准时区的缩写）或D（夏令时的缩写） | Open 4–10 PM ET |
| 时区组合 | 为了照顾到全国观众而具体说明的日期，比如使用包含标准时间或夏令时的缩写（例如EDT）去避免观众混淆。除此之外，美国的部分州不使用夏令时，如亚利桑那州。 | The first game is on April 13, 2015 at 4 PM EDT. |
ET：美国东部时间（Eastern Time）的缩写
EDT：美国东部夏令时（Eastern Daylight Time）的缩写
根据语境修改日期和时间
根据语境显示日期或时间，或者日期和时间都显示。
| 语境 | 描述 | 案例 |
| 未来 | 未来的某一天。 | 10 Jan, 08:00 |
| 过去 | 如果涉及到过去的某一时间，应该把日期和时间都展示出来。 | Reminded Jan 5, 7:16 AM |
| 遥远的过去 | 在描述过于久远发生的事件的时候，将时间省去。 | 3 Jan |
| 平日 | 当描述一周中某一天的时候，比如日历邀请，那我们应该使用缩写的方式进行描述，并用逗号隔开。 | Mon, Jan 10, 8:00 AM |
| 时间段 | 比如录制音频或视频的持续时间，使用格式H:MM:SS表示。该格式中，时、分、秒可以根据你的要求删减。 在相同语境中应使用相同的格式。如一个视频的标签“3:15”，其中“3:15”指的是小时和分钟，那么在以后的页面中我们都应该使用小时和分钟的展示格式。 | 0:30 1:01:05 |
缩写
当页面空间有限的时候，允许使用月份或天数的缩写。
| 时间段 | 描述 | 案例 |
| 月份 | 月份单词可以采用缩写的形式或者直接使用数字表示。另外要注意的是在一些语言中月份这个词是没有缩写形式的。 | Jan 6 3/12/12 |
| 日期格式 | 美国的日期格式：月/日/年，但有些国家使用的是日/月/年。 | March 12, 2012如果写成03/12/12可能会造成一些用户误解为December 3, 2012 |
| 一周中的某天 | 一周中的某天可以使用那天的单词的首字母 | S for Sunday M for Monday |
| 天和时间 | 天数的缩写可以与时间相结合 | Sun, 2:00 PM Sun, 14:00 |
| 数字四舍五入 | 缩写的数字单位需要删除 “:00” 。适用于时间戳, 标签上的图表, 工期等 | 8 AM 2 hr 32 min ago |
人的语言习惯
如果页面空间允许的话，当人们相互交流的时候显示日期和时间信息。
注意区分昨天或明天
如果这天是在本周内的未来几天，那么就直接显示这天（如周四）。
使用文字说明帮助理解和描述一天中的时间。比如，“商店开门时间是9:00AM-午夜”或者“明天下午提醒”
- 数据的编辑和省略
中线省略号的使用
中线省略号[• • •]一般表示数字被省略和敏感数据被隐藏，通常用于如信用卡、借记卡和社保号。
中线省略号通过隐藏部分数字来保护用户信息安全，除此之外，中线省略号也反应了material design沿中线的垂直对称性。
什么时候使用3位圆点
要标记多数数字, 如社保号码, 可以使用三位的中线省略号[• • •]。
用法：
1. 在省略号的第一个点之前置入两个空格
2. 然后在第一个点和第二个点中间置入一个窄空格（thin space），以此类推。
或者unicode字符串：
U0020,U0020,U2022,U2006,U2022,U2006,U2022,U2006（以上可理解为：空格, 空格, 点, 窄空格(thin space), 点, 窄空格, 点, 窄空格）
可行
什么时候使用四位圆点
信用卡和借记卡必须使用四位的中线省略号[• • • •]。
unicode字符串是：
U0020,U0020,U2022,U2006,U2022,U2006,U2022,U2006,U2022,U2006（以上可理解为：空格, 空格, 点, 窄空格(thin space), 点, 窄空格, 点, 窄空格, 点, 窄空格）、
可行
底线省略号的使用
底线省略号[...]一般表示省略（不显示）的文字。除此之外，它也会应用于名称或邮箱地址上面。
用法
底线省略号在unicode中为U2026。一般直接加在最后一个字母后面。
可行
当页面的内容无法显示时，会出现无数据状态。
如一个列表中没有刷新出任何内容，或搜索没有出现任何结果，这些都属于无数据状态。虽然这些状态不是典型，但为了防止用户困惑必须针对这些状态进行设计。
由于系统故障导致内容不能显示的情况，请跳转观看 应用出错。
无数据状态替代方案
启动内容
引导内容
最优匹配
无数据状态下的内容
文字标语
不能交互的图片
- 无数据状态页面的显示
无数据状态页面一般都会显示文字和图片（不能交互的）加以说明。
图片的用法：
在整个页面中，图片应该使用偏中性的颜色，既能保持在页面中不突兀的同时带有活泼的趣味。
以一种生动的方式向用户传递你的意图，比如你的应用icon。
文字标语的用法：
积极的语气
与你的品牌保持一致性
向用户传递你的意图，而不是告诉用户执行某项操作
可行
如图，在整个页面中，图片应该使用偏中性的颜色，既能保持在页面中不突兀的同时带有活泼的趣味。文字标语向用户传递你的意图，而不是告诉用户执行某项操作。
不可行
如图，由于图片过于跳跃和标语像是在告诉用户执行操作的原因，有可能导致用户去点击该图片或文字标语。
- 避免出现无数据状态
碰到以下几种情况，你可以替换掉无数据状态页面。
启动内容
刺激用户是让其停留并继续使用应用最好的方式。在用户一开始进入应用的时候，你可以考虑呈现启动内容以刺激用户继续探索该应用。
建议：
启动内容应该是能满足吸引大部分受众的内容，同时具备展示主要功能的作用。
允许用户删除或替换这些内容。
如果可以，提供个人推荐内容
图中的阅读应用为用户提供了一些受欢迎的免费书籍，这样做能够刺激用户继续探索该应用的欲望。
引导内容
如果图片和文字标语很难向用户传递你的意图，那就使用引导内容替代。
建议：
引导用户，让他们知道该怎么做。
用户有权跳过引导内容。
保持内容简短
如图，在用户使用该应用观看视频之前，页面中出现一张卡片（card）。该卡片上的内容向用户描述了该产品的特点以及优质服务。（该卡片可以被用户跳过）
最优匹配
如果用户搜索时没有匹配结果，那么是否是因为用户的输入跟查询的结果稍有不同？如果是，那就尽可能显示那些相近的内容，帮助用户找到他们向搜索的内容。
用这种方法能够避免因用户输入拼写错误导致结果不显示的情况。
最优匹配案例
提高用户输入的容错性，尽可能展示相近的结果。而不是责备用户犯错。
当应用程序无法完成预期操作的时侯就会发生错误。
一些出错的案例：
用户输入不识别
应用加载失败
多个不兼容的操作同时运行
出错类型：
应用出错
不兼容
特殊出错状态
表单
一般使用问题
同步出错
连接问题
权限
当应用程序无法完成预期操作的时侯就会发生错误，比如：
不识别用户输入
系统或应用不能运行
多个不兼容的操作同时运行
通过设计让用户更方便的输入信息能够减少出错的机会。系统应该能够识别一般的数据格式并使用提示（affordances）提高用户理解。
地址错误：
清晰地向用户传达哪里出错
告诉用户如何解决
保存尽可能多的用户输入记录
帮助用户解决检测到的输入错误。禁止提交出错的表单，如果该错误是表单提交后检测到的，那么应该清晰地告诉用户错误出在哪里，该如何解决。
输入文本字段
用户完成表单输入的前、中、后过程中都有可能出现帮助文本（Helper text）
只有在用户输入信息之后才有可能出现错误文本（error text）。当用户输入错误信息的时候，帮助文本会转变为错误文本提醒用户该地方出错。
尽量减少表单中文本的数量。因为不是所以的表单都需要帮助和/或错误文本来引导用户。
具体说明：
表单字段与底部的错误文本之间应相隔16dp。
输入文本字段的案例
输入出错后出现的错误文本
表单提交
提交按钮应该默认启用。
当表单提交失败后会标注出出错的地方，如果这些出错的地方没有被解决，那么提交按钮将被禁用。
颜色
错误文本的颜色应与产品调色板（颜色调性）保持一致。这里建议你使用一个对比色作为错误文本的颜色，比如像红色或橙色之类的暖色。
因为错误文本需要让用户关注到，所以选用与背景颜色相差大颜色易于被用户发现。
webaim.org网站提供了网站颜色对比度检查工具。
浅色背景下的字体
错误文本字体大小：Roboto Regular 12sp
提示和帮助文本字体：#000000和38%透明度
图中是浅色背景下的各文本状态：提示文本、错误文本、帮助文本、帮助文本作为错误文本
深色背景下的字体
错误文本字体大小：Roboto Regular 12sp
提示和帮助文本字体：#FFFFFF和50%透明度
图中是深色背景下的各文本状态：提示文本、错误文本、帮助文本、帮助文本作为错误文本
帮助和错误文本
帮助文本案例
错误文本案例
帮助文本案例
错误文本案例
帮助文本以及帮助和错误文本
输入和错误文本
整个区域高度：64dp
输入文本的上内边距（padding）：16dp
输入文本的下内边距：8dp
错误文本的上、下内边距：4dp
文本标签出错
文本标签（label）和输入文本案例
文本标签和错误文本案例
提示文本/标签和输入、标签和错误文本的案例
文本标签说明
整个区域高度：80dp
标签文本的上内边距：8dp
输入文本的上、下内边距：8dp
错误文本的上、下内边距：4dp
文本字段输入-字符或字数超过/低于限定数值的情况
在用户输入信息的过程中提供字符计数器以便用户了解当前情况。你也可以考虑不显示该计数器，但如果用户输入接近字符限制的时候应该马上显示供用户了解。
计数器的字体采用的是12sp大小的Roboto Regular
计数器有16dp的下内边距
单行输入和字符计数器
单行用户输入与计数器的案例
计数器与单行用户输入超出限值后出现错误文本的案例
多行输入和字符计数器
多行用户输入与计数器的案例
计数器与多行用户输入超出限值后出现错误文本的案例
图中以下状态的案例：单行输入的标签和用户输入文本，单行输入的标签和错误文本，多行（这里原文以及图中都写错，“单行”改为“多行”）输入的标签和用户输入文本，多行输入的标签和错误文本。
文本字段输入
整个输入区域高度：88dp
单行输入的标签的上内边距（top padding）：16dp
单行输入文本字段的上、下内边距（top,bottom padding）：8dp
计数器的上内边距：8dp
数值冲突
在用户输入过程中或输入完毕后显示与规定数值不相符的错误信息。
如果两个或两个以上输入的字段发生不兼容的情况：
在文本字段中，指出需要修改的地方。并在底部添加一个错误信息。
在表单或屏幕顶部显示需要修改的地方以及一些额外需要注意的信息。
表单提交后的错误检测
重新加载表单并页面置顶，在页面顶部显示汇总的错误信息。表单的错误信息会随着用户的修改而消失。
图为一个表单
提交表单之后检测到的错误
未填写完的表单
显示表单未填写的错误以便告诉用户他们遗漏了信息没有填写。如果在用户填写过程中你没有能力检测出用户是否有遗漏字段没有填写的话，那就等用户提交表单之后检测并告诉用户结果。
表单提交前出现多个错误
用户填写表单过程中逐个显示出错信息。
图为一个表单
一个未填写完的表单案例
单行列出错误
单行列出错误案例
应用出错跟用户输入没有关系。
应用出错的一般情况
当应用发生错误，该应用需要显示加载图标直到出现错误信息为止。
功能不能使用也许是因为UI被禁用。举个例子，如果一个按钮因为禁用原因导致不显示，那么你需要使用文本想用户解释它为什么不显示。但是，不是每个错误发生都需要弹窗提醒。
如果可能的话，给你的用户一些指示帮助他们解决这些出错的问题。
警告对话框：应用反馈关于不能正常运行的错误。
如图，snackbar里面反馈了一个不是很重要的系统错误。Snackbar出现的时间很短暂，所以不能使用它来显示一些关键、重要的错误。
同步出错/加载失败
当应用同步失败或者内容无法加载的时候，应尽可能引导用户解决问题，或引导其使用应用的其他功能。
屏幕/内容加载失败的无数据状态
同步提示
连接
当系统连接失败的时候，应尽可能引导用户解决问题，或引导其使用应用的其他功能。
如果合适的话，提供一个链接来帮助用户完成他们的任务（只提供能真正帮助用户链接）。举个例子，如果你不能保证用户点击后能够恢复正常的话，就不要提供例如“再试一次”的选项。
Snackbar中的“再试一次”选项
图中页面只有在联网的时候才可能出现的无数据状态
不兼容
当用户试图运行可能产生冲突的操作时，如在飞机模式中打电话或在受限制的工作帐户中截图时，会出现不兼容的错误提示。通过提示防止用户继续进行下去。此外需要明确的一点是，当这些错误被触发并不意味着是用户的错。
不兼容的一般情况
阐明错误产生的原因。
例如，在一个受到限制的模式下屏幕截图和高级功能不允许使用。
Snackbar+特殊模式提示
离线状态
当用户处于离线状态但仍然执行任务的时候，显示一个持久，不突兀的提示提醒用户当前处于离线状态。
案例：
在飞行模式下打电话
离线时播放音乐
Snackbar
提示该设备正处于飞行模式
请求许可
如果你的应用进行下一步动作的时候需要请求用户许可。需要注意的是该请求是应用流程中的权限许可，而不是像处理错误那类的请求。
如果该请求必须在第一次运行应用之前出现，那么你应该考虑把它加入到你的应用首次启动的体验中去。
案例：
应用的权限发生改变
应用内购被禁止
对话框
Android
指纹检测可用于设备解锁，应用登录，以及为Google Play和一些第三方应用内购提供身份验证。
通过指纹验证对话框进行身份验证。
指纹识别不是唯一保护PIN码或密码安全的解决方案。其替代方案还包括用户的帐号密码、应用PIN码和设备证书。
什么时候需要使用
打开应用后
应用内购买流程中
应用设置中
登记后
Icon
指纹icon大小：24dp
圆形icon大小：40dp
获得用户同意使用指纹识别作为身份认证的方式之后，才能让应用调用指纹识别。
什么时候邀请用户尝试指纹识别为妥：
打开应用后
应用内购买流程中
应用设置中
登记后
打开应用后
应用内购买流程中
应用设置中
在应用设置中提供激活指纹识别的选项。
登记后
登记指纹以后，每当用户需要验证的时候提供指纹识别对话框。
用户可以为登录或购买验证设置指纹识别。
当用户操作需要身份验证时，在屏幕上显示指纹验证对话框提供认证。
标题（Title）
使用标题来描述所执行的动作，例如“登录”。需要注意的是该标题中不要用来描述“指纹”相关信息。
次级文本（Secondary text）
次级文本的措辞应该与安卓设置保持一致，如“确认指纹（Confirm fingerprint）”。
你也可以结合用户操作进行描述，比如“确认指纹并完成购买”。
确认指纹识别对话框
对话框的左、右内边距（padding）：24dp
对话框的上内边距：24dp
标题的下外边距（margin）：20dp底缘
次级文本的下外边距：28dp
指纹icon的右外边距：16dp
触摸传感器（Touch sensor）的高度：40dp
触摸传感器描述文本的上、下内边距：12dp
按钮容器高度：52dp
按钮容器的下内边距：8dp
按钮高度：36p
按钮的左、右内边距：8dp
默认状态
请求用户将手指放在传感器上。
默认状态请求用户将手指放在传感器上。
成功状态
指纹完成验证后，对话框内的信息和指纹icon会发生变化来提示用户核对成功。
说明:
使用你应用的主色调作为成功状态下的文本和icon颜色，或者使用青绿色（Teal）500（#009688）
注意事项：
避免同时显示两个成功状态
避免默认和成功状态间的转变过于夸张
指纹完成验证。
失败状态
当指纹验证失败时，使用附加（或不附加）文字说明的出错icon提示用户验证失败和提醒用户再次尝试。
说明：
使用你应用中的某个颜色作为失败状态下的颜色，或者使用深橙色（Deep Orange）600 (#F4511E)。
注意事项
避免默认和失败状态间的转变过于夸张
指纹验证失败
退出
允许用户关闭对话框。比如，“取消”按钮。
提供替代的认证方法
指纹不应该是唯一的认证方式。向用户提供替代的身份验证方法，如：
用户帐号密码
应用PIN码
设备证书
用法和尺寸
指纹icon使用标准系统icon大小，24dp，以及40dp大小的圆形。
40dp圆形
24dp系统icon
默认icon
出现该icon的时候就是用户可以使用指纹验证的时候。
说明：
圆形的背景颜色：#607D8B
放置于白色背景（对话框）之上
默认icon
默认icon和对话框
自定义颜色icon
圆形的背景颜色可以自定义颜色，但前提是圆形的背景颜色应该与指纹icon中线的颜色保持一定对比度。
各颜色对比下的icon。
不可行
切勿使用多种颜色。
UIs和浅色背景
使用深色圆形背景的指纹icon。
说明：
颜色：#FFFFFF
不透明度：100%
浅色背景上，深色圆形背景的指纹icon。
UIs和深色背景
使用浅色圆形背景的指纹icon。
说明：
颜色：#000000
不透明度：54%
没有圆形背景的指纹icon
去除指纹icon的圆形背景以适应不同环境下指纹icon的显示情况。
没有圆形背景的指纹icon
对话框中没有圆形背景的指纹icon
不可行
不要倾斜或扭曲的指纹icon
当用户在下一步之前需要认证他们身份的时候，系统需要发送重新认证的请求。
重新认证的用法：
防止未经授权查看敏感信息
防止未经授权的购买行为
当密钥过期，需要用户确认身份
重新认证对话框
另外，如果一个用户忘记了指纹认证，你可以让用户使用他们的备用密码，并提醒他们下一次的使用指纹认证。
请求用户使用备用密码
