![]()
📒 这是 产品D 的第 36 篇分享
🧑💻 作者：Wiiii（胡文语）
上一篇，我们讲完了 Onboarding 的落地框架，今天我们就要打开工具箱，看看到底有什么“玩意”，能够帮助我们在落地中进行实际的应用。工具，常指工作中被使用的器具，当前也引申为达到、完成或促进某一事物的手段。那么在 Onboarding 中，我们就可以将其定义：促使用户上手的方式。本文主要从 2 个方面：
1. 弹框
2. 导览
3. 进度条
4. 清单
5. 热点
6. 空状态
且均在当前的应用内。产品外的方式不在本文的探讨范围，这是另外一个庞大的知识。
弹框是最为最常见的入门模式。除了基本的打招呼信息以外，通常还包括接下来的行动引导，以及功能介绍、视频教学等内容。其中，模态的方式，通过遮罩层是将「弹框」与背后的应用区分开来，从而让用户更聚焦在当前信息上。
Basecamp，团队和项目管理应用。新用户进入产品后，弹框内镶嵌视频内容，以帮助用户快速的熟悉和了解应用。
![]()
Salesforce，客户关系管理应用。进入应用后，弹出是围绕销售的任务，用户可以跟着向导一一操作，在边做边学中了解和上手应用。
Webflow，无码建站应用。欢迎页面结合炫酷的效果演示，让新用户更加期待产品实现的效果。同时，动态的演示，使用户理解某些概念也更加容易。通过提供上下文信息，一步步引导用户，找到最快获得价值的方法。通常采用带有箭头的小窗口或热点提示，一般 2-5 个步骤，并使用简短的文本描述。
在这里有一点非常需要注意，导览通常是对当前工作流程中涉及的关键功能进行介绍，切记对每一个都去引导。
Useloom，在线录屏录像工具。通过文本框（有用的详细信息）+热点提醒的方式，引导用户对录制后的视频进行编辑和分享设置。Figma，图形设计应用。采用动态图形演示和简洁的内容描述相结合，同时也为想了解该功能的更多内容的用户，提供了相关链接。
Dropbox，云储存和团队协作工具。大面积的蓝色与浅色页面很好的区分开来，让用户聚焦在引导框上。导览的左下角显示具体的进度指示器，会给用户在心里建立预期，从而减少焦虑感。提供了清晰的任务列表，并可视化呈现在用户面前，让人们知道可以干什么，以及哪些还没有执行。同时，清单也将原先复杂且具挑战性的任务，分解为多个相对简单和清晰的步骤。清单也利用了多种心理学。例如，每当我们完成一个清单任务所带来的完成感，也会促使我们的大脑释放多巴胺，从而激发我们朝着目标不断接近。以及，如果我们能让人们采取一系列小的操作的话，基于承诺与一致性原则，就更有可能让他们更快的作出最终的、更大的行动决策。Crisp，在线沟通应用。清单+奖励（试用天数）的方式，激励用户完成清单任务，在不断深度绑定同时也越来越能体验出产品的价值。Productboard，产品管理系统。清单的第一个任务为已完成状态，通过利用 Zeigarnik 效应，即人们对完成的任务会更加关注，同时人们对未完成的事物会产生一种“不舒服”的状态，这两个方面叠加增强了用户的行动力。Evernote，云笔记应用。通过较少的付出，就完成了第一个清单任务，让人瞬间产生愉悦感，然后引出任务清单。并在视觉上采用“波动”的方式，用户很自然的被引导过去进行操作点击，同时也开启了新的任务。为用户展示当前任务的进度情况。进度条有多种表现形式，除了最为常见的横向加载条，还有点、百分比、几分之几等形式。根据目标梯度效应，随着我们朝着目标迈进，我们的动力也会随着增加。同时，进度条又可以很好地提醒用户，他们仍有待处理的任务，从而加快用户完成任务的步伐。
Drift，对话式营销应用。采用了从部分进度开始，让用户感觉已经完成了部分，增强了用户开始执行和完成的意向。同时，顶部的突出的进度条会推动用户继续前进，直到完成为止。
MessageBird，全渠道客户服务应用。在设计上采用了分段的进度条，与清单任务数相辅相成。随着任务的执行，进度条、百分比和勾选共同带来的前进感，会不断增强用户完成的意向。
![]()
1.5 热点
通过“圆形”的波动吸引眼球，对关键操作或功能进行引导提示。点击后，提供相关上下文信息，帮助用户理解某一功能或元素。
Feedly，RSS 聚合器应用。通过「热点」，吸引用户点击了解符合当前场景的功能。
Grammarly，在线语法纠正和校对应用。通过「热点」对主要功能进行引导说明。语雀，文档和协作应用。通过精简的文案和视觉波动，引导用户跟随「热点」发现新功能。![]()
空状态指在无数据的情况下，例如新用户刚刚进入应用，清除数据后等。但空白页不应该是空白的。我们可以利用空状态，提示有用的信息，引导用户采取行动，进而从应用中获得价值。JivoSite，在线沟通应用。空状态下引导用户模拟使用，在无压力的情况下，提前体验到了产品的 aha 时刻。Groove，客户支持应用。将默认数据和教程完美的结合在一起，既解释了产品又展示了产品价值。同时，用户通过解决当前未分配任务，潜移默化的完成了产品学习和使用。Buffer，社交媒体管理平台。通过使用空状态来引导用户绑定社交平台账号，否则，Buffer 就无法发挥任何价值。上方的 SaaS 案例，其实大多都采用了多种 UI 模式，来帮助用户完成入职。例如，Jira，敏捷开发和问题跟踪管理系统，就同时融合清单、进度条、边做边学。但不管使用什么样的方式和组合，有一点我们需要记住：仅仅指出某一功能是什么，是不够的。我们需要传达出该功能的价值以及与用户目标所关联的利益。在当前应用内，基于上下文，并遵循就近的原则，帮助用户了解和学习，从而更好的上手使用产品。内嵌教导，可以细分到字段级、页面以及全局。同时，有些教育内容只是在特殊场景和操作下才会触发。以及，通过模板和边做边学的方式，降低用户上手难度，并在实践中学习。2.1 微学习
针对某个单独的设置，提供解释和教学。进行符合当前情景的功能。
在我个人的印象中，微学习存在于系统操作旁边的快捷键提醒，每当你使用鼠标去点击操作时，它都会告诉你可以使用快捷键啦（你这个“笨蛋”，哈哈哈哈）。
在进行 Mac 鼠标设置时，右侧区域会提供动态的功能演示，既帮助用户了解使用效果，也传授了操作方法。钉钉，企业沟通和协作应用。在对话面板中，有些快捷键是直接暴露的，从而在日常的使用中，潜移默化的教育用户。Typeform，表单和调查应用。对每个字段给出外观并辅以场景化的文案说明，帮助用户更好的了解字段用途。
2.2 当下教学
基于当下页面或工作流程，提供详细的指导和教学。
Plerdy，网站转化优化应用。对当前页面的设置进行具体使用规则说明，从而帮助非技术的用户也可以上手使用。
Dropbox，云储存和协作管理。文档编辑页面，提供了可视化的技巧演示，给人轻量、直观和生动的感受。intercom，在线沟通应用。对当前页面提供了三种轻重的指导方式：文档、视频和导览，用户可以根据自己情况自行选择。它们就在当前软件内，而不是跳到专门的帮助中心页面。通常，用户可以单击某个按钮来打开这个帮助。如果能基于当前用户所在的页面自动显示相关的帮助内容，那就再好不过了。当然，看文档从来不是一种令人兴奋的学习和解决问题的方式。但它却是给与了用户广泛的支持和拥有自助解决问题的能力。QuickBooks，中小企业云端会计应用。在当前软件内提供了面向全局的系统帮助，可以询问 AI 机器人或自助搜索解决。Miro，在线白板应用。在应用中，随时可以打开“学习中心”，提供了各种类型和程度的学习资源和支持，可谓为用户使用产品提供了广泛的支持。基于特定的上下文环境，触发的教育内容。某种程度上讲，不早不晚刚刚好。Wistia，视频托管应用。在上传视频的等待期间，右下方弹出学习视频，既消除了等待感又学习了新知识。
Flow，任务和项目管理应用。在沟通模块的消息输入区域，根据用户操作情况，显示不同的提示，来引导和教育用户。Linear，问题跟踪应用。使用鼠标进行勾选时，触发快捷操作的提醒。通过提供模板或类型，降低从头制作的成本和难度，从而帮助用户更快的上手。同时，模板也告知了用户，产品可以具体做什么。Sleeknote，弹出窗口生成器应用。对于没有设计能力的用户而言，可以根据自己需求直接使用，进行简单调整即可。同时，模板也给了用户参考和借鉴。
Miro，白板和协作应用。清晰的传达出了白板的多种用途和场景，进而可以让用户可以选择符合自己工作需求的白板类型进行上手使用，避免面对空荡荡的白板，不知干嘛、有何用途的尬境。需要用户进行手动操作。用户根据引导，按照顺序手动完成一个个步骤任务。
Trello，看板工具。用户根据引导完成整个步骤后，进入产品内可看到刚才所设置的内容，就这样在不知不觉间开始了产品的使用，从而提高了产品留存。
![]()
Grammarly，在线语法纠正和校对应用。通过提供默认演示文档，使用户可以在“消消乐”的过程中，理解到产品所提供的价值。
Deputy，员工日程管理应用。引导用户完成班次设置，从而更快的获取到产品价值。同时，对于复杂的事物，边做边学也是帮助掌握的不错方式。
下一篇，SaaS Onboarding 最后一篇，讲讲如何推动用户行动起来。毕竟用户不采取“行动”，我们所有的设想都将会落空。所以下篇见。🔗 加我好友，获取本文所有「案例链接」