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

适读人群 ：本书适用于UI设计师和对数据可视化感兴趣的读者

1.在大数据时代，数据越来越多，人们很难看到数据背后的价值。

2.数据可视化的书很多，但是给UI设计师看的数据可视化设计的书不多，本书教你正确认识数据可视化设计。

3.数据可视化设计是将大数据背后的结构、关联、趋势等，通过可视化的方式直观地呈现出来，让数据变得更具有可读性，并告诉人们数据背后的意义，这可以极大地帮助人们利用大量潜在的有意义的数据信息来实现商业价值。

4.作者是人人都是产品经理年度“交互体验类”*具影响力作者、站酷设计平台百万人气设计师，本书可以让你玩转数据可视化设计。

本书将带你全面认识数据可视化设计，从简单的图表设计到炫酷的三维可视化大屏设计，都会通过实际案例进行详细介绍，其中还包括动效设计，以及如何让动效用不同方式落地。本书还详细介绍了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

关于入行

那年我住在北京香山脚下，每天8 点起床，9 点开始看UI 教程，下午和晚上做练习，有时学累了就去爬香山，好的成绩是上山下山不到两个小时，爬山回来冲个凉继续学习。那段时间晚上做梦常常都在画图标，后来我发现，新学习的技能如果不在梦里出现，那肯定是没有下足功夫。

就这样，我自学了两个半月的UI 设计，恰逢那几年是移动互联网爆发期，行业对UI设计师的需求量很大，因此我很幸运地找到了工作。但工作后才发现，做设计远不是自学两个多月的事，尤其我还是非科班出身。于是，我开始学习美术知识，看美院的课程，还在五道口报了绘画班，每周六学习一天，大概学了半年，这段时间的学习使我真正喜欢上了设计。

刚开始做设计，由于一直都有危机感，因此在之后的两年多时间里，我一直没有停止学习，几乎每天都在看教程，从摄影后期、合成、插画、字体设计到UI 设计、动效设计、三维设计、交互设计、产品设计，再到服务设计，只要与设计相关的都不放过。那段时间过得充实而又满足，就这样渐渐地对设计越来越有想法和信心，产出的东西也越来越被更多人所肯定。

如今，入行UI 设计已有六年，回想当初自己带着一腔热血一头扎进设计行业真是我目前做的正确的选择，做设计是让我有成就感、开心的事！

关于写作& 成果

在我一周岁抓周儿的时候，我抓住了一支笔，写作这件事可能跟我抓周儿有关系吧！其实开始写文章是在进入设计行业之后，那时我所在公司的产品设计团队要求每周五轮流分享产品或设计心得，不知道为什么，我对这件事情有独钟，每次轮到我都会做充分准备，后来我就干脆把分享的内容整理成文章发布到设计平台，再之后我又开通了微信公众号“互联网设计帮”，正式开启了设计总结的写作之路。不断的产出带给我意想不到的收获，设计平台和公众号的粉丝开始多了起来，文章也得到了站酷、UI 中国、人人都是产品经理等平台的首页推荐，我也有幸站在近百人面前进行设计分享，这些都让我感到非常充实和快乐。今后我还会继续坚持写作，分享设计，也特别希望读者朋友们能试着去分享你们的设计作品和设计总结。坚持下来你会发现，分享是有效的学习方法，同时也能收获更好的自己。

关于写书

我接触数据可视化设计已有四年多的时间，每完成一个项目都习惯将总结整理成文章分享出来，也时常分享一些数据可视化设计技能方面的教程。在这个过程中，有很多小伙伴常常会提出一些问题，如如何定义大屏的设计尺寸、如何才能有炫酷效果、如何让动效设计落地等，针对这些大大小小的问题，我一直想全面地做一次总结。也就在这个时候，电子工业出版社的石悦老师联系到我，希望我能把这些年在数据可视化设计领域的经验总结整理成书，于是我们一拍即合，终有了这样一本针对数据可视化设计领域，兼具交互和产品相关知识及案例实战的图书。

我和业内许多经验丰富的前辈，以及才华横溢的设计大佬相比还有很多需要学习和提升的地方。我会尽的努力，把这几年的设计经验总结出来，给曾经像我一样迷茫的设计师朋友带来一些指引和帮助。

关于感谢

感谢我的父母，你们的期待，是我坚持努力完成这本书的动力。

感谢杨婕妤同学在我写作期间对我极大的鼓励和帮助，没有你的支持这本书不会这么快完成。

感谢我的妹妹吴欣艳同学，在繁忙的工作之余对本书内容给出宝贵建议并反复校对。

感谢电子工业出版社的石悦老师，是他的引导和鼓励，让我终完成了本书的撰写。

感谢带我入行设计的朋友和一路走来带给我帮助的领导和同事，你们的指导让我少走了不少弯路。

感谢关注我微信公众号“互联网设计帮”的读者朋友们，是你们的支持，让我一直坚持内容产出到现在，希望今后我们能一起见证彼此的成长。

看完这本书如果能给你带来一些收获，也希望你能推荐给身边有需要的设计师朋友。

另外，欢迎大家关注我的微信公众号“互联网设计帮”，关注即可加我微信好友，我们一起玩设计，等你！

可视化为我们的认知世界打开了独特的天眼。

——零点有数董事长 袁岳

本书是一本真正意义上的数据可视化实操手册，是神颜设计师用自己从实战中得来的经验写成的“秘籍”，让你从“小白”一步步地修炼成大师。

——阳光易德大数据研究院副院长 王亦冰

数据可视化设计是近几年热门的设计方向。我有幸看到这样一本专门介绍数据可视化设计的图书。从简单的图表设计到三维可视化设计，本书都进行了全面的讲解，同时还结合交互体验与产品思维，让你全面地掌握数据可视化设计的方法，不但适合设计师学习，而且对数据可视化感兴趣的互联网人都能有所收获。

—— 起点学院&人人都是产品经理社区创始人兼CEO 曹成明（老曹）

星辰有着深厚的专业功底和个性鲜明的设计哲学，设计的to B产品设计简洁、专业，用可视化展示动感、酷炫，在设计to C产品时充分地考虑易用和交互。你深读本书，就会得到启示，产生共鸣！

——零点有数集团首席技术官 陈军

B端设计工作者非常苦恼的一件事就是很难找到自己的工作价值。通过数据可视化的表现形式，B端设计工作者可以大大地提高工作效率，这无疑是一种找到设计价值的方式。

星辰凭借多年的工作经验和对设计细节的洞察，详细地罗列了多种设计案例。你可以参考这些工作成果，通过数据可视化的方式大大地提升B端工作的价值感。

——集创堂创始人 CTD设计咨询创始人 慈思远

这是我接触到的内容比较全面的数据可视化设计书籍，除了数据可视化内容，当中更涉及不少通用设计思维理论。我力荐对数据可视化设计有兴趣的设计师们阅读本书。

——设计日记创始人 sky盖哥

很高兴国内有了比较系统地介绍数据可视化设计的书，并且结合了大量的实际案例，给数据可视化计师带来了很大的参考价值。

数据对于大多数人来说只是一个概念，大数据尤其如此。用可视化的设计方式将其呈现出来就变得十分重要，希望本书给数据可视化设计师带来更多的启示。

——清华美院艺术管理硕士、前*资深交互设计 张蕊

本书以信息图表为特色，展示了复杂的信息，表现了视觉展示中的联系和关系。作者带你走进数据的世界，洞察数据可视化之美。

——零点有数 设计总监 吴雪

一切皆为表达，本书将告诉你如何让数据展示出美和逻辑。

——阳光易德前CTO 孟祥忠