术语图鉴/UI/UX 设计/空状态
←→切换Esc返回

空状态 Empty State

你可能会说

这个列表没有数据时显示友好提示,别一片空白。

列表没有数据时显示的友好页面——不是冷冰冰的空白,而是插画+文字+引导按钮(如「还没有文章,去写第一篇」)。

列表没有数据时显示的友好页面——不是冷冰冰的空白,而是插画+文字+引导按钮(如「还没有文章,去写第一篇」)。

也常被叫作Empty State

生活类比

像空房间门口贴的「招商中」告示——告诉你这里现在是空的,接下来可以做什么。

🎮 动手试试

📭
还没有内容
创建第一条
选择题选择一个你认为最合适的答案

关于「空状态」,以下哪个描述最准确?

你可以这样告诉 AI

帮我在列表没数据时显示一个空状态页:放一张插画、写一句友好提示文案、再加一个引导按钮。

容易混淆?这样区分

空状态 Empty State≠
错误状态 Error State

空状态表示「没有数据」是正常情况应引导用户创建,错误状态表示「出了故障」是异常情况应引导用户重试。

什么时候用

列表或页面无数据时

初始化页面、搜索无结果、筛选后为空时,用友好的插画加引导文字加操作按钮替代空白页,减少用户的挫败感和困惑。

和 AI 协作时

想让 AI 做空状态页面时,说「数据为空时显示插画、'还没有内容'文案和'立即创建'按钮」,AI 会生成空状态组件。

什么时候不用

极简工具型产品

计算器、秒表、二维码生成等工具型产品,功能即内容、不存在「空数据」场景,空状态设计属于过度设计。

与纯后端服务无关

后台服务不直接面向终端用户,空数据场景通过状态码或日志记录即可,不需要视觉化的空状态页面。

组成结构 · Anatomy

1
核心概念Core

列表没有数据时显示的友好页面——不是冷冰冰的空白,而是插画+文字+引导按钮(如「还没有文章,去写第一

2
实际表现In Practice

像空房间门口贴的「招商中」告示——告诉你这里现在是空的,接下来可以做什么。

3
与 AI 的关联AI Context

和 AI 沟通时提到「列表为空时显示个提示页」,做的就是空状态设计。

典型使用场景

空数据提示
告诉 AI「列表为空时别显示空白,画个插画写'还没有内容',下面加个'立即创建'的按钮引导用户」
想弄懂概念时
告诉 AI「用大白话给我解释什么是空状态,举个生活中的例子」

延伸阅读