Skip to content
界面图谱Interface Atlas
☰
中文
PagesPage / Onboarding

Onboarding

新手引导

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

What is it

A first-run page that guides new users to one key action with short explanations, samples and progress cues, rather than every feature.

Interactive playground

Try it. Make an informed choice.

Loading lab…

✓ When to use

  • First-run product that must teach a core action
  • A new feature ships and existing users must migrate
  • Multi-step setup needs lower drop-off

✕ When not to use

  • Everyday use by returning power users
  • Simple tools whose navigation already explains itself
  • Forced intro popups on every launch

Variants

Step Tour

分步导览

Spotlight overlay with step bubbles that focus the current target

Checklist

任务清单

A list of setup tasks that can be checked off and resumed later

Interactive Walkthrough

实操引导

Learners complete one real action to learn by doing

Page structure

  1. 01

    Welcome

    One-line value proposition plus a start button stating the immediate payoff.

  2. 02

    Guided steps

    One action per step; the overlay focuses a target and the copy stays skippable.

  3. 03

    Task checklist

    Three to five tasks with visible progress that resume after leaving.

  4. 04

    Completion

    On finish, jump into a real task or a sample instead of an empty screen.

Implementation

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

The tour overlay is position fixed over the viewport; highlight the target with a box-shadow cutout or an SVG mask. Center progress bars and step dots with flex, and write durations as calc multiplied by var(--demo-speed, 1). Keep step state in one place (current step plus done flag); skip and back drive the same state machine rather than one boolean per step.

Related concepts

Onboarding Tour新手引导

Introduces an interface with an overlay, a spotlight cutout and step bubbles: each step reveals one key area and explains it in place, paced by prev/next controls and a step indicator, always skippable. The explanation lives where the feature happens instead of making users hunt for docs.

PatternsUses pattern
Wizard多步表单

A long form split into ordered steps, each focusing on a few fields, advancing toward completion. A step indicator marks progress and the current slot; users can revisit finished steps, correct them, and press on, usually with a final review. It turns an endless form into finishable small tasks and lightens per-screen cognitive load.

PatternsUses pattern
Stepper步骤条

An ordered progress indicator that explains the stages of a task, the current step and completed work. Pair it with a multi-step form to make a long task easier to understand. Validate before advancing, preserve values when going back, and keep progress indication distinct from the controls that move the flow forward.

ComponentsContains
Progress Bar进度条

A loading indicator where a horizontal bar fills left to right to express task completion, usually with a percentage or step label. For determinate tasks with predictable duration: uploads, downloads, installs and multi-step forms.

ComponentsContains
Button按钮

A clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.

ComponentsContains

Sources

Markdown for agents · JSON