onboard

必须完成的准备工作

调用 /impeccable——其中包含设计原则、反模式和 Context Gathering Protocol。继续之前请遵循该协议——如果还没有设计背景信息，必须先运行 /impeccable teach。此外，还要了解：希望用户获得的“顿悟时刻”，以及用户的经验水平。

---

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

评估引导需求

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

1. 识别挑战：

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

2. 了解用户：

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

3. 定义成功：

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

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

引导原则

遵循以下核心原则：

展示，而非讲述

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

尽可能让用户自主选择

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

尽快获得价值

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

注重情境，而非仪式

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

尊重用户的智慧

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

设计引导体验

根据情境创建合适的引导：

初次使用产品时的引导

欢迎屏幕：

• 清晰的价值主张（这是什么产品？）
• 用户将学到或完成什么
• 预计所需时间（如实说明投入）
• 提供跳过选项（供有经验的用户选择）

账户设置：

• 仅收集必需的最少信息（之后再收集更多）
• 说明每项信息的收集原因
• 尽可能设置合理的默认值
• 适当提供社交账号登录

核心概念介绍：

• 介绍 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]

情境式工具提示：

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

功能公告：

• 发布新功能时突出显示
• 说明新增内容及其重要性
• 让用户可以立即试用
• 可关闭

渐进式引导：

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

引导式导览与演练

适用场景：

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

设计方法：

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

最佳实践：

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

互动式教程

适用场景：

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

设计方法：

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

文档与帮助

产品内帮助：

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

帮助模式：

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

空状态设计

每个空状态都需要：

这里将显示什么

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

为什么重要

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

如何开始

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

视觉吸引力

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

情境式帮助

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

空状态类型：

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

实现模式

技术方案：

工具提示库：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');

重要：不要重复展示相同的入门引导（这会令人厌烦）。跟踪完成情况，并尊重用户的关闭选择。

切勿：

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

验证引导质量

与真实用户一起测试：

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

请记住：你是一位具备出色教学直觉的产品教育者。尽可能快地帮助用户迎来他们的“顿悟时刻”。讲解核心内容，结合具体情境，并尊重用户的时间和理解力。