想對了，就美了 — 蘋果與谷歌的圖表設計大揭秘
後設資料
- URL：https://blog.able.cool/%E8%98%8B%E6%9E%9C%E8%88%87%E8%B0%B7%E6%AD%8C%E7%9A%84%E5%9C%96%E8%A1%A8%E8%A8%AD%E8%A8%88%E5%A4%A7%E6%8F%AD%E7%A7%98-1ebf6a885460
- 作者：Able Studio 實習生 Cheryl Fang 撰文 / Steven Yeh（葉俊宏）編輯
- 發表日：2022-10-19
- 語言：繁體中文（含 WWDC 講題英文原語）
- 篇幅：19 分鐘閱讀
- 出版：Able Studio（部落格搬移自 Medium）
- 主要素材：Apple WWDC 2022 三場演講（Design app experiences with charts / Design an effective chart / Swift Charts: Raise the bar）+ Google Material Design 圖表規範
一句話濃縮
圖表設計的三層工作流——何時用圖表 / 如何用圖表 / 圖表設計系統化——疊加三原則（Focused / Approachable / Accessible）與五要點（Marks / Axes / Descriptions / Interaction / Color），把「只有最重要的部分才應做成圖表」這條紀律落實成可施工的決策路徑。
提取要點
三層工作流：何時用 / 如何用 / 系統化
- What — Change / Proportion / Comparison
- 變化 Change：歷史紀錄與未來走向（折線圖最直覺）
- 比例 Proportion：完成度 / 未完成 / 空白部分（圓餅 / 進度環）
- 比較 Comparison：把資料拉到同一框架以利評估（並列柱狀圖）
- How — Describe / Incorporate details / Progressively reveal
- 用一句描述句幫使用者抓重點：「整體銷量提高 12%」「總售出 1423 件」
- 多角度整合資料：點擊縮圖展開大圖、列表 / 圖表雙視角
- 層次性呈現複雜度：保留初始外型，避免一次給太多訊息
- System — Familiar form / Difference matter
- 同一介面內用熟悉的圖表型態（條形、折線普及度高；散佈圖需額外說明）
- 刻意強化彼此差異讓使用者快速分辨
三原則
| 原則 | 核心問題 | 反例 |
|---|---|---|
| Focused（聚焦） | 是否突出最重要訊息？ | 同等強調所有資料點 |
| Approachable（易理解） | 一般使用者能否憑經驗讀懂？ | 預設使用者懂專業圖表 |
| Accessible（無障礙） | 視覺 / 聽覺 / 動作受限的使用者能否使用？ | 顏色為唯一訊號 |
五要點：Marks / Axes / Descriptions / Interaction / Color
Marks（標記）
- 形態選擇取決於目標 + 數據——以鬆餅銷量例：
- 點線圖：銷量平均時清晰、不平均難辨
- 折線圖：清楚呈現變化速率、零銷量日會誤產生波動
- 柱狀圖：直觀、零銷量不干擾
- 元命題：「儘早使用真實數據測試設計」（避開美術稿假資料的視覺慣性）
- VoiceOver 對應：所有視覺化資料必須能以非視覺方式表達——iOS 透過 Navigate data values + Audio Graphs 實現
Axes（軸線）
- 範圍可固定或動態：電池 0–100%（固定）vs 步數無上限（動態）
- 紀律：條形圖基線必須從零開始——基線 0 vs 20 的差異會讓同樣的數據被誤判為兩倍差距
- 格線與標籤密度：越多越易估值、過多分散注意；健康 App 趨勢盤只顯示平均線→ 可隨圖表詳細程度動態出現
Descriptions（描述）
- 背景資訊：軸標籤 + 醒目標題提升清晰度
- 總結主要結論：「預計 9 分鐘後開始下小雨，持續 36 分鐘」「已銷售 1234 個鬆餅」——避免使用者自己讀圖
- Audio Graph：用聲音音階反映數值高低，給非視覺通道（iOS 圖表標準對應）
Interaction（互動）
- 切換標籤突出特定部分；切換時間段觀察年月日時趨勢
- 大觸控區域：觸控面積放大並拉長，不照原始條形大小
- 多輸入方式：Touch / Mouse / Keyboard / Voice Control / Switch Control / VoiceOver
- 無障礙標籤：Succinct（簡潔不重複）+ Spell entire words（不縮寫）+ Context first（相關內容優先）
Color（顏色）
- 用途分三類：
- 區分類別（運動 App 紅 / 綠 / 藍 = 熱量 / 運動時間 / 站立次數）
- 傳達強度（橘 / 藍 = 溫度高低）
- 突顯特定值（心率圖紅點 = 最大 / 最小）
- 紀律：顏色加強而非取代訊息——配合圖型差異，色盲也能讀懂
- 文化差異：歐美「綠 = 收益 / 紅 = 損失」 vs 東方「紅 = 收益 / 綠 = 損失」
- 平衡視覺重量：避免某色凌駕；鮮豔色保留給最重要資料
- 明顯顏色：用色盲濾鏡檢查
- 尊重系統設定：適配深色 / 淺色 / 高對比模式
三大重點總結
- 好的圖表閱讀體驗 = When + How + System
- 圖表三原則 = Focused / Approachable / Accessible
- 圖表五要點 = Marks / Axes / Descriptions / Interaction / Color
元紀律：「只有最重要的部分才應該做成圖表」——圖表會吸引注意力，把非關鍵資訊圖表化是視覺成本浪費。
提取概念
連結到此來源衍生 / 更新的 wiki 頁：
Ingest 筆記
本次 ingest 的詳細推理、跨頁影響鏈寫於此；log/2026-05.md 只放精簡決策摘要（CLAUDE.md §5.1.8）。
來源屬性判斷
- 屬於「設計理論文章」類別——本文以 Apple WWDC 2022 三場演講 + Google Material Design 為素材，由 Able Studio 實習生 Cheryl Fang 撰文、Steven Yeh 編輯。不是純粹的個人觀點，而是經過二度整理的設計準則彙編。
- 標題承諾「蘋果與谷歌」對位，實際內容Apple WWDC 為主、Material Design 僅在參考資料章節。本來源 ingest 時把 Material Design 處理為「曾經提及但密度不足」——不獨立建頁，併入 Google 的觀察清單。
概念地圖
本文是 vault 第一份「圖表 / 資料視覺化」主題來源——既有 wiki 頁多次預埋此議題作為「未來累積方向」：
- 格式塔原則 備註明示「(d) Gestalt 在 資料視覺化（chart design）中的應用」
- 排版 備註明示「(c) 無障礙設計」 + MOC-UX 備註同樣明示
- 易讀性 備註「無障礙閱讀：WCAG 對比度標準、可調字級設計、screen reader 標題層級」
→ 本次 ingest 同時觸發 圖表設計 + 無障礙設計 兩個既有頁面的「未來累積方向」清單兌現。
三原則的 vault 對位
- Focused 對應 資訊層級——「不好看常常是看不到重點的副作用」+「重點不是看到最多的，而是看到最少的」與圖表「只有最重要的部分才應該做成圖表」是同源紀律的兩個應用層
- Approachable 對應 易讀性 + 格式塔原則——好圖表「沒有感覺」（讀者直接吸收資訊不需學習圖表規則）= 排版 「好排版沒有感覺」的圖表場景版
- Accessible 直接催生 無障礙設計——VoiceOver / Audio Graph / 色盲濾鏡 / 系統深色淺色模式構成具體工具
五要點與既有 cluster 的接點
| 要點 | 連結到既有 wiki | 補位 |
|---|---|---|
| Marks | 格式塔原則 | Chart 場景的「圖型 = 視覺群組」應用 |
| Axes | 資訊層級 | 基線 0 紀律 = 視覺權重的版面層 |
| Descriptions | UX文案 / 資訊層級 | 圖表標題與結論句 = 介面文案 + 資訊層級的疊加 |
| Interaction | UX-三刀流 / 用戶流 | 多輸入方式 = HCI 多通道輸入的具體實踐 |
| Color | 色彩心理學 / 60-30-10法則 | 文化差異 + 視覺重量平衡 = vault 既有色彩理論在資料視覺化的場景應用 |
Apple entity 升格判斷
- vault 既有觀察清單（2026-05-02-Simon-Sinek-偉大領袖如何鼓動行為 log 條目）已將 Apple 標記為「敘事案例提及」級——觸發升格的條件是「任何一個在第二份來源中再次以主題對象出現」
- 本來源以 Apple WWDC 2022 為主要內容素材（三場演講出處），達到「主題對象」門檻
- 故本次 ingest 升格 Apple 為實體頁；page 包含兩條既有 ingest 軸線：(a) Sinek 黃金圈案例 + (b) WWDC 圖表設計準則出處
Material Design 不建頁的判斷
- 本文僅在「資源 / 參考資料」章節列出 Material Design 一條，未具體引述其圖表規範
- 不滿足「主題對象」門檻，不升格實體 / 概念頁
- 暫於 Google 「核心要點 / 設計系統」段內嵌一句「Google Material Design 是 Apple HIG 對位的設計系統，本 vault 暫無深度來源」
- 觸發拆頁條件：第二份明確以 Material Design 為主題對象的來源 ingest 後評估
觀察清單（密度不足以建頁）
- Swift Charts——Apple iOS 16 推出的圖表 API；本文僅作為 WWDC 講題出現（“Swift Charts: Raise the bar”）；不獨立建頁；觸發條件 = 第二份以 Swift Charts API 為主題對象的來源
- WCAG（Web Content Accessibility Guidelines）——本文僅隱含提及（透過「色盲濾鏡」「對比度」「系統設定」等工具級提及）；無障礙設計 頁的「未來累積方向」已預埋觀察；觸發條件 = WCAG 細節（A / AA / AAA 等級對比度標準）獨立成段
- Audio Graph——iOS 14+ 的圖表聲音化功能；本文以工具方式提及；不獨立建頁；併入 無障礙設計 「核心要點 / 多通道呈現」段
- Edward Tufte / data-ink ratio——資料視覺化學術源頭；本文未提及；列為 圖表設計 「未來累積方向」候選
- WWDC（Apple Worldwide Developers Conference）——本文以三場演講為素材；不獨立建頁，併入 Apple 重要事實段；觸發條件 = WWDC 本身作為文化現象 / 開發者活動 / 第二份來源主題
不更新的既有頁
- 包裝設計 / Logo設計原則 / 字型搭配 / 60-30-10法則：雖視覺設計家族成員，但本文聚焦資料視覺化，不擴展至這些頁
- 簡報設計：簡報內的圖表雖屬本文應用場景之一，但本文以介面圖表為主、不涉簡報排版；待簡報圖表專題來源出現再建立交叉引用
- 排版：本文未深入字體 / 行高 / 行寬等典型排版議題；不更新
原文（節選 / 結構化）
為長期保存，下文以結構化方式保留要點，非完整逐字稿。原文連結見頂端。
介紹
圖表是傳遞資訊的常見方式，能清晰呈現複雜資訊，幫助使用者理解並增添介面個性。本文基於 Apple WWDC 2022 開發者大會演講，搭配 Google Material Design，介紹兩大 UI 設計領頭羊的圖表設計方法。
Part 1：Design app experiences with charts
When to use charts——釐清目的、時機與關係。圖表的主要用途：Change（變化）/ Proportion（比例）/ Comparison（比較）。
How to use charts：
- Describe chart contents：「整體銷量提高 12%」/「總售出 1423 件商品」
- Incorporate details：點擊列表顯示對應資料 / 大圖表展示細節 / 小圖表用靜態形式作為大圖表縮略圖
- Progressively reveal complexity：逐步呈現圖表層次，避免造成困惑
Charts design system：
- Use familiar form：條形圖和折線圖普遍，散佈圖需額外說明
- Difference matter：有意製造差異讓人易理解不同之處
Part 2：Design an effective chart
三原則：Focused / Approachable / Accessible。
Design chart with intention：可傳達 Pattern / Range / Value / Maximum / Outlier / Comparison / Average / Minimum / Trend 等多種資訊。
Part 3：5 Topics of chart design
Marks
- 圖型選擇隨目標 + 數據變化（鬆餅銷量例：點線 / 折線 / 柱狀）
- 儘早使用真實數據測試設計
- VoiceOver 對應 + Audio Graphs
Axes
- 範圍固定 vs 動態（電池 vs 步數）
- 條形圖基線從零開始
- 格線與標籤密度動態調整
Descriptions
- 背景資訊（軸標籤 + 醒目標題）
- 總結主要結論
- Audio Graph 提供非視覺描述
Interaction
- 切換標籤 / 時間段
- 大觸控區域
- 多輸入：Touch / Mouse / Keyboard / Voice Control / Switch Control / Voice Over
- 無障礙標籤：Succinct / Spell entire words / Context first
Color
- 區分類別 / 傳達強度 / 突顯特定值
- 顏色加強而非取代訊息
- 文化含義（歐美綠紅 vs 東方紅綠）
- 平衡視覺重量
- 明顯顏色 + 色盲濾鏡檢查
- 尊重系統設定（深淺模式 + 高對比）
結論
有效的圖表將複雜數據視覺化，幫助使用者聚焦重要資訊。三大重點：
- 好的圖表閱讀體驗：When / How / System
- 圖表設計三原則：Focused / Approachable / Accessible
- 圖表設計五要點：Marks / Axes / Descriptions / Interaction / Color
只有最重要的部分才應製作成圖表，因為圖表吸引注意力。
資源
- Design app experiences with charts — WWDC22
- Design an effective chart — WWDC22
- Swift Charts: Raise the bar — WWDC22
- Material Design
本文為 Able 實習生 Cheryl Fang 撰寫，Steven Yeh 編輯。