非理想資料狀態

Offline State|離線狀態

當產品暫時無法連上服務時,說明哪些資料仍可讀、哪些操作會暫停,以及恢復連線後會如何處理。

常見俗稱:離線狀態、網路中斷畫面、無法連線、Offline State、離線模式

60 秒決策

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

適合使用

  • 產品目前無法成功連上服務,且需要說明快取資料、暫停操作與恢復後的處理方式。
  • 使用者可能仍能閱讀上次同步內容,或能先編輯並在連線恢復後送出。

不適合使用

  • 只是一次 API 請求失敗且無法確認網路問題;先使用 Error State 描述那一次失敗。
  • 使用者登入了但沒有權限;那是 Permission State。

畫面要說清楚的事

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

說明可做與不能做的事

保留上次同步的資料時,要標示它的時間;需要連線的送出操作則要說明會暫停。

連線提示不能當成唯一真相

瀏覽器的 online 狀態只是線索;實際是否能使用服務仍要依請求結果判斷。

恢復連線後回報結果

重試成功時更新最後同步時間與可用操作,避免舊的離線提示一直留在畫面上。

必要狀態與回應

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

可連線

最新資料可讀,會送出資料的操作可正常使用。

暫時無法連線

標示哪些內容是快取、哪些操作會暫停,並保留重新檢查連線入口。

重新檢查中

入口暫時停用,避免同時發出多個連線檢查。

連線恢復

更新同步時間與狀態;若仍失敗,保留離線說明而非跳成空狀態。

操作 Demo

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

操作前先知道

  1. 重新檢查連線

    先觀察:Offline State 是否保留可讀快取資料,並清楚標示需要連線的動作仍暫停。

    操作:點選「重新檢查連線」。

    預期結果:按鈕暫時停用;完成後更新為「連線已恢復」與最新同步時間,快取提示收起。

LumenDesk

無法連線時,仍要交代快取與暫停的操作
Offline State Demo
目前無法連線到 LumenDesk以下是今天 09:42 的快取任務;建立新任務會在連線恢復後才能送出。
快取內容首頁內容檢核成員角色盤點

尚未操作這個狀態示範。

告訴 AI

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

在 LumenDesk 暫時無法連上服務時,顯示 Offline State:「目前無法連線到 LumenDesk」。保留上次同步時間與可讀的快取任務摘要,清楚標示「建立新任務會在連線恢復後才能送出」,並提供「重新檢查連線」按鈕。不要把瀏覽器的 navigator.onLine 當成唯一事實來源;它只能作為提示,實際操作仍要以請求結果判斷。

驗收清單

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

  • 是否區分一次請求失敗與整體無法連線?
  • 是否寫出哪些資料是上次同步內容?
  • 是否說清楚哪些操作會暫停或排隊?
  • 是否避免只憑 navigator.onLine 斷定服務一定可用?
  • 重新檢查時是否避免重複送出?
  • 連線恢復後是否更新狀態與同步時間?