空狀態下的UX支架
1）什麼是空白狀態，為什麼需要它們
空狀態是指暫時缺少主要內容的屏幕/小部件：在第一個活動之前，清除後，零結果，如果下載錯誤，則沒有權限/訪問權限。
空狀態目標：- 解釋「為什麼這裏是空的」；
- 顯示分區的價值；
- 提出明確的下一步行動（或多種選擇）；
- 減少焦慮並防止離開。
良好的空狀態=上下文+收益+動作。
2）空狀態類型學
1.主要零（第一時間限制）：用戶尚未創建/配置任何內容。
2.零搜索/過濾器：查詢沒有結果。
3.時間空白：數據正在裝載或正在排隊。
4.限制/權利：沒有訪問權限,沒有足夠的驗證級別。
5.清除用戶：清除購物車/歷史記錄。
6.技術問題：網絡/服務故障,中繼。
3）設計原則
上下文：談論空虛的特定原因。
價值→行動：首先為什麼這個部分，然後做什麼。
一個主要的CTA：必要時是次要的（學習更多/常見問題）。
簡潔明了：1-2句子+清晰的按鈕。
視覺支撐：圖標/插圖支持意義,不分散註意力。
防止僵局：總是有前進的道路。
語調一致性：友好，安靜；沒有關鍵步驟中的笑話（付款、安全）。
A11y和本地化：可讀的屏幕閱讀器，正確傾斜，考慮行長。
4）空狀態框架（模板）
標題（可選,1行）-陳述價值或理由。
文本（1-2句子）是「為什麼空」+「接下來會發生什麼」。
主要CTA是主要目標行動。
次要STA/鏈接-幫助/規則/文檔。
視覺（可選）-24-96 px的簡單插圖，不要超載。
5）情景模式
5.1 Onbording/第一個零
目標：導致第一個成功的行動。
文字： 「查看個人建議,填寫個人資料並選擇興趣。」
CTA：「填寫個人資料」/「選擇興趣」。
提示： 添加微觀力量/時間指示器：「這需要~ 1分鐘。」
5.2搜索/過濾器=零結果
目的：幫助調整查詢。
文字： "從"live blackjack"中找不到任何東西。嘗試"blackjack"或刪除"Ispert： X"過濾器"
CTA：「重置過濾器」次要：「打開目錄」。
5.3付款/錢包為空
目的：鼓勵添加方法/首次充值。
文字： 「保存付款方式-充值和結論將更快地進行。」
CTA：「添加付款方式」次要：「規則和傭金」。
5.4驗證/訪問
目的：以透明的方式解釋取出限制和途徑。
文字： "本節在確認身份後可用。通常最多需要2分鐘"
CTA： 「通過驗證」次要：「為什麼需要？」
5.5旅途中的數據/時間空白
目的：減少等待焦慮。
文字： "我們收集您的數據。這通常最多需要30秒。您可以離開頁面-我們將在一切準備就緒時通知您"
CTA： 「可以理解」次要：「接下來會發生什麼？」
5.6清理/清除後
目的：確認行動，提出下一步行動。
文字： "歷史已被清除。下次補給後將出現新的操作"
CTA：「補充賬戶」。
5.7錯誤/轉發
目標：恢復的明確途徑。
文字： "無法下載數據。請檢查網絡或重試"
CTA：「重復」次要：「系統狀態」。
6）微文本： 現成的模板
第一個零（目錄/選定）：- "您添加第一個遊戲時，將出現一些遊戲。 添加到收藏夾
- "根據要求"{query}"什麼也沒發現。修改查詢或重置過濾器。［重置過濾器］"
- "你還沒有保存的方法。添加卡或錢包以加快付款速度。［添加方法］"
- "未經年齡確認,此功能不可用。這需要~ 2分鐘。［確認年齡］［為什麼需要？］"
- "我們認為過去24小時的統計數據……通常長達30秒。我們將在一切準備就緒時顯示通知"
- 服務不可用我們已經喝了。稍後嘗試或檢查狀態。［重復］［系統狀況］"
7）視覺語言和插圖
使用輕巧的單色/雙色插圖來避免與CTA爭論。
尺寸和縮進-如內容卡（視覺一致性）。
不要在壓力腳本（付款/安全）中描繪幽默的場景。
8）本地化和可用性
按行長放置（DE/TR更長）。
在本地翻譯數字格式、貨幣、日期。
對於屏幕閱讀器：role=「status」，aria-live=「polite/assertive」用於揚聲器。
不要只在圖像中輸入含義：復制文本。
檢查320 px的可讀性和對WCAG的對比度。
9）度量與實驗
關鍵指標：- CTR的主要空態CTA；
- 轉換為「第一次成功」（活動活動）；
- 第一次行動前的時間；
- 返回屏幕的頻率沒有進展；
- 搜索結果為零的比例；
- 情景支持請求。
- 特定vs通用標題；
- 動作的CTA動詞vs是中性的；
- 增加時間估計；
- 次要CTA（FAQ）的可用性和按鈕順序；
- 插圖vs圖標vs沒有視覺效果。
10）反模式
「這裏空無一人」，沒有解釋或步驟。
關鍵步驟中的笑話（付款，安全）。
單個CTA「了解更多」不參考上下文。
被動承諾： 「必須添加」。積極寫道：「添加……」
長段落：1-2句子最多。
播放器而不是形狀上的標簽-會損害A11y和理解。
隱藏限制（「即時」，盡管可能會延遲）。
11）發行前的支票清單
- 很明顯，為什麼是空的？
- 一個句子中有分區的價值嗎？
- 是否有一個主要的CTA，如果需要，是次要的？
- 案文簡短（≤ 140個標誌）和具體？
- 添加了時間/努力評估（如果適用）?
- 音調是否符合腳本（平靜/支持）？
- 已驗證本地化和A11y （aria屬性、對比度）？
- 圖像不主導CTA？
12）「之前/之後」示例"
遊戲目錄（第一個零）
之前： 「這裏還沒有任何東西」
之後： "收集你的磁帶。選擇3種最喜歡的類型-開始推薦。［選擇類型］"
零搜索
之前： 「什麼也沒找到」
之後： "通過"高限額輪廓"沒有結果。移除High limit過濾器或嘗試roulette。［重置過濾器］"
付款
之前： 「沒有付款方式」
之後： "保存卡或錢包-充值和結論將變得更快。［增加方式］［委員會和時限］"
驗證化
之前： 「無法訪問」
之後： "該部分在確認身份後可用。這~需要2分鐘。［通過驗證］［為什麼這很重要］"
13）嵌入設計系統
將帶有props的EmptyState組件添加到UI-kit：- 「標題」（字符串，可選）
- 「body」（句子的簡短文本1-2）
- `primaryAction { label, onClick }`
- `secondaryAction { label, href/onClick }`
- 「icon/illustration」（可選）
將文本存儲在組件旁邊的i18n文件中,支持密鑰和說明,連接音調圖（音調和詞匯按情況）。
14）快速構造（復制和使用）
Template 1-第一個零：- 標題：「從第一步開始」
- 案文是：「一旦你選擇了利益，這裏就會有建議。」
- CTA：「選擇興趣」
- 次要：「它是如何工作的？」
- 文字："Po" {query}"一無所獲。重置過濾器或重新定義查詢"
- CTA：「重置過濾器」
- 次要：「目錄」
- 文字："該功能可在年齡確認後使用。通常長達2分鐘"
- CTA：「確認年齡」
- 次要：「為什麼需要？」
- 文字："我們每天收集數據。通常長達30秒。我們將在一切準備就緒時通知我們"
- CTA：「好」
最終的spargalka
上下文+價值+動作在一個堆棧中。
一個主要的CTA，沒有視覺重量競爭。
簡而言之：1-2句。
總是打破僵局：沒有死胡同的屏幕。
本地化和A11y設置在組件級別。