作者
：cheka hou
转自知乎专栏
：Cheka的产品笔记
专栏地址：https://zhuanlan.zhihu.com/c_105667445
互联网产品，尤其是移动互联网产品，都必须有门槛低，上手快的特性，这是因为，移动互联网产品的客群是2C（customer）而非2B（business），以用户自发性使用行为为主，产品可替代性强，用户粘度不高。如果用户下载安装APP后，无法通过几分钟的尝试搞明白产品提供的主要功能和操作方法，那么这个应用离弃用也就不远了。
一个能让用户快速上手的APP，除了设计符合产品逻辑、符合用户操作习惯、足够简洁之外，层次分明不失趣味性的引导设计，也是非常重要的。所以在这篇文章中，我将重点介绍使用引导的设计模式。
1 全局预览
全局预览往往在引导页阶段来完成，应用第一次安装启动后，或者在用户完成有效账户注册前的每一次启动，都会进入引导页，通过左右滑动来浏览奇数量的引导页。
全局预览通过应用程序逐屏逐功能的最终邀请（左右滑动），完成对应用程序的最终探索。
Doozyrama
是此模式很好的例子，包含了现阶段流行的引导页的典型设计元素：简洁的文字介绍、生动的扁平化插图、左右滑动切换和一个明确的退出标志：
再比如
Google Analytics
：
最佳实践
：
1. 全局预览应用于强化或突出显示关键或核心功能；
2. 全局预览模式一般从用户目标角度出发，要尽量保持简短，并辅以有力的视觉引导。
2 交互教程
交互教程，指通过引导用户进行交互动作，来掌握应用操作方式的一种引导设计。当用户第一次打开应用，或浏览某个页面时，交互教程会自动显示，并通过图文说明、箭头指引和交互触发，帮助用户更快上手APP。有趣的交互教程设计可以有效地提高用户体验。
同时，为了让交互教程的引导更加通俗易懂，交互教程往往采用半透明蒙版+操作说明的设计模式。在应用主屏幕上，用一个带有提示的半透明层蒙住下层主屏幕内容。如
千牛工作台
和
analytics
（一款数据分析展示应用）：
一款应用，如果只有难用的功能和丑陋的界面，那么会马上被用户删除，由新的同类应用取而代之。相反，如果在用户第一次进入APP主界面时，应用就展示出色的交互教程设计，这样可同时起到功能导航和提升用户体验的双重效果，如
VUE
和
WPS Office
：
VUE是视频制作利器，WPS Office是白领的移动化办公工具，前者注重设计感和逼格，后者注重商务和办公氛围浓厚，因此整体设计偏简洁。
而
宝宝树
和
医护到家
更加注重趣味性：
宝宝树的用户以年轻妈妈为主，重点发力社区；医护到家是移动看病问诊工具，涵盖人群更是多样化，但无论怎样，二者传达的理念都是：人性化、亲民、拉近应用与用户之间的距离、用户与用户之间的距离，以及用户与医疗服务提供者之间的距离。
趣味性的设计，会为应用带来更多的印象分，从而提高用户的探索欲望和用户粘性。
3 弹出框
弹出框，英文Popup Box，全称“弹出式窗口”，与“固定式窗口”相对应，指的是通过应用自身触发或者用户交互动作触发的，悬浮于原有页面上方的窗口式设计，触发后，用户可对其进行关闭，因此这是一种非全局的，只存在于特定状态下的设计，也因为这种特点，弹出框在最初经常被用于广告提示。
随着设计模式越来越规范，人们发现，弹出框的人机交互模式非常适合用于应用本身的提示和引导，逐渐普遍在互联网和移动互联网产品中普及。典型的设计是：弹出框口+半透明蒙版背景（增强视觉对比）。
对于现在的移动APP来说，对话框是一种最常见的引导设计。同时，也正因为无处不在，它也是最容易被忽略和摒弃的，我们可以用弹出框引导来实现：
消息
/内容提示
。如
Pregnancy+
和
宝宝树孕育
：
问题
/错误提示
。如
icon
和
Wolters Kluwer
：
内容详情
。如
阿里旅行
（已更名为飞猪）和
淘宝
：
操作判断
。如
频果单词
（右图）：
最佳实践
：
1. 保持弹出框文案简短；
2. 确保弹出框内容可以在应用其他功能模块中访问到。
4 对话框
对话框，英文Dialog Box，提起它时脑海里就浮现“聊天对话框”或“消息对话框”的样式，这是一种次要窗口，不能最大最小化、不能改变形状，只能用于简单的人机交流，如消息提示等。
对话框用于引导时，可以显示在屏幕任意位置，并且比弹出框更贴合操作情景。如
千牛工作台
和
知乎
：
点击页面内任意区域，即可关闭对话框。再比如
Wave Analytics
和
Way of Life
，后者更是在一个页面内，可同时存在多个提示：
最佳实践
：
1. 提示尽可能靠近指向对象；
2. 内容要简短；
3. 开始触发交互动作后（如触碰屏幕），提示要自动消失；
4. 对话框整体颜色要和页面有所区分，对比鲜明。
5 空状态页面
空状态页面，指的是内容为空的页面，常见于需要用户自己进行初始化配置、创建内容等的应用中，典型场景是用户刚安装应用并开始使用。当用户完成配置、创建内容后对“空状态”的页面进行覆盖。
而空状态页面引导，就是在空状态页面中加入引导式设计，增强用户体验。而空状态引导也被称为初次使用引导。
空状态页面引导一般由一种或几种元素构成：包括文字提示、表意插图、触发按钮等。这些元素往往将固化在屏幕设计中，并一直存在，直到用户执行交互操作，或被其他内容覆盖。许多笔记类应用，都是用初次使用引导去吸引用户添加内容。
我把空状态页面引导设计分为两种：被动型引导和主动型引导。
先介绍被动型引导。这种设计以空状态界面为典型应用，如
Change
和
Finger
：
为什么说它们是被动型引导，因为这个页面的提示信息对用户来讲，与其说是引导，还不如说是提醒，用户无法通过当前页面进行任何有效的相关的交互。Change只用文字告诉了用户当前页面状态（可能更大的作用是，页面上有这几个汉字，就不会让用户觉得当前页面出了什么bug，仅此而已）。
下面的例子，虽然增强了解释，但是仍然属于被动型引导，比如
维基百科
和
Foursquare
：
二者除了文字提示当前页面是“空状态”外，还进行了补充说明。不过维基百科的这句“保存页面以便日后查 看，即便在离线时”，充满着生硬的直译的倒装…
主动型引导的特点在于：在提示用户当前页面状态后，给出用户改变当前页面状态的入口，比如添加内容或新增内容，比如采用圆角矩形按钮入口的
虾米音乐
和
Vimeo
：
以及文字入口的
美团
和
Price Tag
：
需要注意的是，这些触发新页面的文字入口，文字颜色要和主题色保持一致（主流方案），这也是遵循用户习惯的最优选择。
有的主动型引导做成了悬浮圆形按钮样式的全局引导，即哪怕用户进行了内容覆盖，引导按钮依然存在。如
小时光
和
2Do
：
或者直接将“+”做到导航栏中，比如
种子习惯
和
New
：
再举两个反例，即没有任何提示的空状态页面，如
Replica
（左下图），进入该菜单页后，作为一个用户，我会怀疑：这个页面是不是卡住了？是不是网络不好没加载出来？再等等看？以及
开心夺宝
，仍然是空空如也，没有任何提示：
6 持久性设计
持久性设计，指长期显示在页面上的引导设计。无论页面其他元素如何变动，持久性设计元素始终存在，始终提示用户某项功能的入口，无论用户是第一次还是第N次进入界面，持久性设计元素依然在屏幕上显示。
高频操作时，持久性引导在视觉上会被设计的非常醒目，如圆形悬浮按钮；低频操作时，持久性引导会弱化自身视觉效果，使之融入整个页面，但又时刻可见。
引导的典型设计是用户通过点击“+”按钮来添加在屏幕上持久展示的内容，如
Analytics
、
Roambi
、
有道云笔记、面包笔记、
微信阅读
和
Quizlet
：
最后的微信阅读，就将添加书籍的功能做成了持久性引导，且为保持页面整体风格，被设计成接近书籍缩略图的大小和样式。
7 易发现/刷新
