介面狀態設計
一句話定義
介面狀態設計處理產品在「還沒有內容、正在處理、出錯、無結果、需要提示」等非理想完成態時如何溝通；目標是讓使用者知道發生什麼、下一步能做什麼，並降低等待、困惑或焦慮。
核心要點
狀態頁不是空白，它也是產品體驗
完成狀態最容易被設計師展示，但使用者真實旅程中常遇到：
- 第一次使用，還沒有任何資料。
- 搜尋或篩選後沒有結果。
- 網路或伺服器錯誤，資料載入失敗。
- 系統正在處理，使用者需要等待。
- 使用者不理解某個按鈕、欄位或專有名詞。
這些時刻若只留下空白、轉圈或不明錯誤，使用者會以為自己做錯、系統壞掉或產品不可靠。
Empty State：引導下一步，而不是只說「沒有」
2026-05-07-SocialMORE-UIUX設計入門-Part01 將空白狀態分成三種：
| 狀態 | 例子 | 設計任務 |
|---|---|---|
| 首次使用 | 註冊後第一次進入，尚無內容 | 提示如何開始使用服務 |
| 無結果 / 無資料 | 搜尋為空、篩選無結果 | 指引用戶重新搜尋、調整篩選或建立內容 |
| 數據異常 | 網路錯誤、伺服器異常、載入失敗 | 說明原因、提供重試或替代路徑 |
好的 empty state 應該：
- 簡單明瞭地引導使用者脫離空白。
- 解釋問題與下一步，不讓使用者猜。
- 可加入品牌圖像、色彩與語氣，但不能犧牲清楚性。
Loading Page：讓等待變得可理解
載入狀態的問題不是「等多久」而已，而是使用者是否知道系統有在工作。
設計檢核：
- 避免只放靜態
Loading...。 - 告訴使用者目前正在處理。
- 短等待可用 spinner；長等待應用進度條、完成百分比或階段說明。
- 可加入品牌 logo、角色或動畫，加深印象並降低焦慮。
- 不要讓動畫搶走任務重點或拖慢完成感。
Tooltips：只放輔助資訊，不放關鍵資訊
Tooltip 是隱藏的輔助元素，通常在滑鼠移到目標上時顯示。socialMORE 的幾個入門紀律很實用：
- 重要訊息應始終顯示，不要藏在 tooltip 裡。
- 文案要短，非必要不超過三行。
- 不要重複畫面上已經存在的資訊。
- 位置要靠近目標 UI，但不能阻擋使用者正在做的事。
- 手機沒有 hover，若要用 tooltip，需提供明確提示入口，常見做法是提示圖標或把提示放在畫面下方。
狀態設計是 UX 文案與情緒價值的交界
空白、載入、錯誤、提示都不是單純視覺問題。它們同時需要：
- 文案：用最少字數說清楚發生什麼與下一步。
- 視覺：透過 icon、插圖、留白與層級讓狀態可被掃視。
- 互動：提供 CTA、重試、返回、調整條件或稍後提醒。
- 情緒：安撫焦慮、避免責備使用者，必要時給予信任感。
與其他概念的關係
- 使用者介面設計 — 狀態設計是 UI 完整性的一部分；只設計完成態不夠。
- UX文案 — empty / loading / error / tooltip 都仰賴清楚短文案。
- 情緒價值 — 狀態設計直接回應疑惑、焦慮、等待與挫敗，是情緒價值的高頻場景。
- 微互動 — 進度、成功、失敗與重試通常需要即時回饋。
- 無障礙設計 — 狀態不能只靠顏色或動畫表達；需要文字、語意標籤、焦點與替代通道。
- 易讀性 — 狀態頁的留白、層級與圖文距離決定使用者能否快速讀懂。
- 語氣與聲調 — 錯誤或等待狀態尤其需要情境 tone，不是每個狀態都適合幽默或可愛。
相關來源
- 2026-05-07-SocialMORE-UIUX設計入門-Part01 — Empty State、Loading Page、Tooltips 三個入門頁，提供本頁骨架。
- 2026-05-07-SocialMORE-UIUX設計入門-Part02 — Maintenance page 與 UMAMI LAND 案例補入狀態頁與品牌體驗的案例方向。
備註
- 本頁先收斂 empty / loading / tooltip / error / no result。若未來累積到 onboarding、success state、toast / snackbar、form validation、offline state 等專門來源，可再拆子頁。