写给UI设计师看的数据可视化设计

图书标准信息

• 作者 吴星辰 著
• 出版社 电子工业出版社
• 出版时间 2021-04
• 版次 1
• ISBN 9787121408250
• 定价 109.00元
• 装帧 其他
• 开本 16开
• 纸张 胶版纸
• 页数 288页
• 字数 337千字

【内容简介】

本书将带你全面认识数据可视化设计，从简单的图表设计到炫酷的三维可视化大屏设计，都会通过实际案例进行详细介绍，其中还包括动效设计，以及如何让动效用不同方式落地。本书还详细介绍了B 端产品和G 端产品的设计原则，这可以让你更清晰地认识数据可视化领域的设计要点，另外书中分享的交互思维、产品思维案例，也会让你了解如何运用全局视角做UI 设计。本书不仅是学习数据可视化设计的重要参考，还是全面培养和构建设计师全局设计体系的指导用书。

【作者简介】

小米公司UI设计师。人人都是产品经理专栏作家，年度“交互体验类”最具影响力作者。站酷设计平台百万人气设计师。“零基础成为UI设计师”系列课程主讲人。

【目录】

第1 章 认识数据可视化设计 / 001 

1.1 数据可视化设计的价值 / 002 

1.2 数据可视化设计的魅力 / 005 

1.2.1 文字排版 / 006 

1.2.2 表格展示 / 007 

1.2.3 图形呈现 / 008 

1.3 数据可视化设计应用场景 / 009 

1.3.1 平面设计 / 009 

1.3.2 后台产品和中台产品 / 010 

1.3.3 可视化大屏产品 / 012 

1.4 如何学习数据可视化设计 / 014 

1.4.1 数据可视化设计必备技能 / 014 

1.4.2 数据可视化设计四要素 / 015 

1.4.3 建立数据可视化设计学习体系 / 019 

第2 章 图形设计 / 022 

2.1 图形分类 / 023 

2.1.1 随时间变化图形 / 023 

2.1.2 类别比较图形 / 027 

2.1.3 排名图形 / 031 

2.1.4 占比图形 / 033 

2.1.5 关联图形 / 036 

2.1.6 分布图形 / 040 

2.1.7 关系图形 / 043 

2.2 图形选用 / 045 

2.2.1 KPI 图的妙用 / 045 

2.2.2 巧用真实数据选图形 / 046 

2.2.3 从突出价值数据选图形 / 047 

2.2.4 从可读性角度选图形 / 047 

2.2.5 3D 图形的科学运用 / 048 

2.2.6 直方图与柱状图 / 049 

2.2.7 从对比性选图形 / 051 

2.3 图形设计 / 052 

2.3.1 图形视觉层级解析 / 052 

2.3.2 折线图设计原则 / 053 

2.3.3 柱状图的黄金法则 / 054 

2.3.4 饼图的规范设计法则 / 056 

2.3.5 突出图形重要数据 / 057 

2.2.6 图形用色技巧 / 060 

2.3.7 图形添加说明的重要性 / 062 

2.3.8 标题成就图形 / 063 

2.3.9 简洁：少即是多 / 064 

2.3.10 图形的扩展性设计 / 065 

2.3.11 图形的营销手段 / 067 

2.4 表格设计 / 068 

2.4.1 表格排版奥秘 / 069 

2.4.2 表格字体运用 / 073 

2.4.3 表格与图形结合 / 074 

第3 章 数据可视化产品设计 / 076 

3.1 可视化大屏设计流程 / 077 

3.1.1 设计流程详解 / 077 

3.1.2 需求调研 / 078 

3.1.3 数据分析 / 079 

3.1.4 产品设计 / 080 

3.1.5 可行性测试 / 080 

3.2 可视化大屏设计尺寸解析 / 081 

3.2.1 大屏的类别和成像原理 / 082 

3.2.2 大屏与电脑同比例 / 082 

3.2.3 大屏与电脑不同比例 / 084 

3.2.4 如何配置大屏电脑显示器 / 085 

3.2.5 大屏的分屏设计 / 087 

3.3 可视化大屏视觉设计 / 088 

3.3.1 大屏使用字号解析 / 088 

3.3.2 大屏设计布局解析 / 090 

3.3.3 定义设计风格主题 / 092 

3.3.4 情绪板设计方法 / 095 

3.4 可视化设计之美 / 095 

3.4.1 布局之美——平衡感 / 096 

3.4.2 布局之美——格式塔原则 / 097 

3.4.3 布局之美——黄金比例 / 100 

3.4.4 色彩之美——用色技巧 / 103 

3.4.5 色彩之美——认知配色 / 105 

3.4.6 色彩之美——视觉无障碍设计 / 106 

3.5 文案设计之美 / 109 

3.5.1 积极友好的文案设计 / 109 

3.5.2 从用户的需求和痛点出发设计文案 / 110 

3.5.3 如何用文案渲染产品调性 / 111 

3.5.4 拉近与用户距离的文案设计 / 112 

3.5.5 提高阅读效率的文案设计 / 113 

3.5.6 价值引导的文案设计 / 114 

3.5.7 文案表述的一致性 / 115 

3.5.8 文字排版规范 / 116 

3.5.9 文案标点使用规范 / 117 

3.5.10 英文使用规范 / 118 

3.5.11 特殊字体使用 / 119 

第4 章 交互设计 / 120 

4.1 交互思维 / 121 

4.1.1 用户体验 / 121 

4.1.2 用户思维 / 122 

4.1.3 交互五要素 / 125 

4.1.4 5W1H 分析法 / 127 

4.2 交互设计定律 / 128 

4.2.1 费茨定律 / 128 

4.2.2 席克定律 / 129 

4.2.3 泰斯勒定律 / 130 

4.2.4 米勒定律 / 132 

4.3 交互设计原则 / 133 

4.3.1 防错原则 / 133 

4.3.2 美即好用效应 / 135 

4.3.3 交互直接性原则 / 136 

4.3.4 嵌入式呈现 / 137 

4.3.5 用户心流 / 139 

4.4 可视化图表交互 / 140 

4.4.1 交互式图表 / 140 

4.4.2 简单可交互 / 143 

4.4.3 交互时突出重点 / 146 

4.4.4 移动端图表交互 / 148 

4.4.5 声音交互 / 152 

4.5 产品思维 / 153 

4.5.1 产品感 / 153 

4.5.2 B 端产品设计原则 / 155 

4.5.3 G 端产品设计原则 / 159 

第5 章 动效设计 / 161 

5.1 动效设计价值 / 162 

5.2 动效设计分类 / 163 

5.2.1 视觉动效 / 163 

5.2.2 交互动效 / 166 

5.3 动效设计原则 / 168 

5.3.1 动效物理运动法则 / 168 

5.3.2 动效持续时长解析 / 170 

5.3.3 动效渲染产品调性 / 170 

5.3.4 简单动效与复杂动效 / 171 

5.3.5 大屏动效的表现与克制 / 172 

5.4 动效设计实战 / 173 

5.4.1 动效图标设计 / 173 

5.4.2 3D 模型动效设计 / 176 

5.4.3 3D 粒子动效设计 / 180 

5.4.4 动效营造科技感 / 190 

5.5 动效设计落地 / 195 

5.5.1 三大动图格式 / 196 

5.5.2 适用Web 端的视频格式 / 200 

5.5.3 CSS 序列帧精灵图动画 / 201 

5.5.4 Lottie——.json 文件代码动画 / 202 

5.5.5 生成SVGA 格式的动画 / 203 

5.5.6 导出CSS 动画代码 / 204 

5.5.7 动效设计文档输出 / 205 

第6 章 3D 可视化设计 / 207 

6.1 3D 可视化的设计工具 / 208 

6.1.1 3D 效果设计利器——C4D 和AE / 209 

6.1.2 城市模型利器——Arc GIS / 212 

6.1.3 城市模型利器——City Engine / 214 

6.1.4 3D 实时交互利器——Ventuz / 223 

6.1.5 3D 特效游戏引擎——U3D 和UE4 / 226 

6.2 3D 可视化设计实战 / 229 

6.2.1 可视化大屏透视效果设计 / 229 

6.2.2 3D 动画元素设计落地 / 232 

6.2.3 可交互地球设计落地 / 233 

第7 章 数据可视化设计工具、灵感、案例 / 239 

7.1 第三方数据可视化设计工具 / 240 

7.1.1 可视化组件库工具 / 240 

7.1.2 可视化大屏工具 / 247 

7.1.3 可视化地图工具 / 249 

7.2 数据可视化设计灵感 / 252 

7.2.1 可视化设计灵感网站 / 253 

7.2.2 可视化设计素材网站 / 256 

7.3 数据产品案例 / 258 

7.3.1 百度热搜大屏案例 / 258 

7.3.2 ToG 政务大屏案例 / 262 

7.3.3 ToB 数据产品案例 / 264