圖表設計
一句話定義
把複雜資料視覺化以幫助使用者聚焦重要資訊的設計實踐——遵循三層工作流（何時用 / 如何用 / 系統化）+ 三原則（Focused / Approachable / Accessible）+ 五要點（Marks / Axes / Descriptions / Interaction / Color）；當問題進入具體圖型判斷時，交由 圖表類型選擇 處理。元紀律是「只有最重要的部分才應該做成圖表」。
核心要點
三層工作流（Apple WWDC 2022 整理）
1. What — 何時使用圖表
| 用途 | 場景 | 常見圖型 |
|---|---|---|
| 變化 Change | 歷史紀錄 / 趨勢 / 預測 | 折線圖 |
| 比例 Proportion | 完成度 / 占比 / 進度 | 圓餅 / 進度環 |
| 比較 Comparison | 同框架評估資料 | 並列柱狀圖 |
→ 元紀律：選錯用途的圖型 = 觀眾被迫自己換算；正確選擇能直接把注意力落到關鍵資訊。
圖型選擇深化（2026-05-07-即學即用的圖像資訊表達課 C3）
RE:LAB 課程讓本頁原本的 What 層往下拆成 圖表類型選擇：同樣是「比較」，長條圖、直方圖、散佈圖、矩形樹狀圖與雷達圖處理的資料關係不同；同樣是「比例」，圓餅圖、泡泡圖、堆疊區域圖與統計地圖也有不同感知限制。
因此本頁保留「圖表設計原則」，具體圖型判斷交給 圖表類型選擇：
- 圓形圖表：圓餅圖、泡泡圖、散佈圖
- 方形圖表：長條圖、直方圖、矩形樹狀圖
- 線型圖表：折線圖、堆疊區域圖、桑基圖
- 空間與其他：統計地圖、雷達圖、文字雲
2. How — 如何使用圖表
- Describe chart contents：用一句話幫使用者抓重點（「整體銷量 +12%」「總售出 1423 件」）—— 不要讓使用者自己歸納
- Incorporate details：多角度整合（點擊列表展開資料 / 大圖細節 + 小圖縮略圖）
- Progressively reveal complexity：層次性呈現，保留初始外型避免一次給太多
3. System — 圖表設計系統化
- Use familiar form：條形 / 折線是大眾經驗；散佈圖等需要額外說明
- Difference matter：刻意強化差異讓觀眾快速分辨同框架內的多個圖
簡報圖表工作流（2026-05-06-60分鐘打造質感簡報-資訊圖表）
簡報中的圖表多了一層限制：觀眾通常一邊聽講者、一邊遠距離看投影片。因此圖表不是只要「正確」，還要在幾秒內被看見。實作流程可拆成四步：
- 降噪：先關掉不必要的圖表標題、圖例、資料標籤、運算列表或多餘格線。
- 放大：把保留的標籤、軸線文字、數值、線條與端點標記放大，並統一字型。
- 分離：標題、結論、總值或補充數字可放在圖表外側；圖表本體專注呈現形狀與比較。
- 配合講述節奏：動畫只服務講者的揭示順序；不該讓背景、圖例或資料標籤跟著亂動。
常見圖型的簡報選型
| 圖型 | 適合資料 | 簡報設計重點 |
|---|---|---|
| 圓環圖 / 圓餅圖 | 單一事件或單一時間的多重數值總和占比 | 圓環圖適合多重比例；圓餅圖更適合二分比例。色塊用主色 / 強調色深淺區隔，框線跟背景同色以避免黏在一起。 |
| 長條圖 | 多重事件或多重時間的數值個別比較 | 先用單一主色保持乾淨，再用強調色標出最高 / 最低或講者要說的重點；格線可比折線圖清楚。 |
| 折線圖 | 多重事件 / 時間 / 數值的趨勢與交叉比較 | 資訊量最大；格線要淡，折線要粗，端點標記要明確，避免所有線與格線混在一起。 |
牌卡式圖表
牌卡式圖表是在圖表、數值、結論背後放圓角矩形，把資訊切成可掃讀區塊。它本質上是 格式塔原則 的圖表場景：用方框 / 填色 / 對齊讓觀眾知道「這一組資訊要一起讀」。關鍵不在裝飾，而在安排視覺動向：先看圖表，再看數值，再看結論。
圖表作為資料故事的證據
2026-05-09-矽谷簡報女王用數據說出好故事 補上 資料故事化 視角：圖表不是故事本身，而是支撐數據觀點的證據。
- 標題要說結論：圖表標題不只標示「銷售額 / 滿意度 / 留存率」，而要用完整句子指出數據觀點。
- 形容詞 / 副詞也是設計工具：組成圖可用形容詞描述比例大小，趨勢圖可用副詞描述變化幅度，讓讀者知道該如何解讀關係。
- 註解補脈絡：單一數值本身常不夠，註解負責說明為什麼這個點、這段趨勢或這個差異值得注意。
- 揭示順序會影響理解：先隱藏再凸顯意外結果，可建立注意力；但不能扭曲資料定義、比較基準或比例。
2026-05-09-Justry-Google必修圖表簡報術讀書心得 補上圖表故事的反面教材：爛圖表不是「不好看」而已，而是資訊塞太滿、顏色太多、每個元素都想被強調，最後沒有任何 takeaway。好的圖表應把多餘軸線、導引線、標籤與裝飾拔掉，再用少量顏色、字重、大小或位置讓重點先被看見。
BI 儀表板與工具層
2026-05-09-IBM-Excel-Cognos資料視覺化儀表板筆記 把圖表放進 Excel / Cognos 的 BI dashboard 語境：line、bar、pie、stacked bar、funnel、scatter、bubble、treemap、sparkline 等圖型常被放在同一個 dashboard 裡服務不同判讀任務。
這補上本頁的工具層提醒：BI 平台可以支援資料探索、視覺化與 operationalization，但平台預設圖型不等於好的圖表設計。Dashboard 場景更需要先定義指標、受眾與行動，再決定哪些資料值得被圖表化、哪些只需要數字、表格或註解。
三原則：Focused / Approachable / Accessible
| 原則 | 核心問題 | vault 對位 |
|---|---|---|
| Focused（聚焦） | 是否突出最重要訊息？ | 資訊層級 「重點不是看到最多的，而是看到最少的」的圖表場景版 |
| Approachable（易理解） | 一般使用者能否憑經驗讀懂？ | 易讀性 「好排版沒有感覺」的圖表場景版 |
| Accessible（無障礙） | 視覺 / 聽覺 / 動作受限的使用者能否使用？ | 無障礙設計 在資料視覺化的具體應用 |
五要點：Marks / Axes / Descriptions / Interaction / Color
Marks（標記）
- 圖型選擇隨目標 + 數據變化——鬆餅銷量為例：
- 點線圖：銷量平均時清晰；不平均則難辨
- 折線圖：清楚呈現變化速率；零銷量日會誤產生波動
- 柱狀圖：直觀；零銷量不干擾
- 紀律：儘早用真實數據測試設計（避開美術稿假資料的視覺慣性）
- 多通道呈現：所有視覺資料必須能以非視覺方式表達（VoiceOver / Audio Graph）
Axes（軸線）
- 範圍固定或動態：電池 0–100%（固定）vs 步數無上限（動態）
- 紀律：條形圖基線必須從零開始——基線 0 vs 20 的差異會讓相同數據被誤判為兩倍差距
- 格線與標籤密度動態調整：詳細模式顯示完整格線、概覽模式只顯示平均線
Descriptions（描述）
- 軸標籤 + 醒目標題提升清晰度
- 總結主要結論：「預計 9 分鐘後開始下小雨，持續 36 分鐘」——避免使用者自己讀圖
- Audio Graph：用聲音音階反映數值高低，給非視覺通道
Interaction（互動）
- 切換標籤突出特定部分；切換時間段觀察年月日時趨勢
- 大觸控區域：觸控面積放大並拉長，不照原始條形大小
- 多輸入方式：Touch / Mouse / Keyboard / Voice Control / Switch Control / VoiceOver
- 無障礙標籤：Succinct（簡潔不重複）/ Spell entire words（不縮寫）/ Context first（相關內容優先）
Color
- 用途三類：
- 區分類別（運動 App 紅 / 綠 / 藍 = 熱量 / 運動時間 / 站立次數）
- 傳達強度（橘 / 藍 = 溫度高低）
- 突顯特定值（心率圖紅點 = 最大 / 最小）
- 紀律：顏色加強而非取代訊息——配合圖型差異，色盲也能讀懂
- 文化差異：歐美「綠 = 收益 / 紅 = 損失」 vs 東方「紅 = 收益 / 綠 = 損失」
- 平衡視覺重量：避免某色凌駕；鮮豔色保留給最重要資料
- 明顯顏色 + 色盲濾鏡檢查 + 尊重系統設定（深 / 淺模式 + 高對比）
三個元命題
- 「只有最重要的部分才應做成圖表」——圖表會吸引注意力。把非關鍵資訊圖表化是視覺成本浪費；不該圖表的東西用文字或表格更省。
- 「儘早使用真實數據測試設計」——美術稿用假資料時設計看起來都很美；換成真實資料才會暴露問題（零值波動、極端值擠壓、類別失衡等）。對位 使用者研究「過程 > 交付」與 Prototype 早測精神。
- 「好圖表沒有感覺」——使用者直接吸收資訊、不需學習圖表規則。對位 排版 元命題「好排版沒有感覺」——壞圖表才會被注意到（像壞排版一樣）。
反模式
- 所有元素都想強調——色彩、字重、線條與標籤同時喊話，等於沒有重點。
- 基線非零的條形圖——把 80% vs 100% 畫成 5 倍差距
- 顏色為唯一訊號——色盲使用者直接失去資訊軸
- 散佈圖不附說明——預設使用者懂專業圖表類型
- 同框架內所有圖表強調都一樣——觀眾無法分辨哪個值得看
- 零銷量日的折線——本來該是「斷點」變成「向下波動」誤導趨勢
與其他概念的關係
視覺設計家族
- 與 資訊層級：本頁的 Focused 原則 + Marks 強調 = 資訊層級 在圖表場景——四級分類（重要 / 副 / 輔助 / 冗餘）對應到圖表中強調色 / 主數據 / 輔助格線 / 應刪除元素
- 與 圖表類型選擇：本頁回答「圖表應該如何設計」，圖表類型選擇 回答「這組資料到底該用哪種圖」；前者是原則層，後者是選型層。
- 與 格式塔原則：圖表的 顏色 / 形狀群組化 = 方框 / 填色 / 對齊三方程式的圖表場景；格式塔原則 備註已預埋「(d) Gestalt 在 資料視覺化中的應用」，本頁兌現該未來累積方向
- 與 色彩心理學：本頁 Color 五要點之一 = 色彩心理學 在圖表場景的應用；文化差異紀律共通（歐美綠紅 vs 東方紅綠）；色彩心理學 處理「選什麼色」、本頁處理「圖表中怎麼用色」
- 與 易讀性：本頁 Approachable 原則 + Descriptions 描述句 = 易讀性 在圖表場景——對比、留白、層級在圖表中以軸線、空白、強調色形式落實
- 與 排版：圖表中的標題 / 軸標籤 / 數值標示等文字元素遵循 排版 兩軸（易辨性 + 易讀性）；元命題「好圖表沒有感覺 = 好排版沒有感覺」同源
- 與 60-30-10法則：本頁 平衡視覺重量 + 鮮豔色保留給強調 = 60-30-10法則 在圖表場景的精神
UX 家族
- 屬於 MOC-UX 「介面表現工具層」——把研究 / 規格 / 文案落實為螢幕上「可被讀、可被掃視、可被點擊」的具體產出之一
- 與 無障礙設計：本頁 Accessible 原則 + Audio Graph + 多輸入方式 + 顏色不為唯一訊號 = 無障礙設計 在圖表場景的具體實踐
- 與 UX文案：本頁的 Descriptions（標題 + 結論句）= UX文案 在資料密集場景的應用——「整體銷量 +12%」是 UX 文案技藝的圖表場景版
- 與 UX-三刀流：好圖表須兼顧使用者（讀懂）/ 商業（傳達指標）/ 數據（量測準確）三流——商業儀表板是三流交集最密集的場景
- 與 Goal-Signal-Metric：圖表是指標可被觀察的最後一哩；GSM 拆出指標後仍需圖表設計才能讓組織持續看見
設計系統家族
- 與 Apple HIG / Google Material Design：兩大設計系統都包含圖表規範；本頁以 Apple WWDC 2022 三場演講 + Google Material Design 為主要素材，是兩家設計系統的圖表規範交集點
- 與 簡報設計：簡報中的圖表 = 本頁紀律 + 簡報視覺設計三層（資訊層級 / 格式塔 / 字型）的疊加場景；2026-05-06-60分鐘打造質感簡報-資訊圖表 補上簡報場景的降噪、圖型選擇、版面分離與動畫節奏。
- 與 資料故事化：本頁處理單張圖表是否清楚、可信、可讀；資料故事化 處理多張圖表與分析結論如何串成可行動的決策敘事。
相關來源
- 2026-05-09-矽谷簡報女王用數據說出好故事 — ML 閱讀筆記 PDF；補入 資料故事化 視角，特別是敘述性圖表標題、圖表註解、比例印象 vs 精確比較、脈絡與懸疑式揭示。
- 2026-05-09-IBM-Excel-Cognos資料視覺化儀表板筆記 — IBM Excel / Cognos 課程筆記；補入 BI dashboard 工具層、常見 dashboard 圖型與 Cognos Analytics 作為商業智慧平台的線索。
- 2026-05-09-Justry-Google必修圖表簡報術讀書心得 — 讀書心得；補入爛圖表、認知負荷、前注意特徵、10% 強調與減法圖表改造。
- 2026-05-07-即學即用的圖像資訊表達課 — RE-LAB 知識衛星課程；C3 補足圖表類型選擇、常見錯誤與 Google Sheets / Flourish / Data Studio 工具層，觸發 圖表類型選擇 拆頁。
- 2026-05-06-60分鐘打造質感簡報-資訊圖表 — vault 第一份簡報圖表實作來源；補入圓環圖 / 長條圖 / 折線圖選型、降噪流程、牌卡式圖表與 PowerPoint 圖表動畫處理
- 2026-05-02-蘋果與谷歌圖表設計大揭秘 — vault 第一份圖表設計主題來源；Able Studio Cheryl Fang 撰文 / Steven Yeh 編輯；以 Apple WWDC 2022 三場演講為主素材
備註
- 本頁是 vault 第一個資料視覺化主題頁，內容目前由三條軸構成：Apple WWDC / Material Design 的介面圖表設計系統視角、PowerPoint 簡報圖表實作視角、RE:LAB 的圖表類型選擇教學視角；仍未涵蓋學術資料視覺化理論
- 未來累積方向：
- (a) Edward Tufte data-ink ratio——資料視覺化的學術奠基（《The Visual Display of Quantitative Information》），「最大化資料墨水比」紀律是「只有最重要的部分才應做成圖表」的學術源頭
- (b) Dashboard 設計——資料密度高、層級需求嚴格、即時性要求；單頁多圖表組合的版面策略。2026-05-09 IBM Excel / Cognos 筆記補入 BI 工具與圖型清單，但仍不足以建立獨立 儀表板設計 頁。
- (c) Swift Charts API / D3.js / Vega-Lite / Tableau / Material Design 圖表規範——具體實作工具層
- (d) 資料視覺化倫理——刻意誤導圖（截斷座標 / 比例失衡 / 顏色誤導）作為反面教材
- (e) 動態與互動圖表——transition / drill-down / brush & link 等互動範式
- (f) 資料故事化——已於 2026-05-09 初步落地為 資料故事化；後續可補 data journalism / dashboard storytelling / analyst communication 案例
- 圖表類型選擇 已於 2026-05-07 拆出；牌卡式圖表與簡報圖表動畫暫留觀察清單，等待更專門來源。