圖表與資料視覺化

選圖表的順序是「先想這張圖要回答什麼問題」,再挑類型——趨勢用折線、比較用長條、佔比用甜甜圈。這章把意圖對應圖表整理成一張速查表,並提醒兩個最常被忽略的點:不能只靠顏色辨識(色盲),以及空資料與螢幕報讀都要照顧到。要畫任何圖之前翻這頁。

圖表操作列

這是什麼

圖表操作列 toolbar:期間、排序、系列開關、表格備援等。

什麼時候用

每張圖表卡片都應有;變更即時反映並更新 aria-label 摘要。

預覽依本指南規則實作

下方各圖表示範均內建操作列;實作時將 toolbar 置於標題與繪圖區之間,與 filter bar 視覺層級一致。

  • 期間/粒度:7d/30d/90d 或 日/週/月 segmented control。
  • 系列開關:圖例或 toggle 可隱藏系列(至少保留 1 系列)。
  • 檢視切換:漏斗/佔比提供表格備援;複合圖可關閉折線疊加。
  • 無障礙:toolbar role="toolbar";切換後更新 aria-label 文字摘要。

折線圖(時間趨勢)

這是什麼

折線圖:呈現隨時間變化的 KPI 趨勢。

什麼時候用

營收、活躍用戶、錯誤率等一圖一問題;單系列優先,避免多線難讀。

預覽依本指南規則實作
  • 適合:Dashboard 趨勢卡、詳情頁「過去 30 天」、即時監控(最近 N 點)。
  • 不適合:類別佔比、漏斗各階段比較(改甜甜圈/漏斗圖)。
  • 操作:期間切換、格線開關;Hover/tap 顯示精確值。

直條圖(類別比較)

這是什麼

直條圖:離散類別間的數值比較。

什麼時候用

渠道、方案、地區等;類別 ≤8 可讀性最佳,超過改橫條。

預覽依本指南規則實作
  • 適合:行銷渠道成效、各產品線銷量。
  • 不適合:超過 8 個類別(改橫條);時間序列(改折線)。
  • 操作:可選排序;互動時淡化非聚焦系列。

橫條圖(多類別/排行)

這是什麼

橫條圖:多類別或長標籤的排行比較。

什麼時候用

功能使用率 Top N、長文案類別、類別超過 8 個時。

預覽依本指南規則實作
  • 適合:Top N 功能、長文案類別、問卷選項分布。
  • 操作:由高到低/由低到高排序。

複合圖(長條+折線)

這是什麼

複合圖:長條表「量」、折線表「率」,同一時間維度。

什麼時候用

訂單數 + 轉換率等同維度量率並看;可關閉折線避免雙軸誤讀。

預覽依本指南規則實作
  • 適合:月訂單量 vs 轉換率、流量 vs 跳出率、產量 vs 良率。
  • 不適合:無關指標硬疊(應拆成兩張圖)。
  • 操作:toggle 關閉折線、格線;右軸僅在折線開啟時顯示。

甜甜圈(佔比)

這是什麼

甜甜圈圖:各類別佔總量比例。

什麼時候用

方案分布、預算分配、狀態佔比;類別 ≤5,超過改橫條。

預覽依本指南規則實作
  • 適合:訂閱方案占比、工單狀態分布(加總 100%)。
  • 操作:圖例點擊切換系列;中心顯示合計。

面積圖(累積趨勢)

這是什麼

面積圖:總量隨時間累積或堆疊的趨勢。

什麼時候用

用戶成長、累積營收、儲存量等;非各類別佔比。

預覽依本指南規則實作
  • 適合:累積註冊數、MRR 成長、儲存空間用量。
  • 不適合:各類別佔比(改堆疊長條或 100% 面積)。

散布圖(相關/離群)

這是什麼

散布圖:兩個連續變數的相關與離群。

什麼時候用

功能使用頻率 vs 滿意度、客單 vs 回購次數等探索性分析。

預覽依本指南規則實作
  • 適合:找出高價值離群點、相關性探索、A/B 分群。
  • 不適合:時間序列、有序漏斗(改折線/漏斗)。
  • 操作:四象限參考線、hover 看座標。

雷達圖(多維比較)

這是什麼

雷達圖:3–6 個同尺度維度的綜合評分。

什麼時候用

方案能力、技能雷達、競品對照;維度 >6 改表格。

預覽依本指南規則實作
  • 適合:產品能力矩陣、員工技能、供應商評分(維度 ≤6)。
  • 不適合:維度 >6(改表格或平行座標)、時間趨勢。
  • 操作:切換 0–100%/原始分數;toggle 隱藏維度(至少留 3)。

漏斗圖(轉換)

這是什麼

漏斗圖:線性流程各階段人數與轉換率。

什麼時候用

註冊、結帳、onboarding 等逐步流失分析。

預覽依本指南規則實作
  • 適合:註冊漏斗、購物車結帳、試用 → 付費。
  • 操作:漏斗圖/表格備援切換;每階段標示轉換率。

Heatmap(刊物感)

這是什麼

5 階密度 heatmap:淺灰 → brand 混色;適合預約日曆、產能熱區。

什麼時候用

需一眼看出時間/空間密度分布;搭配 publication chart 細線折線使用。

預覽依本指南規則實作

預約密度

週 × 時段 · 5 階 heatmap token

Metric + Sparkline Cards

這是什麼

數字 KPI 卡與含趨勢小圖的指標卡,可並排多欄(參考 Arcade、Cloudflare Analytics)。

什麼時候用

儀表板首屏要一次呈現多個關鍵指標時;欄數依螢幕寬度調整。

預覽依本指南規則實作

Views

12.4K

12%

Plays

8.1K

8%

CTA Clicks

342

3%

Play Time

4m 12s

5%

Completion

68%

2%

Total requests

1.2M

Total bandwidth

48 GB

Unique visitors

24.5K

Threats mitigated

312

Chart Hero Card

這是什麼

圖表主卡:頂部摘要數字、長條圖、底部域名或分類圖例(參考 Resend Metrics)。

什麼時候用

需要一張卡同時呈現總覽數字與趨勢圖、並附分類明細時。

預覽依本指南規則實作

EMAILS

17

DELIVERABILITY RATE

100%

  • content-mobbin.com6 · 35%
  • updates.acme.com8 · 47%
  • notify.app.io3 · 18%

規格速查

資料意圖建議圖表
時間趨勢折線/面積(單系列優先)
類別比較直條(類別 ≤8),多則改橫條
佔比甜甜圈(≤5 類),再多改條圖
排行橫條,由大到小排序
相關/離群散布圖(兩連續變數)
多維評分雷達圖(3–6 維)
轉換/漏斗漏斗圖 + 表格備援

其他通則:不只靠顏色辨識(配 pattern/標記/直接標籤)、提供圖例 + tooltip、Y 軸從 0 起並標單位、空資料態與載入 skeleton 都要有、行動裝置響應式簡化、>5 類別勿用 pie。

常見做錯

做錯正確
只靠顏色區分系列除顏色外加線型、標記形狀或直接標籤,並確保對比足夠
pie/甜甜圈塞超過 5 類佔比類別 ≤5,再多改用條圖
無資料時顯示空白座標軸空資料態給標題 + 說明 + CTA(如「連接資料來源」)
行動裝置不簡化照搬桌面圖響應式簡化,mobile 單欄堆疊
沒有 tooltip 或螢幕報讀摘要提供 tooltip 與 aria-label/一句話關鍵洞察摘要

相關章節

  • Dashboard — KPI 卡 → 趨勢圖 → 表格的儀表板組合
  • 資料表格 — 漏斗等圖表的表格備援呈現
  • Design tokens — 系列色使用的 token 序列來源