1.明确数据指标
首先,我们得先搞明白这些数据是怎么来的、干嘛的,如果连这个都不清楚就会很难展开接下来的讨论或设计。数据是做好图表设计的前提,毫无疑问,一连串的数字对于设计师来说是枯燥无味的,幸亏前期的数据收集工作已有人做好,但是作为设计师有必要要求他们给到你的是尽可能精准的数据,否则,会导致接下来的工作前功尽弃。因此,当初步接触数据时最好能够解决以下几点:
理解数据及指标
分析数据
提炼关键信息
明确数据关系及主题
2.为谁设计,用户想要什么信息
需要明确的是,同一组数据在不同用户眼中所看到的信息是不一样的,因为,角色、岗位的不同就造成了他们所关注的重点、立场不同,不同人所发现的信息、得出的结论也是不一样的,所以,在图表设计时面对不同的使用者所强调的信息及交互方式都是不一样的。主要影响因素:
用户群体是谁?有什么特点
从数据中需要提炼的信息是什么
通过图表想要解决什么问题
关注的重点
3.明确设计目的与价值
实际上,图表设计跟一个产品设计的思路是相似的,定义设计目标这个过程很容易被设计师忽略,设计目标不是一成不变的,但并不意味着一开始就没有,前期缺少对设计目标的定义会导致设计师往往说不清楚为什么这样设计,那么,接下来的设计工作就像个无头苍蝇一样乱撞,没有方向感。有的时候,设计方案被推翻,究其根源往往是由于对源思考不明确导致的,设计目标需要大家共同定义并达成一致的方向,否则,方向不对,努力白费。
定义设计目标的过程需要站在用户的角度和数据的角度进行综合分析从而进行构建,一方面需要考虑用户如何更简单的分析、理解数据从而提高决策效率;一方面需要考虑数据本身如何更加精准、一目了然的传达给用户。
4.规划设计方案,选择合适的图表类型
在工作中,一些同学在设计图表时把大量的时间用在寻找图表素材上,然而这种都是在表面上寻找解决办法实际上本末倒置了,解决不了本质问题。数据可视化设计不是单纯的图表样式设计,虽然了解图表也很重要,但是,仅仅将数据变成漂亮的图表只是形式的改变而已,远远不够的
当前期我们已经清楚了用户要做什么,有了明确的设计目标,那么,选择图表的过程就是信手拈来的事。在选择图表类型之前,自己心里已经比较清楚了图表大概的效果(如:呈现不同时间段的数据-用折线图合适;呈现不同份额比例-用饼图合适;某个阶段的数据出现频率-用散点图合适),具体的图表选择大家可以参考 Andrew Abela 整理的图表类型选择指南图示,有兴趣的同学可以研究一下。
常见的图表类型基本上以下六种涵盖了绝大部分的使用场景:
曲线图 用来反映时间变化趋势
柱状图 用来反映分类项目之间的比较,也可以用来反映时间趋势
条形图 用来反映项目之间的比较
饼图 用来反映构成,即部分占总体的比例
散点图 用来反映相关性或分布关系
地图 用来反映区域之间的分类比较
5.细化体验
前面我们谈论了很多图表设计前期的事,接下来谈一谈需要注意的几点细节,Dan Saffer 说过“最好的产品通常会做好两件事情:功能和细节。功能能够吸引用户关注这个产品,而细节则能够让关注的用户留下来”。毕竟细节设计成就卓越产品嘛
X坐标轴
考虑到不同屏幕或浏览器的适配问题,当X坐标轴标签文字显示过于拥挤时可将文字打斜放置,既保证了数据的正常阅读也不影响图表美观。
当X坐标轴标签为连续的年份时,不要墨守成规的写成“2015、2016…”,可以用简写的式“2015、16、17...”,看起来会简单、清晰很多。
数据分布规则
如果没有制定明确的数据显示规则,就会出现后端传什么数据,前端就展示什么数据,导致图表展示效果和可读性都很差,如果要解决这个问题就需要定义规则。
这里数据的展示和时间有关,所以,我们需要考虑的是某个时间段内展示多少个点才是合适的,而显示一个点由多长时间的数据聚合(点聚合区间是多少),具体如下图2-1-2
规则定义清楚后,后台在与前段交互的时候就会按照以上规则进行,最终实现效果如下图2-1-3
遵循设计原则
图表的设计价值在于精准、高效、简单的传递数据信息,最好能够让读者一目了然,即使做不到一目了然也应该具备自我解释的能力。所以,就要求在设计时应该增强和突出数据元素,减少和弱化非数据元素,具体应该注意以下原则:
1.删除
除非特殊场景的考虑,应尽可能的删除和数据非相关的元素:
背景色
渐变色
网格线
3D效果
阴影效果(如果具体操作需要强调的除外,如:鼠标Hover查看具体信息)
2.弱化
即使有必要保留非数据元素,也要弱化或隐藏它们,尽量使用淡色
坐标轴
网格辅助线
表格线
3.组织
把相关的数据元素进行合理的组织分类,不要指望把所有的数据元素都放入图表内,只要放关键的、重要的数据在图表内。
4.强调
对于已选的数据元素也要考虑优先级,明确哪些数据是需要重点突出的进行突出标识,以便读者能够快速get到重要信息。