design-empty-states

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Skill: Design Empty States

Skill：设计空状态

Purpose

目标

Create helpful, actionable empty/zero states that guide users forward instead of leaving them at a dead end.

创建实用且可操作的空状态/零内容状态，引导用户继续操作，而非让他们陷入停滞。

Type

类型

Generative + Evaluative

生成型+评估型

Input

输入

Context (what would be here normally)
User state (first-time vs. cleared content)
Available actions (what can the user do)

上下文（该区域通常展示的内容）
用户状态（首次使用 vs 已清空内容）
可用操作（用户可执行的操作）

Output

输出

Empty state design specification
Copy recommendations
Primary action to highlight
Pass/Fail assessment

空状态设计规范
文案建议
需突出的核心操作
通过/不通过评估结果

Transformation Performed

实现的转化

Transforms blank screens into onboarding/guidance moments with context, explanation, and clear next steps.

将空白屏幕转化为包含上下文说明、解释信息和明确下一步操作的引导/入门场景。

Decision Criteria

判定标准

PASS (Good Empty State)

通过（优质空状态）

Explains what would be here (sets expectation)
Tells user how to add content (clear instruction)
Provides clear primary action button
Uses appropriate illustration/icon (not generic)
Friendly, helpful tone (not "No items found")
Hides useless UI (tabs, filters that don't work without content)

说明该区域应展示的内容（建立预期）
告知用户如何添加内容（清晰指引）
提供明确的核心操作按钮
使用合适的插图/图标（非通用型）
语气友好实用（避免使用“未找到项目”这类表述）
隐藏无用UI（无内容时无法生效的标签页、筛选器等）

FAIL (Poor Empty State)

不通过（劣质空状态）

Blank screen or just "No data"
Technical error message as empty state
No guidance on what to do next
Generic illustration unrelated to context
Dead end with no actions

空白屏幕或仅显示“无数据”
将技术错误信息作为空状态展示
未提供下一步操作指引
使用与上下文无关的通用插图
无任何操作选项的停滞场景

Empty State Components

空状态组件

Illustration/Icon (optional but helpful)
- Relevant to the content type
- Not generic "404" style
- Can be simple icon or custom illustration
Headline
- Friendly, explanatory
- Not "Empty" or "No items"
- Example: "No projects yet" or "Start your first campaign"
Description
- Brief explanation of what this area is for
- How to add content
- Benefits of adding content
Primary Action
- Clear CTA button
- Takes user to creation flow
- Obvious next step
Secondary Info (optional)
- Learn more link
- Example/template
- Import option

插图/图标（可选但实用）
- 与内容类型相关
- 非通用的“404”风格
- 可以是简洁图标或定制插图
标题
- 友好且具有解释性
- 避免使用“空”或“无项目”这类表述
- 示例：“暂无项目”或“开启你的首个活动”
描述文本
- 简要说明该区域的用途
- 告知如何添加内容
- 说明添加内容的益处
核心操作
- 清晰的行动召唤（CTA）按钮
- 引导用户进入创建流程
- 明确的下一步操作
次要信息（可选）
- 了解更多链接
- 示例/模板
- 导入选项

Types of Empty States

空状态类型

Type	Context	Approach
First-time	New user, no content	Onboarding, education, clear CTA
User-cleared	User deleted everything	Confirmation, undo option, re-add CTA
No results	Search/filter returned nothing	Adjust filters, clear search, try different terms
No access	Permission restrictions	Explain why, how to request access
Error state	Failed to load	Retry action, support contact

类型	上下文	处理方式
首次使用	新用户，无内容	入门引导、教育说明、清晰的行动召唤
用户清空	用户删除了所有内容	确认提示、撤销选项、重新添加的行动召唤
无结果	搜索/筛选未返回内容	调整筛选条件、清除搜索内容、尝试其他关键词
无权限	权限限制	说明原因、告知申请权限的方式
错误状态	加载失败	重试操作、联系支持

Common Failure Modes

常见问题模式

Failure	Description	Fix
The Void	Blank white space	Add context, illustration, CTA
Error as Empty	"404" or "Null" message	Distinguish error states from empty states
No Way Forward	Message but no action	Always provide primary CTA
Generic Illustration	Unrelated cute character	Use relevant icon or context illustration
Negative Framing	"You have no friends"	Positive framing: "Connect with people"
Too Much Info	Paragraphs of text	Keep to 1-2 sentences + CTA

问题	描述	修复方案
空白区域	纯白空白界面	添加上下文说明、插图和行动召唤按钮
错误当空状态	显示“404”或“Null”这类错误信息	区分错误状态与空状态
无前进路径	有提示信息但无操作选项	始终提供核心行动召唤按钮
通用插图	使用无关的可爱角色插图	使用相关图标或上下文匹配的插图
负面表述	如“你没有好友”这类表述	采用积极表述：“与他人建立联系”
信息过载	大段文本说明	精简为1-2句话+行动召唤按钮

Prerequisites

前置要求

Understanding of user goals
Knowledge of creation flow

理解用户目标
了解内容创建流程

Dependencies

依赖项

```
design-button-hierarchy
```
(needs clear primary action)
```
apply-typography-scale
```
(headline + body hierarchy)

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

Refactoring UI References

《Refactoring UI》参考要点

"Never leave users at a dead end"
"Empty states are opportunities"
"Set expectations"

“永远不要让用户陷入停滞”
“空状态是机会”
“建立预期”

Example Assessment

评估示例

Input: Dashboard showing "No data available" in small gray text, no other content

Evaluation: FAIL

Negative framing
No context about what should be here
No action to take
Visual treatment too subtle

Recommendation:

Headline: "No reports yet"
Description: "Create your first report to start tracking metrics"
Primary button: "Create Report"
Optional: Small illustration or icon
Consider: Template/example preview

输入： 仪表盘仅显示小号灰色文字“无可用数据”，无其他内容

评估： 不通过

负面表述
未说明该区域应展示的内容
无任何可执行操作
视觉表现过于平淡

建议：

标题：“暂无报表”
描述文本：“创建你的首个报表，开始追踪指标”
核心按钮：“创建报表”
可选：添加小型插图或图标
可考虑：提供模板/示例预览