空状态
Empty State
没东西时出现的那块:一张小插画、一句说明、一个「去添加」的按钮。
全平台通用状态与反馈内容区组件
大白话说明
空状态不是错误页:它出现于「本来就还没有」的时刻——没数据、没结果、没权限、断网,四种空各有说法和出路。结构是插画 + 一句为什么 + 一个下一步动作,三者齐全才算合格。
什么时候用
一切列表、搜索结果、消息中心都要预先设计它的四种空,别等上线后裸奔「暂无数据」。
什么时候不用
加载中不是空状态(那是骨架屏的活);真正的系统错误走错误页,别用空状态粉饰。
细节与变体
- 搜索无结果的空状态第一动作是「清掉筛选」,不是让用户回首页
- 插画风格与引导页统一,别每个空状态换一个画师
- 无权限的空状态要说明找谁申请,而不是只写「无权限」
配套效果见下方「可用效果」。
配套提示词(点开填空、复制)
可用效果
参考实现(开源)
- Open Doodles 插画 ↗ CC0-1.0 · 免费(CC0)
手绘风免费插画:涂鸦人物与场景,空状态和引导页的常用粮草。
- unDraw 插画(仅外链) ↗ NOASSERTION · 免费使用(站内条款,不可再分发)
最知名的开源风插画站:本站仅外链参考,不打包、不再分发其文件。
- LottieFiles 免费动画库 ↗ NOASSERTION · 免费库可用(Lottie 简单许可)
最大的 Lottie 动画集市:免费库可商用,下载 JSON 就能在 App 和网页里播。