如何将数据进行数据可视化展示？

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

数据可视化

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

图表由哪些元素构成 ？

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

图1-1 图表元素

图表设计

1.明确数据指标

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

理解数据及指标

分析数据

提炼关键信息

明确数据关系及主题

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

图1-2 不一样品牌手机全国销量状况

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

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

用户群体是谁？有什么特色

从数据中须要提炼的信息是什么

经过图表想要解决什么问题

关注的重点

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

图1-3

3.明确设计目的与价值

实际上，图表设计跟一个产品设计的思路是类似的，定义设计目标这个过程很容易被设计师忽略，设计目标不是一成不变的，但并不意味着一开始就没有，前期缺乏对设计目标的定义会致使设计师每每说不清楚为何这样设计，那么，接下来的设计工做就像个无头苍蝇同样乱撞，没有方向感。有的时候，设计方案被推翻，究其根源每每是因为对源思考不明确致使的，设计目标须要你们共同定义并达成一致的方向，不然，方向不对，努力白费。

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

图1-4

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

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

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

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

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

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

柱状图 用来反映分类项目之间的比较，也能够用来反映时间趋势

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

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

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

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

5.细化体验

前面咱们谈论了不少图表设计前期的事，接下来谈一谈须要注意的几点细节，Dan Saffer 说过“最好的产品一般会作好两件事情：功能和细节。功能可以吸引用户关注这个产品，而细节则可以让关注的用户留下来”。毕竟细节设计成就卓越产品嘛~

X坐标轴

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

图1-6 Antv

当X坐标轴标签为连续的年份时，不要墨守成规的写成“201五、2016…”，能够用简写的式“201五、1六、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-3

图2-1-3

遵循设计原则

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

1.删除

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

背景色

渐变色

网格线

3D效果

阴影效果（若是具体操做须要强调的除外，如：鼠标Hover查看具体信息）

2.弱化

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

坐标轴

网格辅助线

表格线

3.组织

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

4.强调

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

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

图2-2

网易有数：企业级大数据可视化分析平台，具备全面的安全保障、强大的大数据计算性能、先进的智能分析、便捷的协做分享等特性，点击可免费试用。

文章来源： 网易云社区