跳到主要内容
Termlib

布局模式 · 特定页面

空状态

Empty State

也叫：空页面、无数据状态、缺省页、暂无数据、Empty

列表、表格或页面没有内容时显示的占位区块，用插图和一句话说明为什么是空的，并给出下一步操作按钮。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

列表没有数据时显示空状态：在列表区域水平垂直居中，放一个 120px 的灰色线条插图，下方是标题「还没有项目」和一行灰色说明「创建第一个项目，开始管理你的任务」，再下方是主按钮「新建项目」。搜索无结果时改为「没有找到相关结果」并提供「清除筛选」按钮。加载中和加载失败不要显示空状态。

发给

01判断

你的内容是这样吗？

对照两列，确认空状态是不是你要找的。

符合这些情况，用空状态

  • 列表、表格等区域当前没有任何数据时
  • 新用户第一次使用、需要引导创建第一条内容时
  • 搜索或筛选后没有匹配结果、需要告诉用户下一步怎么办时

是这些情况，换成别的

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    只显示「暂无数据」四个字，没有原因也没有下一步操作

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    数据加载完成前先闪一下空状态，再跳出真实内容

  3. 03

    接口报错时也显示「暂无数据」，掩盖了真正的问题

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

在内容区中央纵向排列插图或图标、标题、一行说明和一个操作按钮，整体水平垂直居中。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1内容区中间一个灰色插图或大图标
  2. 2插图下方是一行标题和一行灰色说明
  3. 3说明下方有一个「新建」「去添加」之类的按钮

04解释

详细解释

空状态出现在「还没有任何数据」的时候：新用户第一次打开项目列表、搜索没有结果、筛选后什么都没有、消息全部已读。它通常居中显示一个灰色插图或图标，一行标题（「还没有项目」），一行说明（「创建第一个项目，开始管理你的任务」），再加一个主按钮（「新建项目」）。

它的价值是把死胡同变成引导：如果只留一片空白，用户会以为页面坏了或者还在加载；好的空状态会说清原因，并告诉用户接下来能做什么。

要区分几种不同的「空」：首次使用的空，要引导创建；搜索或筛选无结果的空，要提示换个关键词或清除筛选。加载中、加载失败、没有权限都不属于空状态，应该分别显示加载状态和错误提示，而不是假装「暂无数据」。

开发者信息
术语 ID
layout-empty-state
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-empty
  • .el-empty
  • .arco-empty
  • .t-empty
  • .n-empty
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • empty
  • empty-state
  • no-data
  • no-results
  • blank-slate
  • empty-placeholder
  • empty-view
  • nothing-found
  • zero-state
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Empty
  • EmptyState
  • NoData
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30