五、視覺化設計原則
視覺化是儀表板的靈魂，好的視覺化能讓資料一目了然，不當的視覺化則會誤導決策。
1. 顏色使用原則
語義化顏色（Semantic Colors）
紅色（警示）：
- 未達標、異常、風險
- 利潤率低於門檻
- 交期延遲
黃色／橘色（注意）：
- 接近門檻、需留意
- 達成率 90-99%
- 潛在風險
綠色（正常）：
- 達標、正常、安全
- 達成率 ≥ 100%
- 品質良好
藍色／灰色（資訊、中性）：
- 一般資訊
- 歷史數據
- 比較基準
顏色使用範例
不良率儀表板：
不良率: 2.5%
顏色: 🟢 綠色 (< 3% 為正常)
不良率: 3.8%
顏色: 🟡 黃色 (3-5% 為注意)
不良率: 6.2%
顏色: 🔴 紅色 (> 5% 為警示)
顏色使用注意事項
❌ 避免：
- 過多顏色（建議不超過 5 種主色）
- 僅依賴顏色區分資訊（考慮色盲使用者）
- 使用彩虹色譜（除非表示溫度等連續變量）
✅ 推薦：
- 使用圖案、標籤輔助
- 選擇色盲友善的調色盤
- 保持整個儀表板的顏色一致性
2. 圖表類型選擇
折線圖（Line Chart）
用途：趨勢分析
適用場景：
- 時間序列數據
- 趨勢變化
- 多個指標的趨勢比較
範例：
月營收趨勢（過去 12 個月）
預測線vs實際線比較
設計要點：
- Y 軸從 0 開始（除非有特殊理由）
- 線條不超過 5 條
- 使用不同線型區分（實線、虛線）
長條圖（Bar Chart）
用途：比較數值
適用場景：
- 類別間的比較
- 排名
- 分布情況
範例：
各產品線銷售額比較
各區域業績排名
各部門預算分配
設計要點：
- 水平長條圖適合長標籤
- 依數值大小排序（除非有自然順序）
- 使用相同顏色（除非要強調特定類別）
圓餅圖（Pie Chart）
用途：占比關係
適用場景：
- 簡單的部分與整體關係
- 類別不超過 5 個
- 差異明顯的數據
範例：
產品線營收佔比
市場區域分布
注意事項：
- ❌ 避免 3D 圓餅圖
- ❌ 避免超過 5 個分類
- ✅ 考慮用長條圖或樹狀圖替代
儀表盤／量表（Gauge）
用途：單一指標的達成狀況
適用場景：
- KPI 達成率
- 目標進度
- 容量使用率
範例：
本月營收目標達成率
┌─────────┐
│ 92% │
0%└─────────┘100%
★ 目標: 100%
設計要點：
- 明確標示目標值
- 使用顏色區間（紅黃綠）
- 不要過度使用（容易佔據空間）
熱力圖（Heatmap）
用途：多維度數據的密度或強度
適用場景：
- 時間×類別的交叉分析
- 地理分布
- 相關性矩陣
範例：
各時段×各產品的銷售強度
各區域×各月份的業績分布
散點圖（Scatter Plot）
用途：兩個變量的關係
適用場景：
- 相關性分析
- 異常值檢測
- 集群分析
範例：
客戶購買頻率 vs 客戶生命週期價值
產品價格 vs 銷售量
3. 佈局設計原則
模組化分區
將儀表板劃分為清晰的功能區塊：
┌─────────────────────────────────────────┐
│ 營收區 │
│ ┌─────────┬─────────┬─────────┐ │
│ │ 月營收 │ 毛利 │ 成長率 │ │
│ └─────────┴─────────┴─────────┘ │
├─────────────────────────────────────────┤
│ 成本區 │
│ ┌───────────────────────────────┐ │
│ │ 成本結構圖表 │ │
│ └───────────────────────────────┘ │
├─────────────────────────────────────────┤
│ 產能區 │
│ ┌──────────┬────────────────────┐ │
│ │ 產能圖表 │ 設備狀態 │ │
│ └──────────┴────────────────────┘ │
└─────────────────────────────────────────┘
一頁概覽
策略儀表板應能在一頁呈現全貌：
- 無需滾動即可看到關鍵資訊
- 符合 1920×1080 或 1366×768 解析度
- 適合投影在會議室大螢幕
F 型閱讀模式
使用者視線軌跡：
重要 ═══════════════════════► 重要
↓
次要 ══════════►
↓
次要
次要
設計建議：
- 最重要的 KPI 放在左上角
- 關鍵指標沿著左側排列
- 次要資訊放在右側
4. 互動設計
支援的互動功能
下鑽（Drill-down）：
點選客戶名稱 → 顯示該客戶的訂單明細
點選區域 → 顯示該區域的產品分布
點選月份 → 顯示當月每日數據
篩選器：
┌─────────────────────┐
│ 篩選條件 │
│ 區域: [全部▼] │
│ 產品: [全部▼] │
│ 時間: [本月▼] │
│ [套用] [重設] │
└─────────────────────┘
時間軸切換：
[ 今日 ] [ 本週 ] [ 本月 ] [ 本季 ] [ 本年 ] [ 自訂 ]
懸停提示（Tooltip）：
滑鼠懸停在圖表上顯示：
┌─────────────────┐
│ 2025年1月 │
│ 營收: $1.2M │
│ 目標: $1.0M │
│ 達成率: 120% │
└─────────────────┘
5. 數據標註與標籤
清晰的標題
❌ 不好：
圖表 1
Dashboard
數據
✅ 好：
2025年Q1各區域營收達成率
過去12個月月營收趨勢（含預測）
產品線毛利率排行
軸標籤
必須包含：
- 軸名稱
- 單位
- 適當的刻度
範例：
Y軸: 營收（百萬元）
X軸: 月份（2024年）
數據標籤
何時使用：
- 長條圖頂端
- 圓餅圖扇區
- 關鍵數據點
格式建議：
$1.2M （營收）
85% （達成率）
+15% （成長率）
6. 視覺化常見錯誤
❌ 錯誤 1：截斷 Y 軸
問題：Y 軸不從 0 開始，誇大差異
範例：
不當：Y軸從 90 開始 → 差異看起來很大
正確：Y軸從 0 開始 → 反映真實差距
❌ 錯誤 2：過度使用圓餅圖
問題：用圓餅圖比較 8 個以上的類別
解決方案：使用長條圖或樹狀圖
❌ 錯誤 3：3D 圖表
問題：3D 效果扭曲數據，難以判讀
解決方案：堅持使用 2D 圖表
❌ 錯誤 4：雙 Y 軸
問題：可能誤導相關性
解決方案：
- 使用分開的圖表
- 或標準化數據後使用單一 Y 軸
7. 視覺化檢查清單
設計完成後，檢查以下項目：
- [ ] 每個圖表都有清晰的標題
- [ ] 所有軸都有標籤和單位
- [ ] 顏色使用有意義且一致
- [ ] 考慮了色盲使用者（使用圖案輔助）
- [ ] 選擇了正確的圖表類型
- [ ] 移除了不必要的視覺元素
- [ ] 數據標籤清晰易讀
- [ ] 圖表不過度擁擠
- [ ] 提供了適當的互動功能
- [ ] 在不同螢幕尺寸下都可正常顯示
8. 視覺化設計範例
範例：銷售業績儀表板
┌─────────────────────────────────────────────────┐
│ 📊 銷售業績儀表板 2025年1月 │
├──────────┬──────────┬──────────┬──────────────┤
│ 月營收 │ 目標達成 │ 毛利率 │ 新客戶 │
│ $1.2M │ 105% 🟢 │ 32.5% │ 15 │
│ ↗ +15% │ │ ↗ +2.3% │ ↗ +5 │
└──────────┴──────────┴──────────┴──────────────┘
┌────────────────────────┬────────────────────────┐
│ 各區域營收達成率 │ 產品線營收佔比 │
│ [長條圖] │ [圓餅圖] │
│ 北區 ████████░░ 92% │ │
│ 南區 ██████████ 105% │ 產品A 40% │
│ 東區 ██████░░░░ 78% 🔴 │ 產品B 35% │
│ 西區 ████████░░ 88% │ 產品C 25% │
└────────────────────────┴────────────────────────┘
┌─────────────────────────────────────────────────┐
│ 月度營收趨勢 │
│ [折線圖 + 目標線] │
│ $M │
│ 1.5│ ╱‾‾╲ ╱‾╲ ╱‾‾╲ │
│ 1.0│ ╱‾‾ ╲╱ ╲╱ ╲ ← 實際 │
│ 0.5│ -------------------------------- ← 目標 │
│ 0.0└───────────────────────────────── │
│ J F M A M J J A S O N D │
└─────────────────────────────────────────────────┘
上一章：KPI 架構與指標設計 下一章：資料治理與管理機制