Empty状态和UX提示

1）为什么需要空白状态

• 解释为什么是空的，
• 展示了接下来要做什么，
• 提供安全的第一步，
• 减少焦虑并节省支持时间。

2）empty状态类型学

1.首次启动（第一次启动）-用户尚未采取任何行动。
2.无数据（zero data）-未创建实体或列表为空。
3.过滤器/搜索（no results）-条件排除了一切。
4.错误/时间不可用-网络/服务器,但原则上数据可用。
5.没有权利/限制-禁止访问,需要KUS/角色/限制。
6.维修-计划工作，等待。

3）empty卡的结构

图标/插图（不要超载；对比≥ AA）。
单行标题："此处为空"。

原因/背景： "您尚未添加……"/"过滤器没有找到匹配项。"

1-2行动（CTA）：主要（主要方桉）、次要（替代方桉）。
帮助链接（可选）。
页面级别：保持熟悉的导航和过滤器-不要将屏幕变成死胡同。

html
<section class="empty" role="region" aria-labelledby="empty-title">
<svg aria-hidden="true" class="empty__icon"><!-- … --></svg>
<h2 id = "empty-title "> It's empty for now </h2>
<p> Create the first campaign or change the filters. </p>
<div class="actions">
<button class =" btn btn--primary "> Create campaign </button>
<button class =" btn btn--ghost "> Reset Filters </button>
</div>
<a class =" help" href = "/help/campaigns "> How it works </a>
</section>

4）音调和文字（UX文稿）

清晰而仁慈。避免"错误0x……"

原因→行动。""VIP"过滤器排除了所有条目。重置过滤器?"

没有过错。不要责怪用户空虚。
一个想法是一个句子。
本地化：避免文化隐喻；书签+20-30%的文本长度。

5）插图和视觉

中立，不引人注目；在黑暗主题中，提升插图的亮度。
不要使用插图作为唯一的意义载体。
规模是固定的；不要打破网格和基线。

6） CTA和替代品

主要CTA是主要的下一步（创建/存款/订阅）。
次要是"查看演示"、"导入"、"重置过滤器"。
选择限制：最多2个CTA；其余的在"更多"中。
对于风险/付款-关于后果和取消的透明文本。

7）假设中的空状态

7.1首次启动

3-5个步骤的海德支票："添加付款方式","选择提供商"。
跳过按钮+链接到海德。

7.2无数据

简短的解释"为什么是空的"+CTA"创建"/"导入"。
提示："可以下载CSV"（链接到模板）。

7.3个过滤器/搜索

显示哪些过滤器处于活动状态和"重置"按钮。
提供近距离匹配或替代查询。

7.4错误/不可用

"我们面临挑战。稍后尝试"+重复"/"系统状态"。