ux-empty-states

空状态技能

此技能的运作方式（请先阅读）

这是一项生成式技能。默认的失败模式是死屏：“未找到任务。”——用户刚开始使用、最困惑或最受阻时，眼前却是一条空白的死胡同。每个空状态其实都是产品中最有影响力的屏幕之一：它可能是引导（首次使用）、安心提示（已清空），也可能是恢复入口（无结果 / 404）。反面问题也存在——“空”屏幕塞满了文字、插图和三个 CTA，已经不再让人平静。此技能会把控以下事项：

1. 确认屏幕为空的原因——原因决定采用哪种模式。
2. 应用始终适用的核心原则——解释并引导，绝不责怪，保持平和。
3. 呈现润色方面的决策（插图、CTA、幽默），并说明利弊。

随后，交由 ux-heuristics-audit、ux-accessibility-audit、ux-aesthetics-audit 和 ux-microcopy-audit 进行验证。

---

步骤 0 — 确认屏幕为空的原因

原因决定采用哪种模式：

• 首次使用——用户还没有创建任何内容。这是引导流程的最后一步：说明这里会显示什么，并让用户轻松完成第一个操作（“添加你的第一个任务”）。
• 已清空 / 已完成——用户自己清空了内容（收件箱归零、任务列表已完成）。语气转为积极鼓励：“你已全部处理完毕！”并提供一个没有压力的下一步。
• 无结果——搜索或筛选没有匹配内容。这其实不是真正的“空状态”，而是一个恢复时刻：检查拼写、提供搜索提示、热门类别和最近搜索（遵循 ux-search 的无死胡同原则）。
• 错误 / 404——内容缺失或出现故障。用平实的语言解释，不用术语，也不责怪用户，并引导用户回到安全页面（首页、热门内容）。

还要确认平台和品牌语气——它们会限制插图风格，并决定是否适合使用幽默。

---

始终适用的核心原则（几乎适用于所有情况）

解释并引导——每个空状态都要完成的两项任务

• 明确说明为什么为空。 ❌“未找到任务。” ✅“你已全部处理完毕！添加新任务，让工作保持高效。”要清晰并给予鼓励，绝不能只做简单否定。
• 始终提供下一步。 即使是基础的信息型空状态，也要提示用户接下来做什么（“收件箱为空。先撰写一封新邮件吧。”）。没有后续路径的空状态就是缺陷。
• 带操作的空状态应搭配说明和 CTA： 按钮要接续句子——“购物车为空。现在开始购物吧！”→ [立即购物]。其他路径（文档、示例）可以作为链接放在文案中。
• 绝不责怪用户——尤其是在无结果和 404 页面上。系统应解释发生了什么并提供解决途径，而不是追究责任。

真正能推动用户采取行动的 CTA

• 标签要具体、以行动为导向：“添加你的第一个任务”“探索功能”——不要使用缺少上下文的“确定”或“开始使用”。
• 只设一个主要操作。 如果确实需要两个选项（使用模板还是自定义），就让推荐路径在视觉上更突出，替代选项明确作为次要选项——绝不要让两个按钮看起来同等重要。

平和胜于繁杂

• 空屏幕不是广告牌。 文案应简洁，视觉元素应精简；每个元素都应推动用户实现主要目标。首次使用时的仪表板尤其如此：重在引导，不要同时用提示、导览和横幅狂轰滥炸。

取决于具体情境的决策（展示，但不要自动应用）

决策	适用情况	避免／调整情况	默认建议
插画	能传达状态（例如，用云后太阳表示暂无天气数据），且符合品牌个性	只会增加杂乱或延迟理解的装饰；风格不一致	与内容相关、符合品牌调性，并且不喧宾夺主
幽默／个性	适合活泼风格的品牌；低挫败感时刻（例如，清空后的状态）	严肃产品的错误／404 场景；用户正在执行任务却受阻时	始终保持亲切；只在挫败感较低时开玩笑
第二个 CTA	提供真正的替代路径（例如，模板与自定义）	屏幕的目的是帮助用户继续操作，却让用户陷入选择困难时	一个主要 CTA；次要 CTA 在视觉上弱化
教育内容（文档链接、演示）	产品复杂，首次操作需要背景信息时	无需手册即可完成的简单操作	将链接放在文案中，不要用与主要操作竞争的按钮
示例／演示数据	展示价值比描述价值更有效的仪表板	虚假数据可能被误认为真实数据时	明确标注示例内容，并作为预览展示
404 导航辅助	提供首页和热门内容的链接；搜索框	只显示一句“未找到页面”	插画 + 简洁说明 + ≥2 个后续去向

---

验证结果（编排）

移交时，使用各项审查技能可安装的 name 指定审查视角。仅在相应技能已安装时调用；如果未安装，此技能本身已包含这些规则，可继续操作，无需因此受阻。

生成或修订后，将结果交给审查视角审核，而不是直接宣布完成。这些是候选审查视角——具体方式由 docs/orchestration-policy.md 决定，也可以将整个流程交由 ux-design-review 处理。此处，heuristics 和 microcopy 属于 A 级（自动运行）；accessibility 和 aesthetics 属于 B 级（可选）——在现有设计系统下，aesthetics 将被跳过，accessibility 则会缩小到使用方面。如果用户调用此技能只为处理某个具体事项，请遵守该范围。

• ux-heuristics-audit （A 级） — 系统状态是否清晰可见（为什么是空的？）、错误恢复质量，以及不同状态类型是否符合用户预期。
• ux-accessibility-audit （B 级——可选；在设计系统下缩小范围） — 插画替代文本、CTA 对比度与目标尺寸、消息可读性。
• ux-aesthetics-audit （B 级——可选；在设计系统下跳过） — 简洁与杂乱之间的平衡、插画是否与产品的视觉语言一致。
• ux-microcopy-audit （A 级） — 此技能成败取决于文案：说明是否具体、CTA 标签、语气（鼓励用户，绝不责怪用户）。

如果审查发现冲突（例如，品牌希望使用大幅插画，而快速理解又是优先目标），请回归主要任务：用户进入此屏幕是为了完成某件事——帮助他们开始行动。

---

常见的错误／正确做法

❌ 不要	✅ 应该
只显示“暂无可用数据。”，没有其他内容	每次都说明为何为空，以及接下来该做什么
泛泛地显示“未找到任务”	“所有任务都已完成！添加新任务，让自己保持高效”
空购物车没有后续操作路径	“购物车为空。现在就开始购物吧！” + [立即购物]
在无结果提示中责怪用户（“你输入了错误的查询”）	提供拼写提示、搜索建议、热门类别
使用充斥术语的 404 提示	简洁易懂的文字 + 插画 + 后续链接
首次使用的屏幕上放三个地位相同的 CTA	一个主要操作；替代操作弱化显示
在空仪表板上铺陈一大段教程	精简文案 + 一个明确的第一步（如有帮助，可提供带标签的示例数据）
到处乱放可爱插画	使用相关且符合品牌调性的视觉元素，让它们传达含义
未检查就发布	移交给启发式 + 无障碍 + 美感 + 微文案审查

---

来源参考（Uxcel）

• 如何设计实用的空状态