Back to Details

onboard

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

MANDATORY PREPARATION

必备准备工作

Invoke /frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first. Additionally gather: the "aha moment" you want users to reach, and users' experience level.
Create or improve onboarding experiences that help users understand, adopt, and succeed with the product quickly.
调用 /frontend-design —— 其中包含设计原则、反模式以及上下文收集协议。在继续之前请遵循该协议——如果尚无设计上下文，你必须先运行 /teach-impeccable。此外还需收集：你希望用户达到的「惊喜时刻」，以及用户的经验水平。
创建或优化用户引导体验，帮助用户快速理解、采用并成功使用产品。

Assess Onboarding Needs

评估用户引导需求

Understand what users need to learn and why:
  1. Identify the challenge:
    • What are users trying to accomplish?
    • What's confusing or unclear about current experience?
    • Where do users get stuck or drop off?
    • What's the "aha moment" we want users to reach?
  2. Understand the users:
    • What's their experience level? (Beginners, power users, mixed?)
    • What's their motivation? (Excited and exploring? Required by work?)
    • What's their time commitment? (5 minutes? 30 minutes?)
    • What alternatives do they know? (Coming from competitor? New to category?)
  3. Define success:
    • What's the minimum users need to learn to be successful?
    • What's the key action we want them to take? (First project? First invite?)
    • How do we know onboarding worked? (Completion rate? Time to value?)
CRITICAL: Onboarding should get users to value as quickly as possible, not teach everything possible.
理解用户需要学习什么以及原因：
  1. 识别挑战:
    • 用户试图完成什么目标？
    • 当前体验中有哪些令人困惑或不清晰的地方？
    • 用户在哪里会受阻或流失？
    • 我们希望用户达到的「惊喜时刻」是什么？
  2. 理解用户:
    • 他们的经验水平如何？（新手、高级用户还是混合群体？）
    • 他们的动机是什么？（兴奋地探索？工作要求？）
    • 他们能投入多少时间？（5分钟？30分钟？）
    • 他们了解哪些替代产品？（来自竞品？刚接触该品类？）
  3. 定义成功标准:
    • 用户成功使用产品所需掌握的最少内容是什么？
    • 我们希望他们采取的关键行动是什么？（创建第一个项目？发出第一个邀请？）
    • 如何判断用户引导有效？（完成率？获得价值的时间？）
关键提示: 用户引导应尽快让用户获得价值，而非试图教授所有内容。

Onboarding Principles

用户引导原则

Follow these core principles:
遵循以下核心原则：

Show, Don't Tell

演示而非说教

  • Demonstrate with working examples, not just descriptions
  • Provide real functionality in onboarding, not separate tutorial mode
  • Use progressive disclosure - teach one thing at a time
  • 用可运行的示例展示，而非仅用文字描述
  • 在用户引导中提供真实功能，而非单独的教程模式
  • 使用渐进式披露——一次只教一件事

Make It Optional (When Possible)

尽可能提供可选性

  • Let experienced users skip onboarding
  • Don't block access to product
  • Provide "Skip" or "I'll explore on my own" options
  • 允许有经验的用户跳过引导
  • 不要阻止用户访问产品
  • 提供「跳过」或「我将自行探索」选项

Time to Value

快速获得价值

  • Get users to their "aha moment" ASAP
  • Front-load most important concepts
  • Teach 20% that delivers 80% of value
  • Save advanced features for contextual discovery
  • 尽快让用户达到他们的「惊喜时刻」
  • 优先展示最重要的概念
  • 教授能带来80%价值的20%内容
  • 将高级功能留到上下文场景中再发现

Context Over Ceremony

上下文优先，形式次之

  • Teach features when users need them, not upfront
  • Empty states are onboarding opportunities
  • Tooltips and hints at point of use
  • 在用户需要时教授功能，而非提前灌输
  • 空状态是用户引导的机会
  • 在使用场景中提供工具提示和提示信息

Respect User Intelligence

尊重用户智慧

  • Don't patronize or over-explain
  • Be concise and clear
  • Assume users can figure out standard patterns
  • 不要 patronize（ patronize保留原词，指 patronize用户，即不要居高临下地对待用户）或过度解释
  • 简洁明了
  • 假设用户能理解标准模式

Design Onboarding Experiences

设计用户引导体验

Create appropriate onboarding for the context:
根据上下文创建合适的用户引导：

Initial Product Onboarding

初始产品引导

Welcome Screen:
  • Clear value proposition (what is this product?)
  • What users will learn/accomplish
  • Time estimate (honest about commitment)
  • Option to skip (for experienced users)
Account Setup:
  • Minimal required information (collect more later)
  • Explain why you're asking for each piece of information
  • Smart defaults where possible
  • Social login when appropriate
Core Concept Introduction:
  • Introduce 1-3 core concepts (not everything)
  • Use simple language and examples
  • Interactive when possible (do, don't just read)
  • Progress indication (step 1 of 3)
First Success:
  • Guide users to accomplish something real
  • Pre-populated examples or templates
  • Celebrate completion (but don't overdo it)
  • Clear next steps
欢迎界面:
  • 清晰的价值主张（这款产品是什么？）
  • 用户将学习/完成的内容
  • 时间预估（如实告知所需投入）
  • 跳过选项（针对有经验的用户）
账户设置:
  • 仅收集必要信息（后续再补充更多）
  • 解释询问每项信息的原因
  • 尽可能使用智能默认值
  • 合适时提供社交登录选项
核心概念介绍:
  • 介绍1-3个核心概念（而非全部）
  • 使用简单语言和示例
  • 尽可能采用交互式方式（动手操作，而非仅阅读）
  • 进度指示（第1步，共3步）
首次成功体验:
  • 引导用户完成真实的操作
  • 提供预填充的示例或模板
  • 庆祝完成（但不要过度）
  • 清晰的下一步指引

Feature Discovery & Adoption

功能发现与采用

Empty States: Instead of blank space, show:
  • What will appear here (description + screenshot/illustration)
  • Why it's valuable
  • Clear CTA to create first item
  • Example or template option
Example:
No projects yet
Projects help you organize your work and collaborate with your team.
[Create your first project] or [Start from template]
Contextual Tooltips:
  • Appear at relevant moment (first time user sees feature)
  • Point directly at relevant UI element
  • Brief explanation + benefit
  • Dismissable (with "Don't show again" option)
  • Optional "Learn more" link
Feature Announcements:
  • Highlight new features when they're released
  • Show what's new and why it matters
  • Let users try immediately
  • Dismissable
Progressive Onboarding:
  • Teach features when users encounter them
  • Badges or indicators on new/unused features
  • Unlock complexity gradually (don't show all options immediately)
空状态页面: 不要留空白，而是展示：
  • 此处将显示的内容（描述 + 截图/插图）
  • 其价值所在
  • 创建首个内容的清晰CTA（号召性用语）
  • 示例或模板选项
示例:
暂无项目
项目可帮助你组织工作并与团队协作。
[创建你的第一个项目] 或 [从模板开始]
上下文工具提示:
  • 在相关时刻出现（用户首次看到功能时）
  • 直接指向相关UI元素
  • 简短说明 + 价值点
  • 可关闭（提供「不再显示」选项）
  • 可选的「了解更多」链接
功能公告:
  • 发布新功能时突出展示
  • 展示新内容及其重要性
  • 允许用户立即试用
  • 可关闭
渐进式引导:
  • 在用户遇到功能时教授相关内容
  • 在新/未使用的功能上添加徽章或标识
  • 逐步解锁复杂功能（不要立即显示所有选项）

Guided Tours & Walkthroughs

引导式游览与分步讲解

When to use:
  • Complex interfaces with many features
  • Significant changes to existing product
  • Industry-specific tools needing domain knowledge
How to design:
  • Spotlight specific UI elements (dim rest of page)
  • Keep steps short (3-7 steps max per tour)
  • Allow users to click through tour freely
  • Include "Skip tour" option
  • Make replayable (help menu)
Best practices:
  • Interactive > passive (let users click real buttons)
  • Focus on workflow, not features ("Create a project" not "This is the project button")
  • Provide sample data so actions work
适用场景:
  • 包含众多功能的复杂界面
  • 现有产品的重大变更
  • 需要领域知识的行业特定工具
设计方式:
  • 聚焦特定UI元素（模糊页面其余部分）
  • 步骤简短（每次游览最多3-7步）
  • 允许用户自由点击完成游览
  • 包含「跳过游览」选项
  • 可重复播放（在帮助菜单中）
最佳实践:
  • 交互式 > 被动式（让用户点击真实按钮）
  • 聚焦工作流，而非功能（「创建项目」而非「这是项目按钮」）
  • 提供示例数据确保操作有效

Interactive Tutorials

交互式教程

When to use:
  • Users need hands-on practice
  • Concepts are complex or unfamiliar
  • High stakes (better to practice in safe environment)
How to design:
  • Sandbox environment with sample data
  • Clear objectives ("Create a chart showing sales by region")
  • Step-by-step guidance
  • Validation (confirm they did it right)
  • Graduation moment (you're ready!)
适用场景:
  • 用户需要动手练习
  • 概念复杂或陌生
  • 高风险场景（最好在安全环境中练习）
设计方式:
  • 带有示例数据的沙箱环境
  • 清晰的目标（「创建显示各地区销售额的图表」）
  • 分步指导
  • 验证（确认操作正确）
  • 结业时刻（你已准备就绪！）

Documentation & Help

文档与帮助

In-product help:
  • Contextual help links throughout interface
  • Keyboard shortcut reference
  • Search-able help center
  • Video tutorials for complex workflows
Help patterns:
  • ?
    icon near complex features
  • "Learn more" links in tooltips
  • Keyboard shortcut hints (
    ⌘K
    shown on search box)
产品内帮助:
  • 界面各处的上下文帮助链接
  • 快捷键参考
  • 可搜索的帮助中心
  • 针对复杂工作流的视频教程
帮助模式:
  • 复杂功能旁的 
    ?
    图标
  • 工具提示中的「了解更多」链接
  • 快捷键提示（搜索框旁显示 
    ⌘K
    ）

Empty State Design

空状态设计

Every empty state needs:
每个空状态都需要包含：

What Will Be Here

此处将显示什么

"Your recent projects will appear here"
「你的最近项目将显示在这里」

Why It Matters

其重要性

"Projects help you organize your work and collaborate with your team"
「项目可帮助你组织工作并与团队协作」

How to Get Started

如何开始

[Create project] or [Import from template]
[创建项目] 或 [从模板导入]

Visual Interest

视觉吸引力

Illustration or icon (not just text on blank page)
插图或图标（不要只是空白页面上的文字）

Contextual Help

上下文帮助

"Need help getting started? [Watch 2-min tutorial]"
Empty state types:
  • First use: Never used this feature (emphasize value, provide template)
  • User cleared: Intentionally deleted everything (light touch, easy to recreate)
  • No results: Search or filter returned nothing (suggest different query, clear filters)
  • No permissions: Can't access (explain why, how to get access)
  • Error state: Failed to load (explain what happened, retry option)
「需要入门帮助？[观看2分钟教程]」
空状态类型:
  • 首次使用: 从未使用过该功能（强调价值，提供模板）
  • 用户清空: 有意删除了所有内容（轻量提示，便于重新创建）
  • 无结果: 搜索或筛选未返回内容（建议不同查询，清除筛选条件）
  • 无权限: 无法访问（解释原因，说明如何获取权限）
  • 错误状态: 加载失败（说明情况，提供重试选项）

Implementation Patterns

实现模式

Technical approaches:

技术方案:

Tooltip libraries: Tippy.js, Popper.js Tour libraries: Intro.js, Shepherd.js, React Joyride Modal patterns: Focus trap, backdrop, ESC to close Progress tracking: LocalStorage for "seen" states Analytics: Track completion, drop-off points
Storage patterns:
javascript
// Track which onboarding steps user has seen
localStorage.setItem('onboarding-completed', 'true');
localStorage.setItem('feature-tooltip-seen-reports', 'true');
IMPORTANT: Don't show same onboarding twice (annoying). Track completion and respect dismissals.
NEVER:
  • Force users through long onboarding before they can use product
  • Patronize users with obvious explanations
  • Show same tooltip repeatedly (respect dismissals)
  • Block all UI during tour (let users explore)
  • Create separate tutorial mode disconnected from real product
  • Overwhelm with information upfront (progressive disclosure!)
  • Hide "Skip" or make it hard to find
  • Forget about returning users (don't show initial onboarding again)
工具提示库: Tippy.js, Popper.js 游览库: Intro.js, Shepherd.js, React Joyride 模态框模式: 焦点捕获、背景遮罩、按ESC关闭 进度跟踪: 使用LocalStorage记录「已查看」状态 分析: 跟踪完成率、流失点
存储模式:
javascript
// 跟踪用户已查看的引导步骤
localStorage.setItem('onboarding-completed', 'true');
localStorage.setItem('feature-tooltip-seen-reports', 'true');
重要提示: 不要重复显示相同的引导内容（会惹恼用户）。跟踪完成状态并尊重用户的关闭操作。
绝对禁止:
  • 强制用户完成冗长的引导后才能使用产品
  • 用显而易见的解释居高临下地对待用户
  • 重复显示相同的工具提示（尊重用户的关闭操作）
  • 在游览期间屏蔽所有UI（让用户可以探索）
  • 创建与真实产品脱节的独立教程模式
  • 提前灌输过多信息（使用渐进式披露！）
  • 隐藏「跳过」选项或使其难以找到
  • 忘记回访用户（不要再显示初始引导内容）

Verify Onboarding Quality

验证用户引导质量

Test with real users:
  • Time to completion: Can users complete onboarding quickly?
  • Comprehension: Do users understand after completing?
  • Action: Do users take desired next step?
  • Skip rate: Are too many users skipping? (Maybe it's too long/not valuable)
  • Completion rate: Are users completing? (If low, simplify)
  • Time to value: How long until users get first value?
Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence.
与真实用户一起测试：
  • 完成时间: 用户能否快速完成引导？
  • 理解程度: 用户完成引导后是否理解相关内容？
  • 行动: 用户是否采取了预期的下一步行动？
  • 跳过率: 是否有太多用户跳过引导？（可能是因为引导太长或没有价值）
  • 完成率: 用户是否完成引导？（如果完成率低，请简化）
  • 获得价值的时间: 用户需要多久才能获得首次价值？
记住：你是一名拥有出色教学直觉的产品教育者。尽快让用户达到他们的「惊喜时刻」。教授核心内容，使其贴合上下文，尊重用户的时间和智慧。