empty-state

设计或改进空状态，让空白区域成为有用的产品时刻，帮助用户了解情况、明确方向，并迈向下一步。

此技能专用于零数据和无内容界面。更广泛的激活策略、关键时刻、首次使用教育、引导流程和采用规划，请使用 onboard。

必须完成的准备工作

阅读 frontend-design，并遵循其中的上下文收集协议。复用现有上下文，只针对重要的信息缺口提问。此外，还要了解：用户应从此界面获得什么价值。

---

评估空状态

了解当前遇到的是哪种空缺情况：

1. 状态类型：

   • 首次使用／尚未创建内容
   • 搜索或筛选无结果
   • 内容已被清空
   • 权限／访问受限
   • 在现有界面中加载内容时出错
   • 路由级或整页错误，例如 401、403、404、429、500 或 503

2. 用户疑问：

   • 这里是做什么用的？
   • 我为什么要关注？
   • 接下来该做什么？

3. 无效界面元素检查：

   • 是否显示了标签页、筛选器、侧边栏、排序控件或空工具栏，但它们目前毫无作用？

如果从代码库中无法明确上述任何一点，请直接询问用户，澄清无法推断的信息。

重要：空状态往往是用户对某项功能的第一印象。应将其视为真正的屏幕，而不是备用界面。

规划空状态

请查阅 空状态模式，了解主要空状态类型、整页错误变体、CTA 规则以及精简界面元素的指导原则。

围绕以下结构设计状态：

• 此区域的用途
• 它的价值
• 主要 CTA
• 可选模板／示例
• 目前应隐藏哪些无用界面元素

打造更好的空状态

首次使用状态

• 说明这里会显示什么
• 清晰地阐明价值
• 提供最明确的起步操作
• 考虑提供入门模板或示例数据快捷方式

无结果状态

• 说明当前查询／筛选未找到任何内容
• 提供恢复操作，例如清除筛选条件或扩大搜索范围
• 保留足够的上下文，让用户明白发生了什么

内容已清空状态

• 语气比首次使用状态更轻松
• 提供简单的内容创建入口
• 适当时提供撤销或恢复功能

权限状态

• 清楚说明访问限制
• 说明谁可以授予访问权限，或需要什么角色
• 尽可能提供申请访问权限的入口

错误状态

• 用简单的语言说明出了什么问题
• 根据错误类型提供相应的恢复方式：暂时性故障提供重试；会话过期时提示登录；403 时申请访问权限；404 时前往首页／搜索；服务范围较大的故障则查看状态或联系支持
• 需要时添加支持／帮助入口

精简无用界面元素

• 隐藏内容尚不存在时毫无价值的标签页、筛选器、侧边栏或排序控件
• 让屏幕聚焦于提示信息和下一步操作

谨慎使用视觉元素

• 插图或图标并非必需，但如果有助于理解或吸引注意力，就很有帮助
• CTA 的视觉重要性仍应高于装饰元素

绝对不要：

• 让用户面对“没有项目”却找不到下一步
• 仅仅因为完整界面通常包含这些控件，就保留当前无用的控件
• 让插图盖过提示信息和 CTA
• 对首次使用、权限受限和错误状态使用同一种空状态语气
• 明明可以提供具体的恢复路径，却使用通用的兜底错误页面

验证空状态质量

• 清晰度：此状态是否说明这里应当显示什么？
• 价值阐述：是否说明用户为什么应该关注？
• 下一步：CTA 是否一目了然？
• 界面精简：是否移除了当前无用的界面元素？
• 语气恰当：状态是否符合首次使用／无结果／权限受限／错误的情形？

请记住：最好的空状态让人觉得是贴心的产品设计，而不是应用已经无话可说。