Onboarding Tour
新手引导
Aliases:新手引导功能引导引导蒙层步骤引导高亮引导首次使用引导
What is it
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.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- There are 3–5 core features worth introducing proactively
- A release moved or re-meaning of key entry points
- Most visitors are first-timers and features are hard to discover alone
✕ When not to use
- The UI is simple enough to explore faster without a tour
- Long tours get button-mashed through and teach nothing
- Forcing it on every visit — show once, keep a replay entry
Variants
Spotlight
聚光引导
The overlay cuts a hole around the target, tightest focus
Tooltip sequence
气泡序列
Sequential bubbles that never block the whole page
Checklist
任务清单
A side checklist users complete at their own pace
Implementation
position: absolutebox-shadowz-indextransitionBuild the overlay with a huge box-shadow on the target (or four mask blocks) to fake the cutout; position the bubble via the target's getBoundingClientRect. Drive steps with a useState index, support Esc and overlay-click to dismiss. Transitions respect prefers-reduced-motion by jumping without animation.
Related concepts
A small text bubble that appears briefly on hover, explaining icon buttons, abbreviations or truncated text. Purely informational and non-interactive, it disappears on mouse leave; usually shows after a ~300ms delay to avoid flicker while moving across the screen.
ComponentsUsed withA non-modal layer that pops up beside its trigger on click, carrying medium-complex content such as text, a mini-form or a date picker. No backdrop and no blocking of the rest of the page; clicking outside or pressing Esc closes it.
ComponentsUsed withA dialog rendered above the page with a translucent backdrop that interrupts the current flow and demands a task or decision first. The backdrop blocks interaction with the underlying page and focus is temporarily trapped inside — the most disruptive of the overlay containers.
ComponentsUsed withLayer the information: show only the most common and necessary parts first, hiding secondary details behind "expand", "next step" or "show more" until the user asks for them. It solves the problem of overwhelming users at once — the initial cognitive load stays low and the surface easy to learn, while depth remains available on demand for advanced users.
PatternsSimilarWhen a list or page has no data, don't leave a void — fill it with an illustration, one sentence of explanation and a clear next action. It solves the "blank screen" problem where users can't tell what happened or what to do next, turning dead space into a starting point: onboarding for first use, a way out for fruitless searches.
PatternsSimilar