作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
Tetiana Donska
验证专家 在设计
11 的经验

Tetiana是一位多学科设计师,帮助初创公司和企业公司建立以人为本的设计解决方案.

分享

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

几千年来,人们一直使用视觉来帮助讲述故事,并说明基本问题的答案. 最早的数据可视化例子可能是27年左右的一张地图,1000年前, 很长一段时间, 除了地理之外,我们很少看到其他领域的数据可视化.

我们的大脑是专门用来识别模式和联系的吗? 今天,我们生活在数据可视化的黄金时代. 事实证明,有效地沟通数据具有挑战性, 虽然图表可以帮助我们理解复杂的数据,甚至从一个新的角度看待它, 当涉及到正确地向受众传递消息或根据数据做出业务决策时, 可视化可能是实现这一目标的关键方法. 但是 is 在数据可视化的力量背后?

数据可视化设计的历史背景

数据可视化有着悠久的历史,在17世纪和19世纪之间取得了重大进展. 用图形表示定量数据的想法出现在18世纪,当时 勒奈·笛卡尔 发明了二维坐标系统,用于数学运算显示数值. 该系统得到了改进 威廉公平联盟 开创了我们今天所知的图形形式. 人们认为他发明了线形图和条形图,后来又发明了饼图和圆形图.

数据可视化例子:Playfair 1801年的馅饼圆线形图

多年来,使用定量图表变得更加普遍. 20世纪下半叶,随着雅克·贝尔坦(雅克·贝尔坦公司)著作的出版,他们的方法和有效性得到了显著提高 图形学符号学. 他的工作至关重要,因为他发现,为了直观地呈现信息, 很明显, 有效地, 视觉感知 按照可以遵循的规则和模式运作.

Bertin研究了不同类型图表的有效性. 在下面的例子中, 饼状图显示了几个国家各种肉类的生产情况. 伯坦认为这些都是“无用的”.“在中间,通过使用矩阵可视化, 高级模式变得更加直接可见. 在右边, 因为国家和肉类生产并没有一个自然的秩序, 可以生成许多其他矩阵(包括所示的示例),它们提供了更多的清晰度. 在这个场景中,类别的重新排序显著改善了数据的表示.

数据可视化设计

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

视觉感知是一种观察、解读和组织环境的能力. 数据可视化可以非常有效,因为它利用了人类大脑的自然能力. 它又快又高效.

约翰·图基, 有影响力的美国数学家和理论统计学家, 他说:“一张照片最大的价值在于它能迫使我们注意到我们从未预料到的东西.”

认知, 哪个是由大脑皮层处理的, 更慢,需要更多的努力来处理信息. 以视觉方式呈现数据可以加速我们的感知,并有助于减少认知负荷.

在下面的例子中,表格让我们看到精确的数字. 然而,我们能否迅速得出可再生水资源的最高和最低数字? 不容易, 但是,同样的数据在右边的条形图中呈现出来时,会变得更加清晰易懂.

数据可视化原理

丹麦物理学家的一个例子恰当地说明了与其他感官相比,视觉感知的主要影响 Tor Norretranders. 他通过将人类感官的能力转化为标准的计算机吞吐量,展示了视觉的力量. 视觉是最重要的,因为它具有与计算机网络相同的带宽. 它的通道容量比触觉高10倍,比听觉或嗅觉强100倍. 右下角的小方块是我们感知感官体验的地方.

数据可视化心理学

Pre-attentive处理

不仅视觉处理支配着感官输入, 我们处理的数据量和速度远比我们意识到的要高. 这种现象被称为“前注意加工”.“这是潜意识的,而且速度很快. 眼睛传输和大脑处理视觉刺激的预先注意属性需要200-500毫秒(这比大脑处理电子表格数据的速度快得多)。.

“前注意加工是潜意识地从环境中积累信息. 所有可用的信息都是预先仔细处理的. 然后,大脑过滤并处理重要的信息. 具有最高显著性(最突出的刺激)或与一个人正在思考的内容相关的信息被有意识(注意)处理选择进行进一步和更完整的分析.——出自 维基百科

预先注意处理对设计师来说是一个福音,因为它的巧妙部署可以让人们更快地理解所呈现的内容. 一个高度称职的 设计师 可以帮助查看数据可视化的人更快、更省力地吸收更多信息吗, 因为它减轻了有意识的处理,减少了记忆负荷.

预先注意处理的优点:

  • 快速/自动
  • 情感
  • 冲动/驱动器
  • 习惯
  • 信仰
  • 刻板
  • 潜意识

许多 视觉变量 触发预先注意的反应. 通过学习 视觉元素 自动强调,然后合并到仪表板, 我们可以设计可视化,有效地讲述数据的故事.

视觉变量

引入的 雅克·贝尔坦公司视觉变量是人眼感知到的元素之间的差异. 学习了很长时间, 这些变量提供了理解人类大脑如何处理和导航视觉信息的方法. 最初的一组“视网膜变量”包括七个变量:位置, 大小, 形状, 价值, 色调, 方向, 和纹理.

根据Bertin的说法,下面的图表显示了用于显示定性或定量差异的视觉变量的例子. 它们还演示了一种通过点、线或区域表示属性的方法.

1984年,威廉·克利夫兰(William Cleveland)和罗伯特·麦吉尔(Robert McGill)进行了一项研究,根据人脑识别两种形状之间差异的容易程度,对两种形状最常见的方面进行了排名. 他们将以下视觉特征按准确度从高到低排序:

在公共尺度上的位置

因为我们有共同的空间参照系, 关于空间中的元素,位置是最容易识别和评估的特征.

例子:条形图,散点图

数据可视化设计中的可视变量

沿着不对齐的、相同的尺度的位置

用相同的轴来比较不同的尺度是很容易的,即使它们没有对齐. 面板图或“小倍数”就是一个很好的例子. 结果是一个图表网格,它们都遵循相同的视觉格式,但显示不同的数据集. 与单一的, 更大的图, 小的倍数可以帮助过度绘图, 当数据可能变得模糊或闭塞,因为有太多的标绘项.

示例:小倍数(也就是Rellis, Lattice, Grid和Panel图表)

小倍数的数据可视化最佳实践示例

长度

长度可以有效地表示定量信息,因为元素的长度可以缩放到它们所表示的数据值. 人类的大脑很容易识别比例和评估长度, 即使对象没有对齐.

示例:条形图

条形图是最好的数据可视化技术之一

方向

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

示例:趋势图

趋势图在数据可视化设计中有着广泛的应用

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

示例:饼状图

饼状图可能是一种有效的数据可视化技术

Area

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

示例:气泡图

气泡图有利于直观地呈现数据

体积

体量是指在二维空间中使用三维物体, 这使得它们很难评估. 然而, 研究表明,当比较相同维度的两个形状时,可以更精确地感知三维物体.

例如:3D条形图

3D条形图有利于数据的可视化呈现

色彩饱和度

色彩饱和度指的是单一色调的强度. 颜色强度的增加可以直观地感知为数值的增加. 然而,很难精确地评估结果.

例如:热图

热图很适合用于大数据展示

理解可视化变量的排序对于创建引人注目的数据可视化非常重要. 然而,这并不意味着设计师需要局限于条形图和散点图. 克利夫兰和麦吉尔指出, 这种排序并没有产生显示数据的精确处方,而是一个工作框架.”

Color

当涉及到对图案和行为的感知时,色彩饱和度和阴影是最不准确的, 据威廉·克利夫兰说. 尽管如此,颜色仍然是一个强大的工具 数据可视化设计者 在显示数据时传达意义和清晰度. 这是至关重要的, 然而, 设计师了解颜色是如何起作用的,它能做什么,不能做什么.

背景色彩

我们对颜色的感知取决于环境、颜色以及它与周围物体的对比.

一个很好的例子是Akiyoshi Kitaoka的实验, 他是日本立命馆大学心理学系的教授, 他在黑白渐变上滑动一张灰纸. 这张纸左右移动时似乎会改变颜色. 每时每刻,我们对颜色的感知都是不同的,因为周围有不同深浅的灰色. 请看下面的视频:

在他的文章中 在图表中使用颜色的实用规则, Stephen Few从这些观察中得出了一些实用的规则:

  1. 如果您希望表或图中相同颜色的不同对象看起来相同, 确保背景——环绕它们的颜色——是一致的.
  2. 如果您希望表或图中的对象易于看到, 使用与物体形成充分对比的背景色.

颜色讲故事

色彩不仅仅是装饰. 当有意义和有策略地使用它时,效果最好. 颜色应该有助于讲述一个故事,并传达所呈现数据集的目标. 俗话说,“少即是多”.”

对比色只适用于数据中意义的差异,以减少认知负荷. 颜色也可以强调可视化的主要元素.

没有颜色并不会降低一张好的图表的效果. 在构思阶段,灰色是一个很好的起点, 一旦确定了重点, 色彩的运用会突出这些部分.

数据可视化心理学利用了良好的色彩组合

定义调色板

数据可视化设计人员应用的一组颜色可以完全改变数据的含义. 根据数据的性质,许多工具可以帮助选择有意义的调色板. 下面是几个例子:

  • ColorBrewer. 调色板分为三种类型:
    • 分类的(用于将项目分成不同的组)
    • 顺序(用于编码数量差异)
    • 不同
  • 即调色板. 即调色板负责可访问性, 为色盲设计, 以及感知上均匀间隔的阴影. 它包括一个“颜色报告”,可以识别在不同情况下可能看起来相同的色调.

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

完形原则 感知可以帮助阐明大脑在试图理解视觉信息时是如何基于共同特征组织元素的. 格式塔理论基于这样一种观点,即人脑会试图简化和组织复杂的图像或设计,这些图像或设计由许多元素组成,潜意识地将各个部分安排成一个有组织的系统,从而形成一个整体, 而不仅仅是一系列不同的元素.

相似

相似性原理表明,我们的大脑会自动将具有共同视觉属性的元素归类为“相似”.“相似的颜色、相似的形状、相似的大小和相似的方向被认为是一个群体. 下面的图表说明了这一原则.

而不是左边的图表,有不同颜色的条形图, 右边的是同样的蓝色. 考虑到只有一个变量(成本/收入),这是有道理的. 使用相同颜色的条形图可以更容易地理解数据,并消除由于在左侧使用不同颜色而造成的额外认知压力.

格式塔原理常用于数据可视化原理

接近

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

在下面的图表中,我们的目标是比较三个季度各国的销售额. 虽然比较每个国家在一个季度内的销售额很容易,因为它们的距离很近, 按国家来分析销售额是很有挑战性的.

通过使用最佳数据可视化工具所使用的接近原理,可以实现良好的分析

修订后的图表更清楚地表达了这一点. 在这种情况下, 信息的优先级集中在可视化目标上, 因为它使主要数据点更紧密地联系在一起.

接近性是数据可视化原则之一

外壳

共域原理, 由帕尔默于1992年提出, 演示了具有明确定义边界的元素如何在共享公共区域时被视为一个群体.

在下面的示例中,灰色阴影区域内的三个条似乎是一个组的一部分. 这种技术可以帮助查看者专注于图表中的一组对象.

数据可视化设计可以利用公共区域原理

结论

理解人类感知和认知过程的关键要素是设计优秀数据可视化的重要组成部分. 当开发具有数据可视化需求的产品时,无论是B2B仪表板还是金融应用程序设计师 需要注意人类大脑的视觉感知过程和基本的数据可视化设计原则.

对众所周知的熟悉 视觉感知的格式塔原理 能给设计师带来很大的好处,帮助他们理解大脑是如何将复杂的图像转换成图案的. 在设计数据可视化和设计更有效的图表时,在实现更明确的视觉层次结构的过程中,记住这些原则是有价值的.

另外, 意识到注意前处理和视觉变量, 以及色彩的正确运用, 将授权设计师创建更有效的数据可视化.


让我们知道你的想法! 请在下面留下你的想法、评论和反馈.

了解基本知识

  • 为什么数据可视化很重要?

    数据可视化可以提供传统描述性统计无法提供的洞察力. 随着当前数据的快速扩散, 数据可视化设计是一种强大而连贯的方式,可以直观地传达定量内容,使用户能够更轻松、更快速地处理大量信息.

  • 为什么可视化如此强大?

    我们的视觉提供信息的速度比其他感官快得多, 我们甚至在思考之前就处理了我们所看到的东西. 数据可视化设计利用了这种快速的感官反应, 这就是为什么设计中的数据可视化如此强大,沟通如此有效.

  • 可视化的好处是什么?

    提供更快的数据可视化设计, 改进了对数据集的洞察力,并使查看者能够更快地处理它们.

  • 如何使用数据可视化?

    数据可视化是数据的图形化表示. 数据可视化设计使用图表等视觉元素, 图, 地图可以洞察数据的趋势和模式.

  • 视觉和心理学有什么关系?

    心理学家通过研究感觉来理解感知. 我们的感官是感知的生理基础, 大脑选择的过程是什么, 组织, 并解释我们的感觉感受器收集到的感觉, 眼睛.

聘请Toptal这方面的专家.
现在雇佣
Tetiana Donska

Tetiana Donska

验证专家 在设计
11 的经验

英国伦敦

2017年6月20日成为会员

作者简介

Tetiana是一位多学科设计师,帮助初创公司和企业公司建立以人为本的设计解决方案.

作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

世界级的文章,每周发一次.

输入您的电子邮件,即表示您同意我们的 隐私政策.

世界级的文章,每周发一次.

输入您的电子邮件,即表示您同意我们的 隐私政策.

Toptal设计师

加入总冠军® 社区.