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

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

本书还详细介绍了B端产品和G端产品的设计原则，这可以让你更清晰地认识数据可视化领域的设计要点。另外，书中分享的交互思维、产品思维案例，也会让你了解如何运用全局视角做UI 设计。

本书不仅是学习数据可视化设计的重要参考，还是全面培养和构建设计师全局设计体系的指导用书。

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

——零点有数董事长 袁岳

 

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

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

 

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

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

 

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

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

 

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

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

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

 

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

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

 

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

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

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

 

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

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

 

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

——阳光易德前CTO 孟祥忠

 

第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 端数据产品案例