錯誤與狀態系統
目的
錯誤與狀態系統提供了一套方法論，用於設計網站中的「不愉快路徑」——即系統層級發生問題的時刻。與表單層級的驗證或情境式橫幅不同，此系統處理的是全頁面或全站狀態。它確保故障能以清晰、同理心與明確的「出路」來傳達，防止用戶因技術問題而感到挫折或放棄。
使用案例
- 404 找不到頁面： 當用戶導航到一個不存在的 URL 時。
- 500 伺服器錯誤： 當關鍵的後端故障導致頁面無法載入時。
- 維護模式： 當網站因更新而有意離線時。
- 離線狀態： 當用戶在網路應用程式中失去連線時。
- 存取被拒 (403)： 當用戶缺乏檢視特定資源的權限時。
何時不該使用
- 表單驗證： 請使用
form-design-system處理欄位層級的錯誤。 - 情境式通知： 請使用
banner-and-alert-system處理非阻塞的更新或輕微錯誤。 - 空白清單： 當頁面正確載入但沒有資料時，請使用
empty-state-system。 - 載入狀態： 對於標準的內容擷取，請使用
skeleton-state-system。
輸入
- 錯誤類型： 是用戶端錯誤 (4xx)、伺服器錯誤 (5xx) 還是系統狀態 (維護)？
- 技術脈絡： 系統能否解釋為什麼失敗，同時不洩漏敏感資料？
- 復原路徑： 對用戶來說，最可能的下一步是什麼？
- 品牌語氣： 品牌語調是幽默、專業還是嚴格技術性？
- 系統限制： 離線狀態是否需要支援特定的本地優先操作？
輸出
- 狀態頁面結構： 針對錯誤訊息、視覺錨點和復原動作定義的版面配置。
- 訊息層級結構： 標題（發生了什麼事）和描述（接下來該做什麼）的標準。
- 復原藍圖： 針對特定錯誤量身定制的連結、搜尋輸入或說明資源地圖。
- 離線 UI 規範： 連線中斷時介面如何改變的規則。
工作流程
1. 分類故障嚴重性
確定錯誤的影響範圍：
- 低 (404/403)： 侷限於單一 URL。網站運作正常。重點放在重新導向。
- 高 (500)： 系統範圍或頁面崩潰。網站處於困境。重點放在安心保證和支援。
- 系統性 (維護)： 刻意停機。重點放在期望管理（例如「下午 2 點恢復」）。
- 連線性 (離線)： 環境性失敗。重點放在狀態保存（例如「變更已在本機儲存」）。
2. 建立復原路徑
每個錯誤頁面都必須有一個「出路」：
- 「首頁」按鈕： 最基本的要求。
- 智慧建議： 對於 404，提供熱門頁面的連結或一個搜尋列。
- 「重新整理」觸發： 對於 5xx 錯誤，提供一個顯眼的方式來重試請求。
- 支援連結： 對於持續的問題，提供通往說明中心或狀態頁面的直接路徑。
3. 設計視覺結構
將 visual-hierarchy-system 應用於錯誤檢視：
- 視覺錨點： 使用品牌一致的插圖或圖示來緩和失敗的衝擊。
- 清晰的標題： 使用「人性化」標題（例如「我們找不到那個頁面」）而不是僅顯示狀態碼（「404 錯誤」）。
- 低調的後設資料： 將技術代碼（例如
Error ID: 12345）保持小而低對比，旨在提供給支援團隊而非用戶。
4. 應用「人性優先」訊息規則
避免讓用戶感到疏離的技術行話：
- 糟糕：「500 內部伺服器錯誤：連線被對端重設。」
- 良好：「我們這邊出了點問題。我們正在努力修復中。」
- 糟糕：「404 資源未定位。」
- 良好：「看起來這個頁面走錯路了。」
5. 規劃回應式適應
- 全頁面 vs. 模態框： 決定錯誤應佔據整個視埠（標準的 404/500）還是顯示為固定橫幅（常見於離線狀態）。
- 置中佈局： 將內容置中通常最適合錯誤頁面，因為它最小化了掃讀的精力，並強調了用戶旅程中的「停頓」。
決策規則
- 「直接路徑」規則： 永遠不要讓錯誤頁面成為死胡同。如果沒有具體建議，務必包含「返回首頁」和「搜尋」選項。
- 404 搜尋： 如果網站有超過 100 個頁面，404 頁面必須包含一個搜尋列。
- 維護透明度： 處於維護模式時，務必提供預計恢復時間或連往狀態頁面的連結。
- 離線持續性： 離線時，視覺上「灰化」或停用無法運作的操作（例如「提交」按鈕），以防止資料遺失。
限制條件
- 無障礙性： 錯誤頁面必須（在可能的情況下）維持網站的全域導覽和頁尾，以提供熟悉的路徑尋找。對於動態狀態變更（例如進入離線），應使用
aria-live="assertive"區域立即宣告該變更。 - 回應性： 錯誤頁面必須盡可能具有彈性。避免使用可能因系統已處於困境而無法載入的龐大資源。
- 品牌一致性： 錯誤頁面應看起來像是網站的一部分，而不是通用的瀏覽器或伺服器預設頁面。
常見失敗模式
- 「死胡同」： 一個沒有連結的 404 頁面，迫使用戶使用瀏覽器的返回按鈕或離開網站。
- 「行話牆」： 顯示原始的堆疊追蹤或資料庫錯誤，這會混淆用戶並可能洩漏安全資訊。
- 「指責遊戲」： 暗示用戶做錯事的訊息（例如「您輸入了無效的 URL」），而不是為發現失敗承擔責任。
- 風格不符： 一個使用與網站其他部分不同字型/顏色的錯誤頁面，使其看起來像是損壞或惡意頁面。
驗證標準
- 每個錯誤狀態（404、500 等）都有一個清晰、人性化的標題。
- 至少存在一個主要的復原動作（例如「返回首頁」）。
- 對於 404 頁面，提供搜尋列或熱門連結以利發現。
- 技術後設資料（錯誤 ID）存在，但在層級結構中處於次要位置。
- 連線狀態變更（離線）透過 ARIA 即時區域宣告。
- 視覺樣式與核心品牌/設計系統保持一致。
- 維護頁面提供「預計恢復時間」或「狀態頁面」連結。