跳到主要内容
Termlib

UI 组件 · 体验优化

新手引导

Tour

也叫：产品导览、功能引导、引导气泡、Product Tour、Onboarding Tour、Coach Marks

第一次使用时一步步带用户认识界面：把页面其他地方调暗，只亮出一个按钮或区域，旁边的气泡说明它是做什么的，点「下一步」继续。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

用户第一次进入项目列表页时，用 driver.js 启动 3 步新手引导：每一步用 50% 透明度的深色遮罩盖住页面，只露出目标元素，目标外留 6px 间距、画一个 8px 圆角的高亮框。第 1 步指向右上角的「新建项目」按钮，气泡在按钮下方，宽 280px，标题「从这里新建项目」，说明「项目里可以放页面、素材和成员，先建一个试试。」；第 2 步指向左侧的「模板库」；第 3 步指向搜索框。气泡底部左侧显示「1 / 3」和三个进度圆点，右侧是「跳过」文字按钮和「下一步」主按钮，最后一步变成「开始使用」。按 Esc 或点「跳过」结束，结束后在 localStorage 里记住，不再自动弹出，并在帮助菜单里加一项「重新查看新手引导」。

发给

01判断

你的内容是这样吗？

对照两列，确认新手引导是不是你要找的。

符合这些情况，用新手引导

  • 用户第一次进入功能较多的产品，需要知道几个关键入口在哪里
  • 上线了新功能或调整了界面布局，要告诉老用户新东西在哪
  • 复杂的编辑器、后台，不看引导很难发现核心操作

是这些情况，换成别的

  • 界面本身就简单清楚，引导只是在重复按钮上已经写着的文字

  • 需要用户真正填写和提交的流程（注册、开店）

    改用分步向导步骤条

  • 很长的使用说明或教程，写成帮助文档或视频，不要做成十几步引导

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    一进页面就弹出一个大窗口，把十几条功能说明全塞进去，不指向任何具体位置，也不能跳过

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    引导有十几步，每一步都只能点「下一步」，没有跳过和关闭

  3. 03

    每次打开页面都重新弹一遍，不记得用户已经看过

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由遮罩层、被高亮的目标元素和指向它的步骤气泡组成；气泡里有标题、说明、步骤进度（1 / 3 或圆点）和「跳过」「上一步」「下一步 / 完成」按钮。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1整个页面变暗，只有一个按钮或区域是亮的，外面有一圈高亮框
  2. 2亮起的元素旁边有一个带小箭头的白色气泡，写着说明文字
  3. 3气泡底部有「1 / 3」或几个小圆点，以及「跳过」「下一步」按钮

04解释

详细解释

新手引导在用户第一次进入产品或上线新功能时出现。每一步给页面其余部分盖上半透明遮罩，只露出要介绍的那个按钮或区域（高亮框），旁边弹出一个带箭头的 气泡卡片：标题、一两句说明、「2 / 4」这样的进度，以及「跳过」「上一步」「下一步」；最后一步的按钮变成「完成」或「开始使用」。轻一点的做法是不加遮罩，只在新功能旁边放一个闪烁的小圆点（热点），用户点了才弹出说明。

它和 文字提示、气泡卡片 的区别：那两个是用户主动悬停或点击才出现，一次一个；新手引导是产品主动发起的，按顺序串起好几步，还会盖住页面、限制操作。它和 步骤条 也不同：步骤条显示用户完成一个任务的进度，新手引导只是介绍界面，看完不产生任何数据。开场的欢迎 对话框 可以当作引导的第 0 步，但不要把所有说明都塞进一个大弹窗。

控制在 3~5 步，每步只讲一件事、指向一个真实的界面元素，文字一两句话。每一步都要能跳过和关闭，关掉后记住状态，不要每次进来都弹；在帮助菜单里留一个「重新查看引导」的入口。高亮的目标要在可视区域内（必要时自动滚动过去），窗口大小变化时跟着重新定位；手机上气泡要避开键盘和屏幕边缘。

开发者信息
术语 ID
component-tour
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-tour
  • .el-tour
  • [class*="t-guide__"]
  • .driver-popover
  • .introjs-tooltip
  • .introjs-helperLayer
  • .shepherd-element
  • .react-joyride__tooltip
  • .reactour__popover
  • .v-tour
  • .v-step
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • product-tour
  • tour-step
  • tour-popover
  • tour-mask
  • onboarding-tour
  • coachmark
  • coach-mark
  • walkthrough
  • guide-mask
  • newbie-guide
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Tour
  • ProductTour
  • TourStep
  • OnboardingTour
  • Joyride
  • Walkthrough
  • Coachmark
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 浮在内容上
优先级
3 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30