空状态

Empty State

没东西时出现的那块:一张小插画、一句说明、一个「去添加」的按钮。

全平台通用状态与反馈内容区组件

大白话说明

空状态不是错误页:它出现于「本来就还没有」的时刻——没数据、没结果、没权限、断网,四种空各有说法和出路。结构是插画 + 一句为什么 + 一个下一步动作,三者齐全才算合格。

什么时候用

一切列表、搜索结果、消息中心都要预先设计它的四种空,别等上线后裸奔「暂无数据」。

什么时候不用

加载中不是空状态(那是骨架屏的活);真正的系统错误走错误页,别用空状态粉饰。

细节与变体

  • 搜索无结果的空状态第一动作是「清掉筛选」,不是让用户回首页
  • 插画风格与引导页统一,别每个空状态换一个画师
  • 无权限的空状态要说明找谁申请,而不是只写「无权限」

配套效果见下方「可用效果」。

配套提示词(点开填空、复制)

可用效果

参考实现(开源)

  • Open Doodles 插画 ↗ CC0-1.0 · 免费(CC0)

    手绘风免费插画:涂鸦人物与场景,空状态和引导页的常用粮草。

  • unDraw 插画(仅外链) ↗ NOASSERTION · 免费使用(站内条款,不可再分发)

    最知名的开源风插画站:本站仅外链参考,不打包、不再分发其文件。

  • LottieFiles 免费动画库 ↗ NOASSERTION · 免费库可用(Lottie 简单许可)

    最大的 Lottie 动画集市:免费库可商用,下载 JSON 就能在 App 和网页里播。