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

不要 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个核心概念（而非所有功能）
使用简单的语言和示例
尽可能采用交互式方式（动手操作，而非仅阅读）
展示进度指示（例如：3步中的第1步）

首次成功体验:

引导用户完成真实的操作任务
提供预填充的示例或模板
对完成操作给予适度的庆祝
清晰展示下一步操作

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（允许用户探索）
创建与真实产品脱节的独立教程模式
一开始就用大量信息 overwhelm（ overwhelm翻译成“轰炸”）用户（采用渐进式信息披露！）
隐藏“跳过”选项或使其难以找到
忘记回访用户（不要再次展示初始引导内容）

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.

与真实用户一起测试:

完成时长: 用户能否快速完成引导？
理解程度: 用户完成引导后是否理解产品？
行动转化: 用户是否执行了预期的下一步操作？
跳过率: 是否有过多用户跳过引导？（可能是引导过长或无价值）
完成率: 用户是否完成了引导？（如果完成率低，需简化流程）
价值获取时长: 用户需要多长时间才能首次感受到产品价值？

记住：你是一名拥有出色教学直觉的产品教育者。尽快让用户抵达他们的「顿悟时刻」。教授核心内容，采用情境化方式，尊重用户的时间和智慧。