前言：手機端數據視覺化的核心約束

• **空間極小**：單手操作、單欄佈局、垂直滾動
• **任務導向**：用戶要在 3 秒內獲取關鍵洞察
• **交互優先**：點擊、滑動、篩選、鑽取取代靜態凝視

一、財務/理財類 App 圖表圖鑑

1. 儀表盤（Solid Gauge）—— 倒計時/額度預警

Mint Bills：信用卡額度用圓環進度條，中心顯示「最小還款額」，紅綠色區分安全/警戒線。

2. 堆疊條形圖 / 基礎熱力圖 —— 信用分定位

Mint：單條堆疊條形圖映射 300-850 分區間，箭頭標示當前分數，色帶對應優/良/差。

3. 甜圈圖 — 收支結構+總額雙重讀取

Saver 2：挖空餅心放總支出，色塊對應分類；點擊色塊鑽取子項預算佔比。

4. 日曆 + 柱狀圖 —— 賬單時間分布

MoneyWiz：日曆標記有賬單日期，下方柱狀圖對比月度收支。

5. Timeline + 雙色折線 + 排行榜 —— 多維收支分析

TapToTrack：時間軸記錄每筆收支（紅支綠收），折線圖繼承雙色，下方排行榜高亮大額支出佔比。

6. 極地風向圖 —— 能耗/收支週期性洞察

EnergyMonitorUI：12 月能耗映射極座標，一眼識別高耗能月份。

7. 專業 K 線 + 面積圖 + 多維篩選 —— 股票/基金

Yahoo Finance：分時/日/週/月 K 線無縫切換，面積圖填充趨勢，地域/時間篩選器固定頂部。

8. 熱力矩陣 —— 套利/量化交易

Arbitrage Trader：色塊編碼數值區間，高密度數據秒級掃視共性。

財務類圖表選型決策表

業務問題	推薦圖表	關鍵設計點
單一指標進度/倒計時	Gauge/Progress Ring	閾值色帶、中心大數字
分類佔比+總額	Donut Chart	中空放總額、色塊可點擊鑽取
時間序列趨勢	Line / Area Chart	紅綠雙色區分漲跌、觸控游標顯示數值
週期性規律	Polar / Calendar Heatmap	極座標或日曆熱力圖
高密度矩陣	Heatmap Matrix	色階編碼、Tooltip 鑽取

二、健康/醫療類 App 圖表圖鑑

1. 多環甜圈 —— 多指標完成度儀表板

FitPort：步數、距離、體重三環同心，內環細、外環粗，視覺層次清晰。

2. 折線圖 + 安全區帶 —— 血壓/血糖監控

iHealth MyVitals / Gluco-Smart：折線疊加綠色安全區（正常範圍），雙軸顯示收縮/舒張壓或飯前/飯後血糖，散點圖標註異常點。

3. 密集柱狀圖 + 色階篩選 —— 打鼾/睡眠分期

SnoreLab / SleepCycle：時間軸柱狀圖色階對應輕/中/重度，點擊播放聲音/查看深睡比例，甜圈圖總結睡眠架構。

健康類圖表設計鐵律

1. **安全區必須可見**：綠色帶/基準線，用戶一眼自評
2. **雙軸同圖需明確圖例**：左軸收縮壓、右軸舒張壓，顏色對應
3. **時間粒度可切**：日/週/月/年，滑動選擇器固定頂部
4. **異常值高亮 + 鑽取**：紅點標註、長按播放/查看明細

三、商業/效率類 App 圖表圖鑑

1. 關鍵指標卡 + 透明度面積圖 —— 郵件營運

Mandrill：頂部 KPI 卡片（送達率、打開率、點擊率、投訴率），下方疊加面積圖對比打開/點擊趨勢。

2. 條形圖/甜圈圖切換 —— 郵件活躍度

MailChimp：打開率/點擊率雙條形圖，關鍵數值卡片化，甜圈圖展示完成度。

3. 日曆 + 表盤 —— 時間/任務衝突檢測

TODAY Calendar：日曆色塊區分任務類型，右側 24h 表盤映射時間佔用，衝突一目瞭然。

4. 地圖氣泡 + 半透明面積圖漏斗 —— 流量來源

Statistics：地圖氣泡大小編碼 PV，底部三層半透明面積圖構成漏斗（PV → 訪客 → 回訪）。

商業類儀表板資訊架構演進

傳統 Web：導航欄 + 側邊欄 + 大面積表格/圖表網格
↓ 手機端極簡化
關鍵指標卡（KPI Cards） → 核心圖表 → 篩選器 → 明細列表（可摺疊）
↓ Apple Watch / 極小空間
單一核心指標 + 微趨勢.sparkline

跨類通用設計原則

1. 色彩即語意：紅支綠收、綠安全紅警戒、品牌色強調核心指標
2. 篩選器前置：時間、維度、對比組 固定頂部/底部浮層
3. 漸進揭露：總覽 → 點擊鑽取 → 明細列表，避免首屏資訊過載
4. 無障礙優先：色盲安全配色、動態字體支援、VoiceOver 標籤完整
5. 離線優先：本地緩存最近 30 天數據，弱網也能看趨勢

工具鏈建議

• iOS：Charts (Daniel Gindi)、SwiftUI Charts
• Android：MPAndroidChart、Vico、Jetpack Compose Charts
• 跨平台：Highcharts/Highstock、ECharts、Chart.js、Recharts、Victory Native
• 設計端：Figma Charts Plugin、Data Illustrator、Observable Plot 快速原型

結語

數據不枯燥，**好的圖表是數據最好的翻譯官**。掌握基礎圖表特性，在受限空間裡做減法、做重點、做交互，才是移動端數據視覺化的核心功夫。