图表设计指南大全

  • A+
所属分类:经验思维

本文来源: 公众号-BIGD, 共 2306 字

哈喽小伙伴们~说到图表设计,相信大家一定不陌生了,在日常工作中也一定设计过各种各样的信息图表。但你真的了解图表设计,或者说会利用图表为你的产品创造更好的用户体验吗?

今天小编就跟大家说说“图表这些事儿”。

1,为什么要重视图表设计?

我们现在生活在一个由数据驱动的世界,无论是5G、AI、VR等科技网络发展,还是我们日常生活理念的改变,都让我们看到了未来数据发展的潜力。而作为在我们日常生活中最常接触到的数据可视化,各种网页、APP上的图表设计的重要性自然也就不言而喻。

图表设计指南大全

更重要的是,一个好的图表设计不仅可以简化界面,还可以在很大程度上提高用户体验。想象一下,如果你的健身APP、金融管理软件、旅游应用只提供给你大量枯燥的数字数据,你是不是一定会抓狂?

图表设计指南大全

2,那么我们如何做好图表设计?

图表其实是一个涉及了数学、科学、心理学和设计等多种学科的领域。因此当我们为数据寻求合适的呈现形式时,也一定要综合多方面的因素才能决定。接下来我们就从图表的分类着手,分析一下该如何选择图表?

谷歌Material Design中,为不同类型的图表做出了以下分类:

1.随着时间变化的图表 

图表设计指南大全

线图、条形图、面积图和时间线图都是我们常见的图表类型。但折线图更适合表达数据的微小变化。

图表设计指南大全

条形图更适合变化较大的数据,它可以让我们直观的感受到每项数据以及整体之间的比较.

堆叠条形图

图表设计指南大全

面积图通常用来表达数据与整体之间的变化。

图表设计指南大全

烛台图表常常被用来为股票市场的数据进行可视化处理。
图表设计指南大全

地平线图表比较适合包含正/负增长和收缩值的数据。

图表设计指南大全

瀑布图常用来表现从一个数字到另一个数字的变化过程。

图表设计指南大全

2.类别比较

图表设计指南大全

条形图、分组条形图和气泡图都是我们常见进行类别比较的图表类型,它们最大的好处就是直观、简单,用户一眼就能清楚的感受到数据之间的差异。

图表设计指南大全

图表设计指南大全

平行坐标图是处理大型数据时常用的最优可视化类型。

图表设计指南大全

多线图可以很好的呈现多个变量之间的关系。

图表设计指南大全

子弹图的优势在于它可以在有限空间内表达丰富的数据信息,例如阶段性的数据信息、多项同类数据的对比,以及一项数据与不同目标的校对结果等等。

图表设计指南大全

3.排行关系的图表

图表设计指南大全

有序条形图、有序列线图和平行坐标图都能很好的表现一组数据之间的排列关系。

图表设计指南大全

4.表现部分与整体关系的图表 

图表设计指南大全

堆叠条形图、饼图和甜甜圈图都是我们常见的表现部分与整体关系的图表。

图表设计指南大全

使用堆叠面积图时,需要注意分清它和重叠面积图之间的区别。在设计中,一般应该尽量避免使用超过两项的数据使用重叠面积图。

图表设计指南大全

图表设计指南大全

旭日图和扇形图类似,但要比扇形图更适合处理复杂、多层次的数据。

图表设计指南大全

5.表示相关性图表

图表设计指南大全

散点图、气泡图、条形折线图、热图都是我们常见表示两个或多个变量之间的相关性的图表。

散点图

图表设计指南大全

条形折线图

图表设计指南大全

热图

图表设计指南大全

6.表示数据分布的图表

图表设计指南大全

箱形图是一种显示一组数据分散情况资料的统计图。

图表设计指南大全

小提琴图主要用于显示数据分布及其概率密度。

图表设计指南大全

7.表示流程的图表

图表设计指南大全

桑基图中延伸的分支的宽度对应数据流量的大小,通常应用于能源、材料成分、金融等数据的可视化分析。

图表设计指南大全

甘特图可以通过条状图来展示项目的进度、流程以及它们之中的占比等等。

图表设计指南大全

网络图是我们常见的流程图表,和弦图应用范围极小,因此我们就不过多赘述了。

8.表现数据关联的图表

图表设计指南大全

网络图、韦恩图和旭日图是我们常见表现数据关联的图表,和弦图应用范围非常小,这里不过多赘述了。

以上就是我们设计中常见的所有图表类型了,相信大家应该对图表的选择有一定的了解。那么当我们选好了合适图表后,设计过程中又应该注意哪些地方呢?

3,图表的设计技巧&应该避免什么?

1.你真的需要图表吗?

很多设计师都会为了追求酷炫的效果而盲目使用图表,但其实在数据不足或无规律的情况下使用图表,只会让界面变得更加复杂。

图表设计指南大全

2.多个比一个更好

用户没有耐心搞懂你图表中的每一项数据,因此不如将一个复杂的图表拆成2-3个简单的图表展示,不仅会比使用单个图表更加简洁直观,还能让我们数据看起来更加丰富。

图表设计指南大全

3. 图表配色

图表设计的配色部分我们需要注意两点:

- 你选择的配色是否能突出重点?

图表设计中一定要避免使用太多的色彩,并且在数据之间提供足够的视觉区分。如果有需要突出的重点数据,那么一定要确保这些数据才是整个图表的视觉焦点

图表设计指南大全

- 你的图表配色是否符合设计情境?

不同的颜色会带给用户不同的感觉,同时也要和我们的品牌调性、产品类型、以及你数据想传达感受一致。比如一款运动类型的APP,我们最好选择充满活力的色彩。如果我们想要数据想传达一种势头良好的状态,那么一定不要选择红色。

图表设计指南大全

4.慎用使用3D图表

虽然3D效果的设计在近几年越来越流行了,但用在图表中最大的用处其实就是好看,仅此而已,它对用户理解图表的作用非常有限,甚至很多时候都是拉低我们图表的可用性的罪魁祸首。

图表设计指南大全

5.应该使用图释图例吗?

如果我们的图表非常简单、甚至用户看一眼就可以理解时,图释就会显得多余和繁琐了。但是如果我们的图表涉及到了相对复杂的数据,那么一个简洁而又清晰的图释和图例绝对可以大大提升我们的用户体验。

图表设计指南大全

6.巧妙利用图表比例

图表的纵横比可以在数据的感知方式中发挥重要作用,尤其是对于基于坡度的图表,如折线图、面积图和散点图。

比如在下图中,当同样一组数据的横纵坐标发生变化时,给人的感觉也会不一样。

图表设计指南大全

一般的经验法则是找到数据线平均斜率约为45°的纵横比,基于这个角度下的图表最具可读性的。

图表设计指南大全

那如果我们设计中就是有一个奇怪比例的图表时,该怎样解决?最好的解决办法就是让图表的比例决定页面的布局。

图表设计指南大全

不过需要注意的是,虽然我们可以改变横纵左边比例的方式在一定程度上影响用户的视觉感知,但一定要确保我们数据的初始为0,并使用相同的轴间隔。

说千遍不如看一遍,最后希望大家平时能多注意和搜集一些优秀图表的设计,或许哪天在工作中能给你带来灵感哦。


  • 版权声明:本文源自 公众号-BIGD, 共 2306 字。
  • 转载请注明,本文链接:图表设计指南大全

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: