数据可视化图表和表格的设计经验分享

2年前发布

原创文章 / UI 网页 其他
吴星辰,禁止转载-禁止商业用途-禁止个人用途

深度挖掘数据可视化图表和表格的设计要点


前言  


自从跟大家分享第一篇《大数据可视化大屏设计经验,教给你!》,很多小伙伴都会问我一些相关的问题,看了小伙伴给我发的视觉稿,发现图表和表格的设计都有一些小问题,所以这篇文章就深度挖掘数据可视化图表和表格的设计要点。



图表设计  



图表设计概念

图表设计是数据可视化的一个分支领域,是对数据进行二次加工,用统计图表的方式进行呈现,也是数据可视化的核心表现,图表设计既要保证图表本身数据清晰准确、直观易懂,又要在找准用户关注的核心内容进行适当的突显,帮助用户通过数据进行决策。


下面分析三种常用的数据可视化图表折线图、柱状图、饼图的设计。


折线图


折线图常用于表示数据的变化和趋势,坐标轴的不同对折线的变化幅度有很大的影响。


下图的两个折线图是有问题表现形式:


左图坐标轴设定的太低,折线变化过于陡峭,图中数值区间为(10-34)数据可视化的表现过于夸大了折线变化的趋势。


右图坐标轴的数值设定的太高,则折线变化过于平缓,无法清晰的表现折线的变化。



下图修改后折线图,折线幅度占3/2的位置,数据表现清晰合理。


合理的折线图表的X轴数值范围应根据折线的数值增减变化而变化,这需要跟前端工程师说明,做成动态计算。



下图又是两个有问题的折线图:

折线图的折线粗细要合理,过细的折线会降低数据表现,过粗的折线会损失折线中的数据波动细节,视觉上较难精准找到折线点的相应数值!我通常用两个像素的线,看起来比较合适!



刻度线与折线的设计:

右图刻度线颜色过重,影响图表数据的表现,零基线跟图表内的刻度线对比不够明显,整体很乱。零基线是强调起始位置的,一般要比图表内的线颜色凸出一些。



条形图/柱状图


理想很丰满,现实很骨感,有时候我们设计的图表数据进来后,跟设计完全不一样,看下图的设计稿跟数据进来后的样子:

解决的方案就是让工程师把X轴刻度不要写死,应该把这些图表的取值范围写成动态计算的。


动态计算就是,例如数据的最高值为18,X轴最高数值应该为25,当数据又上升一定的高度后,X轴再上升到相应的数值高度,这样避免了如右图的问题。



坐标轴的标签文字最好能水平排列,当X轴标签文字过多时,不建议倾斜排列、上下排列、换行排列文字多了这样的展示大大降低了阅读性!下图给出两个解决方案,大大提高标签文字的阅读性!



解决方案就是换一种形式,如下图:

解决方案



柱状图直接的位置设计:

柱子之间过于分散就会失去数据之间的关联性,过密就会变得数据之间没有独立性更不利于舒适阅读。


当柱子为n时,柱子直接的距离建议与n相差不要太大,柱子靠边的距离,最好是柱子之间的一半的距离,这样视觉上最为舒适。



饼图



饼图的设计:

左1图,不建议在饼图内与百分比数值一起显示,饼图本身的形状和大小,文字过多时容易溢出,如果出现一个2%一个1%,就很难辨别图形指向,这样也就失去了数据可视化的意义,PPT通常有这样的设计样式,因为是个死图。


左3图,人的阅读习惯是从左到右,从上到下,所以数据从大到小排列,更有助于阅读,图形也更具美感!



表达重要数据,如下图:

当饼图为检出率,或者一些重要信息检测的重点关注数据,就不建议大小数据顺时针排列,左1图这种情况一般很少出现,因为关注的是检出数值,展示未检出数据实为鸡肋,可能是极少情况的需要吧!


右图对于类似检出率的数据最为合适,直观清晰,没有无用数据干扰!


当饼图的标签维度过多时,就不适合把数据围绕饼图一周展示,会很乱,不易阅读,解决方案如右图!



表格设计


表格是数据可视化中最入门的数据图,也最为实用,在网页后台几乎是必不可少的元素,数据可视化大屏中也常常出现。表格的设计似乎所有人都会,但为什么总有一些表格看起来很舒服,下面就用一个案例来解说下表格的设计要点。



上图的表格样式常常在网页后台,PPT中看到,似乎也看不出什么问题,俗话说了,没有对比就没有伤害,接下来我们就找找它的问题,并一步步优化它,最后对比就知道它有什么问题了!



排版第一原则“文字左对齐,数字右对齐”


我们阅读文字的习惯是从左到右,文字左对齐,视觉焦点更集中不跳跃,阅读起来最为顺畅舒服。


天下武功, 唯快不破,数字右对齐,能快速让观者识别数字体量。人通常在读一个较大的数字时是从后面开始感知的,例如这个数字"¥546,825,23.96"从左往右看一下子很难看出来“5”在千万上,都是先通过后面的位数来确定,或者先找到万的位置来判断,数字的个位对齐,在列表中也更容易判断百、千、万等小数位数,数字右对齐是最自然的阅读方式!



标题与内容同样的对齐方式


标题随内容对齐,内容右对齐相对的标题也就右对齐,最好不要出现内容与标题相反的对齐方式!



数字是否用表格字体


表格数字字体就是每个数字所占面积一致,例如“1”和“5”在一串数字中占的面积是一样的,这样就不会出现上图的情况。


同样都是万级的数字,"12,231.10"数字中出现的“1”较多就会导致上下同样位数的数字错位,这样很容易误导观者,第一感知上也会觉得“1”多的数字偏小!


上图运用了表格数字字体的效果,清晰了然!(移动端Web端都要注意这个问题)



去掉表格竖实线或所有实线


加上竖线的表格给人一种局限感,不透气,留白空间少显得杂乱,去掉竖线更有空间感!


只留分割线强调层级,适合背景是卡片式的设计样式,卡片设计无形中给表单加了一个外框,使得整体页面更融洽!


实线固有它的作用,但有时候也可以去掉所有实线,这样更凸出数据,加大条目的间距使得页面更加干净清爽,有空间感!



强调标题


第一种加粗标题字体,使得表格看起来更有层次!


第二种表格形式可以加粗标题字体,也可以添加背景色强调标题区分层级!



凸出重要信息


网页后台表格往往一个条目中,使用者只关注一个或几个数据,所以可以用背景色加强凸出!



表格扩展设计


这种创新形式可以在展示型数据可视化中运用,数据可视化设计中不用太拘谨,只要不违背数据的清晰合理展示就可以,网页后台页面建议还是规范设计,实用为主!



之前


之后



图表分类图


分享一张图表分类大全,保存起来,设计数据可视化产品,会有重要参考价值!


这张图由设计师Abela对图表的各种特征进行了大致的概括总结。



有收获就点个赞吧~

1336
- 位站酷推荐设计师推荐 -
一下给作者疯狂打call吧!
(推荐 + 收藏 + 关注作者)
+1 +1 +1

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    喜欢TA的作品吗?喜欢就快来夸夸TA吧!
    夸夸

    夸夸

    文章信息

    • 文章标签

    收录收藏夹
    阅读 13
    没有新消息
    已收藏到: