空狀態系統
目的
空狀態系統提供了一個框架，用於設計當沒有資料可顯示時出現的畫面或元件。與其顯示空白畫面或通用的「找不到結果」訊息，此系統將空狀態視為引導新使用者、教育與主動發現的機會。它將潛在的死胡同轉化為富有生產力的時刻，維持使用者動能並釐清系統效用。
使用案例
- 首次體驗： 使用者首次登入且尚未建立任何內容時（例如空白的儀表板或專案列表）。
- 搜尋結果： 使用者的搜尋查詢未傳回任何相符項目時。
- 篩選： 多個作用中篩選條件組合導致資料格為空時。
- 空容器： 特定的 UI 元素，例如空的購物車、已清空的通知中心或全新的最愛清單。
- 錯誤狀態： 因權限或連線問題導致內容無法載入時（次要使用案例）。
何時不應使用
- 載入狀態： 當內容預計即將顯示時，應使用骨骼框架或旋轉圖示。
- 永久的「死」頁面： 請使用 404 頁面處理連結失效或已刪除的資源。
- 部分內容： 如果仍有部分資料可用但數量有限，應使用標準版面配置模式，而非空狀態。
- 被動背景： 請勿用於設計上本應留空的區塊（例如邊距或裝飾性的空白區域）。
輸入
- 空場景類型： 這是使用者已清空的狀態（成功）、首次執行狀態（引導新使用者），還是搜尋失敗（探索）？
- 使用者意圖： 使用者原本試圖達成或尋找什麼？
- 核心價值主張： 目前缺失的內容最主要的好處是什麼？
- 可用操作： 對使用者而言「最佳的下一個步驟」是什麼？
輸出
- 空狀態藍圖： 一個結構化定義，包含插圖、標題、內文與主要行動呼籲按鈕。
- 情境邏輯： 何時何地應觸發空狀態的規則。
- 發現策略： 填補空白處的建議內容或教育提示之建議。
工作流程
1. 識別空觸發條件
判斷狀態為何為空。將其分類以選擇適當的語氣：
- 首次執行（教育性）： 鼓勵第一次的「建立」操作。
- 使用者已清空（正面）： 確認完成（例如「全部完成！」）。
- 搜尋/篩選（輔助）： 提供擴大或調整搜尋範圍的方式。
2. 建立視覺層級
使用「三點法則」（針對空狀態修改）來建構空狀態：
- 錨點（視覺）： 一個不分散注意力的圖示或插圖，用以設定基調。
- 情境（訊息）： 一個清楚的標題說明_為什麼_是空的，以及內文說明_如何_改變它。
- 目標（行動呼籲）： 一個主要按鈕，用於觸發內容的建立或重設篩選條件。
3. 草擬行動導向的文字
- 標題： 要具體。不要用「沒有項目」，而要用「您尚未建立任何專案。」
- 內文： 提供價值。「專案能協助您組織任務。建立您的第一個專案即可開始。」
- 行動呼籲： 使用利益驅動的動詞。「建立專案」或「開始免費試用」。
4. 提供發現路徑（次要操作）
如果沒有直接的「建立」操作（例如在搜尋中），請提供替代方案：
- 重設： 清除所有篩選條件的連結。
- 建議： 熱門類別或「您是不是要查詢...」的建議。
- 教育： 連結到文件或影片教學。
5. 定義技術限制
- 響應式設計： 確保空狀態在小型視窗中仍能置中並清晰可讀。
- 無障礙： 使用適當的 ARIA 角色（例如
role="status"）以確保狀態在動態出現時能被輔助技術宣告。
決策規則
- 單一操作原則： 專注於「一個」主要操作，以避免在使用者可能感到困惑的時刻造成資訊過載。
- 同理心優先於幽默： 雖然可以帶入一點個性，但應優先考慮清晰度與助益。避免使用會隱藏解決方案的「巧妙」文字。
- 直接 vs. 間接：
- 如果使用者_可以_修正（例如首次執行），請使用主要行動呼籲按鈕。
- 如果使用者_無法_修正（例如搜尋失敗），請使用建議或重設連結。
- 圖像相關性： 使用能強化特定情境的插圖（例如搜尋使用放大鏡，檔案使用資料夾）。
限制
- 無障礙： 空狀態插圖必須設有
aria-hidden="true"或僅作為裝飾用途。文字必須符合 WCAG AA 對比度要求。主要行動呼籲按鈕以及任何次要連結/按鈕都必須符合 WCAG 2.2 SC 2.5.8（24x24px 最小目標尺寸）。 - 尺寸： 空狀態不應超過其所取代的實際內容之容器寬度。
- 一致性： 在整個網站中使用相同的視覺風格與版面配置來處理所有空狀態，以建立模式辨識。
常見失敗模式
- 「死胡同」： 告知使用者某個區塊是空的，卻沒有告訴他們如何解決。
- 過度設計： 使用複雜、沉重的插圖，分散了對主要行動呼籲按鈕的注意力。
- 負面語氣： 使用聽起來像錯誤或失敗的語言（例如「搜尋失敗！」）。
- 通用文字： 從搜尋到首次引導新使用者，所有情況都使用「沒有結果」。
- 行動裝置溢出： 在桌機上看起來很棒，但在行動裝置上需要垂直捲動才能看到行動呼籲按鈕的設計。
驗證標準
- 空狀態清楚說明為何出現。
- 有明確、可操作的主要行動呼籲按鈕或「重設」路徑。
- 視覺層級引導目光從視覺元素移動到行動呼籲按鈕。
- 語氣符合情境（引導新使用者 vs. 搜尋失敗）。
- 狀態具備無障礙性（對比度、鍵盤導航、透過
role="status"或等效即時區域的螢幕閱讀器宣告）。 - 主要行動呼籲按鈕符合 WCAG 2.2 SC 2.5.8（24x24px 最小目標尺寸）。
- 版面配置具有響應式且在其父容器內置中對齊。