2017 Material Design完整中文版：第七章节《学习与沟通》
【站酷首发】10大章79小节重译！半年心血只为让更多人正确认识、学习MD。由于单篇文章字数限制，全文将分为N篇文章陆续发布。
发展和传播指南中包含的最佳实践案例和组件可以帮助用户快速直观地了解他们在你的应用中能做些什么，其中包括用户引导、特性探索和手势学习。
以下指南旨在:
通过在相关情景中介绍应用的特性和功能来帮助用户从中获取更多的价值
改善应用的参与度和留存率
为了确保用户体验、尊重用户意愿，这些建议会涉及到目标、时间、音量和频率。
前七天
用户引导：自定义模式
用户教育：如何使用应用的基础指导
接下来30天及以后
特性探索：用户未尝试过的特性和功能提示
“用户引导”帮助用户了解、使用应用。
“用户引导”的内容应简洁明了，同时需要有效提高用户对应用的使用。
你设定的“用户引导”方案应该考虑到对应用熟悉程度不同的各类用户，从而根据不同用户设立不同目标。
| 用户场景 | 欢迎及指引目标 |
用户已经安装了应用, 不需要查看更多的 营销方面的信息 |
欢迎用户并激发他们的兴致 |
| 用户可能急于尝试应用而不阅读使用说明 | 暗示或明确告诉用户如何使用应用 |
| 用户还不熟悉应用UI或准备去了解它 | 刺激用户行动, 提高用户参与度和头七天的留存率 |
用户引导模式
用户引导从应用商店开始，结束于：
第一次运行应用（频率）
或者，用户第一次使用应用
设计引导页时需要考虑好前后页面间的关系。
图为第一次运行应用的用户引导（只显示给第一次打开应用的用户）
Material design包括以下三种引导模式：
1.自定义
允许用户自定义他们的选择。
2.快速入门
直接在应用中开始引导。
3.突出用户利益
利用简洁的自动轮播页（或动画）突出使用该应用的三个好处。
适用什么类型的”用户引导“取决于你的应用是否使用通用，可识别的UI风格和设置的方便程度。
| 自定义 | 快速入门 | 突出用户利益 | |
| 什么时候使用 | 1.可以自定义UI；2.你的应用存在设置和许可需求 | 你已确定好了如何提高用户参与度（第一次交互）和留存率（头七天） | 1.应用提出新需求的解决方案或提供新的用户“福利”；2.发布新用途或应用UI更改 |
| 什么使用不使用 | 1.应用提出新需求的解决方案或提供新的用户“福利”；2.发布新用途或应用UI更改 | 应用提出新需求的解决方案或提供新的用户“福利”； | 1.你应用UI和给予用户的“福利”毫无亮点，跟其他应用无区别；2.应用UI没有大改 |
| 组合 | 自定义模式和突出用户利益模式不能组合在一起 | 包括第一次运行前的设置 | 1.突出用户利益模式和自定义模式不能组合在一起；2.在应用设置后或作为用户引导的一部分 |
自定义模式允许用户通过一系列简短的操作来自定义他们首次运行应用的体验。
这种模式是暗示引导，它可以给予用户一种控制感和让用户从页面中获取到自己的兴趣。
登陆页
自定义模式
提高正确的选择
你提供给用户的选择将会直接影响你“用户引导”的成效。
选择需要：
有意义且引人关注
提供新信息
简短
有意义且引人关注
提供对用户体验有利且有显著影响的选项。通过暗示教育用户如何与UI交互。
可行
用户自己选择需要的内容利于后续产品体验
不可行
了解用户检查他们stream的频率但不能对体验造成影响
问你不知道的事
不要询问可以从正常产品使用中就能获取到的用户行为偏好。
可行
很难从用户正常使用产品过程中得知用户想要的内容。这时候询问用户偏好是非常有价值的。
不可行
不要要求用户做出选择，因为通常用户选择完后很少会特意返回去修改这些选择。
保持简短
在单屏中限制选项的数量，或者使用多屏来呈现这些选项（这会让用户感觉每屏的内容相互关联）。
每屏应少于十个选项。
可行
单屏展示自定义选项
不可行
过多屏展示自定义选项
在设计“用户引导”时，请考虑用户引导的过程如何与用户首次运行应用的体验相连接。用户引导过后，保证用户能够按照刚刚的指引进行实际操作。
设计
围绕“你的应用能做什么”来设计“自定义选项”页面。专注于内容消费的应用可能会询问用户感兴趣的主题，而那些需要订阅的应用可能会询问用户要绑定哪些主题。
一些常见的关于“自定义选项”的设计模式:
绑定列表
宫格视图
列表
在快速入门模式中，用户直接到达没有显示任何用户引导模式的界面中（除了登录和设置）。
快速入门模式：
使用户能够快速入门应用的核心功能
提供优先级第一的关键操作
还可以提供可选途径去了解更多信息或帮助请求
最佳案例
让用户动起来
你的界面应该鼓励用户交互，而不是将用户停留在空白屏幕上。
可行
提供用户启动的选项
不可行
不要让用户无所事事
提供教学
如果大多数用户在引导页之后还不清楚如何使用应用的话，那在界面中提供提示UI供用户选择学习如何使用应用。
可行
提供机会让用户学习使用应用
不可行
不要强迫用户进入学习
提供优先级第一的关键操作
提供与用户参与度（头七天）最密切相关的操作。或者，使用提示的方式介绍用户未使用过的应用的核心功能。
推动用户进行优先级第一的关键操作
不要让用户无所事事
突出用户利益的引导模式里面包含有简短的轮播页，或者是动画。它突出了用户使用该应用的三大好处。
选择正确的用户利益显示
在突出用户利益模式中只显示不超过三个关于用户的利益说明。这三个页面应将应用和用户个人利益联系在一起进行描述，而不是命令用户做什么或者只在阐述应用有什么功能。
在确定要呈现哪些好处时，请先考虑:
应用能够解决的问题
应用能为用户带来最大的好处
应用的"牙刷功能" （意思是一项用户每天都会使用一或两次的功能）
集成选项
轮播页
轮播页最多展示三幅插图，并每隔2-3秒自动切换插图。第一屏需要比其他两屏页面的停留时间更短，这样做是为了让用户清楚当前屏幕是个轮播页而不是一个单一的页面。如果用户触碰到页面，那轮播功能应该被禁用。
显示 "Get Started" 按钮并循环播放动画，直至用户点击 "Get Started" 按钮进入应用。
轮播页允许用户使用滑动手势，使用滑动手势可以向前或向后滑动查看页面。
轮播图自动播放。按钮和分页导航的位置是固定的。
视频
突出用户利益模式中最复杂的版本就是“视频”。
视频中包含 "Get Started" 按钮，但没有分页导航。
视频
最佳案例
保持视觉的连续性
通过调整字符、环境、样式、排版和按钮颜色来保持视觉的连续性。
可行
在整个体验中使用一致的视觉效果和颜色，并通过固定的按钮和分页导航来统一构图，进而创建一个统一的用户引导（叙事）
简化
简化传达一个概念所需要素的视觉效果。
可行
隐喻：插图非常直观的描述了文件保存到云端
不可行
整幅图没有焦点
不要显示UI
如果用户从没有使用过该应用，则不要显示应用相关的UI。首先你需要显示应用提供给用户好处。
你可以在稍后的页面中显示特定UI的教学。
可行
这幅插图向用户传达了应用提供给用户的好处
不可行
显示实际应用的UI会让用户疑惑图像是插图还是可交互的元素
设计用户引导的时候需要考虑到用户“第一次”的应用体验。引导页过后正式进入应用后，用户所看见的界面操作应该跟之前引导学习的内容相关联，让用户能够快速上手。
设计
突出用户利益模式的设计应该以一种称赞的情感进行描述。其中的描述最好使用文字表达，而不是图像。
1:1宽高比的插图适用于不同平台上的屏幕。确保背景色和文本颜色满足可访问性（无障碍）的最小对比度标准。
移动和平板端竖向显示
居中对齐的文本和交互元素放置在插图之下。
移动端：竖向显示
平板端：竖向显示
移动和平板端横向显示
左对齐的文本和交互元素放置在插图的右侧，并垂直居中。
移动端：横向显示
平板端：横向显示
桌面端
将插图、文本和交互元素放在一个居中对齐的卡片中。在卡片旁边显示“上一页”和“下一页”按钮，并在它的下方放置分页指示器。
桌面端
可穿戴和TV设备上的启动页使用的是不同的交互方法，所以需要以不同的方式进行设计。
各平台尺寸标准
移动和平板端上竖向显示
文本和UI在页面中居中对齐。屏幕底部的上方生成24dp内边距（padding）。
1.大标题：24sp，行距32sp
2.副标题：15sp，行距24dp
3.32sp行高
4.按钮顶部到文本中心的距离：56dp（空间只允许存在1-3行文本）
5.垂直方向上24dp内边距
移动和平板端上横向显示
文本和UI对齐至插画的左边缘，并垂直居中
1.大标题：24sp，行距32sp
2.副标题：15sp，行距24dp
3.32sp行高
4.按钮顶部到文本中心的距离：56dp（空间只允许存在1-3行文本）
5.垂直方向上24dp内边距
桌面端
1.大标题：24sp，行距32sp
2.副标题：16sp，行距24dp
3.32sp行高
4.按钮顶部到文本中心的距离：56dp（空间只允许存在1-3行文本）
5.图像距离页码圆点：24dp
6.图像距离箭头：48dp
基于用户场景，通过向用户介绍应用的新特性和新功能来体现应用价值及鼓励用户回访。
单步操作
提示用户尝试那些单步操作就能够完成的功能，如在地图应用中保存位置。
轻触目标
线索文本
多步骤操作
提示用户尝试那些需要多步操作才能够完成的功能，如在照片应用中打开自动备份功能。
指引流程
在合适的使用场景下向正确的用户提供功能提示，这会对用户体验产生非常积极的影响。当我们在错误的时间下向错误的用户提供提示的话，反而会令用户恼怒。
目标
显示与特定用户相关的功能。
| 针对正确的用户 | 优先考虑正确的功能 |
| 提示用户没有尝试的功能； 避免向临时用户展示高级功能； 向所有用户展示通用功能，如撤销发送的邮件。 |
功能发现应该持续显示一段时间； 优先考虑与用户场景相关的功能，而不只是新的功能。 |
触发
提示显示的时间适当。
| 打开应用时不要出现 | 关联使用场景 | 自然停顿 |
| 用户很少会一打开应用就去寻找某个功能的提示帮助，一般是在打开应用后需要采取某个操作后才有可能需要。 避免功能提示显示打扰用户。 |
当功能提示能够帮助用户更好地完成他们正在采取的行动时才使用功能提示。 例如，让用户知道他们只有在添加完图像后才可以裁剪图像。 |
如果无法做到在特定操作触发时显示功能提示的话，那就在用户体验过程的自然停顿期间显示它们。 例如, 在邮件应用中，等待用户读取或发送消息期间显示功能发现提示。 |
数量和频率
用户与信息进行交互表示用户接收了这条信息并觉得这条信息有用，同时用户会期待下一条信息的到来。
| 数量 | 频率 |
| 限制特性探索的消息显示。举个例子，一个对话中不要超过一个消息显示。 | 如果用户关闭了一条消息，则在往后较长的时间内不再显示这条或类似的消息。 如果用户接受消息，这是一个很好的信号，表明用户认为这条消息是有用的。在往后较短的时间内可以显示类似的消息。 |
特性探索场景
特性探索场景和应用UI都有着特定的material设计组件。
| 特性探索场景 | 设计组件 |
| 一步完成操作提示 | 点击目标，提示文本 |
| 需要多个交互才能完成操作提示 | 引导流程 |
触发目标
特性探索提示将用户注意力集中在一个特定的UI元素上。它包含一个由圆形图形指示的触发目标，同时由一个不同于背景颜色的大区域包围。
提示包含单个操作，不存在其他操作。
用户可以通过使用滑动手势或点击提示区域外的地方来取消提示。
移动端
提示需要适配不同的屏幕位置和显示大小。
在移动端中，触发目标的位置高于其他UI元素（Z轴），并且有可能占据屏幕整个宽度。
当提示操作的触发目标位于屏幕顶部或底部，大小在88dp以内（不包括状态和导航栏）时，将触发目标直接放在提示操作的顶部。
当提示操作位于屏幕中心时，提示的背景应按如下方式进行调整：
触发目标位于屏幕中心的右侧：提示背景应向左偏移20dp
触发目标位于屏幕中心的左侧：提示背景应向右偏移20dp
如果触发目标位于屏幕中心，则根据语言的不同将提示背景自动向左或右偏移。
桌面端和平板端
在大屏上，特性探索提示的位置通常仅限于触发目标所在的面上，如卡片。触发目标就是可触发面的大小。
对于不在屏幕中心的触发目标，以面的中心为准偏移提示背景。
如果触发目标出现在高小于280dp和宽360dp的面上时，允许触发目标和提示背景扩展到该面的边缘之外（在一个更高的高度（Z轴））。
触发目标在88dp以内且位于面的边缘时，应将提示背景置于以目标为中心的位置。
对于位于屏幕中心的触发目标，将提示背景的区域偏移20dp。
对于其他触发目标，请将提示背景放在适合于其他屏幕元素的位置。
对于位于顶部/底部 (144dp) ，或者左/右 (200dp) 屏幕边缘的触发目标，应将提示背景置于以目标为中心的位置，并放置在其他元素之上。
位于小的面上的顶部/底部 (144dp) 或左/右 (200dp) 屏幕边缘之外的触发目标，可能无约束的在所有面上使用提示。
位于屏幕中心右侧的触发目标：提示背景应偏移20dp 到左侧
位于屏幕中心左侧的触发目标：提示背景应偏移20dp 到右侧
如果触发目标位于屏幕中心，则根据语言的不同将提示背景自动向左侧或右侧偏移
触发目标可以使用你应用或工具栏的主色。
触发目标的背景使用96%的不透明度。
触发背景的颜色使用主色
触发背景的颜色也可以使用强调色
动效可以帮助用户了解目标触发的来源。
出现：
触发动效使用标准material运动曲线。
停滞：
停滞时，高亮操作先增长10%（1s），然后收缩（似心脏跳动）。当它达到最大尺寸时引发波纹动效。
交互：
点击高亮操作展开目标，同时提示淡出（ease out）。
取消：
点击目标外部取消提示（收缩和淡出动效）。
动效：出现、停滞和交互
动效：出现、停滞和取消
引导流程
引导流程通过多个步骤引导用户完成任务。
引导流程
引导流程可以包含多达3个设计组件。你需要在特定的任务下选用合适的组件。
1. 触发目标
触发目标通过突显用户利益来引入任务。
2. 波纹效果
波纹效果引导用户进行后续步骤。
波纹的颜色应与触发目标的颜色相匹配。
3. 完成toast
完成引导流程后需要提供一个供用户确认已完成任务的toast。
其中包括返回用户操作。
触发目标用于引入引导流程
波纹效果用于后续步骤
Toast用于确认用户完成的任务
提示文本
对于那些很简单的操作，请使用提示文本代替触发目标。
提示文本案例
手势指导可以帮助用户理解与具体元素的交互方式，例如卡片（第一次展示）。
局部页面
提示用户执行作用于页面中某一部分的手势，例如滑动卡片。
“提示动画”显示了在执行所指示的手势操作时卡片是如何移动的
整个页面
提示用户执行作用于整个页面的手势，例如捏合放大。
Snackbar使用文本来描述tab间切换的滑动操作。
不是说用户第一次进入应用时就提供手势指导，而是在用户需要的时候提供。手势指导应简短且与用户使用场景相关联，它能够帮助用户（以前不知道这样做）学习与应用中元素交互的方式。
无论手势影响页面中某一部分还是整个页面，都使用相似的目标和触发指导。
| 目标 | 触发 |
| 仅向未使用过某手势的用户显示手势指导 | 手势指导出现在： 1.在第一次运行应用的时候 (频率) 2.如果用户在后面的对话中没有执行该手势 3.在对UI进行重大更改后 如果应用中某一手势是用户体验的核心，那么在一开始某个用户使用场景中就要呈现出来。 如果某个手势并不影响用户体验，那么在相关的用户场景过后再显示手势指导。例如，在Chrome中滑动工具栏可以切换tabs。 |
数量
限制应用和UI中手势指导提示的数量。
如果某个手势对用户体验非常非常重要，那么就在用户首次运行应用的时候显示不超过两次提示。
频率
对于大部分手势提示只需显示一次。
如果手势对用户体验非常非常重要，请在不同的对话中显示不超过两次。
设计
一旦检测到用户轻触，手势视觉引导应暂停然后消失。用户正确使用所指导的手势是取消演示UI的唯一方法。例如, 只有用户向左或向右滑动时才会关闭应用于卡片中的滑动手势演示。
描述
演示手势
设计
作用于整个页面的手势需要使用Snackbar向用户解释该手势的作用。
当用户点击屏幕时，页面内容需要返回到其默认状态同时移除手势视觉引导。除非用户与元素进行交互（如点击按钮），否则一直显示底部sheet。
描述
