橫幅與警示系統
目的
橫幅與警示系統提供一套方法論，用於設計非持久性、非覆蓋式的溝通層。與會強制中斷使用者的模態視窗不同，橫幅與警示能在使用者繼續當前任務的同時，傳遞關鍵資訊（狀態更新、警告或公告）。此系統確保通知在視覺上具有區分性、優先級適當且具備無障礙性。
使用情境
- 傳達全站公告（例如：「排定維護將在 2 小時後開始」）。
- 在表單內提供上下文回饋（例如：「變更已成功儲存」）。
- 警告使用者帳戶問題（例如：「訂閱將在 3 天後到期」）。
- 通知使用者不影響整個應用程式但會影響功能的系統錯誤（例如：「銀行同步目前無法使用」）。
- 顯示用於促銷或新功能上線的「行銷橫幅」。
何時不應使用
- 關鍵阻斷： 若使用者必須在繼續前採取動作，請使用
overlay-and-dialog-system（模態視窗）。 - 被動回饋： 對於短暫、低優先級的狀態更新（例如：「連結已複製」），請使用 Toast 提示（參見
overlay-and-dialog-system）。 - 資料標籤： 對於單一項目的簡單狀態指示器，請使用
badge-and-tag-system。 - 導覽： 請勿將橫幅用於主要或次要導覽連結；請使用
site-navigation-system。
輸入
- 訊息嚴重程度： 此訊息為錯誤、警告、成功還是資訊？
- 範圍： 這是全域（全站）還是內嵌（特定區塊/頁面）？
- 可關閉性： 使用者能否隱藏此訊息，還是必須保持可見？
- 動作需求： 訊息是否需要後續動作（例如：「更新帳單資訊」）？
- 品牌色板： 狀態的標準顏色（危險紅、警告琥珀色等）。
輸出
- 警示結構規範： 圖示、文字層級與動作放置的定義。
- 空間邏輯： 橫幅顯示位置的規則（檢視區頂部、內容上方或區塊內部）。
- 狀態矩陣： 不同訊息嚴重程度的視覺處理方式。
- 無障礙計畫： 用於互動式警示的 ARIA 角色與焦點管理規則。
流程
1. 決定警示層級（嚴重程度）
根據意圖指派狀態：
- 錯誤（高優先級）： 需要關注但不會破壞檢視的關鍵問題。
- 警告（中優先級）： 潛在問題或即將到來的截止日期。
- 成功（低優先級）： 已完成動作的確認。
- 資訊/公告： 中性資訊或行銷更新。
2. 選擇放置模式
- 全域橫幅（頂端列）： 位於檢視區最頂端。最適合高優先級的全站公告。
- 頁面橫幅： 位於全域頁首下方、頁面內容上方。最適合特定頁面的通知。
- 內嵌警示： 直接位於區塊內或相關元件旁（例如表單內部）。最適合上下文回饋。
3. 設計元件結構
每個警示應遵循一致的內部層級：
- 圖示： 嚴重程度的視覺速記（例如成功用勾號）。
- 標題（可選）： 較長警示的粗體標題。
- 說明： 核心訊息。請保持簡潔。
- 動作： 引導下一步的按鈕或連結。
- 關閉觸發器： 若警示非關鍵，提供「X」按鈕。
4. 建立互動規則
- 持續性： 決定警示是在動作後消失、超時後消失（不建議用於橫幅），還是僅在使用者手動關閉後消失。
- 版面位移管理： 確保出現的橫幅不會造成劇烈的版面位移（CLS）。使用保留空間或平滑過渡。
5. 定義響應式行為
- 堆疊： 在行動裝置上，若動作無法水平排列，應移至文字下方。
- 寬度： 全域橫幅為全寬；內嵌警示跟隨容器寬度。
決策規則
- 「一次一個」規則： 絕不堆疊超過兩個全域橫幅。若有多個公告，請將其合併為單一的「通知中心」或滑動器。
- 顏色 + 圖示： 絕不單獨依賴顏色來傳達警示狀態。務必包含圖示以確保無障礙性。
- 依據上下文放置： 若警示是由使用者動作引起（例如按下「儲存」），請將警示放置在動作點附近（內嵌）。若是系統狀態，則放置於頂部（全域）。
- 可關閉邏輯： 始終允許使用者關閉「資訊」和「成功」橫幅。「錯誤」和「警告」橫幅僅應在底層問題解決後才能關閉。
限制條件
- 無障礙性： 對於高優先級錯誤，使用
role="alert"；對於較低優先級的更新，使用role="status"。確保文字對比度為 4.5:1。若全域橫幅為固定/黏性，請確認它在內容滾動時不會永久遮擋已聚焦的元素（WCAG 2.2 SC 2.4.11）。 - 排版： 使用清晰的字型大小（最小 14px），且長說明文字避免使用全大寫。
- 行動裝置觸及範圍： 確保關閉按鈕符合 WCAG 2.2 SC 2.5.8 的最小 24x24px 標準，在版面允許的情況下放大至 44x44px。
常見失敗模式
- 「可忽略的錯誤」： 對關鍵錯誤使用「資訊」樣式，導致使用者錯過重要警告。
- 侵入式行銷： 使用全域橫幅顯示低價值的促銷內容，讓使用者感到困擾並降低「警示」空間的價值。
- 遺漏動作： 告知使用者發生問題（例如「付款失敗」），但未提供直接修正的連結。
- 版面抖動： 橫幅「彈出」並將整個頁面內容向下推，導致使用者誤點。
驗證標準
- 每個警示都使用與其嚴重程度匹配的圖示和顏色組合。
- 全域橫幅位於層級頂端。
- 內嵌警示放置於與其相關內容相近的位置。
- 所有互動元素（關閉按鈕、行動呼籲）符合 WCAG 2.2 24x24px 最小觸控目標（2.5.8）。
- 高優先級警示使用適當的 ARIA 角色（
alert）。 - 可關閉的橫幅會記住其狀態（或有重新出現的邏輯）。