寫給UI設(shè)計(jì)師看的數(shù)據(jù)可視化設(shè)計(jì)

第1章 認(rèn)識(shí)數(shù)據(jù)可視化設(shè)計(jì)
1.1 數(shù)據(jù)可視化設(shè)計(jì)的價(jià)值
1.2 數(shù)據(jù)可視化設(shè)計(jì)的魅力
1.2.1 文字排版
1.2.2 表格展示
1.2.3 圖形呈現(xiàn)
1.3 數(shù)據(jù)可視化設(shè)計(jì)應(yīng)用場景
1.3.1 平面設(shè)計(jì)
1.3.2 后臺(tái)產(chǎn)品和中臺(tái)產(chǎn)品
1.3.3 可視化大屏產(chǎn)品
1.4 如何學(xué)習(xí)數(shù)據(jù)可視化設(shè)計(jì)
1.4.1 數(shù)據(jù)可視化設(shè)計(jì)必備技能
1.4.2 數(shù)據(jù)可視化設(shè)計(jì)四要素
1.4.3 建立數(shù)據(jù)可視化設(shè)計(jì)學(xué)習(xí)體系
第2章 圖表設(shè)計(jì)
2.1 圖形分類
2.1.1 隨時(shí)間變化圖形
2.1.2 類別比較圖形
2.1.3 排名圖形
2.1.4 占比圖形
2.1.5 關(guān)聯(lián)圖形
2.1.6 分布圖形
2.1.7 關(guān)系圖形
2.2 圖形選用
2.2.1 KPI 圖的妙用
2.2.2 巧用真實(shí)數(shù)據(jù)選圖形
2.2.3 從突出價(jià)值數(shù)據(jù)選圖形
2.2.4 從可讀性角度選圖形
2.2.5 3D 圖形的科學(xué)運(yùn)用
2.2.6 直方圖與柱狀圖
2.2.7 從對比性選圖形
2.3 圖形設(shè)計(jì)
2.3.1 圖形視覺層級解析
2.3.2 折線圖的設(shè)計(jì)原則
2.3.3 柱狀圖的黃金法則
2.3.4 餅圖的規(guī)范設(shè)計(jì)法則
2.3.5 突出圖形重要數(shù)據(jù)
2.2.6 圖形用色技巧
2.3.7 圖形添加說明的重要性
2.3.8 標(biāo)題成就圖形
2.3.9 簡潔：少即是多
2.3.10 圖形的擴(kuò)展性設(shè)計(jì)
2.3.11 圖形的營銷手段
2.4 表格設(shè)計(jì)
2.4.1 表格排版奧秘
2.4.2 表格字體運(yùn)用
2.4.3 表格與圖形結(jié)合
第3章 數(shù)據(jù)可視化產(chǎn)品設(shè)計(jì)
3.1 可視化大屏設(shè)計(jì)流程
3.1.1 設(shè)計(jì)流程詳解
3.1.2 需求調(diào)研
3.1.3 數(shù)據(jù)分析
3.1.4 產(chǎn)品設(shè)計(jì)
3.1.5 可行性測試
3.2 可視化大屏設(shè)計(jì)尺寸解析
3.2.1 大屏的類別和成像原理
3.2.2 大屏與電腦同比例
3.2.3 大屏與電腦不同比例
3.2.4 如何配置大屏電腦顯示器
3.2.5 大屏的分屏設(shè)計(jì)
3.3 可視化大屏視覺設(shè)計(jì)
3.3.1 大屏使用字號解析
3.3.2 大屏設(shè)計(jì)布局解析
3.3.3 定義設(shè)計(jì)風(fēng)格主題
3.3.4 情緒板設(shè)計(jì)方法
3.4 可視化設(shè)計(jì)之美
3.4.1 布局之美——平衡感
3.4.2 布局之美——格式塔原則
3.4.3 布局之美——黃金比例
3.4.4 色彩之美——用色技巧
3.4.5 色彩之美——認(rèn)知配色
3.4.6 色彩之美——視覺無障礙設(shè)計(jì)
3.5 文案設(shè)計(jì)之美
3.5.1 積極友好的文案設(shè)計(jì)
3.5.2 從用戶的需求和痛點(diǎn)出發(fā)設(shè)計(jì)文案
3.5.3 如何用文案渲染產(chǎn)品調(diào)性
3.5.4 拉近與用戶距離的文案設(shè)計(jì)
3.5.5 提高閱讀效率的文案設(shè)計(jì)
3.5.6 價(jià)值引導(dǎo)的文案設(shè)計(jì)
3.5.7 文案表述的一致性
3.5.8 文字排版規(guī)范
3.5.9 文案標(biāo)點(diǎn)使用規(guī)范
3.5.10 英文使用規(guī)范
3.5.11 特殊字體使用
第4章 交互設(shè)計(jì)
4.1 交互思維
4.1.1 用戶體驗(yàn)
4.1.2 用戶思維
4.1.3 交互五要素
4.1.4 5W1H 分析法
4.2 交互設(shè)計(jì)定律
4.2.1 費(fèi)茨定律
4.2.2 席克定律
4.2.3 泰斯勒定律
4.2.4 米勒定律
4.3 交互設(shè)計(jì)原則
4.3.1 防錯(cuò)原則
4.3.2 美即好用效應(yīng)
4.3.3 交互直接性原則
4.3.4 嵌入式呈現(xiàn)
4.3.5 用戶心流
4.4 可視化圖表交互
4.4.1 交互式圖表
4.4.2 簡單可交互
4.4.3 交互時(shí)突出重點(diǎn)
4.4.4 移動(dòng)端圖表交互
4.4.5 聲音交互
4.5 產(chǎn)品思維
4.5.1 產(chǎn)品感
4.5.2 B 端產(chǎn)品設(shè)計(jì)原則
4.5.3 G 端產(chǎn)品設(shè)計(jì)原則
第5章 動(dòng)效設(shè)計(jì)
5.1 動(dòng)效設(shè)計(jì)價(jià)值
5.2 動(dòng)效設(shè)計(jì)分類
5.2.1 視覺動(dòng)效
5.2.2 交互動(dòng)效
5.3 動(dòng)效設(shè)計(jì)原則
5.3.1 動(dòng)效物理運(yùn)動(dòng)法則
5.3.2 動(dòng)效持續(xù)時(shí)長解析
5.3.3 動(dòng)效渲染產(chǎn)品調(diào)性
5.3.4 簡單動(dòng)效與復(fù)雜動(dòng)效
5.3.5 大屏動(dòng)效的表現(xiàn)與克制
5.4 動(dòng)效設(shè)計(jì)實(shí)戰(zhàn)
5.4.1 動(dòng)效圖標(biāo)設(shè)計(jì)
5.4.2 3D 模型動(dòng)效設(shè)計(jì)
5.4.3 3D 粒子動(dòng)效設(shè)計(jì)
5.4.4 動(dòng)效營造科技感
5.5 動(dòng)效設(shè)計(jì)落地
5.5.1 三大動(dòng)圖格式
5.5.2 適用Web 端的視頻格式
5.5.3 CSS 序列幀精靈圖動(dòng)畫
5.5.4 Lottie——.json 文件代碼動(dòng)畫
5.5.5 生成SVGA 格式的動(dòng)畫
5.5.6 導(dǎo)出CSS 動(dòng)畫代碼
5.5.7 動(dòng)效設(shè)計(jì)文檔輸出
第6章 3D 可視化設(shè)計(jì)
6.1 3D 可視化的設(shè)計(jì)工具
6.1.1 3D 效果設(shè)計(jì)利器——C4D 和AE
6.1.2 城市模型利器——Arc GIS
6.1.3 城市模型利器——City Engine
6.1.4 3D 實(shí)時(shí)交互利器——Ventuz
6.1.5 3D 特效游戲引擎——U3D 和UE4
6.2 3D 可視化設(shè)計(jì)實(shí)戰(zhàn)
6.2.1 可視化大屏透視效果設(shè)計(jì)
6.2.2 3D 動(dòng)畫元素設(shè)計(jì)落地
6.2.3 可交互地球設(shè)計(jì)落地
第7章 數(shù)據(jù)可視化設(shè)計(jì)工具、靈感、案例
7.1 第三方數(shù)據(jù)可視化設(shè)計(jì)工具
7.1.1 可視化組件庫工具
7.1.2 可視化大屏工具
7.1.3 可視化地圖工具
7.2 數(shù)據(jù)可視化設(shè)計(jì)靈感
7.2.1 可視化設(shè)計(jì)靈感網(wǎng)站
7.2.2 可視化設(shè)計(jì)素材網(wǎng)站
7.3 數(shù)據(jù)產(chǎn)品案例
7.3.1 百度熱搜大屏案例
7.3.2 G 端政務(wù)大屏案例
7.3.3 B 端數(shù)據(jù)產(chǎn)品案例