表格空状态（Table Empty State）是什么：效果预览与 AI 设计提示词

效果预览

客户套餐金额

🔍

没有符合条件的结果

试试放宽金额范围，或者清除全部筛选条件。

适合用在哪

搜索无结果、筛选过严、数据被清空。要和「首次无数据」（Blank Slate）区分文案。

容易踩的坑

加载中和无结果共用同一视图，接口慢时先闪一下「没有结果」，让用户误判。
清除筛选按钮只清掉一个条件，仍然无结果，用户需要反复点击。
空状态出现时不播报，读屏用户只听到表头，不知道查询已经返回空。

设计提示词 · Prompt

表格空状态（Table Empty State）：表格区域保留（表头仍显示，帮助用户理解当前列的语义），但表体替换为居中的提示块：42px 圆角图标位（浅灰底 + 虚线描边）、11px 加粗标题、9.5px 浅灰说明，以及 1-2 个出口按钮。文案要区分两种场景 —— 若是「有数据但筛选后为空」，写「没有符合条件的结果」并给「清除全部筛选」；若是「真的还没有数据」，写「还没有记录」并给「新建」。绝不要只显示一行「暂无数据」。

Table Empty State: keep the table area (headers still visible, helping users understand what each column means), but replace the body with a centered prompt block: a 42px rounded icon slot (light-gray background + dashed border), an 11px bold title, a 9.5px light-gray explanation, and 1-2 exit buttons. Copy must distinguish two scenarios — if "data exists but filters return nothing", write "No results match your filters" with "Clear all filters"; if "there's genuinely no data yet", write "No records yet" with "Create new". Never show just a single line of "No data".

常见搭配

同一页面里经常和「表格空状态」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

筛选条件构建器Filter Builder 筛选标签Filter Chips 首用引导Blank Slate Onboarding 数据表格Data Table

演示 HTML 结构

<div class="s" style="width:100%">
  <div class="tb">
    <div class="tb__row tb__row--hd" style="grid-template-columns:1.5fr 1fr .8fr"><span>客户</span><span>套餐</span><span class="tb__num">金额</span></div>
  </div>
  <div class="d-center" style="padding:14px 0 0">
    <div class="tb-empty">
      <div class="tb-empty__i">🔍</div>
      <b>没有符合条件的结果</b>
      <p>试试放宽金额范围，或者清除全部筛选条件。</p>
      <button class="d-btn d-btn--g d-btn--sm" style="margin-top:2px">清除全部筛选</button>
    </div>
  </div>
</div>