design-empty-states

技能：设计空状态

目的

创建有帮助、可操作的空状态，引导用户继续操作，而不是让他们陷入困境。

类型

生成式 + 评估式

输入

• 上下文（此处通常会显示什么）
• 用户状态（首次使用还是清空了内容）
• 可用操作（用户可以做什么）

输出

• 空状态设计规范
• 文案建议
• 需要突出的主要操作
• 通过/未通过评估

执行的转换

将空白屏幕转化为引导和指导时刻，通过提供上下文、说明和明确的后续步骤，帮助用户继续操作。

评估标准

通过（良好的空状态）

• 说明此处原本会显示什么（建立预期）
• 告诉用户如何添加内容（提供明确指引）
• 提供清晰的主要操作按钮
• 使用恰当的插图/图标（而非通用图案）
• 语气友好、乐于助人（而非“未找到项目”）
• 隐藏无用的界面元素（没有内容时无法使用的标签页、筛选器）

未通过（糟糕的空状态）

• 空白屏幕或只显示“无数据”
• 将技术错误信息作为空状态
• 没有说明下一步该做什么
• 插图通用且与上下文无关
• 没有任何操作，令用户无从继续

空状态组件

1. 插图/图标（可选，但有帮助）

   • 与内容类型相关
   • 不要使用通用的“404”风格
   • 可以是简单图标或定制插图

2. 标题

   • 友好且具有说明性
   • 不要使用“空”或“无项目”
   • 示例：“还没有项目”或“开始你的第一个营销活动”

3. 说明

   • 简要说明此区域的用途
   • 说明如何添加内容
   • 说明添加内容的好处

4. 主要操作

   • 清晰的 CTA 按钮
   • 将用户带到创建流程
   • 明确的下一步

5. 辅助信息（可选）

   • 了解更多链接
   • 示例/模板
   • 导入选项

空状态类型

类型	上下文	处理方式
首次使用	新用户，没有内容	引导、介绍、明确的 CTA
用户已清空	用户删除了所有内容	确认、撤销选项、重新添加 CTA
无搜索结果	搜索/筛选没有匹配项	调整筛选条件、清除搜索、尝试其他词语
无权访问	权限限制	说明原因以及如何申请访问权限
错误状态	加载失败	重试操作、联系支持

常见失败模式

失败情况	说明	修复方法
空无一物	一片空白	添加上下文、插图和 CTA
以错误代替空状态	显示“404”或“Null”	区分错误状态和空状态
无路可走	只有提示，没有操作	始终提供主要 CTA
通用插图	与内容无关的可爱角色	使用相关图标或体现上下文的插图
消极表述	“你没有朋友”	改用积极表述：“结识新朋友”
信息过多	大段文字	控制在 1-2 句话，并提供 CTA

前置条件

• 了解用户目标
• 了解创建流程

依赖项

• design-button-hierarchy（需要明确的主要操作）
• apply-typography-scale（标题与正文的层级）

Refactoring UI 参考

• “不要让用户陷入困境”
• “空状态是机遇”
• “建立预期”

评估示例

**输入：**仪表板以小号灰色文字显示“没有可用数据”，没有其他内容

**评估：**未通过

• 表述消极
• 没有说明此处应该显示什么
• 没有可执行的操作
• 视觉呈现过于不显眼

建议：

• 标题：“还没有报告”
• 说明：“创建你的第一份报告，开始追踪指标”
• 主要按钮：“创建报告”
• 可选：添加小型插图或图标
• 可考虑：预览模板/示例