空状态
Empty State
别名:Empty State空状态页面空白页占位无数据占位空数据提示零数据状态暂无内容
这是什么
当列表或页面没有数据时，不留一片空白，而是用插图、一句说明和一个明确的下一步操作填充。 它解决的是"用户面对空白不知道发生了什么、也不知道该做什么"的问题—— 把空档变成引导起点：首次使用教用户开始，搜索无结果给出路。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 首次使用，账号尚未产生数据
- 搜索或筛选没有匹配结果
- 操作清空了内容，需要引导恢复
✕ 不适用场景
- 只是加载的瞬间，应使用骨架屏
- 数据缺失由错误导致，应区分错误态
- 编辑类画布，用户需要空白自由度
常见形式
首次使用
First use
插图 + 主 CTA 引导创建第一条数据
无搜索结果
No results
说明无匹配并提供"清除筛选"出路
极简
Minimal
只有一行说明文字，适合次要区域
实现要点
flex centeringsvg strokeborder-dashedmin-height空态容器保持与有数据时相近的最小高度，避免切换跳动；插图用简单描边 SVG（stroke: currentColor） 随主题变色；文案说明"为什么空"并指向一个动作；主 CTA 一个就够， 次级操作弱化为链接。错误导致的数据缺失不要复用空态，应单独设计错误态。
相关概念
用与真实内容结构一致的灰色占位块表示加载状态，通常带轻微的微光扫过或呼吸动画。 它告诉用户"内容马上就位，结构长这样"，而不是让用户盯着空白或转圈等待。
交互模式相似概念用"蒙层 + 聚光高亮 + 分步气泡"的方式带用户认识界面：每一步只露出一个关键区域并就地解释， 上一步/下一步与步骤指示器控制节奏，可随时跳过。它把功能说明放在功能发生的位置， 而不是让用户去文档里自己找。
交互模式相似概念用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件搭配使用用即时过滤把大列表缩到与当前输入相关的一小部分：用户在搜索框敲字，列表随之实时收窄， 并显示命中数量与空结果提示。它把"查找"变成"修剪"，不用提交、不用等跳转，反馈就在眼前。
交互模式相似概念用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件搭配使用