← 返回 Web 词条

空状态

Web需自己实现

Web 原生没有这个

Web 没有原生的空状态元素或统一视觉规范。通常在原本显示内容的区域里放置简短说明,并根据原因提供创建内容、调整筛选或返回等下一步操作。

通常怎么做:使用语义化 HTML 自定义说明、插图和下一步操作。

适用范围:桌面与移动端主流浏览器

社区一般叫它 Empty State · Blank Slate

它在列表或搜索结果没有内容时说明当前情况,并告诉用户接下来可以做什么。

  • 列表里什么都没有时显示的那一页
  • 没有搜索结果时看到的提示画面
  • 还没有任何东西时告诉你下一步做什么的页面
  • 空状态
  • 无内容页
  • 缺省页
  • 空白状态

其他平台的相似实现

iOS原生支持
Content-Unavailable View本平台没有对应叫法

Apple 提供专门的内容不可用界面,可表达空列表、无搜索结果和加载失败等情况,并组合标题、说明、图标与操作。

看 iOS 视角 →
Android原生支持
Empty View本平台没有对应叫法

Android Framework 的 Empty View 只覆盖传统 AdapterView、ListView 和 GridView;RecyclerView 与 Compose 没有等价的通用组件,仍需自行组合空状态内容。

看 Android 视角 →

使用规范

什么时候用

  • 列表、收藏或工作区当前确实没有任何内容
  • 搜索或筛选没有匹配结果,需要解释原因并帮助用户调整条件
  • 用户还没完成创建第一项内容的关键动作,需要提供明确入口

什么时候别用

  • 内容仍在请求中 → 用 Skeleton 或 Loading Indicator
  • 请求失败或权限不足 → 明确显示错误原因和恢复办法,不能伪装成普通空状态
  • 只是为了填满空白而放无关插图或冗长说明

Web 出处

查看 Web / iOS / Android 完整对照 →概念页上还有可交互示例。