图表设计——远不止“好看”这么简单

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

数据可视化

图表设计实际上就是数据可视化设计，通俗一点讲，就是将复杂的数据信息进行图形化展示，目的就是方便用户更高效地理解或分析一堆杂乱无章的数据，让花费一小时才能理解的数据信息变成一眼就能看懂的图表。

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

图表由哪些元素构成

一张标准样式的图表基本上是由：标题、辅助解释、绘图区、坐标轴（X、Y）、网格线、数据系列这几种数据组成，除此之外，还有一些特殊的图表（如：3D类图表由背景墙、侧面墙、底座等图表元素组成）。

图表设计的过程

1、明确数据指标

首先，我们得先搞明白这些数据是怎么来的、数据是用来做什么的，如果连这个都不清楚，就会很难展开接下来的讨论或设计。数据是做好图表设计的前提，毫无疑问，一连串的数字对于设计师来说是枯燥无味的，不过，前期的数据收集工作有人已经做好，设计师只需要求提交的是尽可能精准的数据即可，不精准的数据会导致接下来的工作毫无意义。因此，当初步接触数据时最好能够解决以下几个问题。

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

我们经常看到的excel图表，可以很清楚的看出城市、销量、退货量、营收等关键指标。这些数据我们可以通过看到excel图表看出来，但是我们并不知道用户关注的是哪些数据指标，用户关注的有可能是不同城市的营收状况，也有可能是退货情况，还有可能是销量对比。所以，我们需要进入下一步——为谁设计，用户想要什么信息。

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

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

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

3、明确设计目标与价值

所有的设计工作都是围绕设计目标进行的，对设计目标的定义是一个源头性问题，设计目标的建立需要大家达成一致，设计目标不是一成不变的，但并不意味着一开始就没有，否则，“方向不对，努力白费”。

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

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

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

当我们已经清楚了用户要做什么，有了明确的设计目标以后，选择图表类型是信手拈来的事。因为在选择图表类型之前，自己心里已经清楚了图表大致的效果（如呈现不同时间段的数据——用折线图合适）；呈现市场份额比例——用饼图合适；呈现某个阶段某个数据出现的频率——用散点图合适）。

常见的图表类型基本涵盖了绝大部分的使用场景。

曲线图：用来反映时间变化趋势。

柱状图：用来反映分类项目之间的比较，也可以用来放映时间趋势。

条形图：用来反映项目之间的比较。

饼图：用来反映构成，即部分占总体的比例。

散点图：用来反映相关性或分布关系。

地图：用来反映区域之间的分类比较。

5、细化体验

Dan Saffer说过：最好的产品通常会做好两件事情：功能和细节。功能能够吸引用户关注这个产品，而细节则能够让关注的用户留下来。

6、数据分布规则

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

遵循设计原则

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

1、删除

特殊场景外，应尽量删除和数据无关的元素。

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

2、弱化

即使有必要保留的非数据元素，也要弱化或隐藏它们，尽量使用浅色。以下内容应该尽量弱化。

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

3、组织

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

4、强调

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

总结

图表设计的过程像是一些列将用户和数据建立对话的过程，作为交互设计师考虑的重点在于如何让复杂、混乱的数据更简单地呈现给用户，并且让用户能够快速、高效地理解，从而做出正确的反馈，最终构建一个回合的交互行为。

在设计图表之前，首先需要明确设计目标，定义目标的过程很容易被设计师忽略，在前期缺少对设计目标的思考往往会导致设计师说不清楚为社么这样设计，且接下来的工作也没有方向感。有的时候，设计方案被推翻，往往是由于目标不明确。其次，在表现形式上，好的图表设计对数据的表达应该是直接、干脆而又精准的，不要让读者去猜测图表信息，以确保信息传递的有效性，同时也要注重美观与细节。

注：以上所有内容均来自《以匠心致设计》一书