新手引导
Onboarding Tour
别名:新手引导功能引导引导蒙层步骤引导高亮引导首次使用引导
这是什么
用"蒙层 + 聚光高亮 + 分步气泡"的方式带用户认识界面：每一步只露出一个关键区域并就地解释， 上一步/下一步与步骤指示器控制节奏，可随时跳过。它把功能说明放在功能发生的位置， 而不是让用户去文档里自己找。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 界面有 3～5 个核心功能值得主动介绍
- 新版本上线，重要入口的位置或含义变了
- 目标用户多为首次访问，且功能不易自行发现
✕ 不适用场景
- 界面足够简单，用户自己探索更快
- 步骤太多太长，用户会连点跳过等于白做
- 每次进入都强制播放，应只在首次出现且可重看
常见形式
聚光引导
Spotlight
蒙层挖洞高亮目标区域，注意力最聚焦
气泡序列
Tooltip sequence
依次弹出说明气泡，不打断整页
任务清单
Checklist
侧边清单列出待办引导，用户自选节奏
实现要点
position: absolutebox-shadowz-indextransition蒙层常用巨大 box-shadow（目标元素套 ring/box-shadow 实现挖洞感）或四块遮罩拼出洞口； 气泡按目标元素 getBoundingClientRect 定位到上下左右。步骤状态用 useState 索引驱动， 支持 Esc 关闭与点击蒙层跳过。过渡尊重 prefers-reduced-motion，直接切换无动画。
相关概念
悬停在元素上短暂出现的小型文字气泡，用来解释图标按钮、缩写或被截断的文本。 纯提示、不可交互，移开即消失；通常延迟约 300ms 出现以避免扫过时闪烁。
组件搭配使用点击触发元素后在其旁边弹出的非模态浮层，可承载文字说明、小型表单、日期选择等中等复杂内容。 无遮罩、不阻断页面其余部分，点击外部区域或 Esc 即关闭。
组件搭配使用覆盖在页面之上、带半透明遮罩的对话框，打断用户当前流程，要求先完成弹窗内的任务或决策。 遮罩阻断与底层页面的交互，焦点被暂时困在弹窗内，是容器类浮层中打断程度最高的一种。
组件搭配使用把信息分层呈现：先给最常用、最必要的部分，把次要细节藏到"展开""下一步""显示更多"后面， 用户主动索取时才展示。它解决的是一次性塞给用户太多内容的问题—— 降低初始认知负担，让界面入门简单，同时保留深度供高级用户按需取用。
交互模式相似概念当列表或页面没有数据时，不留一片空白，而是用插图、一句说明和一个明确的下一步操作填充。 它解决的是"用户面对空白不知道发生了什么、也不知道该做什么"的问题—— 把空档变成引导起点：首次使用教用户开始，搜索无结果给出路。
交互模式相似概念