第1 章 認(rèn)識(shí)數(shù)據(jù)可視化設(shè)計(jì) / 001
1.1 數(shù)據(jù)可視化設(shè)計(jì)的價(jià)值 / 002
1.2 數(shù)據(jù)可視化設(shè)計(jì)的魅力 / 005
1.2.1 文字排版 / 006
1.2.2 表格展示 / 007
1.2.3 圖形呈現(xiàn) / 008
1.3 數(shù)據(jù)可視化設(shè)計(jì)應(yīng)用場(chǎng)景 / 009
1.3.1 平面設(shè)計(jì) / 009
1.3.2 后臺(tái)產(chǎn)品和中臺(tái)產(chǎn)品 / 010
1.3.3 可視化大屏產(chǎn)品 / 012
1.4 如何學(xué)習(xí)數(shù)據(jù)可視化設(shè)計(jì) / 014
1.4.1 數(shù)據(jù)可視化設(shè)計(jì)必備技能 / 014
1.4.2 數(shù)據(jù)可視化設(shè)計(jì)四要素 / 015
1.4.3 建立數(shù)據(jù)可視化設(shè)計(jì)學(xué)習(xí)體系 / 019
第2 章 圖形設(shè)計(jì) / 022
2.1 圖形分類 / 023
2.1.1 隨時(shí)間變化圖形 / 023
2.1.2 類別比較圖形 / 027
2.1.3 排名圖形 / 031
2.1.4 占比圖形 / 033
2.1.5 關(guān)聯(lián)圖形 / 036
2.1.6 分布圖形 / 040
2.1.7 關(guān)系圖形 / 043
2.2 圖形選用 / 045
2.2.1 KPI 圖的妙用 / 045
2.2.2 巧用真實(shí)數(shù)據(jù)選圖形 / 046
2.2.3 從突出價(jià)值數(shù)據(jù)選圖形 / 047
2.2.4 從可讀性角度選圖形 / 047
2.2.5 3D 圖形的科學(xué)運(yùn)用 / 048
2.2.6 直方圖與柱狀圖 / 049
2.2.7 從對(duì)比性選圖形 / 051
2.3 圖形設(shè)計(jì) / 052
2.3.1 圖形視覺(jué)層級(jí)解析 / 052
2.3.2 折線圖設(shè)計(jì)原則 / 053
2.3.3 柱狀圖的黃金法則 / 054
2.3.4 餅圖的規(guī)范設(shè)計(jì)法則 / 056
2.3.5 突出圖形重要數(shù)據(jù) / 057
2.2.6 圖形用色技巧 / 060
2.3.7 圖形添加說(shuō)明的重要性 / 062
2.3.8 標(biāo)題成就圖形 / 063
2.3.9 簡(jiǎn)潔：少即是多 / 064
2.3.10 圖形的擴(kuò)展性設(shè)計(jì) / 065
006 寫(xiě)給UI 設(shè)計(jì)師看的數(shù)據(jù)可視化設(shè)計(jì)
2.3.11 圖形的營(yíng)銷手段 / 067
2.4 表格設(shè)計(jì) / 068
2.4.1 表格排版奧秘 / 069
2.4.2 表格字體運(yùn)用 / 073
2.4.3 表格與圖形結(jié)合 / 074
第3 章 數(shù)據(jù)可視化產(chǎn)品設(shè)計(jì) / 076
3.1 可視化大屏設(shè)計(jì)流程 / 077
3.1.1 設(shè)計(jì)流程詳解 / 077
3.1.2 需求調(diào)研 / 078
3.1.3 數(shù)據(jù)分析 / 079
3.1.4 產(chǎn)品設(shè)計(jì) / 080
3.1.5 可行性測(cè)試 / 080
3.2 可視化大屏設(shè)計(jì)尺寸解析 / 081
3.2.1 大屏的類別和成像原理 / 082
3.2.2 大屏與電腦同比例 / 082
3.2.3 大屏與電腦不同比例 / 084
3.2.4 如何配置大屏電腦顯示器 / 085
3.2.5 大屏的分屏設(shè)計(jì) / 087
3.3 可視化大屏視覺(jué)設(shè)計(jì) / 088
3.3.1 大屏使用字號(hào)解析 / 088
3.3.2 大屏設(shè)計(jì)布局解析 / 090
3.3.3 定義設(shè)計(jì)風(fēng)格主題 / 092
3.3.4 情緒板設(shè)計(jì)方法 / 095
目 錄007
3.4 可視化設(shè)計(jì)之美 / 095
3.4.1 布局之美——平衡感 / 096
3.4.2 布局之美——格式塔原則 / 097
3.4.3 布局之美——黃金比例 / 100
3.4.4 色彩之美——用色技巧 / 103
3.4.5 色彩之美——認(rèn)知配色 / 105
3.4.6 色彩之美——視覺(jué)無(wú)障礙設(shè)計(jì) / 106
3.5 文案設(shè)計(jì)之美 / 109
3.5.1 積極友好的文案設(shè)計(jì) / 109
3.5.2 從用戶的需求和痛點(diǎn)出發(fā)設(shè)計(jì)文案 / 110
3.5.3 如何用文案渲染產(chǎn)品調(diào)性 / 111
3.5.4 拉近與用戶距離的文案設(shè)計(jì) / 112
3.5.5 提高閱讀效率的文案設(shè)計(jì) / 113
3.5.6 價(jià)值引導(dǎo)的文案設(shè)計(jì) / 114
3.5.7 文案表述的一致性 / 115
3.5.8 文字排版規(guī)范 / 116
3.5.9 文案標(biāo)點(diǎn)使用規(guī)范 / 117
3.5.10 英文使用規(guī)范 / 118
3.5.11 特殊字體使用 / 119
第4 章 交互設(shè)計(jì) / 120
4.1 交互思維 / 121
4.1.1 用戶體驗(yàn) / 121
4.1.2 用戶思維 / 122
008 寫(xiě)給UI 設(shè)計(jì)師看的數(shù)據(jù)可視化設(shè)計(jì)
4.1.3 交互五要素 / 125
4.1.4 5W1H 分析法 / 127
4.2 交互設(shè)計(jì)定律 / 128
4.2.1 費(fèi)茨定律 / 128
4.2.2 席克定律 / 129
4.2.3 泰斯勒定律 / 130
4.2.4 米勒定律 / 132
4.3 交互設(shè)計(jì)原則 / 133
4.3.1 防錯(cuò)原則 / 133
4.3.2 美即好用效應(yīng) / 135
4.3.3 交互直接性原則 / 136
4.3.4 嵌入式呈現(xiàn) / 137
4.3.5 用戶心流 / 139
4.4 可視化圖表交互 / 140
4.4.1 交互式圖表 / 140
4.4.2 簡(jiǎn)單可交互 / 143
4.4.3 交互時(shí)突出重點(diǎn) / 146
4.4.4 移動(dòng)端圖表交互 / 148
4.4.5 聲音交互 / 152
4.5 產(chǎn)品思維 / 153
4.5.1 產(chǎn)品感 / 153
4.5.2 B 端產(chǎn)品設(shè)計(jì)原則 / 155
4.5.3 G 端產(chǎn)品設(shè)計(jì)原則 / 159
目 錄009
第5 章 動(dòng)效設(shè)計(jì) / 161
5.1 動(dòng)效設(shè)計(jì)價(jià)值 / 162
5.2 動(dòng)效設(shè)計(jì)分類 / 163
5.2.1 視覺(jué)動(dòng)效 / 163
5.2.2 交互動(dòng)效 / 166
5.3 動(dòng)效設(shè)計(jì)原則 / 168
5.3.1 動(dòng)效物理運(yùn)動(dòng)法則 / 168
5.3.2 動(dòng)效持續(xù)時(shí)長(zhǎng)解析 / 170
5.3.3 動(dòng)效渲染產(chǎn)品調(diào)性 / 170
5.3.4 簡(jiǎn)單動(dòng)效與復(fù)雜動(dòng)效 / 171
5.3.5 大屏動(dòng)效的表現(xiàn)與克制 / 172
5.4 動(dòng)效設(shè)計(jì)實(shí)戰(zhàn) / 173
5.4.1 動(dòng)效圖標(biāo)設(shè)計(jì) / 173
5.4.2 3D 模型動(dòng)效設(shè)計(jì) / 176
5.4.3 3D 粒子動(dòng)效設(shè)計(jì) / 180
5.4.4 動(dòng)效營(yíng)造科技感 / 190
5.5 動(dòng)效設(shè)計(jì)落地 / 195
5.5.1 三大動(dòng)圖格式 / 196
5.5.2 適用Web 端的視頻格式 / 200
5.5.3 CSS 序列幀精靈圖動(dòng)畫(huà) / 201
5.5.4 Lottie——.json 文件代碼動(dòng)畫(huà) / 202
5.5.5 生成SVGA 格式的動(dòng)畫(huà) / 203
5.5.6 導(dǎo)出CSS 動(dòng)畫(huà)代碼 / 204
5.5.7 動(dòng)效設(shè)計(jì)文檔輸出 / 205
010 寫(xiě)給UI 設(shè)計(jì)師看的數(shù)據(jù)可視化設(shè)計(jì)
第6 章 3D 可視化設(shè)計(jì) / 207
6.1 3D 可視化的設(shè)計(jì)工具 / 208
6.1.1 3D 效果設(shè)計(jì)利器——C4D 和AE / 209
6.1.2 城市模型利器——Arc GIS / 212
6.1.3 城市模型利器——City Engine / 214
6.1.4 3D 實(shí)時(shí)交互利器——Ventuz / 223
6.1.5 3D 特效游戲引擎——U3D 和UE4 / 226
6.2 3D 可視化設(shè)計(jì)實(shí)戰(zhàn) / 229
6.2.1 可視化大屏透視效果設(shè)計(jì) / 229
6.2.2 3D 動(dòng)畫(huà)元素設(shè)計(jì)落地 / 232
6.2.3 可交互地球設(shè)計(jì)落地 / 233
第7 章 數(shù)據(jù)可視化設(shè)計(jì)工具、靈感、案例 / 239
7.1 第三方數(shù)據(jù)可視化設(shè)計(jì)工具 / 240
7.1.1 可視化組件庫(kù)工具 / 240
7.1.2 可視化大屏工具 / 247
7.1.3 可視化地圖工具 / 249
7.2 數(shù)據(jù)可視化設(shè)計(jì)靈感 / 252
7.2.1 可視化設(shè)計(jì)靈感網(wǎng)站 / 253
7.2.2 可視化設(shè)計(jì)素材網(wǎng)站 / 256
7.3 數(shù)據(jù)產(chǎn)品案例 / 258
7.3.1 百度熱搜大屏案例 / 258
7.3.2 ToG 政務(wù)大屏案例 / 262
7.3.3 ToB 數(shù)據(jù)產(chǎn)品案例 / 264