GoogleAnalytics：如何让用户快速上手的APP用也不远

互联网产品，尤其是移动互联网产品，必须具备门槛低、上手快的特点。这是因为移动互联网产品的客户群是2C（客户）而不是2B（业务），用户自发使用。基于行为，产品可替代性强，用户粘性不高。如果用户在下载安装APP后尝试几分钟后仍无法理解产品提供的主要功能和操作方法，那么该应用离被放弃也不远了。

一款能让用户快速上手的app，除了设计得符合产品逻辑、用户操作习惯、足够简单外，清晰有趣的引导设计也很重要。所以在这篇文章中，我将重点介绍使用 Bootstrap 的设计模式。

一、全局预览

全局预览通常在启动页面阶段完成。应用首次安装启动后，或用户每次启动完成有效账号注册后，都会进入启动页面，左右滑动可浏览奇数个启动页面。

全局预览通过应用程序屏幕的最终邀请（左右滑动）按功能完成应用程序的最终探索。 Doozyrama 就是这种模式的一个很好的例子，它包含了现阶段流行着陆页的典型设计元素：简洁的文字介绍、生动的平面插图、左右滑动切换和清晰的退出标志：

另一个例子是谷歌分析：

最佳实践：

应该使用全局预览来加强或突出关键或核心功能；全局预览模式一般以用户目标为主，尽量简短，辅以强视觉引导。 二、互动教程

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

同时，为了让互动教程的引导更容易理解，互动教程往往采用半透明蒙版+操作说明的设计模式。在应用主屏幕上，用带有提示的半透明层覆盖底层主屏幕内容。比如千牛Workbench和analytics（一个数据分析展示应用）：

只有无法使用的功能和丑陋的界面的应用会立即被用户删除，并由同类型的新应用替换。

相反，如果用户第一次进入APP主界面，应用呈现出优秀的交互教程设计，可以同时发挥功能导航和用户体验提升的双重效果，如VUE和WPS 办公室：

VUE是一款强大的视频制作工具，而WPS Office则是一款面向白领的移动办公工具。前者注重设计和风格，而后者注重浓厚的商务和办公氛围，所以整体设计比较简单。

而宝宝树和疗养院更注重乐趣：

Babytree的用户以年轻妈妈为主，关注社区； Medical Care Home是一款移动医疗咨询工具，覆盖人群更加多元化，但无论如何，两者所传达的理念是：人性化、亲民、拉近app与用户的距离、拉开距离用户与用户之间，以及用户与医疗服务提供者之间的距离。

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

三、弹出窗口

Pop-up box，英文Popup Box，全称“pop-up window”，对应“fixed window”，是指由应用程序本身触发或由用户交互触发并悬浮在上方的一种窗口式设计原始页面，触发后用户可以关闭，所以这是一个非全局的设计，只存在于特定的状态中，也因为这个特性，一开始经常使用弹框来做广告提示。

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

对话框是当今最常见的移动应用介绍性设计之一。同时，由于它无处不在，也最容易被忽视和抛弃。我们可以使用弹出框引导来实现：

消息/内容警报。比如Pregnancy+和baby tree breed：

问题/错误消息。如icon和Wolters Kluwer：

内容详情。比如飞猪（更名飞猪）和淘宝：

操作判断。 if 常用词（右图）：

最佳实践：

保持弹出文本简短；确保在应用程序的其他功能模块中可以访问弹出内容。 四、对话框

对话框，英文对话框，一提到它，就会想到“聊天对话框”或“消息对话框”的风格。这是一个辅助窗口，不能最大化或最小化，也不能改变形状。用于简单的人机交流，如消息提示等。

对话框用于引导时，可以显示在屏幕的任意位置，比弹出框更适合操作情况。如千牛工作台、知乎：

单击页面上的任意位置以关闭对话框。另一个例子是 Wave Analytics 和 Way of Life。后者在一个页面上，可以同时有多个提示：

最佳实践：

提示应尽可能靠近指向对象；内容要简短；触发交互动作（如触摸屏幕）后，提示应自动消失；对话框的整体颜色应与页面不同，对比度应鲜明。 五、空状态页

空状态页面是指内容为空的页面。在需要用户初始化配置、创建内容等的应用中很常见。典型的场景是用户刚刚安装了应用并开始使用它。当用户完成配置并创建内容后，处于“空状态”的页面被覆盖。

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

空状态页面引导通常由一个或多个元素组成：包括文本提示、表意插图、触发按钮等。这些元素往往被硬连线到屏幕设计中并一直保留在那里，直到用户交互或被其他元素覆盖内容。许多笔记应用使用首次指南来吸引用户添加内容。

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

首先介绍被动引导。这种设计是典型的空状态接口，例如 Change 和 Finger：

为什么叫被动引导，因为这个页面的提示信息与其说是对用户的引导，不如说是提醒用户不能通过当前页面进行任何有效的相关交互。 Change只是用文字告诉用户当前页面的状态（也许更大的作用是，如果页面上有这几个汉字，用户不会觉得当前页面有什么bug，仅此而已）。

下面的例子，虽然加强了解释，但仍然是被动引导，比如维基百科和Foursquare：

除了提示当前页面为“空状态”的文字外，还提供了补充说明。但是维基百科的短语“保存页面以供以后查看，即使在离线时也是如此”充满了生硬的直译……

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

文本输入处的美团和价格标签：

需要注意的是，对于这些触发新页面的文字条目，文字颜色要与主题颜色一致（主流方案），这也是遵循用户习惯的最佳选择。

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

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

给出两个反例，就是没有任何提示的空状态页面，比如Replica（左下），进入菜单页面后，作为用户我会疑惑：这个页面是不是卡住了？是不是因为网络不好，没有加载？等着瞧？和快乐寻宝，仍然是空的，没有任何提示：

六、持久化设计

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

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

Bootstrap 的典型设计是用户点击“+”按钮添加持久显示在屏幕上的内容，例如 Analytics、Roambi、有道云笔记、面包笔记、微信阅读和 Quizlet：

在上一次微信阅读中js判断元素是否为空，将添加书籍的功能做了一个持久化的引导，并且为了保持页面的整体风格，设计成接近书籍缩略图的大小和风格。

七、易于发现/刷新

易发现设计是指在刷屏刷新内容时出现在“拉出”区域的操作提示的设计。当您按照提示将手从屏幕上松开时，页面会回到原来的位置，“拉出”区域会随着操作提示一起消失。

这种设计是一种鼓励特定交互而又不造成屏幕混乱的有效方式，常用于执行滑动、短按等常见动作。Easy Discovery Design 的发展大致经历了两个阶段：

第一阶段：图标动画+文字提示+刷新时间。随着大屏手机的飞速发展，移动交互设计正处于“百花争鸣”的阶段，没有所谓的“主流”设计方法。因此，早期易发现设计的主要功能是提供交互动作的引导性解释。当然，移动互联网时代在几年前才刚刚开始，现在大量的应用继续沿用这种设计。这时候，对于用户来说，“习惯性存在”带来的熟悉感，可能比引导解释更有意义。以下是雨雪园和虾米音乐：

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

当然，状态栏本身也是有时间显示的，但是因为时间是“一直存在的”，一直存在的东西，比如整本书都高亮显示js判断元素是否为空，很容易让用户不自觉的忽略掉。

当然，御雪渊的时间提醒也有问题。日期“08-09”显然是多余的。

如果虾米音乐采用这个方案，可能会适得其反。许多音乐爱好者习惯于睡前听。如果在刷新内容时提示“Last update: 23:59”时间，可能是提醒用户入睡，从而减少应用的使用时间。对用户来说是好事，但不是APP官方希望看到的。

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

左图下拉，右图释放刷新。另一个例子是 Doozyrama：

左图为静态页面，右图为页面下拉释放后的刷新效果。超人的身影在空白页上来回飞舞。

对比Immediate和Doozyrama不难发现，当页面信息很多时，易找设计的复杂度应该相对降低；而当页面信息较少甚至空白时，应该增加易找设计的复杂度（相对而言），平衡页面信息的呈现，不会太满（有喘息的空间）或空洞（内容醒目）。

本文最初由@check hou 发表于人人都是产品经理。未经许可禁止转载。

标题图片来自Unsplash，基于CC0协议