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錯誤/不可用

"我們面臨挑戰。稍後嘗試「+重復」/「系統狀態」。