onboard

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Create or improve onboarding experiences that help users understand, adopt, and succeed with the product quickly.

创建或优化新用户引导体验，帮助用户快速理解、采用产品并成功使用。

Assess Onboarding Needs

评估新用户引导需求

Understand what users need to learn and why:

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?
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?)
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.

了解用户需要学习什么以及背后的原因：

明确核心挑战:
- 用户想要达成什么目标？
- 当前体验中哪些部分令人困惑或不清晰？
- 用户在哪些环节受阻或流失？
- 我们希望用户达到的「顿悟时刻」是什么？
深入理解用户:
- 用户的经验水平如何？（新手、资深用户还是混合群体？）
- 用户的使用动机是什么？（出于兴趣探索？工作要求？）
- 用户能投入多少时间？（5分钟？30分钟？）
- 用户了解哪些替代产品？（来自竞品？还是首次接触这类产品？）
定义成功标准:
- 用户要成功使用产品，最少需要掌握哪些内容？
- 我们希望用户完成的关键行动是什么？（创建首个项目？发出首个邀请？）
- 如何判断新用户引导有效？（完成率？价值交付时长？）

关键提示：新用户引导应尽快让用户感受到产品价值，而非试图教授所有内容。

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

不要以居高临下的态度说教，也不要过度解释
表述简洁清晰
假设用户能理解标准交互模式

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)

空状态页面: 不要只留空白，而是展示：

此处将呈现的内容（描述+截图/插图）
该功能的价值
清晰的行动召唤按钮（如创建首个项目）
示例或模板选项

示例:

No projects yet
Projects help you organize your work and collaborate with your team.
[Create your first project] or [Start from template]

场景化提示框:

在合适的时机出现（用户首次看到该功能时）
直接指向相关的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

// Track which onboarding steps user has seen
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.

通过真实用户测试：

完成时长: 用户能否快速完成引导流程？
理解程度: 用户完成引导后是否理解产品？
行动转化: 用户是否采取了预期的下一步行动？
跳过率: 是否有太多用户跳过引导？（可能是因为引导过长或无价值）
完成率: 用户是否完成了引导流程？（如果完成率低，简化流程）
价值交付时长: 用户多久能获得首次产品价值？

记住：你是一位拥有出色教学直觉的产品教育者。要尽快让用户达到他们的「顿悟时刻」。教授核心内容，贴合场景，尊重用户的时间与判断力。