← 返回 Web 词条
空状态
Web 原生没有这个
Web 没有原生的空状态元素或统一视觉规范。通常在原本显示内容的区域里放置简短说明,并根据原因提供创建内容、调整筛选或返回等下一步操作。
通常怎么做:使用语义化 HTML 自定义说明、插图和下一步操作。
它在列表或搜索结果没有内容时说明当前情况,并告诉用户接下来可以做什么。
- 列表里什么都没有时显示的那一页
- 没有搜索结果时看到的提示画面
- 还没有任何东西时告诉你下一步做什么的页面
- 空状态
- 无内容页
- 缺省页
- 空白状态
其他平台的相似实现
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 完整对照 →概念页上还有可交互示例。