荣超：这个指南中的实践案例和组件可以帮助用户快速直观地了解他们在你的应用中能做些什么，想知道谷歌的设计团队是如何做有效用户引导的，看这个准没错！
相关教程：《想提高可用性？看谷歌MATERIAL DESIGN 的官方教程是怎么做的！》
以下指南旨在：
为了确保用户体验、尊重用户意愿，这些建议会涉及到目标、时间、音量和频率。
前七天
接下来30天及以后
“用户引导”帮助用户了解、使用应用。
“用户引导”的内容应简洁明了，同时需要有效提高用户对应用的使用。
用法
你设定的“用户引导”方案应该考虑到对应用熟悉程度不同的各类用户，从而根据不同用户设立不同目标。
用户引导从应用商店开始，结束于用户第一次使用应用
设计引导页时需要考虑好前后页面间的关系。
图为第一次运行应用的用户引导（只显示给第一次打开应用的用户）
Material design包括以下三种引导模式：
自定义
允许用户自定义他们的选择。
快速入门
直接在应用中开始引导。
利用简洁的自动轮播页（或动画）突出使用该应用的三个好处。
适用什么类型的”用户引导“取决于你的应用是否使用通用，可识别的UI风格和设置的方便程度。
自定义模式
自定义模式允许用户通过一系列简短的操作来自定义他们首次运行应用的体验。
这种模式是暗示引导，它可以给予用户一种控制感和让用户从页面中获取到自己的兴趣。
△ 登陆页
△ 自定义模式
提高正确的选择
你提供给用户的选择将会直接影响你“用户引导”的成效。
选择需要：
有意义且引人关注
提供对用户体验有利且有显著影响的选项。通过暗示教育用户如何与UI交互。
用户自己选择需要的内容利于后续产品体验。
了解用户，检查他们stream的频率，但不能对体验造成影响。
问你不知道的事
不要询问可以从正常产品使用中就能获取到的用户行为偏好。
很难从用户正常使用产品过程中得知用户想要的内容。这时候询问用户偏好是非常有价值的。
不要要求用户做出选择，因为通常用户选择完后很少会特意返回去修改这些选择。
保持简短
在单屏中限制选项的数量，或者使用多屏来呈现这些选项（这会让用户感觉每屏的内容相互关联）。
每屏应少于十个选项。
单屏展示自定义选项
不可过多屏展示自定义选项
在设计“用户引导”时，请考虑用户引导的过程如何与用户首次运行应用的体验相连接。用户引导过后，保证用户能够按照刚刚的指引进行实际操作。
围绕“你的应用能做什么”来设计“自定义选项”页面。专注于内容消费的应用可能会询问用户感兴趣的主题，而那些需要订阅的应用可能会询问用户要绑定哪些主题。
一些常见的关于“自定义选项”的设计模式:
△ 绑定列表
△ 宫格视图
△ 列表
在快速入门模式中，用户直接到达没有显示任何用户引导模式的界面中（除了登录和设置）。
快速入门模式：
最佳案例
你的界面应该鼓励用户交互，而不是将用户停留在空白屏幕上。
可提供用户启动的选项：
不可不要让用户无所事事。
提供教学
如果大多数用户在引导页之后还不清楚如何使用应用的话，那在界面中提供提示UI供用户选择学习如何使用应用。
提供机会让用户学习使用应用：
不要强迫用户进入学习。
提供优先级第一的关键操作
提供与用户参与度（头七天）最密切相关的操作。或者，使用提示的方式介绍用户未使用过的应用的核心功能。
△ 推动用户进行优先级第一的关键操作
△ 不要让用户无所事事
突出用户利益的引导模式里面包含有简短的轮播页，或者是动画。它突出了用户使用该应用的三大好处。
选择正确的用户利益显示
在突出用户利益模式中只显示不超过三个关于用户的利益说明。这三个页面应将应用和用户个人利益联系在一起进行描述，而不是命令用户做什么或者只在阐述应用有什么功能。
在确定要呈现哪些好处时，请先考虑:
集成选项
轮播页最多展示三幅插图，并每隔2-3秒自动切换插图。第一屏需要比其他两屏页面的停留时间更短，这样做是为了让用户清楚当前屏幕是个轮播页而不是一个单一的页面。如果用户触碰到页面，那轮播功能应该被禁用。
显示 “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
本小节结束。想继续学习的同学记得转微博哟。
官方译文：
学习笔记：
素材篇：
实战教程：
【网页设计 原创文章 投稿邮箱：yuanhttp://www.yinxi.net/】
================明星栏目推荐================
优优教程网： yinxi.net 是巅云旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。
设计导航：国内人气最高的设计网址导航，设计师必备：http://www.yinxi.net/
