寫給 UI 設計師看的數據可視化設計

本書將帶你全面認識數據可視化設計，從簡單的圖表設計到炫酷的三維可視化大屏設計，都會通過實際案例進行詳細介紹，其中還包括動效設計，以及如何讓動效用不同方式落地。本書還詳細介紹了B 端產品和G 端產品的設計原則，這可以讓你更清晰地認識數據可視化領域的設計要點，另外書中分享的交互思維、產品思維案例，也會讓你瞭解如何運用全局視角做UI 設計。本書不僅是學習數據可視化設計的重要參考，還是全面培養和構建設計師全局設計體系的指導用書。

吳星辰，小米公司UI設計師。
人人都是產品經理專欄作家，年度“交互體驗類”*具影響力作者。
站酷設計平台百萬人氣設計師。
“零基礎成為UI設計師”系列課程主講人。

第1章認識數據可視化設計
1.1 數據可視化設計的價值
1.2 數據可視化設計的魅力
1.2.1 文字排版
1.2.2 表格展示
1.2.3 圖形呈現
1.3 數據可視化設計應用場景
1.3.1 平面設計
1.3.2 後台產品和中台產品
1.3.3 可視化大屏產品
1.4 如何學習數據可視化設計
1.4.1 數據可視化設計必備技能
1.4.2 數據可視化設計四要素
1.4.3 建立數據可視化設計學習體系

第2章圖表設計
2.1 圖形分類
2.1.1 隨時間變化圖形
2.1.2 類別比較圖形
2.1.3 排名圖形
2.1.4 佔比圖形
2.1.5 關聯圖形
2.1.6 分佈圖形
2.1.7 關係圖形
2.2 圖形選用
2.2.1 KPI 圖的妙用
2.2.2 巧用真實數據選圖形
2.2.3 從突出價值數據選圖形
2.2.4 從可讀性角度選圖形
2.2.5 3D 圖形的科學運用
2.2.6 直方圖與柱狀圖
2.2.7 從對比性選圖形
2.3 圖形設計
2.3.1 圖形視覺層級解析
2.3.2 折線圖的設計原則
2.3.3 柱狀圖的黃金法則
2.3.4 餅圖的規範設計法則
2.3.5 突出圖形重要數據
2.2.6 圖形用色技巧
2.3.7 圖形添加說明的重要性
2.3.8 標題成就圖形
2.3.9 簡潔：少即是多
2.3.10 圖形的擴展性設計
2.3.11 圖形的營銷手段
2.4 表格設計
2.4.1 表格排版奧秘
2.4.2 表格字體運用
2.4.3 表格與圖形結合

第3章數據可視化產品設計
3.1 可視化大屏設計流程
3.1.1 設計流程詳解
3.1.2 需求調研
3.1.3 數據分析
3.1.4 產品設計
3.1.5 可行性測試
3.2 可視化大屏設計尺寸解析
3.2.1 大屏的類別和成像原理
3.2.2 大屏與電腦同比例
3.2.3 大屏與電腦不同比例
3.2.4 如何配置大屏電腦顯示器
3.2.5 大屏的分屏設計
3.3 可視化大屏視覺設計
3.3.1 大屏使用字號解析
3.3.2 大屏設計佈局解析
3.3.3 定義設計風格主題
3.3.4 情緒板設計方法
3.4 可視化設計之美
3.4.1 佈局之美——平衡感
3.4.2 佈局之美——格式塔原則
3.4.3 佈局之美——黃金比例
3.4.4 色彩之美——用色技巧
3.4.5 色彩之美——認知配色
3.4.6 色彩之美——視覺無障礙設計
3.5 文案設計之美
3.5.1 積極友好的文案設計
3.5.2 從用戶的需求和痛點出發設計文案
3.5.3 如何用文案渲染產品調性
3.5.4 拉近與用戶距離的文案設計
3.5.5 提高閱讀效率的文案設計
3.5.6 價值引導的文案設計
3.5.7 文案表述的一致性
3.5.8 文字排版規範
3.5.9 文案標點使用規範
3.5.10 英文使用規範
3.5.11 特殊字體使用

第4章交互設計
4.1 交互思維
4.1.1 用戶體驗
4.1.2 用戶思維
4.1.3 交互五要素
4.1.4 5W1H 分析法
4.2 交互設計定律
4.2.1 費茨定律
4.2.2 席克定律
4.2.3 泰斯勒定律
4.2.4 米勒定律
4.3 交互設計原則
4.3.1 防錯原則
4.3.2 美即好用效應
4.3.3 交互直接性原則
4.3.4 嵌入式呈現
4.3.5 用戶心流
4.4 可視化圖表交互
4.4.1 交互式圖表
4.4.2 簡單可交互
4.4.3 交互時突出重點
4.4.4 移動端圖表交互
4.4.5 聲音交互
4.5 產品思維
4.5.1 產品感
4.5.2 B 端產品設計原則
4.5.3 G 端產品設計原則

第5章動效設計
5.1 動效設計價值
5.2 動效設計分類
5.2.1 視覺動效
5.2.2 交互動效
5.3 動效設計原則
5.3.1 動效物理運動法則
5.3.2 動效持續時長解析
5.3.3 動效渲染產品調性
5.3.4 簡單動效與復雜動效
5.3.5 大屏動效的表現與克制
5.4 動效設計實戰
5.4.1 動效圖標設計
5.4.2 3D 模型動效設計
5.4.3 3D 粒子動效設計
5.4.4 動效營造科技感
5.5 動效設計落地
5.5.1 三大動圖格式
5.5.2 適用Web 端的視頻格式
5.5.3 CSS 序列幀精靈圖動畫
5.5.4 Lottie——.json 文件代碼動畫
5.5.5 生成SVGA 格式的動畫
5.5.6 導出CSS 動畫代碼
5.5.7 動效設計文檔輸出

第6章3D 可視化設計
6.1 3D 可視化的設計工具
6.1.1 3D 效果設計利器——C4D 和AE
6.1.2 城市模型利器——Arc GIS
6.1.3 城市模型利器——City Engine
6.1.4 3D 實時交互利器——Ventuz
6.1.5 3D 特效遊戲引擎——U3D 和UE4
6.2 3D 可視化設計實戰
6.2.1 可視化大屏透視效果設計
6.2.2 3D 動畫元素設計落地
6.2.3 可交互地球設計落地

第7章數據可視化設計工具、靈感、案例
7.1 第三方數據可視化設計工具
7.1.1 可視化組件庫工具
7.1.2 可視化大屏工具
7.1.3 可視化地圖工具
7.2 數據可視化設計靈感
7.2.1 可視化設計靈感網站
7.2.2 可視化設計素材網站
7.3 數據產品案例
7.3.1 百度熱搜大屏案例
7.3.2 G 端政務大屏案例
7.3.3 B 端數據產品案例