UI 元件百科

非理想資料狀態

Error State｜錯誤狀態

資料本來應該出現卻因請求或系統問題失敗時，說明受影響範圍、已知原因與能安全執行的重試。

常見俗稱：錯誤狀態、載入失敗畫面、請求失敗、Error State、重試畫面

60 秒決策

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

適合使用

  • 資料原本應該出現，但請求、服務或操作失敗，且使用者需要知道受影響範圍與修復方式。
  • 系統可以安全地重試，或能提供明確的替代行動與支援資訊。

不適合使用

  • 資料從未建立或篩選後沒有結果；那是 Empty State。
  • 使用者沒有權限；Retry 不會解決問題，應使用 Permission State。

畫面要說清楚的事

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

用白話說清楚失敗範圍

「目前無法載入專案清單」比「發生未知錯誤」更能讓人判斷影響範圍。

Retry 要真的有意義

只在重新發送請求可能成功時提供「重新載入」；權限不足或資料不存在不能拿 Retry 當萬用按鈕。

保留使用者還需要的脈絡

篩選條件、已輸入草稿與成功載入的資料不要因錯誤被清掉。

必要狀態與回應

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

尚未失敗

資料正常顯示，錯誤區域不預先佔空間。

請求失敗

清楚說明哪個資料區受影響，並以合適的動態訊息通知使用者。

正在重試

重試入口暫時停用，避免重複送出多個相同請求。

已恢復或仍失敗

恢復時換回資料；仍失敗時保留原因與下一步，不讓畫面陷入無限載入。

操作 Demo

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

操作前先知道

  1. 重新載入專案清單

    先觀察：錯誤文字是否指出受影響資料與可重試原因，而非只有代碼或空白畫面。

    操作：點選「重新載入」。

    預期結果：按鈕暫時停用並顯示處理中；完成後錯誤區換成 3 筆專案，狀態文字回報已恢復。

LumenDesk

資料本來該出現，才需要說明失敗與重試
Error State Demo

尚未操作這個狀態示範。

告訴 AI

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

在 LumenDesk 的專案清單請求失敗時，顯示 Error State：「目前無法載入專案清單」。補充「你的篩選條件沒有遺失，請在服務恢復後重新載入」，並提供單一「重新載入」按鈕。錯誤文字要用白話說明受影響範圍與可做的下一步；不要只顯示 Error 500、不要假裝清單本來就是空的，也不要讓 Retry 按鈕無限點擊。動態錯誤訊息使用合適的 alert 或 live region 語意。

驗收清單

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

  • 是否說清楚哪一塊資料或哪個操作失敗？
  • 錯誤文字是否避免只丟代碼給使用者？
  • Retry 是否真的可能解決這個問題？
  • 重試時是否避免重複送出？
  • 是否保留篩選、草稿或上次成功資料？
  • 動態錯誤是否有合適的 alert 或 live region 語意？