网易设计师：图表设计，远不止“好看”这么简单

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

数据可视化

刚才有提到，图表设计实际上就是数据可视化设计，在谈图表设计之前，我们先理解下数据可视化的概念。“数据可视化的目的，是要对数据进行可视化处理，以使得能够明确地、有效地传递信息。” ——Vitaly Friedman通俗一点讲，无非就是将复杂的数据信息进行图形化展示，目的就是为了方便用户从一堆杂乱无章的数据里面更高效的理解或分析，让花费一个小时才能归纳的数据信息，转化为一眼就能看懂的数据图表。

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

图表由哪些元素构成？

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

1. 明确数据指标

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

理解数据及指标

分析数据提炼关键信息明确数据关系及主题

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

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

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

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

关注的重点

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

3.明确设计目的与价值

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

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

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

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

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

5.细化体验

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

X坐标轴

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

总结

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