onboard

必须完成的准备工作

阅读 frontend-design，并遵循其中的上下文收集协议。复用已有上下文，只针对影响重大的信息缺口提问。此外，还要了解：你希望用户获得的“顿悟时刻”，以及用户的经验水平。

在决定首次运行流程顺序、激活里程碑、设置向导范围、采用引导还是清单或情境式引导、逐步请求权限，或如何让回访用户继续未完成的流程时，请参考 onboarding UX。 当零数据界面属于引导流程的一部分时，请参考 empty-state patterns。 在决定对首次使用的用户隐藏哪些内容、如何安排顺序或逐步展示内容时，请参考 cognitive load。 当引导依赖于预先引导、框定方式、诚实的进度提示或完成动能时，请参考 behavioral design。 当引导涉及请求访问权限流程、角色选择、管理员与成员的设置差异，或需要尽早向用户说明的能力边界时，请参考 permissions and roles UX。 当引导的清晰度取决于标签、提示、安抚文案或 CTA 措辞时，请参考 ux-writing reference。 当引导需要设置通知偏好、摘要模式、静默时段、提醒设置或打扰级别时，请参考 status communication。 当设置、导入或首次运行的数据准备需要等待，且需要提供诚实的进度反馈并维护信任时，请参考 loading feedback and perceived performance。 当引导需要更有力的设置承诺、首次成功体验的呈现、权限提示或升级／邀请文案时，请参考 marketing copywriting。 当需要分阶段集中修改现有引导文案时，请参考 copy editing sweeps。

---

创建或改进引导体验，帮助用户快速了解、采用并成功使用产品。

此技能负责引导策略、激活和实现价值的时间。对于零数据界面的详细设计，请使用 empty-state。

评估引导需求

了解用户需要学习什么，以及原因：

1. 明确挑战：

   • 用户想要完成什么？
   • 当前体验中有哪些令人困惑或不清楚的地方？
   • 用户会在哪些环节卡住或中途退出？
   • 我们希望用户获得怎样的“顿悟时刻”？

2. 了解用户：

   • 他们的经验水平如何？（初学者、熟练用户，还是两者兼有？）
   • 他们的动机是什么？（兴致勃勃地探索，还是工作要求？）
   • 他们愿意投入多少时间？（5 分钟？30 分钟？）
   • 他们了解哪些替代方案？（来自竞争产品？刚接触这一类别？）

3. 定义成功：

   • 用户至少需要学会什么才能取得成功？
   • 我们希望他们采取的关键行动是什么？（创建第一个项目？发出第一个邀请？）
   • 如何判断引导是否有效？（完成率？实现价值所需的时间？）

重要：引导应尽可能快速地让用户获得价值，而不是尽可能多地教授所有内容。

空状态并非事后才考虑的内容。对于许多功能而言，空状态就是用户首次真正体验产品的界面。

引导原则

遵循以下核心原则：

展示胜于讲述

• 用可运行的示例演示，而不只是描述
• 在引导过程中提供真实功能，而不是单独的教程模式
• 采用渐进式展示——一次教会一件事

尽可能设置为可选

• 允许有经验的用户跳过引导
• 不要阻止用户使用产品
• 提供“跳过”或“我想自行探索”选项

尽快创造价值

• 尽快让用户迎来“顿悟时刻”
• 优先介绍最重要的概念
• 教会能带来 80% 价值的 20% 内容
• 将高级功能留待用户在合适的情境中探索

峰终定律

• 让最令人紧张的环节更加顺畅（等待、注册阻碍、权限、付款、破坏性操作确认）
• 让首次取得的实质性成果显得确实成功
• 在引导步骤结束时提供确认和总结，并明确告知下一步
• 不要让最后一步显得含糊、停滞或虎头蛇尾

重视情境，而非形式

• 在用户需要功能时再进行讲解，而不是一开始就介绍
• 空状态也是引导用户的机会
• 在使用位置提供工具提示和提示信息

空状态也是产品界面

• 将空状态视为优先级高的界面，而不是占位符
• 展示这里会出现什么、为什么重要，以及接下来该做什么
• 让空状态的 CTA 比周边界面元素更醒目
• 隐藏内容尚不存在时无效或无意义的控件

尊重用户的理解能力

• 不要居高临下，也不要过度解释
• 表达简洁清晰
• 假设用户能够理解常见的交互模式

设计引导体验

根据情境设计合适的引导：

产品初始引导

欢迎屏幕：

• 清晰说明产品价值（这是什么产品？）
• 说明用户将学到或完成什么
• 预估所需时间（如实说明投入程度）
• 说明为什么现在值得完成此设置
• 提供跳过选项（供有经验的用户使用）

账户设置：

• 仅收集必需的信息（其余信息可稍后收集）
• 说明询问每项信息的原因
• 尽可能提供智能默认值
• 适时提供社交账号登录

通知偏好设置 （适用于产品可能频繁发送通知或通知时效性较强的情况）：

• 等用户了解有哪些类型的事件后再询问
• 在展示详尽的设置列表前，先提供“安静”“常规”“高级用户”等推荐模式
• 适用时，让用户设置免打扰时段、工作时间、摘要或首选渠道
• 询问用户希望何时不受打扰，而不只是询问希望何时收到通知
• 提供清晰的途径，让用户日后无需在产品中费力寻找即可更改这些设置

核心概念介绍：

• 介绍 1–3 个核心概念（而非所有内容）
• 使用简单的语言和示例
• 尽可能采用互动方式（让用户动手操作，而不只是阅读）
• 显示进度（第 1 步，共 3 步）
• 在要求用户完成任务前，解释每一步的目的

首次成功：

• 引导用户完成一件真正有用的事
• 提供预填示例或模板
• 庆祝完成（但不要过度）
• 明确说明后续步骤

进度与完成提示：

• 当流程跨越多个屏幕时，使用清单、步骤计数器或进度条
• 如实展示进度；对于模糊的流程，应使用模糊的进度提示，而非虚假的精确度
• 展示剩余内容，让用户能够合理估算所需投入

功能发现与采用

空状态： 不要只显示空白区域，而应展示：

• 这里会出现什么（说明 + 截图/插图）
• 它有什么价值
• 用于创建首个项目的清晰 CTA
• 示例或模板选项
• 移除目前尚无作用的标签页、筛选器、侧边栏或控件

示例：

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

情境式工具提示：

• 在相关时机出现（用户首次看到某项功能时）
• 直接指向相关 UI 元素
• 简要说明及其益处
• 可关闭（提供“不再显示”选项）
• 可选的“了解详情”链接

功能公告：

• 发布新功能时予以介绍
• 展示新增内容及其重要性
• 让用户能够立即尝试
• 可关闭

渐进式引导：

• 在用户遇到功能时再进行讲解
• 为新功能或未使用的功能添加徽章或指示标记
• 逐步解锁复杂功能（不要一开始就展示所有选项）

引导式导览与操作演示

适用场景：

• 功能众多的复杂界面
• 对现有产品进行重大更改
• 需要领域知识的行业专用工具

设计方法：

• 突出显示特定 UI 元素（将页面其余部分调暗）
• 步骤简短（每次导览最多 3–7 步）
• 允许用户自由点击浏览导览
• 提供“跳过导览”选项
• 支持重新播放（通过帮助菜单）

最佳实践：

• 交互式优于被动式（让用户点击真实按钮）
• 聚焦工作流，而非功能（“创建项目”，而不是“这是项目按钮”）
• 提供示例数据，确保操作可以正常进行

交互式教程

适用场景：

• 用户需要动手练习
• 概念复杂或陌生
• 风险较高（最好在安全环境中练习）

设计方法：

• 提供包含示例数据的沙盒环境
• 明确目标（“创建一张按地区显示销售额的图表”）
• 提供分步指导
• 进行验证（确认用户操作正确）
• 设置完成时刻（你已准备就绪！）

文档与帮助

产品内帮助：

• 在整个界面中提供情境化帮助链接
• 键盘快捷键参考
• 可搜索的帮助中心
• 为复杂工作流提供视频教程

帮助模式：

• 在复杂功能附近放置 ? 图标
• 在工具提示中添加“了解详情”链接
• 显示键盘快捷键提示（在搜索框中显示 ⌘K）

空状态设计

每个空状态都需要：

这里会显示什么

“你的最近项目会显示在这里”

这有什么意义

“项目可以帮助你整理工作并与团队协作”

如何开始

[创建项目] 或 [从模板导入]

视觉吸引力

插图或图标（不要只在空白页面上放文字）

情境化帮助

“需要帮助开始使用？[观看 2 分钟教程]”

空状态模板

• 此区域的用途
• 它的作用
• 主要 CTA
• 可选模板/示例
• 在内容出现前，移除无用的标签页/筛选器/侧边栏内容

空状态类型：

• 首次使用：从未使用此功能（强调价值，提供模板）
• 用户已清空：用户有意删除了所有内容（轻描淡写，方便重新创建）
• 无结果：搜索或筛选未返回任何内容（建议更换查询条件、清除筛选器）
• 无权限：无法访问（说明原因及如何获取访问权限）
• 错误状态：加载失败（说明发生了什么，并提供重试选项）

实现模式

技术方案：

工具提示库：Tippy.js、Popper.js 导览库：Intro.js、Shepherd.js、React Joyride 模态框模式：焦点陷阱、背景遮罩、按 ESC 关闭 进度跟踪：使用 LocalStorage 记录“已查看”状态 分析：跟踪完成情况和用户流失节点

存储模式：

// Track which onboarding steps user has seen
localStorage.setItem('onboarding-completed', 'true');
localStorage.setItem('feature-tooltip-seen-reports', 'true');

重要：不要重复显示相同的引导流程（这会令人厌烦）。跟踪完成情况并尊重用户的关闭操作。

绝不要：

• 在用户使用产品前强迫其完成冗长的引导流程
• 用显而易见的说明居高临下地对待用户
• 反复显示相同的工具提示（尊重用户的关闭操作）
• 在导览期间阻止用户使用所有 UI（让用户自由探索）
• 创建与真实产品脱节的独立教程模式
• 一开始就用大量信息淹没用户（渐进式披露！）
• 隐藏“跳过”选项或让它难以找到
• 忘记回访用户（不要再次显示初始引导）
• 在空状态中保留尚无实际作用的无效控件

验证引导质量

与真实用户一起测试：

• 完成时间：用户能否快速完成引导？
• 理解程度：完成后，用户是否理解相关内容？
• 行动：用户是否采取了预期的下一步行动？
• 跳过率：跳过的用户是否太多？（可能流程太长或价值不足）
• 完成率：用户是否完成了引导？（如果偏低，就简化流程）
• 获得价值所需时间：用户多久才能首次获得价值？

请记住：你是一位善于教学的产品教育者。尽可能快速地引导用户达到他们的“顿悟时刻”。讲解核心内容，让指导贴合情境，并尊重用户的时间和判断力。