用户初次打开软件，如何给TA 留下好印象？（组件篇）

上篇聊到 onboarding 相关的理论与心法，这篇来分享常见的 onboarding 界面组件。

（Onboarding 是指用户第一次使用产品时认识、熟悉产品的过程）

往期回顾：

对设计系统有所认识的话应该会知道原子设计（Atomic Design）的重要性，我们也能将同样的概念应用在 onboarding 上，其构成从宏观到微观分成体验流程、控件形式与界面元素三个层级。

体验流程是一个有时序性的旅程，可以由数个不同的载具表现组合而成；控件则是承载信息而存在的平面，可以放上不同的元素；而界面元素是无法再行分割的对象。

我在每个阶段都举了几个常见的例子，搭配市面上产品的应用方法。

体验流程

1. 分流 Branching

一个产品通常不会只有一种用户——使用健身 app 可能是为了减肥，也可能是为了增重；使用协作产品可能是为了记录工作成果，也可能是为了管理团队。如果能够在 onboarding 阶段了解用户的主要意图、在适量的搜集信息后将用户分流（记得上篇的避免过度吸收法则吗？），就能够打造更切身的体验。

除了用户分流之外，还有一些概括性的分流如下：

真正新的使用者 vs. 回流使用者

某些使用者只是因为一些外部因素（手机掉了、手滑删掉 app、忘记密码）而重新登录/下载产品，他们已经接触过产品的核心价值了，并不需要再次学习，这就是为什么跳过（skip）功能很重要。

邀请人 vs. 受邀人

如果邀请人已经设定好群组，受邀人应该自动被加入，某些信息也该自动填入，而非让用户再填一次，从而导致出错。

新手 vs. 老手

与专业领域高度相关的产品（例如 Adobe 系列、CAD 系列等）还可以将用户区分为已经很熟悉作业流程的老手与初学者等级的新手。老手最重视的是定制化以符合他们习惯的作业流程、作业效率高不高，并且跟其他竞品做比较。新手则不然，初次使用产品时的他们也是初次进入这个领域，如果能帮助他们更加了解这个领域的大致流程的话会很加分。

△ Photoshop 的丰富资源指引（Rich Tooltips）对于新手来说是一大神助

2. 展示 Showcase

特别点出几个重点 features，简单地告知用户最重要的功能为何、组件在哪里，用户在登录产品之后只要知道这几个主要动作就可以打遍天下无敌手。

△ Slack 指出 channel 和对话框如何使用

当产品较为复杂，难以指出特定 feature 时，也常以影片或图片来展现产品价值——也就是画一张大饼给用户，让他们想象未来的生活在用了这个产品后会有多便利，或是让自我感觉提升。

3. 实际演练 Do to Learn

相对于展示，实际演练更着重用户要亲自执行。许多研究都证实从做中学习的成效，就算只是训练肌肉记忆（muscle memory），也能让用户对界面的物理空间更有概念，像是「噢对刚才有做过，我记得按键在右上角」。

我们也可以设计一套 demo 版的试用，像是将 scenario 抓一个出来让用户试跑，跑过一个假想的故事情节后印象会更为深刻。

4. 演化成资源库 Resource

在初次展示后将用户引导的数据回收再利用，变成每当用户有问题时都随时可用的资源库。

载具形式

1. 导览 Guided Tour

可能是影片，也可能是滑动式 slideshow，但总之是向用户介绍产品的主要功能或是传达产品价值，通常是为了展示的体验流程所设置。

2. 指引 Tooltip / Coachmark

用极小的空间指向目标物，既可以集中用户注意力，又不会遮盖住大部分的使用空间，用户可以一边进行正规作业，一边通过指引了解不懂的内容。

△ Dropbox Paper 用诙谐的语气鼓励你开始打字

有一阵子很多产品会将所有指引放在同一张图上，但其实使用不当很容易造成信息过载、注意力分散、之后会很难全数记住的情况，我的建议是一次一个比较好。

3. 秀给我看 Show Me

通常只会出现在教程中，强迫用户一定要亲自去按到按键或执行关键动作，切实练习用户的肌肉记忆。

界面元素

1. 空白状态的行动呼吁 Empty State CTA

擅用空白状态是 onboarding 重要的一环，毕竟许多产品在用户动作之前可能都没有太多料，这时候就要运用行动呼吁。

例如 Tumblr 在指导使用者选择有兴趣的领域之后就指出如何 po 内容，因为其用户生成平台（UGC，User-generated content）的本质就是要鼓励用户多交流、多产出，平台才有价值。

2. 进度列 Progress Bar

提供进度可视化，让用户有掌控时间的感觉，而不是不知道自己还要再走几个步骤而感到不耐烦。

Basecamp 将进度列摆在上端，让使用者知道已经快做完这些设置了

3. 待办事项 Checklist

人类天生喜欢将事情「全部做完」，欲罢不能：科技如何让我们上瘾？可以协助我们「引诱」用户更愿意完成 onboarding 程序。

Bluma Zeigarnik 让受试者完成某些任务，但在他们完成另一些任务前打断他们，强迫他们开始进行其他的任务。这些受试者会非常不情愿地停下手上正在做的事，有些人会强烈抗议，有些人甚至会生气，这显示出 Zeigarnik 的打断为他们带来多么大的压力。到实验的最后，受试者清楚记得那些未完成的任务。如果是打断后一阵子又让他们完成的话，就没有这种效应。（摘自 欲罢不能）

4. 跳过 Skip

每次有 onboarding 都会选择跳过的人举手！

我喜欢把这称为不喜欢看桌游规则的人们，所以在使用中遇到困难时给予提示，对他们来说才是最实用而且最愉悦的，而不是在使用前的纸上谈兵。

△ Tumblr 在使用者第一次发文时才提示如何装饰文字

设计 onboarding 时并不是只能选择一种方法，我们可以灵活运用各种元素。将 onboarding 视为一个旅程，而不是单一元素的无限重复。我看过大部分最棒的例子都是综合使用上述多种元素，以下以新兴生产力工具 Coda 为例，来看看集上述大成的 onboarding 作品。

在第一次进入产品使用引导时，可以自行选择偏好的学习方式——影片或是交互式教学。

Coda 并没有强制用户立刻进入 onboarding 模式，而是在呈现主画面之余，让我们看到右侧的待办事项，令人产生「想将之完成」的欲望。

点入后，先有个 setup 内容，任务情境是为了项目经理所设计，但随着使用教程的进行，用户也能够联想到自己生活中的其他任务，例如安排家庭旅游、写系列文案、追踪买家信息等。

正式进入学习阶段后，进度条就出现了。

单纯根据文字叙述，用户仍然可能混淆，这时候 Show Me 功能可以减少不必要的误解。

同上，当用专有名词（此处的 section ）介绍某个界面元素时，将其他无关紧要的区域遮盖住，聚焦在重点区域，用户更容易将专有名词跟界面链接在一起。否则单说 section 谁知道是哪一个 section？

结束时记得给辛苦学习的用户一些奖励，并且贴心附上下一步，当然还是要留给使用者最终决定权。

完成一项后，Coda 会帮用户将完成的项目划除，于是得到立即的回馈。

完成所有步骤之后，原先是教程列的右侧区域转变成资源列，每当使用上遇到困难时就可以寻求各种协助。

题外话与小结

Onboarding 并不是只会出现一次，推出多年的产品也仍会时常进行。

onboarding 的程序，例如推出新 feature 或有重新设计（redesign）的时候，目的仍然是让用户快速熟悉产品，所以这是身为产品设计师不可忽视的一环。

另外，除了 UI/UX 设计之外，文案写作也极其重要——如何跟用户诉说一个吸引人的故事、描绘出他们想象中的自己，也是成功 onboarding 必要元素。

以上分享几个我认为值得列入 onboarding 流程的元素，希望让大家对于 onboarding 这个容易被忽略、但其实对于产品利润有大功劳的环节更加熟悉。

参考数据

• APP UI结构：用户引导&提示（干货大全！）
• User Onboarding Teardowns（各个 onboarding 旅程加上作者个人风趣的批注）
• First Time User Experiences（各个 onboarding 旅程加上作者汇整的结论）