一个柱状图里两种数据_数据图表设计分析总结

869dea947c73505c89c7e1e34e6cb8f4.png

设计师会接触到数据可视化设计,将信息更加立体、全面的展现在用户面前。但思考下,你的数据可视化方法是否与业务需求符合?

蛇、贝壳、山脉——这些图形是设计师可能会去绘制的东西,而不是用这些图形来直接显示数据。

一、像“蛇”一样的曲线图

你一定见过以彩色的2D或3D曲线绘制的CRM或ERP仪表盘的设计,你看就像“蛇”一样。

2fd75558c733f3f7e262ab6e065b9a44.png

虽然这样的可视化看起来很有视觉吸引力,但这种视觉没有很好的展现真实的数据信息,更重要的是,它们很难被读取和理解。

7b9e65b0de595b8af6f2bfdd36057cb0.png

可以看到组件还有足够的空间来多显示20-30个甚至更多的数据点,而不是只有10个。上图的曲线图可能表明,需要展示的数据很少,所以设计师试图用一些赏心悦目的东西来填补空白区域。

edfe0a5d6e44371b49d20fa1d4031908.png

现在想象一下,当需要展示数据更多的趋势变化时,曲线图会是什么样子的?

3178341d5021052e45a0290a1d323a9f.png

可以看到,多条曲线相互交叉重叠,看着很混乱,不易识别。

曲线图问题

  1. 很难在一个表格里展示多个数据,并且让数据容易识别;
  2. 曲线的粗细会影响获取相对准确的数据信息,可以使用“斑马条纹”一样的间隔色柱状图来替代;
  3. 现实中的真实数据很难让曲线过渡自然,而不会显得生硬。生硬的过渡影响视觉;
  4. 两个数据之间的线会误导用户,影响数据获取。

总结

  • 如果数据少,可以使用柱状图展示;
  • 如果数据多且具有连续性时,曲线线条要尽可能的细点,像股票趋势一样。

二、像甜甜圈一样的环形设计

和像“蛇”的曲线图一样,像”甜甜圈”的圆环,尤其是嵌套的圆环,也会影响数据的准确性,让数据对比变成困难。另外,这两种方法都存在不合理利用空间的问题。

018dd8a22f4fe84aaf92267dda1ed2d7.png

用户或多或少都能处理均匀的百分比:满圆=100%,半圆=50%,四分之一=25%,三分之二=75%,但如果一个圆的终点在 “一半 “和 “三分之二 “之间的某个地方–就像图上绿色的那个圆一样,怎么办?

圆角的样式可能会让图表看起来更活泼,但是却降低了数据的读取准确性,这样的圆角在视觉上会在真实值的基础上增加2%-3%的读数。

现在,来简化一下圆环的视觉。

b74d061c6db9efcaf2df6e0ae6bcccd9.png

可以清晰看到,用户看到的数据比实际数值要多一点,用图表的方式再来展现下:

b7752a1788f9d2a5647b3c779d01c225.png

三个条形图可以传达相同的信息,占据更少的空间,并且无需工具提示即可显示数字,这对于数据驱动的界面来说至关重要。

00edd9727b62520c00b59d6111b36486.png

圆环设计问题

  1. 环形的设计不容易读取数据。用户可以很好地识别25%、50%、75%或100%这样的百分比,但通常无法准确识别中间的值;
  2. 嵌套的圆形需要一个图例或工具提示,因为标签通常不能合适地放在在相应的圆环上;
  3. 数据之间不能进行比较。就算是末端在一起的两个圆环,由于内外圈的问题,所表示的读数都是不一样的。

总结

  • 使用条形图来准确表达百分比;
  • 环形图时,尽量避免嵌套圆环或使用圆角。

三、玫瑰饼图

著名统计学家、数据可视化基础书籍的作者爱德华-图夫特多次警告说,视觉上吸引人的图表可能会说谎。像”贝壳 “的玫瑰饼图是图表的一种时髦变化,彩色的截面宽度不一,相互重叠。

33fadff779a5a0ae173a026690d4b417.png

简单地说,数据可视化的本质就是通过颜色、面积、长度等手段,将数字直观地表现出来。比如:数字越大,条形图越长;百分比越低,面积越小。但是,当我们分析玫瑰饼图时,它是如何展示数据的呢?当百分比越高,获得的圆圈的片段越大,而且片段越粗?

895b45a4d677a3bb1d092fda82e01dc0.png

这样可以清晰看到片段之间很多重叠部分,而重叠和超标背后的设计逻辑是什么?如何解读这些 “数据”?是否意味着图中显示超过100%,超过360度?

这些信息可以在饼状图上进行可视化,不过数据点的数量应该保持有限,否则,图表会变得拥挤,不易阅读。

3ff25eacd57f075328745f9e58b331bf.png

除此之外,你还可以将这样的图表类型作为矩形树图,相应区域的矩形代表百分比。虽然人们通常最擅长比较长度–平均线柱状图,不过区域也能很好地用眼睛进行比较。

89b0e5cf132c25deed976e26d9a5675c.png

玫瑰饼图问题

  1. 和经典的饼状图相比,玫瑰饼图不能清晰的表达数据信息。数据是用面积、曲线粗细还是扇形角来表示呢?
  2. 重叠的图形不能清晰表达数据信息,会让用户无法识别;
  3. 视觉太过花哨,无法完整展示真实数据。

总结

  • 如果数据不多,可以采用饼状图展示;
  • 可以尝试使用矩形树图展示数据。

四、像“山”一样的面积图

像“山”一样的面积图在可视化中也是常见的数据展示形式:

513cbd40f4944ab60ee0f4b46bd4b15b.png

在上面曲线图一章中,已经介绍过这个缺点–数据被修饰的厉害,现在还是来详细谈谈这个问题。上面精心设计的可视化归结为20个绿色和橙色的点。

86ce84e478c28ed0b544e3d2dc28b05b.png

所有的连接曲线都与数据无关,它们是人为添加的。也许是为了一个好的缘故–把不同的点统一成一个明确的趋势,也许是为了填补 “空白”,让它看起来更 “漂亮”。

来看看这个例子,很好反映了曲线图与面积图的问题:

eb1298966b3d5e7519081858f0a5862c.png

f922c918a1d63490cb26f4c7bd1148fa.png

这是一种替代方式——双色柱状图。不过,双色柱状图并不是唯一的选择。在实际数据对比度足够大、视觉效果有益的条件下,也可以选择图形,甚至用线条连接点的折线图。

477d7f950bae94ef7dfc74f7ce74f705.png

面积图问题

  1. 面积图同曲线图一样,给人一种数据连续性的印象,但真实的情况是一组有限的数据点;
  2. 曲线无法真实反映出真实数据的走向,有时数据变化是突然的、渐进的或波动的;
  3. 数据点之间必须有一定间隔,才能让曲线过渡自然,这样浪费了太多的空间。

总结

  • 设计时确保数据点与视觉效果之间有明显的区分,不能让视觉干扰识别;
  • 如果有重叠的图形时,不要使用颜色填充的方式来形成对比。

五、3D样式的柱状图

来看看这张图有什么问题?为什么不建议使用比呆板的矩形更有吸引力和原创性的东西呢?

3e128340f12c603843f5c2dde99f6691.png

这样的可视化有不少问题,但关键的问题是两个颜色柱状之间的空白,像”香肠 “一样的3D柱状图在有真实数据的地方显示了空位。

平心而论,3D柱状图的好处是保持高对比度,让你能看到绿色和橙色之间的边缘,但获得这种对比度付出的代价太大了。

1ba0c49028f298014b82cd4ed89c9fe8.png

计算一下,如果上图中整个柱子是100%的话,彩条之间的每一个微小的空隙大约等于3%。乍一看,不多吧?但有三个不同颜色的部分,需要两个空隙,所以–每列6%!这就是数据被 “偷窃比例”。而如果从环形图中计算出被盗的比例,就会达到7%左右,大约每个空隙3.5%。

把缺失的柱状部分放到下面的样式中,并把图例作为一个单独的项目去掉。此外,以前没有标题的圆环部分也赋予新的格式和名字(第四季度的平均值)。

2a4f794b83f2f1c5a77053861698ef83.png

是不是易读且清晰多了?

3D柱状图问题

  1. “香肠”式的柱状态略去了很多真实数据,无法为用户提供准确的数据进行分析和决策;
  2. 环形增加了占用面积,让组件不够紧凑,使得界面看上去相对杂乱一点。

思考

  • 不要用间距区分同一柱状上的数据,确保单体柱状总和要为100%;
  • 各数据段不要使用圆角,圆角处理的线段无法得到准确的数据。

六、3D柱状图

B端可视化的数据展示应该尽量不要使用像“摩天大楼”样的3D柱状图。

15eca25a42bb2b74bf93c6429ca69c38.png

3D图表缺乏准确性,当用户快速扫描界面发现很多数据无法准确、轻松的辨认,对用户造成错误的引导。

再来看看下面这张处理了的图:

38e9baf9614c53d414c1029b31680f13.png

当你一眼扫过去时,能快速识别出标了相同颜色的彩色点的柱状图是否一样高吗?相信就算仔细对比,也不会得到很肯定的答案。用绿色方块标记的是相等的,用红色圆圈标记的区块,第一个区块要高出3%——这就是3D视觉会使数据精度不够的问题。

然而,准确性不是唯一的问题,还有一个猜到了吗?3D柱状图占用过多空间了,也无法准确的反映数据自然、微妙的波动情况。

如图所示,要更好的区分各柱状的细微变化,就需要让组件更加的简化。而且,当数据柱状展示达到了一定的精度和亮度时,这种样式用在暗黑模式也是便于让用户识别的。还可以看出,采用这种形式,比3D节约了一半的空间。

15ea3ebfd14ebbc752bc2c82da85c17e.png

3D柱状图问题

  1. 3D柱状图样式太占空间了;
  2. 无法展示细微的数据波动;
  3. 顶部特别亮时,会让用户难以辨别顶点在哪里,影响数据读取。

思考

  • 尽量不要使用3D柱状图的样式;
  • 确保设计的时候,以及展示的数据与真实数据保持一致。

七、大集合

很多设计师通过绚丽的可视化来吸引用户眼球,但真正用起来就会发现实用性太差了。

2348d8942b142c792c00ba7670e35c5a.png

图中可以看到很多绚丽的视觉表现:阴影、透明度、体积、发光、圆角、等距形状等。但是,所有的组件填充了屏幕空间,提供的帮助却是零——这是上面六点的大集合。

71f6b1aad660d759333994f85d2d06f1.png

大集合问题

  1. 在视觉上,大集合的仪表盘设计绝对是吸引眼球的。但是数据却失去了精确性,界面也失去了实用性;
  2. 真实数据被展示出来时或多或少都会有一点误差,但是圆润的形状、阴影、渐变填充和3D效果会加大这种误差。

总结

  • 事先进行用户和业务调研,根据调研结果进行仪表盘设计;
  • 避免针对业务需求进行过于简单的仪表盘设计;
  • 在没有提示的情况下,让用户找到相应的数据,能够好的改进和完善可视化界面。

通过这篇文章,了解到了一些设计数据可视化时需要注意的点。在这方面,数据的准确性以及实用性是远远大于视觉方面的,希望给看文章的你也有所帮助。

相关推荐:

无感:新手指导_UI/UE/交互设计之间的区别和联系​zhuanlan.zhihu.com
39decd272b0e15a66dd21e61c193a526.png
无感:iOS14设计规范解析​zhuanlan.zhihu.com
153c5390d22b2593cfcad7cc83945d03.png
无感:小白必看_全面分析UI和UX的区别​zhuanlan.zhihu.com
16e513cea89e8757e23be7e88f06329a.png
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值