大家好，我是陌晨。
我相信很多做产运的朋友都在做用户路径分析、产品体验摩擦优化上都想到，如何把自己产品的功能按照自己预设的步骤路径教给用户。
对，这就是我们常说的新手引导。
进入产品页面，页面突然变暗，只有某个按钮被单独"点亮"，旁边弹出一个小气泡：点这里创建你的第一个项目。然后下一步、下一步、完成。
以前更多是把需求整理给产品，然后等待排期，开发，验收。其实不用，现成的工具早就有了，装上、配几行，就能跑起来。
今天分享2个我觉得好用的。
Driver.js
一个专门给网页加新手引导的小工具。
它能按顺序把页面上的按钮、表格、输入框一个个高亮出来，配上说明气泡，带用户把流程走一遍。也可以只点亮一个按钮做提醒，比如"新功能在这儿"。还能在功能旁边放一个闪烁的小圆点，用户想看再点，不打断正常操作。
页面里有弹窗、要等接口加载的内容，它也能等元素出现了再继续下一步，这点对后台系统很友好。
最打动我的是三点：免费、小（压缩后约5KB）、商用不收钱（MIT协议）。
安装地址：在项目里运行 npm install driver.js
装好后，用法就三步。先引入，再给要讲解的按钮加个标记，最后写好每一步说什么：
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
const tour = driver({
showProgress: true,
nextBtnText: "下一步",
prevBtnText: "上一步",
doneBtnText: "完成",
steps: [
{ element: '[data-tour="create"]', popover: { title: "创建项目", description: "点这里创建你的第一个项目" } },
{ element: '[data-tour="list"]', popover: { title: "项目列表", description: "创建好的项目都在这里" } }
]
});
tour.drive(); // 开始引导
页面上对应的按钮写成 <button data-tour="create">创建项目</button> 就行。
官网地址：driverjs.com
Intro.js
老牌的新手引导工具，功能和 Driver.js 差不多，分步骤引导、功能提示点都有。
它的特色是可以直接在网页标签里写引导文字，不太懂 JavaScript 的人也能上手。另外还自带"不再显示"按钮和几套现成主题，拿来就能用。
安装地址：在项目里运行 npm install intro.js
最简单的用法，直接在按钮上写好第几步、说什么：
<button data-step="1" data-title="创建项目" data-intro="点这里创建你的第一个项目">创建项目</button>
<div data-step="2" data-title="项目列表" data-intro="创建好的项目会显示在这里">项目列表</div>
然后一行代码启动：
import introJs from "intro.js";
import "intro.js/introjs.css";
introJs.tour().start();
有一点要提醒：Intro.js 用的是 AGPLv3 协议，如果用在不开源的商业产品里，需要单独买商业授权。很多人装完就用，上线了才发现，别踩这个坑。
官网地址：introjs.com
怎么选
做商业产品、新项目，直接选 Driver.js，免费、轻、后期改起来空间大。
老项目已经在用 Intro.js，或者就想在网页标签里直接写几句引导，用 Intro.js 更省事。
最后多说一句，不管用哪个，引导控制在3到6步就够了。十几步的新手引导，不是在教用户，是在考验用户的耐心。
如果你还用过别的好用的引导工具，也欢迎评论区分享。
我是陌晨，下次见。
