跳到主要内容
界面图谱Interface Atlas
☰
EN
页面Page / Onboarding

新手引导

Onboarding

别名:新手引导引导流程新手教程第一次用怎么玩上手引导首次使用引导onboarding

这是什么

用分步流程把新用户从首次进入带到完成第一个关键动作的页面:通过简短说明、样例与进度提示降低陌生感,并在合适时机引导用户开始操作,而不是一次塞入全部功能。它决定用户对产品的第一印象与留存意愿。

交互实验室

试一试,再决定怎么用

正在加载实验室…

✓ 适用场景

  • 产品首次上手,需要教会核心操作
  • 新功能上线,需要引导老用户迁移
  • 多步骤设置流程需要降低放弃率

✕ 不适用场景

  • 高频复访的老用户日常操作
  • 有清晰导航、功能自解释的简单工具
  • 每次启动都强制弹出的打断式引导

常见形式

分步导览

Step Tour

遮罩高亮加逐步气泡,聚焦当下要操作的位置

任务清单

Checklist

列出上手任务,完成一项勾一项,可随时回来

实操引导

Interactive Walkthrough

让用户直接完成一次真实操作来学习

页面结构

  1. 01

    欢迎页

    一句话价值主张加开始按钮,说明马上能获得什么。

  2. 02

    步骤导览

    每次只讲一个动作,遮罩聚焦目标并给出可跳过的说明。

  3. 03

    任务清单

    三到五个上手任务,勾选进度可见,离开后能继续。

  4. 04

    完成反馈

    完成后跳到第一个真实任务或给示例,避免停在空白页。

实现要点

flexgridposition: fixedbackdrop-filter: blur(6px)transition: opacity 200ms ease

引导层用 position fixed 覆盖全屏,遮罩靠 box-shadow 或 SVG 挖洞高亮目标;进度条与步骤点用 flex 居中, 动画时长写成 calc 乘 var(--demo-speed, 1)。步骤状态集中在单一 state(当前步加是否完成),跳过与返回走同一状态机, 不要为每一步各存一个布尔值。

相关概念

新手引导Onboarding Tour

用"蒙层 + 聚光高亮 + 分步气泡"的方式带用户认识界面:每一步只露出一个关键区域并就地解释, 上一步/下一步与步骤指示器控制节奏,可随时跳过。它把功能说明放在功能发生的位置, 而不是让用户去文档里自己找。

交互模式使用模式
多步表单Wizard

把长表单拆成有序步骤,每步聚焦少量字段,逐步推进到完成。用步骤指示器标出进度与当前位置,用户可回看已完成步骤、修正后再前进,末步通常汇总确认。它把"填不完的大表单"变成可完成的小任务,降低单屏认知负荷。

交互模式使用模式
步骤条Stepper

用有序节点展示任务的阶段、当前位置和已完成步骤的进度组件。它通常与分步表单配合,把较长任务拆成易理解的阶段。步骤条负责说明进度,下一步和上一步负责推进流程;进入下一步前应校验当前输入,返回时应保留已经填写的信息。

组件包含组件
进度条Progress Bar

用横条从左到右填充来表示任务完成比例的加载指示,常配百分比或步骤文字。 适用于时长可预测的确定性任务:上传、下载、安装与分步表单。

组件包含组件
按钮Button

用可点击的色块触发一个明确的动作,是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作,按压时有即时的下沉反馈, 繁忙时进入加载态并禁用点击,防止重复提交。

组件包含组件

参考来源

Markdown 版(给 Agent) · JSON