图表设计图解（设计实战图表设计）

图表设计应该注意哪些问题呢？文章为你解读。

图表设计的过程实则是将数据进行可视化表达的过程，其研究的对象源头是数据，然而，数据本身价值不大，所谓的“数据”往往是由一些看起来有用和没用的“数字”组成，用户很难从这些散乱的数字中发现有价值的信息，so，如果把这些“数字”从商业目的、用户动机进行有机组合、关联或定义就使得数据变得有意义（价值），图表只是最终的表现形式。

作为一名交互设计师在进行图表设计时，就是要把这些宝贵的数据资产变得触手可及，从而充分发挥数据的力量。

数据可视化

刚才有提到，图表设计实际上就是数据可视化设计，在谈图表设计之前，我们先理解下数据可视化的概念。

“数据可视化的目的，是要对数据进行可视化处理，以使得能够明确地、有效地传递信息。”

– Vitaly Friedman

通俗一点讲，无非就是将复杂的数据信息进行图形化展示，目的就是为了方便用户从一堆杂乱无章的数据里面更高效的理解或分析，让花费一个小时才能归纳的数据信息，转化为一眼就能看懂的数据图表。

然而，好的可视化设计一定集易读、突出数据价值、易于分析、美观为一体的，最终让数据变得更加简单，方便交流，反之，不仅让数据变得更复杂，而且还会带来错误诱导。因此，如何让数据分析变得轻松、流畅并且易读，从而提高用户的工作效率，降低用户的工作负担，则成为设计师的重要责任。

图表由哪些元素构成 ？

一张标准样式的图表基本上是由下图1-1 中标示的几种元素组成，除此之外，还有一些特殊的图表（如：3D类，由背景墙、侧面墙、底座等图表元素），对于图表本身在此就不在冗述，设计人员都有基础知识，本文将尝试从图表设计动机的角度和大家一起探讨如何更好的进行图表设计，从而达成设计目标。

图1-1 图表元素

图表设计

1.明确数据指标

首先，我们得先搞明白这些数据是怎么来的、干嘛的，如果连这个都不清楚就会很难展开接下来的讨论或设计。数据是做好图表设计的前提，毫无疑问，一连串的数字对于设计师来说是枯燥无味的，幸亏前期的数据收集工作已有人做好，但是作为设计师有必要要求他们给到你的是尽可能精准的数据，否则，会导致接下来的工作前功尽弃。因此，当初步接触数据时最好能够解决以下几点：

• 理解数据及指标
• 分析数据
• 提炼关键信息
• 明确数据关系及主题

如下图，这份报表比较容易理解，初步分析可以看出这是一份不同品牌的手机每天在全国的销量情况，进一步分析还可以看出销量越高，退货量越少，营收就会越高，投诉越少，评价也会越好，由此得出，省、销量、退货量、营收就是关键指标，当然，前面这些信息是我们通过表格本身的数据信息分析得到的，但是，我们并不知道用户关注得是哪些数据指标，有可能关注的是不同省的营收状况，也有可能是退货情况，还有可以能是不同手机品牌的销量对比，所以，需要进入下一步-为谁设计，用户想要什么信息。

图1-2 不同品牌手机全国销量情况

2.为谁设计，用户想要什么信息

需要明确的是，同一组数据在不同用户眼中所看到的信息是不一样的，因为，角色、岗位的不同就造成了他们所关注的重点、立场不同，不同人所发现的信息、得出的结论也是不一样的，所以，在图表设计时面对不同的使用者所强调的信息及交互方式都是不一样的。主要影响因素：

• 用户群体是谁？有什么特点
• 从数据中需要提炼的信息是什么
• 通过图表想要解决什么问题
• 关注的重点

接着上面的例子，如下图1-2所示，表现形式虽然都是地图，但是强调的重点信息和展示逻辑都不同，即一个强调的是某个品牌的手机在全国不同省的销量状况，另一个强调的是不同品牌手机在全国不同省的销量对比。

图1-3

3.明确设计目的与价值

实际上，图表设计跟一个产品设计的思路是相似的，定义设计目标这个过程很容易被设计师忽略，设计目标不是一成不变的，但并不意味着一开始就没有，前期缺少对设计目标的定义会导致设计师往往说不清楚为什么这样设计，那么，接下来的设计工作就像个无头苍蝇一样乱撞，没有方向感。有的时候，设计方案被推翻，究其根源往往是由于对源思考不明确导致的，设计目标需要大家共同定义并达成一致的方向，否则，方向不对，努力白费。

定义设计目标的过程需要站在用户的角度和数据的角度进行综合分析从而进行构建，一方面需要考虑用户如何更简单的分析、理解数据从而提高决策效率；一方面需要考虑数据本身如何更加精准、一目了然的传达给用户。

图1-4

4.规划设计方案，选择合适的图表类型

在工作中，一些同学在设计图表时把大量的时间用在寻找图表素材上，然而这种都是在表面上寻找解决办法实际上本末倒置了，解决不了本质问题。数据可视化设计不是单纯的图表样式设计，虽然了解图表也很重要，但是，仅仅将数据变成漂亮的图表只是形式的改变而已，远远不够的。

当前期我们已经清楚了用户要做什么，有了明确的设计目标，那么，选择图表的过程就是信手拈来的事。在选择图表类型之前，自己心里已经比较清楚了图表大概的效果（如：呈现不同时间段的数据-用折线图合适；呈现不同份额比例-用饼图合适；某个阶段的数据出现频率-用散点图合适），具体的图表选择大家可以参考 Andrew Abela 整理的图表类型选择指南图示，有兴趣的同学可以研究一下。

图1-5 Andrew Abela整理的图表类型选择指南

常见的图表类型基本上以下六种涵盖了绝大部分的使用场景:

• 曲线图用来反映时间变化趋势
• 柱状图用来反映分类项目之间的比较，也可以用来反映时间趋势
• 条形图用来反映项目之间的比较
• 饼图用来反映构成，即部分占总体的比例
• 散点图用来反映相关性或分布关系
• 地图用来反映区域之间的分类比较

5.细化体验

前面我们谈论了很多图表设计前期的事，接下来谈一谈需要注意的几点细节，Dan Saffer 说过“最好的产品通常会做好两件事情：功能和细节。功能能够吸引用户关注这个产品，而细节则能够让关注的用户留下来”。毕竟细节设计成就卓越产品嘛~

X坐标轴

考虑到不同屏幕或浏览器的适配问题，当X坐标轴标签文字显示过于拥挤时可将文字打斜放置，既保证了数据的正常阅读也不影响图表美观。

图1-6 Antv

当X坐标轴标签为连续的年份时，不要墨守成规的写成“2015、2016…”，可以用简写的式“2015、16、17…”，看起来会简单、清晰很多。

图1-7

Y坐标轴

如图下图1-8-1，当Y坐标轴的数字很长时会出现左右空间过于紧凑的情况，这时，如果单位换算是10的倍数（如1s=1000ms），可以考虑定义单位换算规则，即：

• case1：当时间 ≥1000ms 时，计时单位用 s 表示，数据精确到小数点后两位
• case2：当时间 ＜1000ms 时，计时单位用 ms 表示，数据精确到个位

如下面1-8-2

图1-8-1

图1-8-2

如果没有单位换算，如下图1-9 所示，单位是“次”或“个”，这时可以考虑用位数换算，即：

• case1：当数字 ≤4 位数时，用精确数字表示
• case2：当数字 ＞5 位数时，用 K 为单位进行缩写表示，精确到个位
• case3：当数字 ＞8 位数时，用 M 为单位进行缩写表示，精确到个位
• case4：当数字 ＞11 位数时，用 M 为单位进行缩写表示，精确到个位
• case5：当数字 ＞14 位数时，用科学计数法表示，精确到小数点后3位

如下图1-9所示

图1-9

数据分布规则

如果没有制定明确的数据显示规则，就会出现下图2-1-1的展示情况（后端传什么数据，前端就展示什么数据），导致图表展示效果和可读性都很差，如果要解决这个问题就需要定义规则。

图2-1-1

这里数据的展示和时间有关，所以，我们需要考虑的是某个时间段内展示多少个点才是合适的，而显示一个点由多长时间的数据聚合（点聚合区间是多少），具体如下图2-1-2

图2-1-2

规则定义清楚后，后台在与前段交互的时候就会按照以上规则进行，最终实现效果如下图2-1-37

图2-1-3

遵循设计原则

图表的设计价值在于精准、高效、简单的传递数据信息，最好能够让读者一目了然，即使做不到一目了然也应该具备自我解释的能力。所以，就要求在设计时应该增强和突出数据元素，减少和弱化非数据元素，具体应该注意以下原则：

1.删除

除非特殊场景的考虑，应尽可能的删除和数据非相关的元素:

• 背景色
• 渐变色
• 网格线
• 3D效果
• 阴影效果（如果具体操作需要强调的除外，如：鼠标Hover查看具体信息）

2.弱化

即使有必要保留非数据元素，也要弱化或隐藏它们，尽量使用淡色

• 坐标轴
• 网格辅助线
• 表格线

3.组织

把相关的数据元素进行合理的组织分类，不要指望把所有的数据元素都放入图表内，只要放关键的、重要的数据在图表内。

4.强调

对于已选的数据元素也要考虑优先级，明确哪些数据是需要重点突出的进行突出标识，以便读者能够快速get到重要信息。

如图2-2所示，通过上述原则对对图表进行优化，最终变成了一个简洁有效的图表。

图2-2

总结

图表设计的过程更像是一系列将用户和数据建立对话的过程，作为交互设计师考虑的重点在于如何让复杂、混乱的数据更简单的呈现给用户，并且，让用户能够快速、高效的理解分析从而做出正确的反馈，最终将构建一个回合的交互行为。好的图表设计首先对数据的表达就应该是直接、干脆而又精准的，不要让读者去猜测图表信息，确保信息传递的有效性，不会出现误差的同时又注重美观与细节。

文章参考：

• Excel图表之道
• 数据可视化
• 从物理逻辑到行为逻辑-辛向阳

作者：王强，网易高级交互设计师

本文来源于人人都是产品经理合作媒体@网易UEDC，作者@王强

题图来自 Pixabay，基于 CC0 协议

,