Empty State
空状态
WebMobileDesktop上手难度: 中等
列表空空如也时显示的那块内容——它该解释为什么空，以及下一步做什么。
Live Demo
真的可以点还没有照片
把手机里的照片导入这里，就能开始分析和清理。
你刚才看到的这个：新建的相册里那句「还没有照片，去拍一张吧」+ 一个相机图标 + 一个「新建相册」按钮。
它到底是什么
Empty State 是被低估最严重的模式。默认做法是「暂无数据」四个字，但这浪费了用户最困惑的那一刻。好的空状态包含三件事：为什么空、能做什么、下一步点哪里。
空状态empty state空页面零状态blank state无数据
Anatomy · 它由什么组成
Illustration插图
轻量线性，不要太花
Title标题
说明当前状态
Description描述
为什么空 + 怎么填
Primary Action主操作
一个明确的按钮
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 列表、搜索结果、收件箱没有任何内容 | 用 |
| 用户第一次使用，页面完全空白 | 用 |
| 筛选后结果为空 | 用 |
| 任务完成了（清单全部完成） | 视情况 |
| 只是加载中 | 不用 |
三种空状态要区别对待：「从没创建过」「筛选后无结果」「任务已完成」——文案和行动建议完全不同。
空状态插画不能喧宾夺主，它是配角。
Similar Patterns
别搞混一句话区分：列表空空如也时显示的那块内容——它该解释为什么空，以及下一步做什么。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
搜索无结果时显示空状态：标题「没有找到匹配的照片」，说明「试试减少筛选条件，或换个关键词」，主操作「清除全部筛选」。
不要只对 AI 说
Bad → Better不要这样对 AI 说
没有数据的时候显示暂无数据。
改成这样说
空状态写成三段式：标题说明当前状态 + 描述解释为什么空和怎么填 + 一个明确主操作；并区分「首次使用 / 筛选无结果 / 任务已完成」三种文案，不要和 Skeleton 混用。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。