新手引导
Onboarding
别名:新手引导引导流程新手教程第一次用怎么玩上手引导首次使用引导onboarding
这是什么
用分步流程把新用户从首次进入带到完成第一个关键动作的页面:通过简短说明、样例与进度提示降低陌生感,并在合适时机引导用户开始操作,而不是一次塞入全部功能。它决定用户对产品的第一印象与留存意愿。
交互实验室
试一试,再决定怎么用正在加载实验室…
✓ 适用场景
- 产品首次上手,需要教会核心操作
- 新功能上线,需要引导老用户迁移
- 多步骤设置流程需要降低放弃率
✕ 不适用场景
- 高频复访的老用户日常操作
- 有清晰导航、功能自解释的简单工具
- 每次启动都强制弹出的打断式引导
常见形式
分步导览
Step Tour
遮罩高亮加逐步气泡,聚焦当下要操作的位置
任务清单
Checklist
列出上手任务,完成一项勾一项,可随时回来
实操引导
Interactive Walkthrough
让用户直接完成一次真实操作来学习
页面结构
- 01
欢迎页
一句话价值主张加开始按钮,说明马上能获得什么。
- 02
步骤导览
每次只讲一个动作,遮罩聚焦目标并给出可跳过的说明。
- 03
任务清单
三到五个上手任务,勾选进度可见,离开后能继续。
- 04
完成反馈
完成后跳到第一个真实任务或给示例,避免停在空白页。
实现要点
flexgridposition: fixedbackdrop-filter: blur(6px)transition: opacity 200ms ease引导层用 position fixed 覆盖全屏,遮罩靠 box-shadow 或 SVG 挖洞高亮目标;进度条与步骤点用 flex 居中, 动画时长写成 calc 乘 var(--demo-speed, 1)。步骤状态集中在单一 state(当前步加是否完成),跳过与返回走同一状态机, 不要为每一步各存一个布尔值。
相关概念
用"蒙层 + 聚光高亮 + 分步气泡"的方式带用户认识界面:每一步只露出一个关键区域并就地解释, 上一步/下一步与步骤指示器控制节奏,可随时跳过。它把功能说明放在功能发生的位置, 而不是让用户去文档里自己找。
交互模式使用模式把长表单拆成有序步骤,每步聚焦少量字段,逐步推进到完成。用步骤指示器标出进度与当前位置,用户可回看已完成步骤、修正后再前进,末步通常汇总确认。它把"填不完的大表单"变成可完成的小任务,降低单屏认知负荷。
交互模式使用模式用有序节点展示任务的阶段、当前位置和已完成步骤的进度组件。它通常与分步表单配合,把较长任务拆成易理解的阶段。步骤条负责说明进度,下一步和上一步负责推进流程;进入下一步前应校验当前输入,返回时应保留已经填写的信息。
组件包含组件用横条从左到右填充来表示任务完成比例的加载指示,常配百分比或步骤文字。 适用于时长可预测的确定性任务:上传、下载、安装与分步表单。
组件包含组件用可点击的色块触发一个明确的动作,是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作,按压时有即时的下沉反馈, 繁忙时进入加载态并禁用点击,防止重复提交。
组件包含组件