用户首次进入应用,或者应用发布新功能的时候,总会想要个新人引导机制来快速带领用户体验下。
通常,我们要根据业务硬编码新人引导组件,但这是很繁琐的一件事。每次业务上新都要重新写代码,等 PD 给文案,等设计给切图,码到一半 PD 跟你说文案要换一下,或者快码完了设计和你说色调字体要统一改一下。好不容易改完了,老板和你说业务有变,暂缓上线。
你说烦不烦?
工程师要能偷懒,要能把重复的编码任务变成一个高效的通用机制。正确的做法是,把新人引导这一套交互抽象成固定的几种套路,直接配置生成,无需编码。这也叫 no code 模式,好处在于标准化高效,以及可以甩给 PD 或设计去自行配置,无需工程师参与。
新手引导有个专门的词,叫 user onboarding。后面我们都直接用这个词了。
几种 onboarding 的模式
【首屏介绍】
类似 google inbox。用户首次进入应用的时候,弹出一个对话框,介绍产品的主要特性。
【引导式教程】
类似云凤蝶。它给用户一系列可回放的引导式教程,在应用界面原地引导用户。
user onboarding 抽象
观察一下各种 onboarding 的界面和交互,我们可以抽象出一些基本的功能点:ui 组件。在界面上展示各种步骤的组件,比如弹窗、小红点、蒙层、tooltip 等。
事件交互。响应各种用户事件的逻辑,比如点击、鼠标 hover、定时、URL 改变、程序事件等。
数据配置源。整个 user onborading 流程的配置数据。
画一下技术架构框图,就是这个样子:
【数据载入】
user onboarding 的配置数据放在哪里?简单点的可以直接硬编码到页面程序里,但这样会失去外部可配置性。放在 CDN、静态资源服务器等外部地址会更灵活。
配置数据的来源是多样的,接口格式一般也会不一样,所以可以用适配器模式来统一数据读取接口。
【ui 展示】
拿到了配置数据后,ui 上如何展示?我们可以采取分治的思路:把完整的配置数据传递给 ui 组件,让它根据数据自行渲染 ui、监听用户事件等。
ui 组件的类型会有很多,比如弹窗、小红点、蒙层等,如何方便地调用它们?我们可以设计一个抽象接口,并要求所有 ui 组件都实现这些接口。于是在上层程序看来,这些 ui 组件都有着一样的接口,就可以用统一的方式去调用它们了。这也叫依赖倒置:上层模块只依赖接口抽象,而非依赖下层模块实现。
【与外部交互】
有时候外部程序需要监听 user onboarding 的内部事件,比如“开始”、“结束”等。这是个典型的订阅发布模型,外部程序订阅事件 topic,内部发布事件 topic 即可。
【user onboarding 调度】
user onboarding 涉及的实体比较多,比如数据源、ui 组件,要协调各实体关系,还需要维护内部状态。
我们可以设计一个中介者来处理多实体交互。即实体间的交互都经中介者处理,各实体没有单独的两两交互。这种模式的好处在于,实体的交互过程可以变得很可控,不容易出幺蛾子。
把问题抽象好,技术架构设计好,写代码的过程就会变的非常舒适。下篇我们就来讨论下,如何在这个架构下,实现完整的通用新人引导机制。