empty-state

设计或改进空状态，让空白区域成为有用的产品体验，引导用户了解情况、熟悉界面并继续下一步。

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

必须的准备工作

用户通过 /empty-state 启动此工作流。激活此技能后，加载 $frontend-design — 其中包含设计原则、反模式和 Context Gathering Protocol。继续之前，请遵循该协议 — 如果尚无设计上下文，必须先加载 $setup。此外，还要了解：用户应从此界面获得什么价值。

---

评估空状态

了解你面对的是哪种空缺情况：

1. 状态类型：

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

2. 用户疑问：

   • 这个区域有什么用途？
   • 为什么值得关注？
   • 接下来应该做什么？

3. 无效界面元素审查：

   • 是否显示了标签页、筛选器、侧边栏、排序控件或空工具栏，尽管它们目前没有任何作用？

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

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

规划空状态

查阅 empty-state patterns，了解主要空状态类型、整页错误变体、CTA 规则以及减少界面元素的指导。

围绕以下结构设计状态：

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

打造更好的空状态

首次使用状态

• 说明此处将显示什么
• 清楚地说明其价值
• 提供最明确的起始操作
• 考虑提供入门模板或示例数据快捷方式

无结果状态

• 说明当前查询／筛选没有产生结果
• 提供恢复操作，例如清除筛选条件或扩大搜索范围
• 保留足够的上下文，让用户了解发生了什么

内容已清空状态

• 语气比首次使用时更轻松
• 提供简单的重新创建方式
• 适当时提供撤销或恢复选项

权限状态

• 明确说明访问限制
• 说明谁可以授予访问权限，或需要什么角色
• 条件允许时提供申请访问权限的途径

错误状态

• 用简单语言说明发生了什么故障
• 根据故障类型提供相应的恢复方式：临时故障时重试，会话过期时重新登录，403 时申请访问权限，404 时返回主页／搜索页面，服务出现更广泛的故障时查看状态页面／联系支持
• 必要时提供支持／帮助途径

减少无用界面元素

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

谨慎运用视觉元素

• 插画或图标是可选项，但如果有助于理解内容或吸引注意力，就值得使用
• CTA 的视觉强调仍应强于装饰元素

切勿：

• 让用户面对“没有项目”，却不给出下一步
• 仅仅因为完整界面通常包含某些控件，就保留无用的控件
• 让插画盖过提示信息和 CTA
• 对首次使用、权限限制和错误状态使用相同的空状态语气
• 在有更具体的恢复方式时，使用笼统的兜底错误页面

验证空状态质量

• 清晰度：此状态是否说明了这里应放置什么？
• 价值阐述：是否说明了用户为何应关注？
• 下一步：行动号召是否一目了然？
• 界面简化：是否移除了非活跃界面元素？
• 语气恰当：此状态是否符合首次使用／无搜索结果／权限不足／出错等场景？

请记住：最好的空状态就像贴心的产品设计，而不是应用无话可说。