空狀態頁面設計完整指南

空狀態設計的三大目的

• 解釋現狀：告訴顧客為什麼這裡是空的（如「您還沒收藏任何商品」）
• 引導行動：提供明確的下一步（如「去商品頁逛逛」按鈕）
• 維持情感：用溫和語氣或幽默插畫避免冷冰冰的挫折感

三個目的缺一不可。只解釋現狀沒引導 = 顧客不知道下一步；只引導沒解釋 = 顧客困惑為什麼這裡空了。

場景 1：空購物車

空購物車是高購買意圖時刻（顧客特地點開購物車），優質設計：友善圖示（購物袋插畫優於冷漠空白）；訊息「您的購物車還空著，來逛逛吧」；展示熱銷商品或剛瀏覽過的商品；「前往購物」明顯 CTA；顯示有效優惠券提示加購；會員可顯示「上次未結帳的商品」一鍵恢復。

場景 2：搜尋無結果

搜尋無結果是 UX 災難現場，多步救援：明確訊息「找不到 OOO 的相關商品」；拼字建議「您是否要找：XXX？」；推薦熱門商品作為替代；搜尋技巧提示（縮短關鍵字、檢查拼字）；熱門分類入口；客服 LINE 連結「找不到？聯絡我們」。空白頁面是失單，救援頁面是機會。

場景 3：訂單列表空

會員第一次來會員中心看訂單發現空白，這是引導首購的好時機：友善訊息「您還沒有任何訂單，第一次購物送 NT$100 購物金」；推薦新會員專屬優惠商品；顯示熱銷推薦；「逛商品」CTA；可放上「如何下單」3 步驟簡介，降低新用戶心理門檻。

場景 4：願望清單/收藏空

空收藏的優質設計：愛心圖示插畫；訊息「您還沒收藏任何商品，按愛心收藏喜歡的商品下次更好找」；操作教學「按商品旁的 ♡ 就能收藏」；推薦熱銷商品讓顧客馬上實作；強調收藏的好處「降價會通知、補貨會提醒」。

場景 5：404 找不到頁面

404 是「我們依然在這裡」的關係維護機會：友善的視覺（卡通插畫優於嚴肅錯誤訊息）；幽默文案如「這個頁面跑去玩了」；搜尋框讓顧客找想要的內容；熱門商品/分類入口；回首頁明顯按鈕；「向我們報告錯誤」幫助改善。建議連結到 sitemap 讓顧客探索網站全貌。

場景 6：篩選後無結果

顧客把分類頁篩選條件設太嚴格沒結果，救援設計：明確訊息「目前沒有符合條件的商品」；建議「移除某項篩選看更多」（具體告知如「移除『紅色』可看 23 件」）；「清除全部篩選」按鈕一鍵歸零；推薦相似類別商品；提供「儲存搜尋條件」未來符合時通知。

場景 7：訊息/通知空

會員打開通知中心發現空白：訊息「目前沒有新通知」；可加上提示「我們會在 訂單狀態變動 / 商品降價 / 補貨通知 時通知您」；提供「通知設定」入口讓顧客自選想接收的通知類型；首次使用可推銷訂閱 LINE 或 Email 通知。

視覺設計的共通原則

所有空狀態的視覺要點：使用插畫或圖示（避免純文字冷漠感）；色彩柔和不刺眼；主訊息字級 18-24px；副訊息字級 14-16px；CTA 按鈕顏色與品牌主色一致；避免使用紅色（會引發錯誤聯想）；保留充足留白讓畫面不擁擠；行動版要垂直堆疊不橫向擠壓。

常見問題解答