60 秒決策
先確認使用者要完成的事。
適合使用
- 產品目前無法成功連上服務,且需要說明快取資料、暫停操作與恢復後的處理方式。
- 使用者可能仍能閱讀上次同步內容,或能先編輯並在連線恢復後送出。
不適合使用
- 只是一次 API 請求失敗且無法確認網路問題;先使用 Error State 描述那一次失敗。
- 使用者登入了但沒有權限;那是 Permission State。
畫面要說清楚的事
不要只交代外觀,也要交代資料與輸入規則。
說明可做與不能做的事
保留上次同步的資料時,要標示它的時間;需要連線的送出操作則要說明會暫停。
連線提示不能當成唯一真相
瀏覽器的 online 狀態只是線索;實際是否能使用服務仍要依請求結果判斷。
恢復連線後回報結果
重試成功時更新最後同步時間與可用操作,避免舊的離線提示一直留在畫面上。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
可連線
最新資料可讀,會送出資料的操作可正常使用。
暫時無法連線
標示哪些內容是快取、哪些操作會暫停,並保留重新檢查連線入口。
重新檢查中
入口暫時停用,避免同時發出多個連線檢查。
連線恢復
更新同步時間與狀態;若仍失敗,保留離線說明而非跳成空狀態。
操作 Demo
先知道要觀察什麼,再動手操作。
操作前先知道
重新檢查連線
先觀察:Offline State 是否保留可讀快取資料,並清楚標示需要連線的動作仍暫停。
操作:點選「重新檢查連線」。
預期結果:按鈕暫時停用;完成後更新為「連線已恢復」與最新同步時間,快取提示收起。
LumenDesk
無法連線時,仍要交代快取與暫停的操作⌁
目前無法連線到 LumenDesk以下是今天 09:42 的快取任務;建立新任務會在連線恢復後才能送出。
快取內容首頁內容檢核成員角色盤點
連線已恢復已同步到今天 11:02;建立新任務可以正常送出。
尚未操作這個狀態示範。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
在 LumenDesk 暫時無法連上服務時,顯示 Offline State:「目前無法連線到 LumenDesk」。保留上次同步時間與可讀的快取任務摘要,清楚標示「建立新任務會在連線恢復後才能送出」,並提供「重新檢查連線」按鈕。不要把瀏覽器的 navigator.onLine 當成唯一事實來源;它只能作為提示,實際操作仍要以請求結果判斷。驗收清單
不要只確認欄位能不能點。
- 是否區分一次請求失敗與整體無法連線?
- 是否寫出哪些資料是上次同步內容?
- 是否說清楚哪些操作會暫停或排隊?
- 是否避免只憑 navigator.onLine 斷定服務一定可用?
- 重新檢查時是否避免重複送出?
- 連線恢復後是否更新狀態與同步時間?