空白狀態 UI 設計：內容缺席時，引導使用者採取下一步
設計初次使用、無搜尋結果、資料已清空及錯誤狀態的實用架構，涵蓋有幫助的文案、清楚的操作與符合情境的視覺呈現。
空白區塊的含義不明。使用者可能不知道應用程式是否仍在載入、搜尋是否失敗，或自己是否需要新增內容。有用的空白狀態會說明目前發生什麼事，並協助使用者決定下一步。
先找出內容未出現的原因。初次使用、搜尋無結果、刻意清空的資料與系統錯誤，需要不同的訊息和操作。本文範例是假設性的設計練習，並非產品個案研究或效能聲明。
重點摘要
- 在選擇文案、插畫或操作前，先判斷內容缺席的原因。
- 將載入中與失敗回饋和已確認的空白結果明確區分。
- 撰寫具體標題、必要時的簡短說明，以及相關的下一步。
- 在實際情境中檢視狀態，包括無障礙需求、窄版面及復原路徑。
1. 診斷空白區域的原因
把空白狀態視為產品狀況的回報，而非裝飾的機會。請問自己：畫面出現前發生了什麼？系統知道什麼？使用者能否改變情況？NN/g 指出，空白狀態可用來傳達狀態、協助學習，並提供進入關鍵任務的路徑。但要發揮這些作用，必須先正確辨識狀態。
尤其在請求仍在執行時，不要顯示「沒有項目」。在結果確定之前，應持續顯示載入指示或骨架畫面。如果請求失敗，請說明失敗原因與復原選項。如果請求成功但項目數為零，才說明沒有符合條件的內容。這樣能避免使用者把暫時延遲或系統問題誤認為真正的結果。
| 狀態 | 代表的情況 | 適當回應 |
|---|---|---|
| 初次使用 | 功能已可使用，但使用者尚未新增或建立任何內容。 | 說明這裡會顯示什麼，並提供直接建立、新增或探索的方式。 |
| 無搜尋結果 | 搜尋、篩選或日期範圍查詢已成功完成，但沒有符合項目。 | 確認目前條件沒有相符結果；建議適當調整條件或清除篩選。 |
| 資料已清空 | 使用者已完成或移除通常顯示在這裡的項目。 | 確認任務完成或目前沒有內容，不要暗示發生錯誤；如有幫助，可提供其他任務。 |
| 錯誤 | 系統無法擷取或顯示預期內容。 | 用淺白文字說明失敗的項目，並提供重試等復原操作。 |
| 載入中 | 系統尚未確定是否有內容。 | 顯示進度或載入畫面；不要過早宣告結果為空。 |
2. 撰寫符合原因的文案
用標題指出狀態，再用輔助文字說明其意義或後續做法。標題應易於快速閱讀。只有當一句話能回答真實問題時，才加上說明。Apple 的撰寫指南建議在空白畫面提供清楚的下一步、使用以操作為導向的標籤，並以直接的錯誤訊息說明如何修正問題。避免讓意義不明的俏皮文字、如「這裡什麼都沒有」的模糊標題，或責怪使用者的文案掩蓋重點。
例如，假設有個已儲存項目畫面，初次使用時可以寫「你儲存的指南會顯示在這裡」，接著說「儲存指南，方便稍後查看」，並提供「瀏覽指南」按鈕。完成的待辦清單則可以寫「全部完成」，並提供「查看已完成任務」。兩者描述不同現實：前者教使用者如何為功能新增內容，後者確認成功結果。
假設搜尋成功但沒有符合項目，可以顯示「沒有符合『orchid』的專案」，並建議「試試更廣泛的字詞，或清除篩選條件」。盡可能保留查詢內容，並讓篩選條件的變更可還原。若網路連線失敗，則寫「無法載入專案」，並提供「再試一次」。系統尚未能檢查時，不要宣稱沒有專案。
- 指出相關物件或條件，讓訊息脫離原情境時仍可理解。
- 按鈕使用動詞，例如「建立專案」、「清除篩選條件」或「再試一次」。
- 將說明放在受影響內容旁邊，並使用文字，不只依靠顏色或圖片。
- 避免使用「糟糕」、責備語氣及技術代碼，除非使用者需要它們才能解決問題。
3. 讓下一步有用，而非一律加上操作
當使用者能合理地改變情況或繼續任務時，才提供操作。初次使用通常適合建立或新增；無搜尋結果可能適合清除限制；錯誤可能適合重試。已清空的收件匣或完成的運動紀錄，可能完全不需要操作。不要只為了讓區塊看起來可互動，就在每種狀態都強加一個按鈕。
復原方式應與問題程度相稱。重新整理失敗通常只需要行內說明與重試，而非阻斷操作的警示。Apple 建議讓回饋方式符合資訊的重要性，並將警示保留給重要且可採取行動的情況。搜尋時，應保留使用者已做的輸入，提供合理調整方式，而不是悄悄改變查詢。Material Design 也建議在確實有幫助時，提供起始內容、簡短教學內容，或清楚標示的最相近結果。
只有在插畫能增添脈絡、溫度或辨識度時才使用。它不應與訊息爭奪注意力，也不應讓人誤以為裝飾圖片可以互動。精簡的篩選結果用簡單圖示可能就足夠；初次使用的工作區則可用小範例展示未來會容納的內容。若包含起始內容，請讓它容易辨識與移除。
- 選擇一個能直接處理原因的主要操作。
- 只有當次要協助路徑能回答可能的後續問題時，才加入它。
- 空白結果是好消息時，使用低調的完成訊息。
- 確保鍵盤及螢幕閱讀器使用者也能理解操作。
4. 檢視整個狀態，而不只看插畫
在實際容器中檢視狀態：全螢幕的初次使用畫面、小型側邊欄與篩選後的表格，空間和資訊層級需求各不相同。讓訊息靠近它所描述的區域。放大文字或文字換行後仍應可讀；主要操作也應無需辨認顏色就能找到。還要測試狀態轉換：從載入中到空白、載入中到錯誤、重試到成功，以及更改篩選條件後再次出現結果。
實用的資料庫檢視應從觸發條件與預期復原方式開始。針對每種模式，記錄狀態、標題、選用說明、主要操作、次要路徑，以及選取後的結果。比較截圖，找出有用的結構與視覺層級；接著在實際情境中檢查產品行為。靜態圖片無法告訴你錯誤能否復原，或結果是否真的為空。你可以瀏覽 ScreenKits UI 資料庫尋找視覺參考，並探索所有類別，找出相近的模式。
- 使用者能否分辨內容是尚未出現、仍在載入，還是因錯誤而無法取得？
- 訊息是否反映目前的查詢、篩選條件、帳號或已完成的任務？
- 操作是否保留有用的輸入，並帶來可見的結果？
- 在小尺寸、較長的在地化文案，以及輔助技術下，這個狀態是否仍能正常使用？
- 使用者能否從錯誤中復原，或找到調整無結果搜尋的方式？
常見問題
空白狀態一定要有行動呼籲嗎？
不一定。若操作能幫助使用者新增內容、調整搜尋或從問題中復原，就加入操作。已完成的任務或自然為空的檢視畫面，可能只需要簡短確認。
無搜尋結果畫面屬於錯誤狀態嗎？
通常不是。如果搜尋或篩選已成功完成，請告知沒有符合結果，並提供實用的調整方式。只有當系統故障導致無法確定或顯示結果時，才使用錯誤相關措辭。
等待結果載入時應顯示什麼？
在請求完成前，使用載入畫面或進度回饋。只有在系統確認成功回應中沒有符合項目後，才顯示空白結果。
