server新手引导 sql_做一个通用新人引导机制（上）

用户首次进入应用，或者应用发布新功能的时候，总会想要个新人引导机制来快速带领用户体验下。

通常，我们要根据业务硬编码新人引导组件，但这是很繁琐的一件事。每次业务上新都要重新写代码，等 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 组件，要协调各实体关系，还需要维护内部状态。

我们可以设计一个中介者来处理多实体交互。即实体间的交互都经中介者处理，各实体没有单独的两两交互。这种模式的好处在于，实体的交互过程可以变得很可控，不容易出幺蛾子。

把问题抽象好，技术架构设计好，写代码的过程就会变的非常舒适。下篇我们就来讨论下，如何在这个架构下，实现完整的通用新人引导机制。