编辑导语:产品的易用性是留住和转化用户的关键点之一。如果用户操作门槛高，容易给用户带来不满意的体验，容易导致用户流失。那么，互联网产品应该如何引导和设计才能给用户更好的体验呢？在这篇文章中，作者对导向设计进行了系统的总结，我们一起来看看吧。

互联网产品，尤其是移动互联网产品，必须具备门槛低、使用快捷的特点。这是因为移动互联网产品的客户群是2C(客户)而非2B(商务)，以用户自发使用行为为主，产品可替代性强，用户粘度低。如果在下载安装APP后，用户不能在几分钟内尝试理解产品提供的主要功能和操作方法，那么这个应用就不会被放弃。

一个能让用户快速上手的APP，除了设计要符合产品逻辑、用户操作习惯、足够简洁之外，有一个明确的、有趣的引导性设计也很重要。因此，在本文中，我将重点关注使用引导式设计模式。

全局预览通常在引导页面阶段完成。在应用的第一次安装和启动之后或者在用户完成有效账户的注册之前的每次启动之后，用户将进入向导页面，并且通过左右滑动来浏览奇数个向导页面。

全局预览通过应用逐屏、逐功能(左右滑动)的最终邀请，完成对应用的最终探索。Doozyrama就是这种模式的一个很好的例子，它包含了现阶段流行的指南页面的典型设计元素:简洁的文字介绍、生动的平面插图、左右滑动开关和清晰的出口标志:

另一个例子是谷歌分析:

最佳实践:

交互教程是指引导用户进行交互动作以掌握应用操作模式的引导性设计。当用户首次打开应用或浏览页面时，会自动显示交互教程，通过图形描述、箭头引导、交互触发等方式帮助用户更快上手app。有趣的互动教程设计可以有效提升用户体验。

同时，为了让互动教程的指导更加通俗易懂，互动教程往往采用半透明蒙版+操作说明的设计模式。在应用程序主屏幕上，用带有提示的半透明层覆盖下主屏幕的内容。如千牛工作台和分析(一个数据分析和展示应用):

一个应用，如果只是功能难懂，界面难看，就会立刻被用户删除，被新的同类应用取代。

相反，如果用户首先进入APP主界面，应用会显示优秀的交互教程设计，可以同时起到功能导航和用户体验提升的双重作用，比如VUE和WPS Office:

VUE是视频制作的工具，WPS Office是白领的移动办公工具。前者注重设计感和力量感，后者注重浓厚的商务和办公氛围，所以整体设计简洁。

而宝宝树和家庭护理更注重乐趣:

宝宝树用户以年轻妈妈为主，以社区为主；家庭护理是一种移动医疗咨询工具，它覆盖了更多样化的人群。但是，无论如何，两者传达的理念都是:人性化，人民友好，拉近应用与用户的距离，拉近用户与用户的距离，拉近用户与医疗服务提供者的距离。

有趣的设计会给应用带来更多的印象点，从而提高用户的探索欲望和用户粘性。

弹出框，英文全称“弹出窗口”，对应“固定窗口”，是指由应用程序本身或用户交互触发，浮动在原页面上方的窗口式设计。被触发后，用户可以关闭它，所以它是一个只存在于特定状态的非全局设计。由于这一特性，弹出框最初通常用于广告提示。

随着设计模式越来越规范，人们发现弹出框的人机交互模式非常适合应用本身的提示和引导，在互联网和移动互联网产品中逐渐普及。典型的设计是:弹出框+半透明蒙版背景(增强视觉对比)。

对于今天的移动应用程序，对话框是最常见的引导设计之一。同时，因为它无处不在，也最容易被忽视和抛弃。我们可以用弹出框引导来实现它:

消息/内容提示。如怀孕+和宝宝树接种:

问题/错误提示如图标和Wolters Kluwer:

内容详情。如阿里旅行(更名为飞猪)和淘宝:

操作判断。例如，单词经常导致(右图):

最佳实践:

对话框，英文对话框，一提到“聊天对话框”或者“消息对话框”的样式就想到了。这是一个副窗口，不能最小化，也不能改变形状，只能用于简单的人机交流，比如消息提示等。

当对话框用于引导时，可以显示在屏幕的任何地方，比弹出框更适合操作场合。如牛倩工作台和知乎:

单击页面中的任意位置关闭对话框。比如Wave Analytics和Life Way，后者在一个页面，可以同时有多个提示:

最佳实践:

空状态页是指内容为空的页面，常见于需要用户自行初始化配置和创建内容的应用中。典型的情况是，用户只需安装应用程序并开始使用它们。当用户完成配置并创建内容时，“空 status”页面将被覆盖。

而空状态页引导就是在空状态页中加入引导式设计，提升用户体验。空状态引导也称为首次使用引导。

空状态页引导一般由一个或几个元素组成:包括文字提示、表意插图、触发按钮等。这些元素往往会固化在屏幕设计中，一直存在，直到用户进行交互操作或者被其他内容覆盖。许多笔记应用使用第一次引导来吸引用户添加内容。

I 空状态页面引导设计分为被动引导和主动引导两种。

先介绍被动引导。本设计以空状态界面为典型应用，如Change和Finger:

为什么是被动引导？因为这个页面上的提示信息与其说是引导，不如说是对用户的提醒，因为用户无法通过当前页面进行任何有效的相关交互。Change只是用文字告诉用户当前页面状态(或许更重要的是，如果页面上有这些汉字，不会让用户觉得当前页面有什么问题，仅此而已)。

下面的例子，虽然在解释上有所增强，但仍然属于被动引导，比如 Wikipedia 和Foursquare:

除了文字提示当前页面处于“空状态”，他们还做了补充说明。然而，维基百科的短语“保存页面供以后参考，即使离线时”充满了生硬的直译倒置…

主动引导的特点是:在提示用户当前页面状态后，给用户一个改变当前页面状态的入口，如添加内容或添加新内容，如虾米音乐和Vimeo带有圆角矩形按钮入口:

以及文本入口中的美团和价签:

需要注意的是，这些触发新页面的文字录入，文字颜色要和主题颜色一致(主流方案)，这也是遵循用户习惯的最佳选择。

一些活动指南是浮动圆形按钮样式的全局指南，即即使用户覆盖了内容，指南按钮仍然存在。如小时光和2Do:

或者直接在导航栏放“+”，比如种子习惯和新:

再举两个反例，就是没有任何提示的空状态页，比如副本(左下)。进入这个菜单页面后，作为用户的我很疑惑:这个页面是不是卡死了？不是网络不好没加载吗？观望？而快乐失落的宝藏，依然空空如果是，没有提示:

持续性设计是指在页面上长时间展示的引导性设计。无论页面的其他元素如何变化，持久化的设计元素始终存在，始终提示用户某个功能的入口。无论用户第一次还是第n次进入界面，持久的设计元素依然会显示在屏幕上。

高频操作时，持续的引导会在视觉上设计得非常醒目，比如一个圆形的悬浮按钮；低频操作时，持续的引导会削弱其视觉效果，使其融入整个页面，但始终可见。

指南的典型设计是用户点击“+”按钮添加永久显示在屏幕上的内容，如Analytics、Roambi、优云笔记、面包笔记、微信阅读和

最后，微信读书把添加书籍的功能做成了一个持久的向导，并且为了保持页面的整体风格，设计成接近书籍缩略图的大小和风格。

第一阶段:图标动画+文字提示+刷新时间。随着大屏手机的迅速普及，移动交互设计正处于“百花齐放”的阶段，并没有所谓的“主流”设计方法，所以早期的易找设计主要功能是引导和解释交互动作。当然，移动互联网的时代才刚刚开始几年，现在已经有大量的应用在使用这种设计。这个时候，对于用户来说，“习惯性存在”带来的熟悉感可能比引导性解释更有意义。以下是教育学院和虾米音乐:

托儿所加更新时间有其特殊性，因为应用本身就是记录宝宝成长的工具，记录的数据包括喂奶、拉扯、吃药、睡觉等。每一个活动都需要记录时间，所以app通过一些互动动作来显示时间，提醒宝妈在逛论坛和知识板块的时候，是非常必要的。

当然，状态栏本身也是有时间显示的，但是因为时间“一直都在”，所以一直存在的东西，就像整本书一样，都是高亮显示的，容易被用户不自觉的忽略。

当然，育空学院的时间提示也有问题，日期“08-09”明显是多余的。

但如果虾米音乐采用这种方案，可能会产生相反的效果。很多音乐爱好者习惯睡前听。如果在刷新内容时提示他们“上次更新:23:59”的时间，可能是给用户敲响了警钟，从而减少了应用的使用时间。虽然这对用户来说是好事，但这并不是app官方希望看到的结果。

第二阶段:ico动态效果或其他。现阶段大部分用户已经习惯了滑动屏幕然后释放刷新内容的操作方式，文字提示的必要性降低，所以很多应用都是通过简单的动态效果直接完成的，比如 immediately :

下拉左图，释放并刷新右图。再比如Doozyrama[/s2/]:

左图为静态页面，右图为下拉页面发布后的刷新效果。超人的身影在空白页上方来回飞了一次。

对比Doozyrama不难发现，当页面信息较多时，易找设计的复杂度要相对降低。但当页面信息少甚至空白的时候，就增加了易找设计的复杂度(相对而言)，让页面信息均衡呈现，不至于太满(有呼吸空或者太空(有醒目内容)。

本文由@查侯原创发布。每个人都是产品经理。未经许可，禁止转载。

图片来自Unsplash，基于CC0协议。