前言
自从跟大家分享第一篇《大数据可视化大屏设计经验,教给你!》,很多小伙伴都会问我一些相关的问题,看了小伙伴给我发的视觉稿,整体都还不错,但是发现图表的设计都有一些问题,大家可能对数据可视化的图表设计经验少一些,所以这篇文章就挖掘一下图表的细节表现,分享我曾经遇到过的坑和对图表设计的理解。
图表设计
图表设计概念
图表设计是数据可视化的一个分支领域,是对数据进行二次加工,用统计图表的方式进行呈现,也是数据可视化的核心表现,图表设计既要保证图表本身数据清晰准确、直观易懂,又要在找准用户关注的核心内容进行适当的突显,帮助用户通过数据进行决策。
下面分析三种常用的可视化图表设计:
折线图
折线图常用于表示数据的变化和趋势,坐标轴的不同对折线的变化幅度有很大的影响。
左图坐标轴设定的太低,折线变化过于陡峭,图中数值区间为(10-34)数据可视化的表现过于夸大了折线变化的趋势。
右图坐标轴的数值设定的太高,则折线变化过于平缓,无法清晰的表现折线的变化。
合理的折线图应当占据图表的三分之二的位置,图表的X轴数值范围应根据折线的数值增减变化而变化,这需要跟前端小哥哥小姐姐说明,做成动态计算。
折线图的折线粗细要合理,过细的折线会降低数据表现,过粗的折线会损失折线中的数据波动细节,视觉上较难精准找到折线点的相应数值!我通常用两个像素的线,看起来比较合适!
右图刻度线颜色过重,影响图表数据的表现,零基线跟图表内的刻度线对比不够明显,整体很乱。零基线是强调起始位置的,一般要比图表内的线颜色凸出一些。
条形图/柱状图
理想很丰满,现实很骨感。这个案例是我之前在工作中遇到的问题,数据进来后,被吓到了,问题的原因是没有跟前端小哥姐沟通好,他们把X轴写死,导致出现这种问题,其实应该情况要把这些图表的取值范围写成动态计算的。
例如,以现在数值范围为例,数据的最高值为18,X轴最高数值应该为25,当数据又上升一定的高度后,X轴再上升到相应的数值高度,这样避免了如右图的问题。
坐标轴的标签文字最好能水平排列,当X轴标签文字过多时,不建议倾斜排列、上下排列、换行排列文字多了这样的展示大大降低了阅读性!下图给出两个解决方案,大大提高标签文字的阅读性!
解决方案
柱子之间过于分散就会失去数据之间的关联性,过密就会变得数据之间没有独立性更不利于舒适阅读。
当柱子为n时,柱子直接的距离建议与n相差不要太大,柱子靠边的距离,最好是柱子之间的一半的距离,这样视觉上最为舒适。
饼图
左1图,不建议在饼图内与百分比数值一起显示,饼图本身的形状和大小,文字过多时容易溢出,如果出现一个2%一个1%,就很难辨别图形指向,这样也就失去了数据可视化的意义,PPT通常有这样的设计样式,因为是个死图。
左3图,人的阅读习惯是从左到右,从上到下,所以数据从大到小排列,更有助于阅读,图形也更具美感!
当饼图为检出率,或者一些重要信息检测的重点关注数据,就不建议大小数据顺时针排列,左1图这种情况一般很少出现,因为关注的是检出数值,展示未检出数据实为鸡肋,可能是极少情况的需要吧!
右图对于类似检出率的数据最为合适,直观清晰,没有无用数据干扰!
当饼图的标签维度过多时,就不适合把数据围绕饼图一周展示,会很乱,不易阅读,解决方案如右图!
图表分类图
分享一张图表分类大全,保存起来,设计数据可视化产品,会有重要参考价值!
这张图由设计师Abela对图表的各种特征进行了大致的概括总结。