视觉感知和认知
在可视化与可视分析过程中,用户是所有行为的主体:通过视觉感知(VisualPerception)器官获取可视信息、编码并形成认知(Cognition),在交互分析过程中获取解决问题的方法。在这个过程中,感知和认知能力直接影响着信息的获取和进程的处理,进而影响对外在世界环境做出的反应。
格式塔理论
意味着Shape(形状)或Form(构成)。它强调经验和行为的整体性,反对当时流行的构造主义元素学说和行为主义“刺激-反应”公式。格式塔心理学认为,整体不等于部分之和,意识不等于感觉元素的集合,行为不等于反射弧的循环。如果一个人往窗外观望,他看到的是树木、天空、建筑,而构造主义元素学说认为他应该看到的是组成这些物体的各种感觉元素,例如亮度、色调等。
在格式塔心理学家看来,感知的事物大于眼睛见到的事物;任何一种经验现象,其中每一成分都牵连到其他成分,每一成分之所以有其特性,是因为它与其他部分具有关系由此构成的整体,并不决定于其个别的元素,而局部过程却取决于整体的内在特性。完整的现象具有完整特性,它不能分解为简单的元素,其特性也不包含于元素之内。格式塔心理学感知理论最基本的法则是简单精炼法则,认为人们在进行观察的时候,倾向于将视觉感知内容理解为常规的、简单的、相连的、对称的或有序的结构。同时,人们在获取视觉感知的时候,会倾向于将事物理解为一个整体,而不是将事物理解为组成该事物所有部分的集合。
格式塔法则又称为完图法则,主要包括:
1、贴近原则(Proximity):当视觉元素(即一些被人识别的视觉感知对象)在空间距离上相距较近时,人们通常倾向于将它们归为一组。
2、相似原则(Similarity) :人们在观察事物的时候,会自然地根据事物的相似性进行感知分组,虽然实际上事物本身并不存在分组的意图。通常依据对形状、颜色、光照或其他性质的感知进行分组。贴近原则与相似原则的区别是采用空间距离或属性相似性对数据分组。
3、闭合原则(Closure):在某些视觉映像中,其中物体可能是不完整的或者不是闭合的,然而格式塔心理学认为,只要物体的形状足以表征物体本身,人们就会很容易地感知整个物体而忽视未闭合的特征。
4、共势原则(Common Fate):共势原则指如果一组物体具有沿着相似的光滑路径运动趋势或相似的排列模式,人眼会将它们识别为同一类物体。例如,如果有一堆点同时向下运动,另一堆点同时向上运动,人们自然地分辨出它们是两组不同的物体。
5、好图原则(Good Figure):好图原则指人眼通常会自动将一组物体按照简单、规则、有序的元素排列方式进行识别。个体识别世界的时候通常会消除复杂性和不熟悉性,并采纳最简化的形式。这种复杂性的消除有助于产生对识别物体的理解,而且在人的意识中这种理解高于空间的关系。
6、对称性原则(Symmetry)
对称性原则指人的意识倾向于将物体识别为沿某点或某轴对称的形状。因此,将数据按照对称性原则分为偶数个对称的部分,对称的部分会被下意识地识别为相连的形状,从而增强认知的愉悦度。如果两个对称的形状彼此相似,它们更容易被认为是一个整体。
7、经验原则(Past Experience):经验原则指在某些情形下视觉感知与过去的经验有关。如果两个物体看上去距离相近,或者时间间隔小,那么它们通常被识别为同一类。
格式塔(完形理论)的基本思想是:视觉形象首先是作为统一的整体被认知的,而后才以部分的形式被认知,也就是说,人们先“看见”一个构图的整体,然后才“看见”组成这一构图整体的各个部分。可视化设计必须遵循心理学关于感知和认知的理论研究成果。信息可视化指将信息通过图形元素的表达和重组,获得包含原始信息的视觉图像的过程。在信息可视化设计中,视图的设计者必须以一种直观的、绝大多数用户容易理解的数据-可视化元素映射对需要可视化的信息进行编码
RGB/CMYK
RGB色彩模型采用笛卡尔坐标系定义颜色,三个轴分别对应红色(R)、绿色(G和蓝色(B)三个分量。在该空间中,坐标原点代表黑色,任一点代表的颜色都用从坐标
原点到该点的向量表示。RGB色彩空间是迄今为止使用最广泛的色彩空间,几乎所有的电子显示设备,包括计算机显示器、移动设备显示组件等,都使用RGB色彩空间。RGB色彩空间是设备相关的色彩空间,即同一组R、G、B分量的值在不同设备上所展现的颜色不一定相同。另外,RGB色彩模型是一种加法原色模型,也就是说,颜色可以通过在黑色背景上混合不同强度的红色、绿色、蓝色获得,在目前主流的电子显示设备LCD(Liquid Crystal Display)或 OLED(Organic Light-Emitting Diode)中,像素由三个红、绿、蓝的子像素组成,通过电路控制子像素的亮度实现颜色的显示
CMYK通常用于印刷行业中,在硬拷贝、照相、彩色喷墨打印等系统中具有广泛的应用。CMYK四个字母分别表示青色(Cyan)、品红色(Magenta)、黄色(Yellow)和黑色(Black)。在实际的印刷环境中,理论上C、M、Y三种颜色的合成可以得到黑色,但是通常由于油墨中含有杂质或其他因素,得到的黑色往往呈现出深褐色或深灰色的现象。另外,三种颜色的打印也不利于输出纸张的立即干燥且需要非常精确的套印技术,而使用黑色油墨代替可以极大地节省成本。与RGB色彩模型相反,CMYK色彩模型是一种减法原色模型,通过在白色背景上套印不同数量的三种油墨,通过吸收光源中相应波长的方法得到反射颜色。根据不同的油墨、介质和印刷特性,存在多种CMYK 色彩空间。由于印刷和计算机屏幕显示使用的是不同的色彩模型,计算机一般使用RGB色彩空间,所以在计算机屏幕上看到的影像色调和印刷出来的有一些差别,主要原因是这两种色彩模型所能表示的色域不同。在进行可视化设计的过程中,如果可视化的结果需要被打印到纸质媒介上,则必须考虑颜色在不同色彩空间之间转换所带来的色彩畸变,从而尽量避免这种现象。
HSV/HSL
HSV/HSL色彩空间是两个不同的色彩空间。在HSV色彩空间中,H指色相(Hue)S指饱和度(Saturation),V指明度(Value)。降低饱和度相当于在当前颜色中加入白色而降低明度相当于在当前颜色中加入黑色。在HSL色彩空间中,L表示亮度(Lightess)HSV色彩空间和HSL色彩空间可以用圆柱体坐标系表示,在圆柱体坐标系中,角度坐标代表色相,从0°表示的红色开始,经过120°表示的绿色,240°表示的蓝色,最终回到 360°(=0°)表示的红色,60°、180°和 300°分别表示第二主色--黄色、青色和品红色。在 HSL和 HSV 圆柱体中,中轴由无色相的灰色组成,明度值或亮度值从0表示的黑色到1表示的白色。在HSV色彩空间中,具有饱和度值1和明度值1的颜色在 HSL 色彩空间中的亮度值为 1/2。
注意到在HSL色彩模型中,非常亮的颜色和非常暗的颜色具有同样的饱和度。例如,用 HSL 描述的颜色 <0.1.000,0.102>和 <300,1.000,0.965>都具有相同的饱和度值1(用RGB 色彩模型可以分别描述为<51,0,0>和 <255,238,255>),而这与人类关于颜色纯度的直观感知略有违背。因此,可以引入一个称为色度(Chroma)的概念,然后使用双圆锥体表示 HSL 色彩空间。因此,上述两种颜色的色度值都小于1。相应地,用圆锥体表示HSV色彩空间
绝对色彩空间与相对色彩空间
绝对色彩空间是指不依赖于外部因素就可以准确地表示颜色的色彩空间,而相对色彩空间无法通过一组值准确地表示颜色,即相同的值未必能使人得到相同的色彩感知。
CIE L*a*b* 定义的是一个绝对色彩空间,一组<L*,a*,b*>值就能定义一种精确的颜色,也就是说,只要在这个色彩空间规定的观察条件下,这一组<L*,a*,b*>所代表的颜色就是确定的。
非绝对色彩空间的例子有 RGB色彩空间。虽然RGB色彩空间通过红、绿、蓝的混合生成各种颜色,但这些颜色没有精确的定义。也就是说,在两个不同的计算机显示器或其他 RGB 设备上,同一个RGB图像可能看起来会非常不同。将RGB色彩空间转换为绝对色彩空间的一种方法是定义一个International Color Consortinum(ICC)色彩配置文件,以规定 R、G、B的精确属性。这种做法已成为业界的标准方法,目前被广泛采纳的绝对RGB色彩空间有SRGB色彩空间、Adobe RGB色彩空间等。
视觉编码原则
可视化将数据以一定的变换和视觉编码原则映射为可视化视图。用户对可视化的感知和理解通过人的视觉通道完成。在可视化设计中,对数据进行可视化(视觉)元素映射时,需要遵循符合人类视觉感知的基本编码原则,这些原则跟数据类型紧密相关。在通常情况下,如果违背了这些基本原则,将阻碍或误导用户对数据的理解。
相对判断和视觉假象
人类感知系统的工作原理决定于对所观察事物的相对判断。例如在日常生活中(专业领域除外),人们通常会选取一个参照物,而将另外一个物体的尺寸描述为其相对于参照物的尺寸的变化量,并将比较结果描述成“A比B长大约2厘米”或“C比D要大一些这样的形式。Weber 定律描述了这一现象:人类感知系统将可察觉的刺激强度的变化 表达为一个目标刺激强度,的一个固定的百分比K,即K=8 。然而,精确地进行相对判断是有条件的,即如果物体使用相同的参照物或者相互对齐进行判断,则会有助于人们做出准确的相对判断。当两条线段被随意地放置在一个平面中时,很难判断它们的长短,因为它们既没有相同的参照物,也没有进行端点的对齐以便比较长短。当在它们附近各放置一条相同长度的线段,并与它们进行对齐时,判断原先两条线段就会变得容易。新添加的线段充当了参照物的作用.
标记和视觉通道
可视化编码(Visual Encoding)是信息可视化的核心内容,是将数据信息映射成可视化元素的技术,其通常具有表达直观、易于理解和记忆等特性。数据通常包含了属性和值,因此,类似地,可视化编码由两方面组成:标记(图形元素)和用于控制标记的视觉特征的视觉通道。前者是数据属性到可视化元素的映射,用于直观地代表数据的性质分类;后者是数据的值到标记的视觉表现属性的映射,用于展现数据属性的定量信息,两者的结合可以完整地对数据信息进行可视化表达。
在可视化中,标记通常是一些几何图形元素,如点、线、面、体等;标记具有分类性质,因此不同的标记可用于编码不同的数据属性。视觉通道则用于控制标记的展现特征,从定量的角度描述标记在可视化图像中的呈现状态。通常可用的视觉通道包括标记的位置、大小、形状、方向、色调、饱和度、亮度等。视觉通道不仅具有分类性质,也具有定量性质,因此一个视觉通道可以编码不同的数据属性(如形状),也可以用于编码一个属性的不同值(如长度)。另外,作用于一个标记的多个视觉通道结合则可以用于编码多个属性或一个属性的多个子属性。
标记可以根据空间自由度进行分类,比如点具有零自由度,线、面、体分别具有一维二维和三维自由度。视觉通道与标记的空间维度之间是相互独立的,视觉通道在控制标记的视觉特征的同时,也蕴含着对数据的数值信息的编码。人类感知系统则将标记的视觉通道通过视网膜传递到大脑,处理并还原其中包含的信息。
视觉感知系统是迄今为止人类所知的具有最高处理带宽的生物系统。人眼具有很强的模式识别能力,对可视化符号的信息获取能力远高于对文本和数字的直接识别。将数据信息以可视化视图进行呈现,其关键步骤是对数据信息进行编码,即将数据属性以标记呈现后,通过视觉通道控制标记的呈现方式。
视觉通道的类型
人类感知系统在获取周围信息的时候,存在两种最基本的感知模式。第一种感知模式得到的信息是关于对象的本身特征和位置等,对应于视觉通道的定性性质或分类性质,即描述对象是什么或在哪里。第二种感知模式得到的信息是关于对象的某一属性在数值上的程度,对应于视觉通道的定量性质或定序性质,即描述对象某一属性的具体数值是多少。例如,形状是一种典型的定性视觉通道,即人们通常会将形状分辨成圆、三角形或矩形,而不是描述成大小或长短;另一方面,给定这三种形状,人们也无法给出一个确切的顺序。长度则是典型的定量视觉通道,用户显然会直觉地用不同长度的直线描述同一数据属性的不同值,而很少用它们描述不同的数据属性,因为长线、短线都是直线。
在可视化设计中,一些视觉通道被认为属于定性的视觉通道,例如形状、颜色的色调、空间位置,而大部分的视觉通道更适合于编码定量的信息,例如直线长度、区域面积、空间体积、斜度、角度、颜色的饱和度、亮度等。然而,视觉通道的两类性质不具有明确的界限,例如,当把空间中的两个点到某一选定点的距离编码数据信息时,空间位置也能用来描述定量的数据属性。
视觉通道的第三种性质是分组性质。分组通常是针对多个或多种标记的组合描述的。最基本的分组通道是接近性,根据格式塔原则,人类的感知系统可以自动地将相互接近的对象理解为属于同一组。人们总是会试图根据这些点的相对位置对它们进行分组:很显然,这一分组期望被实现了,人们很少会将它们看成独立的10个点。除了利用位置上的接近性,视觉通道的分组性质还可以通过颜色的相似性、显式连接、显式包围等方法实现
从方法学上而言,定性的视觉通道适合编码分类的数据信息,定量或定序的视觉通道适合编码有序的或者数值型的数据信息,而分组的视觉通道则适合将存在相互联系的分类的数据属性进行分组,从而表现数据的内在关联性。
表现力和有效性
视觉通道的性质类型(定性、定量、分组)基本决定了不同的数据所采用的视觉通道,而视觉通道的表现力和有效性则指导可视化设计者如何挑选合适的视觉通道,对数据信息进行完整而具有目的性的展现。简单地说,用表现力更高的视觉通道编码数据中更重要的数据属性,将有助于提高可视化结果的有效性。
视觉通道的表现力要求视觉通道仅仅编码数据包含的所有信息。也就是说,视觉通道在对数据进行编码的时候,需要尽量忠于原始数据所包含的信息。例如,对于有序的数据,为了利用人类感知系统的自然而本能的感知能力,使用定序的而非定性的视觉通道对数据进行编码,反之亦然。如果随意使用视觉通道编码数据信息,不仅无法利用视觉通道的表现力,反而会使用户无法理解或错误理解可视化结果。
人类感知系统对于不同的视觉通道具有不同的理解与信息获取能力,因此可视化设计者就应该很自然地使用高表现力的视觉通道编码更重要的数据信息,从而使得可视化的用户可以在更短的时间内更加精确地获取数据信息。例如,在编码数值的时候,使用长度比使用面积更加合适,因为人们的感知系统对于长度的模式识别能力要强于对于面积的模式识别能力。视觉通道的有效性要求具有高表现力的视觉通道用于更重要的数据属性编码。
表现力的标准:精准性、可辨认性、可分离性
平面位置
平面位置是唯一的既可用于编码分类的数据属性,又可用于编码定序或定量的数据属性的视觉通道。另外,对象在平面上的接近性也可以用于编码分组的数据属性。平面位置是所有视觉通道中最特殊的一个。由于可视化设计大多在二维空间,平面位置对于任何数据都非常有效,甚至是最有效的。因此,使用平面位置编码哪种数据属性是设计者首先面临并需要解决的问题,其结果甚至将直接主导用户对于可视化结果图像的理解。
水平位置和垂直位置属于平面位置的两个可以分离的视觉通道,当需要编码的数据属性是一维时,可以仅选择其一。水平位置和垂直位置的表现力与有效性的差异比较小,但也有不少研究指出,受真实世界中重力效应的影响,垂直位置会比水平位置具有略高的优先级,即在相同条件下人们更容易分辨出高度的差异。基于此考虑,显示器的显示比例通常被设计成包含更多的水平像素,从而使水平方向的信息含量可以与垂直方向的信息含量相当。
位置关系能够帮助揭示数据间的关系。
颜色
在所有的视觉通道中,颜色是最复杂的,也是可以编码大量数据信息的视觉通道之一,因此在可视化设计中也最常用。
从可视化编码的角度对颜色进行分析,可以将颜色分为亮度、饱和度和色调三个视觉通道,其中前两个可以认为是定量或定序的视觉通道,而色调属于定性的视觉通道。在使用一般术语“颜色”时,通常指的是这三个独立的视觉通道的结合整体,因此可以认为“颜色”既是分类的也是定量的视觉通道。
亮度
亮度适合于编码有序的数据,然而需要注意的是亮度通道的可辨性较小,一般情况下,在可视化中尽量使用少于6个不同的可辨的亮度层次。另外,相比于其他两个视觉通道(饱和度和色调)的对比度,亮度的对比度所形成的边界现象更加明显。由于人类感知系统是基于相对性进行判断的,所以受到对比度效果的影响后,人们对于亮度的感知缺乏精确性。
饱和度
饱和度是另一个适合于编码有序数据的视觉通道。作为一个视觉通道,饱和度与尺寸视觉通道之间存在非常强烈的相互影响,在小尺寸区域上区分不同的饱和度明显要比在大尺寸区域上区分困难得多。和亮度一样,饱和度识别的精确性也受到对比度效果的影响。
在大块区域内(如背景),标准的可视化设计原则是使用低饱和度的颜色进行填充:对于小块区域,设计者需要使用更亮的、饱和度更高的颜色填充,以保证它们可以比较容易地被用户辨认。点和线是典型的小块区域的标记,因此使用饱和度编码具有不同意义的点和线时能够容易被辨认的饱和度层次较低,通常只有三层:对于大区域的标记,如面积,可以使用的饱和度层次则会略多。
色调
色调非常适合于编码分类的数据属性,并且也提供了分组编码的功能。虽然在表现力排序上处于“位置”之后,但可以为可视化增加更多的视觉效果,在实践中被广泛使用。
然而,色调和饱和度都面临着与其他视觉通道相互影响的问题。例如,在小尺寸区域中人们难以分辨不同的色调。同样地,在不连续区域中的色调也难以被准确地比较和区分。一般情况下,由于色调属于定性的视觉通道,因此色调具有比亮度和饱和度更多的可区分层次,人们在不连续区域的情况下通常可以分辨多达6~12种色调,在小尺寸区域着色的情况下,可分辨的层次数量受到视觉通道相互影响而略有下降。,人们虽然可以通过比较而容易地区分相邻区域的不同色调,然而在总体上,由于相同和相近的色调在多个不连续的区域内出现,人们在归类相同色调的同时,也倾向于将相近的色调(如图中的一些绿色色调)划归入同一个范畴,也就是说,人们通常无法正确说出左图中包含的不同色调的数量。由于同一色调在一个连续的区域内,因此正常色觉的用户都能对这不同的色调进行区分。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)