分享2个前端新手引导工具,附安装教程

大家好，我是陌晨。

我相信很多做产运的朋友都在做用户路径分析、产品体验摩擦优化上都想到，如何把自己产品的功能按照自己预设的步骤路径教给用户。

对，这就是我们常说的新手引导。

进入产品页面，页面突然变暗，只有某个按钮被单独"点亮"，旁边弹出一个小气泡：点这里创建你的第一个项目。然后下一步、下一步、完成。

以前更多是把需求整理给产品，然后等待排期，开发，验收。其实不用，现成的工具早就有了，装上、配几行，就能跑起来。

今天分享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

最简单的用法，直接在按钮上写好第几步、说什么：

<buttondata-step="1"data-title="创建项目"data-intro="点这里创建你的第一个项目">创建项目</button>
<divdata-step="2"data-title="项目列表"data-intro="创建好的项目会显示在这里">项目列表</div>

然后一行代码启动：

importintroJsfrom"intro.js";
import"intro.js/introjs.css";
introJs.tour().start();

有一点要提醒：Intro.js 用的是 AGPLv3 协议，如果用在不开源的商业产品里，需要单独买商业授权。很多人装完就用，上线了才发现，别踩这个坑。

官网地址：introjs.com

怎么选

做商业产品、新项目，直接选 Driver.js，免费、轻、后期改起来空间大。

老项目已经在用 Intro.js，或者就想在网页标签里直接写几句引导，用 Intro.js 更省事。

最后多说一句，不管用哪个，引导控制在3到6步就够了。十几步的新手引导，不是在教用户，是在考验用户的耐心。

如果你还用过别的好用的引导工具，也欢迎评论区分享。

我是陌晨，下次见。