图表设计-远不止“好看”这么简单 (2)

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

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

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

 

图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所示

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zggydj.html