空状态

Empty State

也常被叫作：暂无数据空白页没内容时的样子空列表

界面与组件通常止于「主路径」约 1 分钟读完

你可能会这么说

「列表里一条记录都没有的时候，页面别干巴巴一片空白，得告诉用户这是怎么回事、下一步该干嘛。」

空状态 Empty State

当列表、页面或模块没有任何内容时，展示给用户看的引导界面，而不是一片空白。

空状态是页面在没有任何数据时出现的样子——新用户的列表、清空后的回收站、还没开始的项目。它之所以重要，是因为用户第一次打开你的产品，看到的多半就是空状态。一个空白的格子，会让用户以为功能坏了；一句有引导的话，会告诉他「这里以后会长出什么、我现在该点什么」。

好的空状态通常由三层组成：发生了什么（一句说明，比如「你还没有任何项目」）、为什么是空（可能原因，比如「新建的项目会出现在这里」）、下一步动作（一个按钮，比如「新建项目」）。第一层回答「我在哪」，第三层回答「我能干嘛」。

空状态最常被 AI 做坏的地方是敷衍：一句干巴巴的「暂无数据」了事，没有动作按钮，也不解释这是正常情况还是出了问题。另一个坑是把「加载中」的空白和「真的没数据」的空状态搞混——用户分不清是还在转还是已经空了。

长什么样真实可交互，不是截图

你还没有任何项目

新建的项目会出现在这里，方便你随时回来继续。

上面的空状态有三层：告诉用户「这里现在没有项目」（发生了什么）、说明这是正常情况（为什么是空）、给一个主按钮「新建项目」（下一步能干嘛）。

拆开看，里面有这几块

1
图标或插画 Illustration
让空白不那么冷清，但它是装饰，不能替代文字说明。
2
标题 Title
一句话说清这里现在是空的，比如「还没有任何项目」。
3
说明文字 Description
解释为什么是空，以及这里以后会装什么，把「是不是出问题了」的担心打消掉。
4
动作按钮 Action
给用户一个最该做的下一步，比如「新建项目」「去导入」。没有它，空状态就只是一句空话。

常见的有哪几种

首次使用First Use

用户第一次来，什么都没有。重点说明「这里会装什么」并给引导动作。

用在：新账号、刚注册

结果为空No Results

搜索或筛选没有匹配项。要说明「不是坏了，是没匹配」，并提供清除筛选的动作。

用在：搜索无结果、筛选为空

内容已清空Cleared

数据被删光或过期清空了。可结合「撤销」或提示过去有内容。

用在：清空回收站、任务完成

错误占位Error Placeholder

加载失败导致没东西。这不是空状态，要说「加载失败」并提供重试，别伪装成「暂无数据」。

用在：网络失败、接口报错

容易搞混？这样区分

空状态 ≠ 骨架屏 Skeleton

骨架屏是数据还在加载时显示的占位形状，一晃一晃的；空状态是数据加载完、确认没有之后显示的样子。顺序是：骨架屏（加载中）→ 空状态（确认空）。AI 常把两者混成一个，导致加载完还是白屏。

看骨架屏

空状态 ≠ 加载失败 Load Error

加载失败是出错了，不是没数据。该显示的是「加载失败 + 重试按钮」，而不是伪装成「暂无数据」——后者会骗用户以为一切正常，其实数据永远来不了了。

什么时候用得上

新用户首页

用户第一次进来，给一句「这里会放你的项目」+「新建项目」按钮，别留一片空白。

搜索无结果

告诉用户「没有找到匹配项」，给「清除筛选」按钮，而不是一张冷冰冰的空格子。

列表已清空

说明「这里的内容已清空」，配合「撤销」或说明这是正常的，别让用户以为删坏了。

你可以这样跟 AI 说

直接复制下面这段，把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了：改哪里、不许动啥、做完交什么。

【范围】只改 [这个列表/页面] 在没有数据时显示的样子，不动有数据时的布局
【要求】
  - 当列表为空时，显示空状态，别只是一句「暂无数据」
  - 空状态要有三层：一句说明（发生了什么）、一句解释（为什么是空/这里以后装什么）、一个主按钮（最该做的下一步，比如「新建项目」）
  - 把「加载中」和「真的没数据」区分开：加载时转圈或骨架屏，加载完确认没数据才显示空状态
  - 如果是搜索/筛选导致的空，提供「清除筛选」动作
【边界】不要改有数据时的列表样式；不要新增第三方组件库
【交付】告诉我改了哪些文件、我打开哪个地址、怎么制造一次空列表能看到这个空状态、以及哪部分你没验证

这段话里最关键的是那句「把加载中跟真的没数据区分开」——这是空状态最容易被做糊弄的点：AI 常让空白加载框永远转着或直接显示「暂无数据」，用户分不清到底怎么了。

它说「做好了」，你怎么自己验

这是本站的重头戏。AI 最会的不是写代码，是说「已完成」。这一条，它通常最多做到「主路径」这层：真实用户的正常操作能走通，不靠特殊参数。

要亲眼看到这些，才算数

制造一次空列表（新账号或清空数据），看到的不再是白板，而是一个有说明、有动作按钮的空状态。
空状态里有个主按钮，点了能真的进入该做的下一步（比如能新建项目），不是装饰。
标题和说明文字说清了「这里现在是空的、这是正常的」，没有让用户觉得坏了。
加载中的界面和空状态是两个不同的样子：加载时在转圈或骨架屏，加载完确定没数据才显示空状态，不会出现一直白屏。
如果是搜索无结果，能一键清除筛选回到完整列表。

它常这么糊弄你

「空状态已加」——但只是把空白换成了一句「暂无数据」，没有动作按钮、没有解释，用户还是不知道干嘛。
把「加载失败」伪装成空状态显示「暂无数据」——这是出错了，不是没数据，用户会被骗以为一切正常。
加载中一直白屏，用户分不清是还在转还是已经空了，于是拼命刷新。
空状态只有一个图标，没有文字说明也没有按钮——图省事的敷衍。
空状态做了但根本没接到真实数据上，代码里是死的，界面永远不会出现它。

空状态能验到「主路径」层：你亲手制造一次空列表，看它显示什么、按钮能不能用、和加载中有没有区别，就验完了。

考考你选一个你觉得对的

新用户第一次打开产品，列表是空的。哪种空状态是对的？

想再深挖一点靠谱出处

空状态设计（Empty State Design）NN/g ↗

# 空状态 (Empty State)

> 当列表、页面或模块没有任何内容时，展示给用户看的引导界面，而不是一片空白。

**你可能会这么说**：列表里一条记录都没有的时候，页面别干巴巴一片空白，得告诉用户这是怎么回事、下一步该干嘛。

空状态是页面在没有任何数据时出现的样子——新用户的列表、清空后的回收站、还没开始的项目。它之所以重要，是因为用户第一次打开你的产品，看到的多半就是空状态。一个空白的格子，会让用户以为功能坏了；一句有引导的话，会告诉他「这里以后会长出什么、我现在该点什么」。 好的空状态通常由三层组成：发生了什么（一句说明，比如「你还没有任何项目」）、为什么是空（可能原因，比如「新建的项目会出现在这里」）、下一步动作（一个按钮，比如「新建项目」）。第一层回答「我在哪」，第三层回答「我能干嘛」。 空状态最常被 AI 做坏的地方是敷衍：一句干巴巴的「暂无数据」了事，没有动作按钮，也不解释这是正常情况还是出了问题。另一个坑是把「加载中」的空白和「真的没数据」的空状态搞混——用户分不清是还在转还是已经空了。

**也叫**：暂无数据、空白页、没内容时的样子、空列表

## 你可以这样告诉 AI

```text
【范围】只改 [这个列表/页面] 在没有数据时显示的样子，不动有数据时的布局
【要求】
  - 当列表为空时，显示空状态，别只是一句「暂无数据」
  - 空状态要有三层：一句说明（发生了什么）、一句解释（为什么是空/这里以后装什么）、一个主按钮（最该做的下一步，比如「新建项目」）
  - 把「加载中」和「真的没数据」区分开：加载时转圈或骨架屏，加载完确认没数据才显示空状态
  - 如果是搜索/筛选导致的空，提供「清除筛选」动作
【边界】不要改有数据时的列表样式；不要新增第三方组件库
【交付】告诉我改了哪些文件、我打开哪个地址、怎么制造一次空列表能看到这个空状态、以及哪部分你没验证
```

## 怎么验证他真的做到了

通常止于层级：**主路径** — 真实用户的正常操作能走通，不靠特殊参数

- [ ] 制造一次空列表（新账号或清空数据），看到的不再是白板，而是一个有说明、有动作按钮的空状态。
- [ ] 空状态里有个主按钮，点了能真的进入该做的下一步（比如能新建项目），不是装饰。
- [ ] 标题和说明文字说清了「这里现在是空的、这是正常的」，没有让用户觉得坏了。
- [ ] 加载中的界面和空状态是两个不同的样子：加载时在转圈或骨架屏，加载完确定没数据才显示空状态，不会出现一直白屏。
- [ ] 如果是搜索无结果，能一键清除筛选回到完整列表。

常见糊弄：
- 「空状态已加」——但只是把空白换成了一句「暂无数据」，没有动作按钮、没有解释，用户还是不知道干嘛。
- 把「加载失败」伪装成空状态显示「暂无数据」——这是出错了，不是没数据，用户会被骗以为一切正常。
- 加载中一直白屏，用户分不清是还在转还是已经空了，于是拼命刷新。
- 空状态只有一个图标，没有文字说明也没有按钮——图省事的敷衍。
- 空状态做了但根本没接到真实数据上，代码里是死的，界面永远不会出现它。

来源：https://mickerbook.com/reference/t/empty-state/