空状态反馈

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

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

示例

示例可交互

Web / iOS / Android 对照

Web需自己实现

桌面与移动端主流浏览器

Empty State

也叫 Blank Slate

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

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

Android原生支持

仅传统 AdapterView;Compose 与 RecyclerView 仍需自定义

Empty View

也叫 Empty State

Views: AdapterView.setEmptyView(View)|Compose: 按状态自定义内容

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

使用规范

什么时候用

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

什么时候别用

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

给 AI 的提示词

这条词条还没有经过验证的实现提示词。