编辑导读：数据可视化是B端设计最常见的设计之一。在一个产品中，如何清晰、高屏效展示数据，让用户高效、简洁的读取数据并做出判断，这是B端设计师的基础技能。本文作者分享了自己做数据可视化的经验，本篇为图表选择篇。

数据可视化是B端设计最常见的设计之一。在一个产品中，如何清晰、高屏效展示数据，让用户高效、简洁的读取数据并做出判断，这是B端设计师的基础技能。

大部分设计师朋友问我的问题，大致如下：

• 产品展示数据，该展示哪些呢？
• 产品经理给了很多数据表格，我该如何可视化？
• 为什么我设计的图表用户看不懂？
• 图表如何做响应式布局？
• 为什么我设计的图表在视觉上总感觉乱七八糟？

其实，这些问题都可以通过一些方法来快速解决，个人认为掌握设计方法优于冥思苦想的闭门造车，沿着方法加以融合、创新，才是**效的方式。B端存在的意义就是降本提效，作为B端设计师，这些方法就是我们脑子里的”软件”，为我们的工作降本提效。

目前准备写三篇数据可视化设计的文章来分享自己做数据可视化的经验：

• 《B端设计 数据可视化 (一 ) 图表选择篇》
• 《B端设计 数据可视化 (二 ) 视觉表现》
• 《B端设计 数据可视化 (三 ) 可视化实现》

进入正题，这篇文章主要分成三个部分：

• Part 1: 数据可视化定义
• Part 2: 常见图表的构成
• Part 3: 常见图表选择

Part 1：数据可视化定义（Definition）

要回答数据可视化是什么，首先我们要知道的是其出现的原因。可视化图表的出现是为了呈现更简洁、直观的数据情况，使得用户可以基于图表高效抓取有价值的信息加以记忆和判断。

比较客观的定义为：

为了清晰有效地传递信息，数据可视化使用统计图形、图表、信息图表和其他工具。

在14年的时候，我曾就职于美国 Purdue 大学的 Center for Innovation through Visualization and Simulation (CIVS), 创始人Dr. Chenn Zhou 很有创意的将大家迷惑的工业数据，借助于ANSYS Computational Fluid Dynamics 呈现为可视状态，并借助于AR技术呈现给用户，这让 CIVS 成为了Purdue **级的实验室之一，也让Dr. Zhou 成为了美国 Indian 最有影响力的十大女性之一。CIVS的成功离不开数据可视化的功劳，可视化数据让工业上繁杂的数据变得平易近人，学者和老板都可以轻松的通过酷炫的AR技术，进入设备内部，看到内部的化学反应、温度、燃气比例等等。

B端数据的可视化设计比工业仿真数据可视化呈现要简单的多，我们不用自己去算数据在三维空间中呈现的位置，只需根据流程完成交互及视觉设计即可。

我们经常见到的数据可视化有：

商家后台、金融类产品、运动类产品、检测类产品、To Do 类产品、各种排行榜、游戏类产品、还有交互设计师最熟悉的漏斗图等等。

总结一下数据可视化的优势：

1. 简洁直观
2. 容易理解记忆
3. 信息传递更直接

Part 2：常见图表的构成（Composition）

常见的图表由如下组件构成其实可以参见Excel，在这里，我总结了UI设计中常见的图表构成：

1. 标题：图表的标题，有时可以没有，一般在图表顶部放或者顶部居中

2. 提示信息/数据标签：当前坐标详细信息，可以在主体图形内，也可以在主体图形外，Hover State显示比较常见

3. 图例：图例是集中于图表一角或一侧的地图上各种符号和颜色所代表内容与指标的说明，有助于更好的认识图表

4. 切换选项：切换选项可以为下拉，也可为 Tab 切换，用于值域选择、不同图表类型切换等功能

5. 更多选项：一般用于收纳不常用选项，如隐藏、分享等

6. 图形主体：根据图表类型及数据展示的抽象几何元素

7. 坐标轴：根据情况选择显示与否，二维空间只有x、y轴，一般情况下，只选择主要横、纵坐标轴之一即可

8. 坐标轴标题：坐标轴的标题，一般可不用显示。标题有横、纵坐标轴标题

9. 误差线：显示潜在的误差或相对于系列中每个数据标志的不确定程度。一般分为标准误差，百分比误差，标准偏差使用较少

10. 辅助线/趋势线：辅助或突出显示平均值、目标、标准值、趋势等，帮助用户更快抓取

11. 网络线：辅助用户快速确定图形在特定位置的值，一般只使用主轴水平网络线（条形图使用主轴垂直网络线），主轴次要水平网络线会比较密集，建议避免使用

Part 3：常见图表选择 (Selection)

为了方便设计师方便记忆，我将常用图表以其主体图形形状作为分一级分类标准，比较类、构成类等二级分类标准作为标签显示，二级分类是借鉴了 AntX 对于图表的分类，链接放在了参考链接中。

主要常用图表的形状为五大类：点、线、面、矩形、圆，也常复合地图去使用，关系及空间类图表应用相对较少，本篇文章暂不赘述。