操作儀表板設計 是做什麼的？
建立一個數據優先的儀表板，遵循 概覽 → 注意 → 細節 → 行動 的流程。保持主要視圖不含解釋性句子，同時不隱藏解讀數據或操作控制所需的資訊。
使用時機
- 設計或審查操作儀表板、KPI 檢視或緊湊的分析圖形。
- 幫助用戶識別例外情況，並從受影響的數據中採取定義好的行動。
- 將雜亂的儀表板重構為一致且易於掃描的視覺系統。
請勿將其作為敘事報告、教育圖形、入門指南或需要明確說明的介面的通用規則。靜態圖形無法依賴工具提示，也不能假裝提供互動式操作。
輸入與前提條件
獲取數據集或精確的 Schema、目標受眾、操作決策、交付格式（模型、圖片、HTML 或可運作的儀表板）以及目標裝置。確認指標單位、時間窗口、基準線、閾值、期望方向以及允許的操作。
不需要特定的函式庫、服務或代理客戶端。使用可用工具檢查數據、建立所需的成品並進行測試。僅詢問遺漏的決策關鍵資訊；標註臨時假設。絕不虛構測量值、閾值、操作或成功的 QA 結果。
步驟
1. 建立數據合約
- 檢查總計、聚合、分母、單位、時間窗口和基準線是否與實際計算相符。
- 區分零值、缺失值、過時值、不可用值和「不適用」值；切勿將缺失數據靜默轉換為零。
- 為每個指標定義較高的值或較低的值是否代表問題。對於中性指標（例如花費），使用已核准的預算或範圍；如果沒有，則使用中性樣式，且不暗示存在問題。
- 當統計不確定性和數據新鮮度會影響決策時，保持其可見性。
完成條件： 每個顯示的指標都有明確的定義和已知的數據限制。
2. 定義層級結構與行動
- 從整體狀態開始，然後是直接在數據上標記的例外情況，最後是詳細資訊。
- 根據嚴重性和決策相關性設定注意優先級，而非隨意的視覺裝飾。
- 將操作放在受影響的數據點上或旁邊：例如，一個可操作的熱力圖儲存格會開啟其相關的詳細資訊或工作流程。
- 使用有意義的可訪問名稱、可見的焦點和清晰的互動提示。作為設計視圖的一部分，切勿虛構補救措施或執行它。
完成條件： 每個標記都有明確的定義原因，並且有一個真實的操作或明確標示為非互動的詳細資訊目的地。
3. 選擇視覺編碼
當適合任務時，優先使用共通尺度上的位置，其次是長度，然後是角度/面積，最後是顏色。這是一個設計啟發法，並不保證一種編碼適用於所有數據集。
預設視覺詞彙：
- 分類熱力圖： 離散的、帶有標籤的閾值，用於異常掃描。
- 子彈圖： 數值、可比較的目標和有意義的範圍，取代儀表。當比較需要時，對齊尺度。
- 分段共享長條圖： 以定義整體的組成部分取代圓餅圖，包含兩個類別的份額。顯示分母，且不為重疊類別暗示一個整體。
- 走勢圖： 緊湊的時間上下文，包含足夠的端點、尺度或範圍資訊，以避免誤導性的比較。
- 一致的詳細資訊表面： 工具提示，搭配等效的焦點/輕觸可存取的彈出視窗或詳細資訊面板。
如果此詞彙無法忠實呈現請求的任務，請解釋不匹配之處並提出合適的替代方案，而不是強行將數據塞入其中。
完成條件： 每個元件都支援比較或決策，並且其尺度是可解讀的。
4. 應用精簡語言與可訪問顯著性
- 在主要數據視圖上，使用簡潔的指標名稱、數值、單位、期間標籤、基準線標籤以及必要的控制/狀態標籤；不得使用敘事性見解或解釋性段落。
- 一個緊湊的比較，例如
▼ 15% 與 9月相比，必須標明比較的對象以及變動是否有利。單獨的箭頭不得用來編碼嚴重性。 - 將支援性說明放在詳細資訊中，但切勿讓重要意義僅透過懸停顯示。提供鍵盤和觸控存取、可存取的名稱，以及適當的等效文字/數據表示。
- 對於有序的幅度使用順序尺度，圍繞有意義的中點使用發散尺度，或對於定義的閾值使用分類尺度。
- 增加向已確定問題的視覺強度。如果數值低是不好的，則反轉嚴重性映射；如果兩個極端都不好，則使用雙邊閾值。
- 將顏色與非顏色提示（例如形狀、圖示、圖案、邊框或明確的簡短狀態標籤）配對使用。
- 一般文字至少達到 4.5:1 的對比度，大型文字及有意義的圖形/控制邊界達到 3:1 的對比度。測試實際的前景/背景組合和互動狀態；避免在未經驗證的色調上使用強調色文字。
- 移除裝飾、多餘的格線和不必要的背景。當需要解讀數據時，保留圖例、標籤和指引。
完成條件： 在主要數據表面上，即使沒有顏色、懸停或解釋性句子，視圖仍然可以理解。
5. 建置並驗證請求的成品
交付請求的格式，而不僅僅是設計說明。對於可運作的儀表板，要執行其互動和數據狀態；對於圖片或模型，要清楚標明非功能性控件。
執行下面的驗證清單。修正已確認的缺陷，並將未執行的檢查標記為 未驗證。不要將規格文件稱為已實作的儀表板，也不要把結構檢查看作可用性測試。
完成條件： 成品已交付，附有證據支持的品質保證和明確的限制。
驗證
- 數據： 計算的總計和份額可對帳；單位、時間窗口、分母和基準線匹配；缺失/過時/中性狀態已測試。
- 顯著性： 檢查渲染後的視圖，確認預期的例外情況是否突出。區分視覺審查和衡量的用戶注意力測試。
- 顏色： 當工具允許時，檢查真實的色覺模擬；獨立確認非顏色提示傳達了嚴重性。僅憑模擬不足以確定可訪問性。
- 對比度： 測量渲染後的顏色對和相關狀態；報告方法和失敗之處，而不是僅從調色板名稱斷言合規性。
- 語言： 檢查主要表面是否有解釋性句子，保留必要的控制、狀態和安全用語。
- 互動： 進行鍵盤導航、可見焦點、焦點/輕觸詳細資訊、關閉以及預期的操作路徑測試，而不執行未經批准的外部操作。
- 佈局： 檢查目標視口、裁剪、溢位、長標籤以及具有代表性的空/單一/多項目狀態。
- 完整性： 圖例和尺度足夠，佈局規則沒有衝突，輸出不會虛構數據或暗示不支援的操作。
輸出合約
返回：
- 請求的成品或其經過驗證的位置。
- 主要決策和行動路徑的簡短描述。
- 一份簡潔的 QA 報告，區分通過、失敗和未驗證的檢查項目，並附帶方法或證據。
- 剩餘的假設或阻礙，以及如果尚未完成，下一步的具體行動。
關於「禁止敘事」的規則適用於儀表板的主要數據表面，不適用於此交付報告、可訪問性文字或必要的錯誤/安全訊息。
常見陷阱
- 移除必要上下文的極簡主義是歧義，而非效率。
- 紅色的數值不一定是問題；嚴重性需要一個特定於指標的規則。
- 工具提示不是重要的可見或聚焦可存取資訊的可存取替代方案。
- 精簡的圖形仍可能因不相容的尺度、截斷的範圍或遺漏的分母而產生誤導。
- 不要僅憑對比度檢查就聲稱符合 WCAG。
- 若未實際執行，請不要聲稱進行了眼動追蹤、色覺模擬或互動測試。