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
- 01
Welcome
One-line value proposition plus a start button stating the immediate payoff.
- 02
Guided steps
One action per step; the overlay focuses a target and the copy stays skippable.
- 03
Task checklist
Three to five tasks with visible progress that resume after leaving.
- 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 easeThe 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
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 patternA 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 patternAn 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.
ComponentsContainsA 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.
ComponentsContainsA 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