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

效果预览

📭 还没有任何项目

创建第一个项目，从这里开始你的自动化之旅。

适合用在哪

首次使用的列表页、搜索无结果、通知中心、收藏夹。

容易踩的坑

搜索无结果和首次使用用同一套文案，用户分不清是筛选太严还是确实没数据。
插画尺寸超过 200px 把行动按钮挤出首屏，移动端用户看不到下一步。
空状态只有一句「暂无数据」没有任何按钮，用户只能返回离开。

设计提示词 · Prompt

空状态（Empty State）：垂直居中三件套——56-72px 的插画或大 emoji（风格与整站一致，也可用几何图形 + 品牌浅渐变底）→ 一句话标题（14-16px 680 字重，说清"这里是什么"）→ 一行说明（13px 灰，说清"为什么是空的"）→ 一个主按钮给出明确的下一步（"新建第一个项目"）。搜索无结果的变体：加"清空筛选条件"的次按钮。空状态是转化工具不是装饰——每个空状态都要回答"用户现在该干什么"。

Empty State: a vertically centered trio — a 56-72px illustration or large emoji (style consistent with the whole site; can also be geometric shapes + a light brand gradient background) → a one-sentence title (14-16px, 680 weight, explaining "what this place is") → one line of description (13px gray, explaining "why it is empty") → one primary button giving a clear next step ("Create your first project"). Variant for no search results: add a secondary button "Clear filters". An empty state is a conversion tool, not decoration — every empty state must answer "what should the user do now".

常见搭配

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

表格空状态Table Empty State 首用引导Blank Slate Onboarding 筛选标签Filter Chips

演示 HTML 结构

<div class="s d-emptystate">
  <span class="d-emptyart">📭</span>
  <b>还没有任何项目</b>
  <p>创建第一个项目，从这里开始你的自动化之旅。</p>
  <button class="d-btn d-btn--p d-btn--sm">＋ 新建项目</button>
</div>