數據視覺化系統
目的
數據視覺化系統提供了一套方法論，用於設計層級高於個別指標的圖表與圖形。它確保定量關係——例如隨時間的趨勢、類別之間的比較以及數值的分佈——能夠清晰、準確且無障礙地傳達。此系統透過建立 圖表選擇、光學正規化、無障礙色彩編碼 與 響應式重排 的規則，來防止「視覺噪音」與認知負荷過載。
使用案例
- SaaS 儀表板： 視覺化用戶成長、收入趨勢或系統效能。
- 財務報告： 顯示投資組合分佈、費用類別或市場波動。
- 分析平台： 顯示流量來源、轉換漏斗或行為同類群組。
- 影響力與永續性報告： 視覺化環境指標或隨時間變化的社會影響數據。
- 健康與健身應用程式： 追蹤生命體徵、活動水平或目標進度。
何時不應使用
- 單一高影響數字： 對於孤立的 KPI（例如「總營收：10k 美元」），請使用
metric-and-statistic-system。 - 原始多屬性數據： 如果用戶需要讀取跨多個欄位的 20 個以上項目的特定值，請使用
data-table-ui-system。 - 純裝飾性資訊圖表： 目標是藝術表達或敘事性故事講述，且使用非動態、非數據驅動圖形的情況。
- 逐步狀態： 對於線性流程（例如「步驟 2 / 4」），請使用
step-progress-system。
輸入
- 用戶目標： 用戶試圖理解什麼？（比較、趨勢、分佈或部分對整體）。
- 數據類型： 數據是類別型（例如「瀏覽器類型」）、時間型（例如「每月銷售額」）還是定量型（例如「價格 vs. 品質」）？
- 基數： 需要同時顯示多少個項目或系列？
- 裝置限制： 目標視口與互動模式（觸控 vs. 滑鼠）。
- 品牌代碼： 來自父設計系統的調色板、字體與間距。
輸出
- 圖表選擇對應表： 根據目標與數據選擇的圖表類型（折線圖、長條圖、圓餅圖、散佈圖）。
- 無障礙色彩規格： 對色盲用戶（紅色盲、綠色盲、藍黃色盲）仍可區分的調色板。
- 結構與標籤規格： 軸標題、圖例、工具提示與數據標記的規則。
- 響應式轉換對應表： 圖表如何從桌面端適應到行動端（例如方向轉換、數據簡化）。
工作流程
1. 識別溝通目標
在選擇圖表之前，先定義數據應「表達」什麼：
- 隨時間的趨勢： 使用 折線圖 或 面積圖。
- 類別比較： 使用 長條圖（垂直或水平）。
- 部分對整體關係： 使用 甜甜圈圖 或 矩形樹狀圖（對於超過 3 個類別，避免使用標準圓餅圖）。
- 相關性/分佈： 使用 散佈圖 或 直方圖。
2. 選擇並正規化圖表類型
套用「數據真實性」規則以確保準確性：
- 零基線規則： 長條圖的數值軸必須從零基線開始，以避免誇大差異。
- 「寬高比」規則： 對於折線圖，保持平衡的寬高比（通常為 2:1 或 3:2），以免斜率被人為地拉陡或壓平。
- 極簡幾何： 移除不傳達數據的非必要「圖表垃圾」，例如 3D 效果、粗網格線或陰影。
3. 建立視覺層級與標籤
將 visual-hierarchy-system 應用於圖表元件：
- 直接標籤： 只要可行，直接在線條/長條旁邊標記數據系列，而不是使用單獨的圖例，以減少眼睛追蹤的疲勞。
- 強調： 對「當前」或「目標」數據系列使用高對比度顏色，對歷史或基準數據則使用柔和的中性色。
- 上下文層級： 軸標題應存在但應次要化（較小/較亮），以突出主要數據和圖表標題。
4. 套用無障礙色彩與圖案
確保每個人都能感知數據：
- 色盲安全調色板： 使用不同的色相與不同明度層級。避免僅使用紅色和綠色配對來表示「壞」vs.「好」；請使用紅色/藍色，或添加圖示/符號。
- 冗餘編碼： 使用不僅限於顏色的方式。添加虛線、不同的標記形狀（圓形、方形、三角形）或不同的圖案/紋理來區分系列。
- 對比度： 確保所有文字（標籤、軸）相對於背景達到 WCAG AA（4.5:1）對比度。
5. 設計互動與響應式
- 漸進式揭露： 使用工具提示在滑鼠懸停/觸控時顯示確切數值，使圖表保持簡潔且易於掃視。
- 響應式重排：
- 水平到垂直： 桌面上寬的垂直長條圖應在行動裝置上切換為水平長條圖，以避免水平滾動。
- 數據削減： 在行動裝置上，減少 X 軸標籤的數量（例如每隔一個月顯示一次）或彙總數據點。
- 寬高比鎖定： 確保圖表保持可讀性；在 CSS 中使用
aspect-ratio來保留空間並防止 CLS。
決策規則
- 「無圓餅圖」規則： 如果超過 5 個類別，或類別之間的差異很小，請避免使用圓餅圖/甜甜圈圖。改用水平長條圖。
- 標籤優先於圖例： 如果需要圖例，請將其放置在盡可能靠近數據的位置（例如圖表上方或靠右對齊），而不是放在最底部。
- 單色成功： 一個好的圖表即使以灰度列印也應能被理解。如果不行，則表示其顏色選擇或標記過度依賴於色相。
- 精確度 vs. 掃視： 在儀表板上，為了快速掃視，請將數值四捨五入（例如 120 萬而非 1,242,301）。在工具提示中保留高精度。
限制
- 無障礙性： 圖表必須附帶一個數據表或一個總結關鍵洞察的描述性
aria-label。使用role="graphics-document"或role="img"並搭配aria-label。確保所有互動元素（標記）滿足 24x24 像素的最小目標尺寸。 - 響應式： 圖表絕不能有固定的像素寬度；它們必須是流體式的。對於複雜的 SVG 圖表，使用
viewBox來調整縮放。 - 層級： 圖表的標題應是最突出的文字，其次是數據本身。
常見失敗模式
- 圓餅圖過載： 試圖在圓餅圖中顯示 10 個扇形，使得較小的扇形無法區分。
- 截斷軸： 從非零值開始長條圖的軸，以使微小差異看起來很巨大（欺騙性設計）。
- 僅依賴顏色： 僅使用相似的藍色調來區分折線圖中的 5 條線，導致色盲用戶無法存取。
- 圖例疲勞： 強迫用戶在顏色圖例與數據之間來回查看 10 次才能理解圖表。
- 行動圖表溢出： 未針對行動裝置調整圖表類型或標籤，導致文字過小難以閱讀或版面破碎。
驗證標準
- 圖表類型選擇符合溝通目標（例如趨勢使用折線圖）。
- 長條圖從零基線開始。
- 調色板為色盲安全並使用冗餘編碼（標記/圖案）。
- 在空間允許的情況下使用直接標籤；圖例放置在鄰近位置。
- 圖表為流體式並正確適應行動裝置（例如水平重排）。
- 無障礙性：
aria-label提供數據/洞察的摘要。 - 互動：工具提示在滑鼠懸停/觸控時提供精確數據。
- 所有文字達到 WCAG AA 對比度（4.5:1）。