UI 元件百科

非理想資料狀態

Empty State｜空狀態

資料尚未建立、篩選後沒有結果時，說明這塊原本會放什麼，並提供最重要的一個下一步。

常見俗稱：空狀態、無資料畫面、零結果、Empty State、沒有資料

60 秒決策

先確認使用者要完成的事。

適合使用

  • 這個位置沒有可顯示的資料，例如第一次使用尚未建立內容，或搜尋與篩選後得到零結果。
  • 使用者能安全地建立資料、清除條件，或根本不需要再做任何事。

不適合使用

  • 資料原本存在卻因請求、服務或權限問題無法顯示；那是 Error、Offline 或 Permission State。
  • 任務剛完成且需要確認完成內容；那是 Success State。

畫面要說清楚的事

不要只交代外觀，也要交代資料與輸入規則。

取代原本應出現資料的區域

零結果時不要把空表格、欄位標題與訊息一起堆在畫面上；讓空狀態直接接手那塊內容。

說明是第一次使用還是篩選結果

「尚未建立任務」與「沒有符合目前篩選的任務」是不同原因，下一步也不同。

只留一個最重要的下一步

建立第一筆資料或清除篩選二選一；不要把五個不相干的入口塞進空畫面。

必要狀態與回應

每個狀態都要讓使用者知道下一步。

第一次使用

說明資料建立後會出現什麼，並提供建立第一筆資料的入口。

零搜尋結果

寫出目前關鍵字或篩選條件，提供清除或調整條件的路徑。

確實沒有待處理事項

可以只說明目前沒有需要處理的內容，不必硬塞一個行動按鈕。

資料不該消失

若資料理應存在卻看不到，切換為 Error、Offline 或 Permission State。

操作 Demo

先知道要觀察什麼，再動手操作。

操作前先知道

  1. 清除任務篩選

    先觀察：Empty State 是否清楚說明零結果的原因，並把清除篩選放成唯一明確動作。

    操作：點選「清除篩選」。

    預期結果：空狀態被任務結果取代，狀態文字回報顯示 3 筆任務；不再保留誤導性的「沒有資料」。

LumenDesk

沒有結果時，先讓人知道要調整什麼
Empty State Demo
本週高優先目前篩選
沒有符合目前篩選的任務你可以清除篩選，查看其他待辦項目。

尚未操作這個狀態示範。

告訴 AI

把任務、規則、狀態與操作條件一次寫清楚。

在 LumenDesk 的任務清單加入 Empty State。使用者篩選「本週 · 高優先」卻沒有符合項目時，取代原本的清單與表頭，顯示「沒有符合目前篩選的任務」與「清除篩選」按鈕。若是第一次使用，改成說明此區將顯示什麼，並提供「建立第一個任務」的主要操作。不要把空狀態、API 失敗、離線與沒有權限都寫成「沒有資料」。

驗收清單

不要只確認欄位能不能點。

  • 資料是真的不存在，還是因失敗、離線或權限看不到？
  • 空狀態是否取代原本的資料區，而非塞在空表格下方？
  • 有沒有說明這是第一次使用或零搜尋結果？
  • 主要下一步是否只有一個且可直接執行？
  • 若沒有下一步，是否避免硬塞無關按鈕？
  • 插圖若只是裝飾，是否不承載關鍵資訊？