前言
全部课程
随着企业对互联网业务需求的增多,如今有越来越多的设计师,投身到B端产品设计的行列。B端产品中通常有大量数据的展示需求,于是如何借助合理的图表来展示数据关系,就变得非常亟需。

如图:百度统计使用柱形图来示意数据对比关系
常见的用于表现数据关系的图表包含:折线图,柱状图,饼图,直方图,环形图、面积图等。如果在某一分类下继续细分,又会涉及更深的子类,比如柱状图中包含有比较柱状图、堆积柱状图等。由于每一类图表中的数据,通常用来代表不同的分类构成,而图表选择恰当与否,往往会影响用户对数据关系的正确理解。
正确的选用图表
在现实的产品设计中,很多设计师在接收到数据图表的设计任务时,通常会将设计的重心放到视觉呈现上,而忽视了图表选择的合理性。很多设计师往往惊叹于别家产品设计的表现力,而想要在自家的产品中复刻相同的设计样式。要知道这些设计绚丽的图表类型,未必适合所有的产品。

如图:各类设计精美的图表样式
在现实的产品设计中,我们经常会遇到数据图表不当使用的案例,下面我们就以饼图为例加以说明。
有些产品会在多组数据中使用饼图来呈现数据对比关系。这些设计师显然对饼图的使用场景,以及优缺点,缺乏必要的理解。饼图的构成部分一定要控制在5个以内,过多的分类构成占比,将无法通过饼图得到充分的体现。但我们会在很多产品方案中,看到下面这种饼图,这显然并不恰当。

如图:通过饼图表现30多个省份的构成占比,并不能很好的通过饼图直观理解
同样是饼图的使用,我们会发现,很多产品的饼图各部分占比之和会大于1。要知道饼图主要用来标示整体和局部的关系,各部分构成相加之和一定是100%

如图:总和大于1的饼图,是一种错误的用法
还有一些产品设计,会在数据差距不明显的比照表现中,选用饼图,这显然不够恰当。要知道,使用饼图时,各部分构成一定在数量级上形成明显差异,如果相关构成无明显差异,就不能帮助使用者,更好的理解数据。

如图:数据占比差异并不明显,通过图表,不能帮助用户很好的理解数据,可以说在上述案例中图表作用等同失效
关于饼图的数据呈现顺序也有严格的要求,饼图在呈现数据时应该在12点钟方向开始,顺时针展示数据,同时应按照数据占比从大到小的顺序进行排列,如果我们那种这个标准去衡量许多产品的设计,就会发现问题非常多。

如图:饼图并没有从12点钟方向顺时针展示数据,数据较少时,给用户带来的使用不便并不明显,数据较多时,会给用户阅读带来困难
以上是以饼图为例,简单介绍了在单一图表选用不当,会给用户带来很多理解上的问题,那么很多读者可能就会有这样的疑问了,面对如此之多的可视化图表类型,我们该如何在具体的产品设计中,做出正确选择呢?我们不妨先从大的选择方向入手。
1.如果是用来表达数据随时间推移而发生动态变化,我们可以选择使用柱形图、堆积柱形图、折线图、面积图等

如图:案例通过使用折线图和面积图来表现数据随时间的变化关系
2.如果是用来对多组数据进行对比比较的,我们可以选择使用柱形图、比照柱形图、折线图等

如图案例,通过使用不同的分类折现,以及不同的柱体进行数据比较
3.如果是用来表达多组数据的排名关系的,我们可以选择使用柱形图和直方图等

如图,使用柱形图表达排名关系
4.如果是用来表达数据局部和整体关系的,我们可以选择使用堆积柱形图、饼图、环形图、堆积面积图等。

如图,使用环形图表达占比关系
上述图表类型都是我们在对数据可视化呈现时最高频使用的图表类型,关于每一种图表的特性,我们希望读者朋友能够仔细总结、理解消化,这样在具体的方案设计中,才能做到灵活选择
合理的使用颜色
当可视化图表类型得以确认后,很多设计者就开始对图表展示的美观度进行调整。很多设计者会为自己的图表选择更富表现力的颜色。但殊不知可视化图表的用色选择正确与否,同样影响用户对数据的理解。

如图:用色艳丽的各类图表
比如在可视化图表设计中,如果只是研究单组数据的运行情况,那么最好选用一种颜色进行设计。
如果是想要研究多组数据的比照关系,那么需要使用多种颜色来代表不同的数据类型。在运行多组数据的图表中,颜色的数量往往代表着分类的数量

如图:两条颜色线代表两个不同的分类
一些想要刻意凸显的重要数据,往往会选择使用高亮的颜色,来做出强调。颜色的深浅有时可以表达数量关系,比如数据稠密的区域,我们可以通过使用更深的颜色来表现。

如图:使用不同深浅的绿色来表意占比关系
颜色本身也具有一定的含义,比如红色代表:谨慎、愤怒、爱、负面(在金融方面)、热等,绿色则代表:自然、平静、正确等。所以我们在类型中指定用色时,需要充分考虑这一文化因素。
在一些产品设计中,如果使用人群中包含一些特殊群体,那么我们在用色选用上也要做充分考量。要知道大约每12 名男性或200 名女性中就有 1 名色盲。
在针对色盲人群进行设计用色选择时,一般遵循三条标准
1.黑白分明
在给你的图表着色前,请确保当前的图表的灰度值是否符合特殊人群使用
2.尽量使用蓝色
在所有的色盲人群中,蓝色往往是最容易被识别的,所以使用蓝色是一种比较安全的选择
3.避免使用绿色和红色
尽量避免同时使用蓝色和红色,因为这在色盲人群中,是最难区分的用色
最后
阅读完上文内容后,你就发现可视化图表设计,并不是一个任由设计师自由发挥想象力的地方,任何极富表现力的图表设计方案,都应方便用户理解,同时照顾到特殊群体需要。
作为设计者,我们在选用图表时,应该让理性思想占的上风,不应执拗为了视觉呈现美观,而选用不当的图表。我们要时刻铭记再漂亮的设计样稿,如果无法帮助用户直接明了的了解数据关系,那就不会是一个好的设计方案。