空狀態（Empty State）是使用者第一次進入功能、清空資料、或搜尋無結果時看到的畫面。它不是「沒有東西」的畫面,而是產品最容易流失使用者、卻最常被設計者忽略的一刻。今天聚焦 2026 年空狀態設計的實務原則。
📖 學（核心）
空狀態的本質是「零資料」而非「零設計」,一旦留白就等於放棄引導。 使用者資料還沒進來,但畫面上該有的目標說明、下一步行動、情境插畫一個都不能少。設計圈把它稱為 zero state 或 blank state,真正該做的是把「空」轉成「起點」。
空狀態分三種場景,對應三種語氣與行動。 第一次使用(first-run)是空白畫布加明確 CTA;主動清空(如清空收件匣)可用慶祝式回饋;搜尋/篩選無結果則要說明原因並給替代路徑。三者混為一談,是最常見的錯誤。
標題要用正向陳述,把「你沒有」改寫成「開始做」。 「Start by adding data assets（先新增資料）」比「You don’t have any data assets（你沒有任何資料）」更有力量。前者指向動作,後者只描述缺乏,讓使用者感到自己做錯了什麼。
經驗法則是「兩分說明、一分驚喜」。 空狀態是展現產品個性的好機會,可以放插畫、俏皮文案甚至微動畫,但個性永遠不能犧牲清晰度。使用者第一眼要先懂「這裡為什麼空、我該做什麼」,再感受到品牌溫度。
2026 年的趨勢是把「空」變「不空」——預載範例資料與互動式起步。 越來越多產品在 onboarding 時預先塞入 sample data、自動生成起始內容,或讓使用者直接在同一畫面新增內容,而不是丟一個空盒子叫人自己想辦法。空狀態正從被動訊息演化成主動互動的入口。
遊戲化的微時刻能替「無」注入動力。 達成收件匣清空時的慶祝動畫、「建立第一個儀表板可獲得徽章」的提示,這些 micro-moment 帶來進度感,讓產品「活起來」。但要克制,別讓獎勵喧賓奪主,否則反而干擾核心任務。
🧠 記
- 三種空狀態:first-run(首次使用)、user-cleared(主動清空)、no-results(搜尋無結果),語氣與 CTA 各不同。
- 正向標題:用「開始新增…」取代「你沒有…」,把缺乏改寫成起點。
- 2:1 法則:兩分說明、一分驚喜,個性不能蓋過清晰。
- 必備四件:目標說明、主要行動按鈕、情境插畫/圖示、(選配)輔助連結。
- 預載策略:sample data、starter content、互動式引導,讓使用者抵達時「已經有東西」。
- no-results 場景:說明為何無結果 + 提供修改篩選/清除條件的路徑,別只留一行冷冰冰的「無資料」。
- 遊戲化克制:慶祝動畫與徽章可增進度感,但不可干擾主任務。
✍️ 實踐
- 盤點產品所有空狀態:列出每個列表、儀表板、搜尋頁在「零資料」時的畫面,標記它屬於 first-run、cleared 還是 no-results。
- 為每個空狀態寫正向標題與一句說明:把「你沒有 X」改寫成「開始建立你的第一個 X」,並補上一行說明價值。
- 加上單一主要 CTA:每個空狀態只給一個最重要的下一步按鈕,避免多按鈕分散注意力。
- 針對 first-run 做預載或範例:評估能否塞入 sample data 或提供「載入範例」按鈕,讓新手立刻看到成品長相。
- 用真實使用者測試 no-results 情境:請人故意搜尋不存在的關鍵字,觀察他們能否靠畫面提示自行找到出路。
🔗 延伸學習
- Empty state UX examples and design rules that actually work — Eleken
- Empty State UI Design: Best practices & Examples — Mobbin
- Empty States Pattern — Carbon Design System
- Empty States, Error States & Onboarding: The Hidden UX Moments — Raw.Studio
💬 想深入？複製下面這段到 AI（ChatGPT、Claude…），再打上你的問題
你是我的「UIUX」學習教練。我今天在學的主題是「空狀態設計(Empty State)」，重點包括：三種空狀態場景(first-run/主動清空/搜尋無結果)、用正向陳述寫標題、兩分說明一分驚喜的法則、預載範例資料的趨勢、遊戲化微時刻的克制運用。請用淺白、可操作的方式回答我接下來的問題，需要時給例子和步驟。我的問題是：
↑ 複製整段貼到 AI，最後接上你的問題即可。