onboard

必须进行的准备工作

用户通过 /onboard 启动此工作流。激活此技能后，加载 $frontend-design — 其中包含设计原则、反模式和上下文收集协议。继续之前，请遵循该协议 — 如果尚无设计上下文，则必须先加载 $setup。此外，还要了解：希望用户获得的「顿悟时刻」，以及用户的经验水平。

在决定首次运行的流程顺序、激活里程碑、设置向导范围、采用导览还是清单或情境式引导、逐步请求权限，或返回用户如何重新进入未完成流程时，请参阅引导体验。 当零数据界面属于引导流程的一部分时，请参阅空状态模式。 在决定对首次使用的用户隐藏什么、按什么顺序呈现内容，或逐步披露什么内容时，请参阅认知负荷。 当引导依赖预先引导、框架设定、诚实的进度提示或完成动力时，请参阅行为设计。 当引导依赖访问请求流程、角色选择、管理员与成员的设置差异，或需要尽早向用户说明的能力边界时，请参阅权限与角色体验。 当引导的清晰度取决于标签、提示、安抚性文案或 CTA 用语时，请参阅UX 文案参考。 当引导需要设置通知偏好、摘要模式、免打扰时段、提醒设置或打扰程度时，请参阅状态沟通。 当设置、导入或首次运行的数据准备造成等待，需要诚实的进度提示和维护信任的反馈时，请参阅加载反馈与感知性能。 当引导需要更有力的设置承诺、首次成功的表述、权限提示或升级／邀请文案时，请参阅营销文案。 当需要分阶段集中修改现有引导文案时，请参阅文案编辑检查。

---

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

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

评估引导需求

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

1. 明确挑战：

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

2. 了解用户：

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

3. 定义成功标准：

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

关键：引导应尽可能快速地让用户体验到价值，而不是尽可能多地教授所有内容。

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

引导原则

遵循以下核心原则：

以演示代替讲解

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

尽可能让引导可跳过

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

尽快体现价值

• 尽快带用户体验到“啊哈时刻”
• 优先介绍最重要的概念
• 先教会能带来 80% 价值的 20% 内容
• 通过情境化发现引导用户了解高级功能

峰终定律

• 缓解最令人紧张的时刻（等待、注册阻力、权限请求、付款、破坏性操作确认）
• 让首次有意义的成功显得确实成功
• 以确认、摘要和明确的下一步结束引导步骤
• 不要让最后一步显得含糊、停滞或虎头蛇尾

重视情境，而非仪式

• 在用户需要时再介绍功能，而不是提前讲解
• 空状态也是引导机会
• 在用户使用功能时，通过工具提示和提示信息提供帮助

空状态也是产品界面

• 将空状态视为优先级较高的界面，而非占位符
• 说明此处将显示什么、为何重要，以及下一步该做什么
• 让空状态的 CTA 比周边界面元素更醒目
• 在内容出现之前，隐藏无效或毫无意义的控件

尊重用户的理解力

• 不要居高临下或过度解释
• 表达简洁清晰
• 默认用户能够理解常见模式

设计引导体验

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

产品初始引导

欢迎界面：

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

账户设置：

• 只收集必要信息（更多信息可以稍后收集）
• 解释询问每项信息的原因
• 尽可能使用智能默认值
• 适当时提供社交账号登录

通知偏好设置 （适用于可能产生大量通知或通知时效性较强的产品）：

• 等用户了解有哪些类型的事件后再询问
• 在展示详尽的设置列表前，先提供“轻量 / 常规 / 高级用户”等推荐模式
• 在相关情况下，允许用户设置免打扰时段、工作时间、摘要或偏好的渠道
• 询问用户希望何时不受打扰，而不只是询问何时接收通知
• 提供清晰的途径，方便用户稍后更改设置，无需在产品中四处寻找

核心概念介绍：

• 介绍 1-3 个核心概念（而非所有内容）
• 使用简单的语言和示例
• 尽可能提供互动体验（让用户动手，而非只阅读）
• 显示进度（第 1 步，共 3 步）
• 在要求用户完成任务前，解释每个步骤的目的

首次成功：

• 引导用户完成一件实际任务
• 提供预填示例或模板
• 在完成时给予肯定（但不要过度）
• 明确说明下一步该做什么

进度与完成提示：

• 当引导流程跨越多个界面时，使用清单、步骤计数器或进度条
• 如实显示进度；对于模糊的流程，应使用模糊的进度提示，而不是假装精确
• 显示剩余内容，让用户能合理判断还需投入多少精力

功能发现与采用

空状态： 不要留下一片空白，而应显示：

• 这里将显示什么（描述 + 截图/插图）
• 它有什么价值
• 创建第一个项目的明确行动号召
• 示例或模板选项
• 移除尚无实际作用的标签页、筛选器、侧边栏或控件

示例：

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 分钟教程]”

空状态模板

• 此区域的用途
• 它的用处
• 主要行动号召
• 可选模板/示例
• 在内容出现之前，移除未启用的标签页/筛选器/杂乱的侧边栏

空状态类型：

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

实现模式

技术方案：

工具提示库：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 操作（让用户自由探索）
• 创建与实际产品脱节的独立教程模式
• 一开始就用大量信息让用户应接不暇（采用渐进式披露！）
• 隐藏“跳过”选项或让它难以找到
• 忘记回访用户（不要再次显示初始新手引导）
• 在空状态下显示尚未发挥作用的无效控件

验证新手引导质量

与真实用户一起测试：

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

请记住：你是一位教学能力出色的产品教育者。尽可能快地帮助用户达到“顿悟时刻”。讲解必要内容，结合具体情境，并尊重用户的时间和理解力。