移動端螢幕小、使用情境碎片化、數據密度高——APP 數據圖表設計是對「資訊密度與認知負荷」的極限平衡。本文從產品分類、配色、圖表類型、組織邏輯、動效、字體六大維度，構建系統化設計指南。

一、數據圖表為核心的 APP 分類與設計啟發

類別	代表產品	核心圖表	設計特徵
天氣	Fresh Air、Yahoo Weather、墨跡天氣	折線圖（溫度趨勢）、圖片背景	背景圖隨天氣動態變化，數據疊加於景觀之上
運動/健康	Fitbit、Apple Health、FitPort、Clue、Misfit Shine	環形進度、雷達圖、熱力圖	深色底+高飽和色、情感化視覺（Clue 用爆炸雲朵表達經前心情）
財務/記帳	Spendee、支付寶、各銀行 App	柱狀圖、餅圖、趨勢圖、列表視覺化	淺色底、高對比、資訊密度大、多圖表類型並存
專業分析	Google Quicklytics (GA 移動端)	複合儀表板、即時曲線	極簡風格、專業術語、高資訊密度、支援深度鑽取

二、配色策略：背景決定視覺語言

A. 深色底 —— 氛圍優先、資訊少

• 適用：運動即時數據、車機介面、夜間模式
• 配色：高飽和、高亮度前景色（霓虹綠、螢光橙、亮藍）
• 優勢：OLED 省電、沉浸感強、數據「發光」感強

B. 淺色底 —— 閱讀效率優先、資訊密

• 適用：財務報表、專業分析、表單密集頁
• 配色：中低飽和、中明度色系，配合灰階層次
• 實測：大量數據頁面，淺色底閱讀效率顯著高於深色底

C. 品牌色底/業務色底 —— 識別度優先

• 商務類：藍/綠系（支付寶、銀行 App）
• 運動類：橙/黃/紅系（Keep、Nike Run Club）
• 健康類：綠/青/白系（Apple Health、醫療 App）

D. 圖片底 —— 情感連結、輕量數據

• 天氣類：實景天氣圖為底，數據浮動其上
• 健康類：自然風景/插畫背景，緩解數據焦慮

三、核心圖表類型選擇指南

圖表	核心用途	移動端適配要點
折線圖	連續時間序列趨勢（股價、步數、心率）	點擊/長按顯示十字游標與精確數值
曲線圖	平滑連續數據（24h 溫度、聲音波形）	避免過度平滑掩蓋關鍵極值點
餅圖	構成比例（支出分類、營養素比例）	類別 ≤ 5，超過改用條形圖；支援點擊展開詳情
環形圖	進度/完成度（活動環、存儲佔用）	中心區放關鍵數值/狀態文字，雙重編碼
條形圖/柱狀圖	離散類別比較（月支出、APP 使用時長）	橫向條形圖更適合長標籤；柱狀圖適合時間序列
熱力圖	地理/時間二維分布（跑步路線、GitHub 貢獻）	色階層級 ≤ 7，提供圖例與數值對照
雷達圖	多維度畫像/對比（能力雷達、產品評分）	維度 ≤ 7，軸標籤縮寫，支援多系列疊加對比
可視化列表	結構化數據+微圖表（Spendee 交易明細、Elevate 技能列表）	微圖表（Sparklines）嵌入列表行，掃視即得洞察

四、圖表組織邏輯：小螢幕上的資訊架構

單一核心指標 → 圓形視覺中心

芝麻信用分、Clue 週期階段、活動環。圓形/環形在視覺上自帶聚焦力，配合深色/彩色/圖片背景增強飽滿感。

主次指標（2-3 組）→ 圖表類型互斥 + 版面權重差異

• 主指標：大尺寸、核心圖表類型（曲線/環形）
• 次指標：小尺寸、互補類型（餅圖/迷你柱狀/列表）
• 避免同類圖表並列造成視覺疲勞

大量多模組數據 → 每模組獨立圖表類型 + 分屏滾動

City Guides 模式：每個功能區塊（景點、美食、交通）採用不同圖表形式，類型變換降低認知疲勞，引導用戶逐屏探索。

五、動效設計：緩解壓力、引導注意、強化心智模型

動效類型	觸發場景	設計要點
數據生長動畫	頁面進入、下拉刷新	依時間序列依次展現，時長 600-1000ms，缓動曲線 ease-out
標籤/分頁切換	頂部分頁、底部 Tab	內容區淡入/滑動 + 指示器位移，保持空間連續性
展開細節	點擊摘要查看明細	容器高度動畫 + 內容交錯進場，提供返回關閉路徑
橫豎屏切換	裝置旋轉	折線圖→橫向面積圖、列表→網格，佈局重組而非單純拉伸
微交互回饋	長按數據點、切換篩選器	波紋、縮放、顏色變化，<100ms 即時回饋

原則：動效服務於認知，而非裝飾。每個動畫必須回答：它幫助使用者理解什麼？若無明確認知功能，刪除之。

六、字體選擇：氣質與可讀的平衡

• 系統字體優先：San Francisco (iOS)、Roboto/Noto (Android)、PingFang/Heiti (中文 fallback)，零下載、渲染最優
• 數字專用字體：Tabular Figures（等寬數字）對齊財務報表；font-variant-numeric: tabular-nums
• 品牌字體：City Guides 使用 Optigiant（非商業免費），標題/關鍵數值適用，正文仍用系統字體
• 授權與體積：自訂字體需評估 Webfont 體積（WOFF2 通常 50-150KB/字重）與授權成本

七、實戰檢核清單

• [ ] 目標用戶主流裝置尺寸、OS 版本分布已分析
• [ ] 核心指標在首屏 600px 內可見（無需滾動）
• [ ] 所有圖表通過色盲/灰度模式驗收
• [ ] 深/淺色模式雙套配色已定義並測試
• [ ] 動效時長 ≤ 1000ms，提供減少動態偏好開關
• [ ] 數值格式化統一（千分位、單位後綴、小數位）
• [ ] 空狀態/錯誤狀態/載入狀態皆有設計
• [ ] 字體回退鏈完整，中英文混排基線對齊

APP 數據圖表設計的本質，是在有限像素中傳遞無限洞察。沒有標準答案，只有持續驗證、不斷迭代的設計決策。願這份指南成為你下次面對複雜數據頁面時的決策參考坐標。