X.d 笔记

小Web,大世界

0%

理论篇2:视觉变量

视觉变量

科学研究, 人类获取外界信息主要依赖于视觉,占总信息量的 83%, 听、嗅、味、触觉占17%。
人与外界交换信息大部分都是靠视觉,优秀的可视化更可以加快信息交换的效率,今天说说视觉变量

Information  visualization:  perception  for  design

上篇:《关于可视化的一些理论基础》说到,数据可视化的奠基人之一 Bertin,在他 1967 年发表的《符号图形学》中,给视觉定义了七个基本的视觉变量。
人眼在这些通道,有着很强的识别能力,这些视觉通变量成为可视化的一项理论基础。

Bertin

如上图,分别为:

  1. 位置 Position
  2. 尺寸大小 Size
  3. 图形形状 Shape
  4. 颜色:亮度 Color lightness
  5. 颜色:色相 Color hue
  6. 方向 Orientation
  7. 纹理 Texture

后面,又有其它学者,如 Joel Morrison、 Alan MacEachren 等, 对 Bertin 的列表做了补充:

  1. 颜色:饱和度 Color saturation
  2. 布局方式 Arrangement
  3. 脆度 Crispness
  4. 分辨率 Resolution
  5. 颜色:透明度

变量适用范围

根据数据类型的不同,和想表达的目的不同,需要合理选用,数据的类型可以概括为以下3类。

  • 分类:用于区分不同性质的数据。分类数据一般会使用颜色,位置,形状等变量进行区分。
  • 数量/顺序:用于比较两个数量之间的大小。可以用的变量很多,常见的是尺寸、位置等。
  • 关系:用于展示数据之间的关联。关系一般使用布局方式进行体现,最常见的是各种脑图,流程图,象限图等。

比如下面条形图:

条形图使用视觉变量

左图:使用了尺寸一个变量,可以清楚看到大小
右图:增加了颜色来区分前3,增加了分类意义。虽然使用了纹理,但只是用到装饰,没有数据变量的意义。

变量的敏感度

根据人眼对不同数据变量的

  1. 表示分类: 位置 强于 颜色:色相 强于 形状 强于 图案
  2. 表示数量/顺序: 坐标位置 强于 长度 强于 角度 强于 面积 强于 颜色:亮度/颜色:饱和度 强于 纹理密度
  3. 表示关系: 包含 强于 连接 强于 相似 强于 接近 (除相似外,都是布局方式变量)视觉变量敏感度

Bertin 也给变量的敏感度定义了四不同个等级,并称最不敏感且自己永远也不会使用的变量,是形状,非常难辨认。

视觉变量-形状

其实我倒认为不全是,广义上的形状有包含了图形,符号,emoji等,并非简单的多边形,可能是 Bertin 发表的年代计算机没有这些功能所致,比如下图:

视觉变量-形状-使用照片

在图形里面使用照片,冠军符号在目前计算机计技术实现起来已经非常简单,形状符号使用得当,不止表意更清晰,而且图形也会更加美观。

不要滥用变量

需要注意的是,变量的选用,应该是越少越好, 看下图:

使用的变量太多

只展示了一个维度的数据,确使用了颜色,大小,角度,等诸多视觉通道。
在实际使用中,这种滥用的情况实在是数也数不清。原因可能多种多样,其实际一个开发和设计更加简单的条形图,完全可以表达的要更好,更加一目了然:

使用的变量太多

除了滥用多个变量外,很多单个变量也是有能力范围的,比如一个饼图的分区太多,也基本上表达不出重点,使图形丧失意义:

使用的变量值太多

视觉感受

通过全理的视觉变量的组合,结合图形与用户之间的交互,可以让图形给用户带带一些视觉感受,增强产品的体验。

整体感与选择感

学过画画的朋友们,可能都会清楚,画面必须有整体感时,看到的才像是一个作品。

整体感指整体看上去,没有故意突出,故意淡化的部分。
选择感看上去正好与之相反,通过视觉变量形成对比,来增强视觉差别,进行交互指引。

层级感

层级感用于层级类型的数据,在层数不是很多的情况下,可以清晰的看出上下之间的关系连接。

数量感

数据感就是通过视觉通道的强度不同,感受到数量上的差异。
在表示数量/顺序的视觉变量里挑选,图形越复杂,数量感的差别准确率越低。

质量感

可以通过能够自然理解的(象形)图形,emoji 等符号代码物体或分类。
与图形相结合,可以快速让人联想到对象的类别、性质等。

动态感

动态感用来表现轨迹、时间变化趋势。
通过控制视觉变量的变化可以造成动画效果,给人运动的感觉。

立体感

在3D可视化中,可以利用立体感展示更多信息,达到更加炫酷的效果。
利用近大远小(尺寸)、光影变化(亮度)、压盖遮挡、色彩空间透视、网纹变化等3D专属的效果。

小结

刚才说到滥用数据变量,并不是要在这里倡导少用。
数据分析师甚至很多程序员一般倡导能少就少,但数据可视化不仅是要把数据表达出来,还要让对方能够有兴趣接受,比如在业界,经常要加一些对数据本身无意义的修饰:

视觉变量-在不同场景下的使用

过犹不及,在业界,极度过简与过度滥用都可能效果不理想,这里并没有一条明确的分界线,主要是参考需要表达的数据和需要给用户带来的视觉感受是否都已经做到就可以了。