界面图鉴
空状态Empty State
你可能会问
空状态到底是什么？列表空空如也的时候该给用户看什么？
简单来说
列表还没有内容时显示的引导：说清为什么是空的、下一步做什么。
01 · 拆开看看
这一块由什么组成
它出现在「这里本该有内容」的地方：第一次使用、搜索无果、或者出了错。好的空状态不只说「没有」，还告诉你接下来能做什么。组成：
图标或插画Visual
柔和的视觉占位，别太抢戏。
标题Title
一句话说清为什么是空的。
说明Description
补充原因，或给点引导。
行动按钮Action
下一步：创建、清空筛选、重试。
02 · 常见变体
同一个零件，几种摆法
欢迎语加创建按钮，最常见。
提示换关键词，给清空筛选的出口。
说明出错了，主按钮是重试。
03 · 火眼金睛
这个页面里，哪一块是空状态？
注意分辨：还没加载完，和加载完了但没有，是两回事。
点一块试试，看看它叫什么
骨架屏Skeleton
不是它。灰块占位说明内容在路上——那是加载中。
加载指示器Spinner
不是它。转圈也是「在加载」。
空状态Empty State
就是它！加载完了、确实没有内容——图标、一句解释加一个行动按钮。
徽标Badge
不是它。红点数字是徽标。
04 · 用与不用
什么时候该上它
适合
- 首次使用的引导
- 搜索或筛选无结果时
- 数据被清空后的兜底
先别用
- 还在加载中——那是骨架屏的活
- 出错但可重试——错误态要带重试按钮
- 拿空状态藏功能入口的时候
05 · 想一想
一道题，检查眼力
用户第一次进「项目」页，还没有任何项目。页面该显示什么？
对。第一次的空白是最好的引导时机——告诉用户这里会有什么、现在能做什么。
用户分不清是坏了、没权限，还是真的没有。空白不是干净，是失联。
太急了。用户还没看清这是哪儿，就被要求干活——引导可以主动，但别抢。
06 · 说给 AI 听
让 AI 改它时，这样说
把「为什么空」和「下一步做什么」都告诉 AI，它才不会只给你一行「暂无数据」。
项目列表为空时显示空状态，带「创建第一个项目」按钮
搜索无结果时提示换个关键词，附清空筛选的链接
空状态的插画用简单的灰色图标
请求失败的空状态加一个重试按钮
最容易踩的坑
最偷懒的空状态是一行「暂无数据」——用户不知道是坏了、没权限还是真没有。空，是引导的机会。