官網「Empty State 空狀態頁面」設計完整攻略：中小企業如何把「沒有資料」變成繼續引導訪客的轉換機會

很多老闆把官網當成「展示型錄」，覺得每個頁面都該塞滿東西才像樣。但網站真正上線後，總會遇到一種尷尬的情況：搜尋結果是空的、購物車裡沒有商品、訂單列表還沒有資料、會員中心剛註冊完什麼都沒填——這些「空空如也」的瞬間，其實是官網最容易讓訪客流失的時刻之一。

這個被很多人忽略的設計細節，業界叫做「Empty State」（空狀態頁面）。它不只是「沒有資料時顯示的畫面」，更是引導使用者下一步行動的關鍵介面。今天就把這件事拆清楚，告訴你中小企業官網該怎麼把「沒東西」變成「繼續往下走」。

什麼是 Empty State？為什麼它很重要？

Empty State 指的是頁面在「沒有內容可顯示」時呈現的畫面。常見場景包含：

• 搜尋沒有結果（站內搜尋找不到關鍵字）
• 篩選後沒有資料（例如選擇了沒貨的商品分類）
• 列表頁面尚無項目（剛註冊的會員、空的購物車、沒有訂單紀錄）
• 表單尚未提交（聯絡紀錄、收藏清單、瀏覽歷史）
• 權限不足或內容下架

傳統做法是：直接顯示一段「沒有資料」的灰色小字，結束。但這種設計就像店員看到客人進門卻轉頭去滑手機——你的訪客會直接關掉分頁。

好的 Empty State 應該做三件事：解釋為什麼是空的、告訴使用者下一步可以做什麼、順便傳達品牌個性。一個 30 秒就能設計完成的小頁面，往往就是官網跳出率高低的分水嶺。

Photo by Team Nocoloco on Unsplash

常見的 5 種 Empty State 情境與對策

1. 搜尋無結果

訪客輸入關鍵字、按下 Enter，結果跳出一個冷冰冰的「查無資料」。這是中小企業官網最常踩雷的地方。比較好的做法是：

• 明確告知：「找不到『XXX』的相關內容」，把訪客輸入的關鍵字顯示出來，讓他確認自己有沒有打錯字。
• 提供替代建議：列出 3-5 個熱門搜尋詞、相關分類，或同義詞建議（例如搜「網頁設計」沒結果，可建議「網站製作」）。
• 提供下一步：「直接聯絡我們詢問」「瀏覽全部商品」「回到首頁」按鈕。

2. 空的購物車／收藏清單

「您的購物車是空的」這六個字後面，往往是一片空白和一個失望離開的訪客。請務必加上：

• 一個有溫度的插畫或圖示（不必是大製作，一個簡單的線稿圖示就很夠）。
• 一句鼓勵性的文案：「還沒挑到想要的嗎？看看本週熱銷」
• 主要 CTA 按鈕：直接連到熱賣商品、首頁推薦或當期活動頁。

3. 訂單／紀錄列表空無一物

剛註冊的會員打開「我的訂單」頁面是空的，這時候別只放一句「您尚未有訂單」就結束。可以加上：「歡迎加入！瀏覽我們的商品開始第一筆訂單」並提供一個明顯的「開始選購」按鈕。順便把這個機會用來介紹會員福利、首購優惠，把空白頁面變成轉換入口。

4. 篩選器把結果全部濾掉

使用者勾選了「綠色、L 號、低於 500 元」，結果完全沒有商品。這時候不要只說「沒有符合條件的商品」，要告訴他「放寬哪一個條件可能會有結果」，並提供一鍵「清除所有篩選」的按鈕。讓他在原地就能調整，而不是放棄離開。

5. 系統錯誤或載入失敗

網路斷線、伺服器暫時無回應，這類「非預期空白」也算 Empty State 的一種。要清楚告訴使用者：「載入失敗，請重新整理」並提供重試按鈕，比起跳出一個英文錯誤訊息要友善太多。

Photo by Hal Gatewood on Unsplash

Empty State 設計的 4 個核心原則

原則一：用「人話」說話，別丟系統訊息

避免「No data found」「資料庫無資料」「Query returned 0 results」這種偏技術的訊息。改成「目前還沒有任何紀錄」「看起來這裡還是空的」這類自然的語言。同樣意思，語氣決定使用者要繼續還是離開。

原則二：用一個圖示或插畫降低空白感

純文字的空白頁很冷。即使只是一個簡單的線條圖示——例如一個空盒子、一個放大鏡、一份空白文件——都能讓畫面更柔和。不需要請插畫師客製，Heroicons、Lucide Icons、unDraw 這類免費資源就有很多現成可用。

原則三：永遠給一個「下一步」

Empty State 最重要的不是顯示「沒有」，而是引導「再來呢」。每個空狀態頁面都應該至少有一個明確的 CTA（行動呼籲）按鈕。沒有 CTA 的 Empty State，等於告訴訪客「請按上一頁離開」。

原則四：保持品牌調性一致

空狀態頁面也是品牌體驗的一部分。色彩、字體、語氣都要跟整個官網一致。如果品牌走可愛風，文案就別寫得太正經；如果是 B2B 專業形象，也不要硬塞太多表情符號。一致的調性讓品牌印象更深。

常見錯誤：這 3 個地雷踩了就 GG

地雷一：用「找不到頁面」的 404 樣式套到所有空狀態。404 是「網址錯誤」，Empty State 是「網址正確但內容為空」。這兩個意涵不同，用同一個畫面會讓使用者誤以為網站壞了。

地雷二：放一堆說明文字但沒有按鈕。文案寫得再好，沒有 CTA 等於沒寫。一定要有一個明顯、可點擊的下一步按鈕。

地雷三：把 Empty State 當作宣傳廣告。空狀態頁面是用來「幫助使用者」，不是「推銷產品」。塞滿三個 banner、五個促銷彈窗，只會讓使用者更想關掉分頁。一個 CTA、一句鼓勵、一個方向就夠了。

Photo by Mike Tinnion on Unsplash

中小企業老闆的實作建議

如果官網現在還沒處理 Empty State，建議用以下順序逐步補上：

第一步：盤點所有「可能空白」的頁面。打開官網，把每個有列表、搜尋、篩選功能的頁面都點過一輪。試著清空資料、亂打關鍵字，看哪些頁面會出現空白畫面。把這個清單列出來。

第二步：依照流量優先處理。先處理訪客最常碰到的（例如站內搜尋、商品列表），再處理會員後台等次要頁面。Google Analytics 4 的「使用者旅程」報表能幫你找出這些頁面。

第三步：寫好「下一步」文案。每個空白頁面的核心就是 CTA。你希望使用者接下來做什麼？是聯絡你、看推薦商品、還是回首頁？想清楚再寫文案。

第四步：找設計師或工程師加上去。如果是 WordPress 官網，多數主題已有相關設定（例如搜尋頁的「無結果」文案，可以在主題設定或語系檔修改）。如果是客製化系統，跟工程師說「請幫每個列表頁加上 Empty State」即可，半天到一天就能完成。

結語：細節決定官網的高度

Empty State 是一個典型的「不做沒人罵、做了沒人讚」的設計細節。但就像餐廳的洗手間、便利商店的找零禮儀，這些小地方累積起來，才是品牌留給客戶的真正印象。

下次打開自家官網時，不妨故意搜尋一個亂打的關鍵字、清空購物車、用篩選器篩到沒結果——看看自己的網站在那個瞬間，是讓人想留下，還是想關掉。

把空白變成引導，把離開變成留下。這就是 Empty State 的真正價值。