对啊网设计学院:网页设计数据可视化

 数据可视化是讲述数据故事的好方法。但是最好的方法是什么?对人类感知和认知的理解可以帮助设计师有效地做到这一点。

  心理学与数据可视化有什么关系?

  视觉感知是查看,解释和组织环境的能力。数据可视化可以利用人脑的自然能力,因此非常有效。

  在视觉上呈现数据可以加快我们的感知速度,并有助于减轻认知负担。

  在下面的示例中,该表格可让我们看到准确的数字。但是,我们能否迅速得出可再生水资源的最高和最低数字?并不容易,但是当在右侧的条形图中直观显示时,相同的数据变得更加清晰和易于理解。

 

  注意前处理

  视觉处理不仅在感觉输入中占主导地位,而且数据量和处理速度远远高于我们所意识到的。这种现象称为“预注意处理”。这是潜意识的,快速的。眼睛传输和大脑处理视觉刺激的注意前属性需要200-500毫秒(这比大脑处理电子表格数据的速度要快得多)。

  细心的处理对设计人员来说是福音,因为它的熟练部署可以使人们更快地理解呈现的内容。高素质的设计师可以帮助查看数据可视化的人更快,更轻松地吸收更多信息,因为它减轻了有意识的处理并减少了内存负载。

  视觉变量

  由雅克·贝尔汀(Jacques Bertin)引入的视觉变量是人眼感知到的元素之间的差异。经过长时间的研究,这些变量提供了一种手段来理解人脑如何处理和导航视觉信息。最初的“视网膜变量”集由七个变量组成:位置,大小,形状,值,颜色,方向和纹理。

  根据Bertin,以下图表显示了一些视觉变量的示例,这些变量可用于显示定性或定量差异。

  共同比例尺上的位置

  因为我们共享一个公共的空间参考系,所以位置是最容易识别和评估空间元素的功能。

  示例:条形图,散点图

 

  不对齐,相同比例的位置

  比较在同一轴上重复的各个比例尺很容易,即使它们未对齐也是如此。面板图或“小倍数”就是一个很好的例子。所有图表均遵循相同的视觉格式,但显示不同的数据集。与单个较大的图表相比,较小的倍数有助于绘图,因为当绘图项太多时,数据可能会变得模糊。

  示例:小倍数

 

  长度

  长度可以有效地表示定量信息,因为元素的长度可以缩放到它们表示的数据值。即使对象未对齐,人脑也可以轻松识别比例并评估长度。

  示例:条形图

 

  方向

  方向很容易被人眼识别。例如,它可以使用折线图和趋势图来显示随时间变化的数据。

  示例:趋势图

 

  角度

  角度通过提供比例感来帮助进行比较。研究表明,比长度或位置更难评估角度。但是,饼状图与堆积的条形图一样有效,除非整体上包含三个以上的部分。

  示例:饼状图

 

  区域

  面积的相对大小很难与线的长度进行比较。第二个方向需要更多的努力来处理和解释。

  示例:气泡图

 

  体积

  体积是指在二维空间中使用3D对象,这使它们很难评估。但是,研究表明,比较相同尺寸的两个形状时,可以更精确地感知3D对象。

  示例:3D条形图

 

  颜色饱和度

  颜色饱和度是指单个色调的强度。颜色强度的增加可以直观地看作是价值增加的数字。但是,很难精确评估结果。

  示例:热图

  颜色

  色彩仍然是数据可视化设计人员在显示数据时传达含义和清晰度的强大工具。然而,至关重要的是,设计师必须了解色彩的工作原理以及色彩的作用和不好之处

  颜色讲故事

  颜色不仅仅是装饰。需要有意义和战略性地使用它。颜色应有助于讲述一个故事并传达所呈现数据集的目标。俗话说“少即是多”。

  对比色应用于数据含义上的差异,以减少认知负担。颜色还可以强调可视化的主要元素。

  缺少颜色不会使好的图表效果降低。在构想阶段,灰色是一个很好的起点,一旦确定了焦点,则应用颜色将突出这些部分。

 

  格式塔原理在数据可视化中的应用

  感知的格式塔原理可以帮助阐明大脑在试图理解视觉信息时如何基于共同特征来组织元素。格式塔理论的基础是,人的大脑将通过下意识地将各个部分安排到一个创建整个系统的有组织的系统中,而不是仅仅由一系列不同的元素,来尝试简化和组织由许多元素组成的复杂图像或设计。

  相似

  相似性原则表示,我们的思想将自动将具有共享视觉属性的元素归为“相似”。相似的颜色,相似的形状,相似的大小和相似的方向被视为一个组。下表中说明了这一原理。

  与左侧图表不同(颜色不同的条形图)相反,它们在右侧是相同的蓝色。考虑到只有一个变量(成本/收入),这是有道理的。将条形设置为相同的颜色可以更轻松地理解数据,并消除因左侧使用不同颜色而导致的其他认知压力。

 

  接近

  接近比相似更有效,因为人眼根据元素彼此之间的接近程度来感知元素之间的相关性。

  在下面的图表中,目标是比较三个季度中按国家/地区划分的销售额。虽然可以很容易地比较每个国家/地区在一个季度内的销售额,但它们之间的相近性对分析按国家/地区划分的销售额构成了挑战。

 

  修订后的图表可以更清楚地传达信息。在这种情况下,信息将优先级集中在可视化目标上,因为它将主要数据点保持在一起。

 

  区域

  帕尔默(Palmer)在1992年提出的“ 共同区域原则”证明了具有明确边界的元素的包围如何在它们具有共同区域的情况下被视为一个群体。

  在下面的示例中,灰色阴影区域内的三个条形图似乎是组的一部分。此技术可帮助查看者将注意力集中在图表中的一组对象上。

 

  结论

  了解人类感知和认知过程的关键要素是设计出色的数据可视化的重要部分。在处理具有数据可视化需求的产品时,设计人员需要注意人脑的视觉感知过程和基本的数据可视化设计原则。

  熟悉视觉感知的格式塔原理可以为设计人员带来很大的好处,并帮助他们理解大脑如何将复杂的图像转换为图案。在设计数据可视化和设计更有效的图表时,在实现更明确的视觉层次的过程中,牢记这些原则非常重要。

  此外,了解注意前的处理和视觉变量以及正确的颜色应用,将使设计师能够创建更有效的数据可视化。

相关产品

评论