寫給UI設計師看的數據可視化設計（簡體書）

關於入行

那年我住在北京香山腳下，每天8 點起床，9 點開始看UI 教程，下午和晚上做練習，有時學累了就去爬香山，最好的成績是上山下山不到兩個小時，爬山回來衝個涼繼續學習。那段時間晚上做夢常常都在畫圖標，後來我發現，新學習的技能如果不在夢裡出現，那肯定是沒有下足功夫。

就這樣，我自學了兩個半月的UI 設計，恰逢那幾年是移動互聯網爆發期，行業對UI設計師的需求量很大，因此我很幸運地找到了工作。但工作後才發現，做設計遠不是自學兩個多月的事，尤其我還是非科班出身。於是，我開始學習美術知識，看美院的課程，還在五道口報了繪畫班，每周六學習一天，大概學了半年，這段時間的學習使我真正喜歡上了設計。

剛開始做設計，由於一直都有危機感，因此在之後的兩年多時間裡，我一直沒有停止學習，幾乎每天都在看教程，從攝影後期、合成、插畫、字體設計到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 端數據產品案例