可视化 | (二)视觉编码、图形感知及颜色计算

文章目录

  • 视觉编码
  • 图形感知
    • 前注意力机制
    • 格式塔学说
    • 变化盲视
  • 颜色计算
    • 学术颜色设计
    • Hints for the colors

视觉编码

  • 视觉编码是将数据映射到视觉变量的过程,不同的数据类型需要采用不同的编码方式来有效地传达信息。
    可视化 | (二)视觉编码、图形感知及颜色计算_第1张图片可视化 | (二)视觉编码、图形感知及颜色计算_第2张图片
  1. 位置编码
    • 使用位置来表示数据的大小或数量。
    • 例如在折线图中,横轴表示时间,纵轴表示数值,可以很直观地观察数据的趋势和变化。
    • 对于连续和有序的数据,位置编码非常有效
  2. 长度编码
    • 使用长度来表示数据的大小或数量,例如条形图中的条的长度。
    • 长度编码适用于比较不同数据之间的大小关系
  3. 角度编码
    • 使用角度来表示数据的大小或数量,例如在圆饼图中,不同扇形的角度表示不同数据的相对比例。
    • 角度编码适用于展示比例和相对关系。
  4. 颜色编码
    • 使用颜色来表示数据的类别或数量,例如在散点图中,不同类别的点可以用不同的颜色进行区分。
    • 颜色编码也可以表示数据的连续程度,例如通过色带表示温度的高低。颜色编码对于分类和区分不同数据非常有效
  5. 形状编码
    • 使用形状来表示数据的类别或数量,例如在散点图中,不同类别的点可以用不同的形状进行区分。
    • 形状编码适用于区分不同类别或分组的数据。
  6. 大小编码
    • 使用大小来表示数据的大小或数量,例如在气泡图中,不同大小的气泡表示不同值的大小。
    • 大小编码适用于表示数据的数量级和相对关系

  • 对于实际数据的可视化编码和图表设计,需要结合用户感知理论和数据特点进行选择。例如,如果数据有明显的顺序关系,可以使用折线图或条形图来展示趋势和变化;如果数据有分类或分组关系,可以使用散点图或条形图来比较不同类别的数据。
  • 在数据编码中,还需要运用批判性思维来辨别可能存在的偏见。例如,颜色编码可能存在对某些群体或文化有偏见的情况,需要注意选择合适的颜色和不歧视的编码。此外,在选择编码时,也要注意避免不必要的编码和复杂性,以保持清晰和易读的可视化结果。
    可视化 | (二)视觉编码、图形感知及颜色计算_第3张图片
    可视化 | (二)视觉编码、图形感知及颜色计算_第4张图片

可视化编码设计

  • 使用富有表现力和有效的视觉编码方式。
  • 避免过度编码。
  • 缩小问题空间。
  • 明智地利用空间和小多图。
  • 利用交互生成相关视图。
  • 鲜有单个可视化能回答所有问题。 相反,快速生成适当的可视化视图至关重要!

图形感知

图形感知是可视化设计中非常重要的一个方面,它指的是人们对于不同图形属性的感知能力。在可视化设计中,利用图形感知的原理可以帮助我们更好地传达信息,提高用户对数据的理解和分析能力。

前注意力机制

  • 前注意力机制指的是人们在观察图像或图形时的注意力集中。在可视化设计中,我们可以通过设计突出性的元素或使用色彩对比等方式来引起用户的前注意力。这有助于用户更快地获取信息并准确理解数据。
    可视化 | (二)视觉编码、图形感知及颜色计算_第5张图片

格式塔学说

  • 格式塔原理

  • 接近性:相互靠近的元素被认为是一个群组,与其他元素区分开。例如,在一个散点图中,如果在相同的区域内有多个点,我们会将它们视为一组并与其他点分开。
    可视化 | (二)视觉编码、图形感知及颜色计算_第6张图片

  • 相似性:具有相似特征的元素往往被认为是一组。例如,在一个柱状图中,具有相同颜色或形状的柱子被视为一组并传达同样的信息。
    可视化 | (二)视觉编码、图形感知及颜色计算_第7张图片

  • 连通性:连通性超过了接近度、大小、颜色形状。
    可视化 | (二)视觉编码、图形感知及颜色计算_第8张图片

  • 连续性:在视觉上连续的元素往往被认为是一组。例如,一条连续的曲线通常表示一条数据趋势,而离散的点通常表示单独的数据点。
    可视化 | (二)视觉编码、图形感知及颜色计算_第9张图片

  • 封闭性:具有边缘或形状的闭合元素往往被认为是一个整体。例如,一个有边界的面积图形表示一个特定的数据集,而没有边界的散点图表示一系列独立的数据点。
    可视化 | (二)视觉编码、图形感知及颜色计算_第10张图片

  • 对称性
    可视化 | (二)视觉编码、图形感知及颜色计算_第11张图片

  • 简单性:人们更容易理解简单、直观的形状和图形。例如,在可视化设计中,简单的线条、图标和图形通常比复杂的图形更易于理解和解释。

变化盲视

  • 变化盲视是指人们在观察连续变化的图形时,可能会忽视其中的细微变化。在可视化设计中,我们需要注意这一现象,避免在数据变化时导致用户错失重要信息。设计中可以使用动画或其他方式来突出变化,帮助用户更好地感知和理解数据。

颜色计算

  • 色彩设计的自动计算过程不应该仅仅是“拿来主义”。
  • 可视化中色彩设计的挑战:视图元类型多、语义范围层次广、以及数据分布变化大。
  • 色彩计算关键问题:色彩感知认知机理、自适应色彩计算。

学术颜色设计

可视化 | (二)视觉编码、图形感知及颜色计算_第12张图片
可视化 | (二)视觉编码、图形感知及颜色计算_第13张图片
可视化 | (二)视觉编码、图形感知及颜色计算_第14张图片
可视化 | (二)视觉编码、图形感知及颜色计算_第15张图片可视化 | (二)视觉编码、图形感知及颜色计算_第16张图片

可视化 | (二)视觉编码、图形感知及颜色计算_第17张图片

Hints for the colors

  • 使用较少的颜色(理想情况下约6种)
  • 颜色应该具有区别性并有名称
  • 追求颜色的和谐性(使用自然颜色?)
  • 遵循文化习俗,注意符号意义
  • 在黑白图像中也能正确表达
  • 尊重色盲人士
  • 利用感知色彩空间的优势

  • design rules
  • 可视化颜色选择

  • 托盘裁缝(交互式着色系统)
    可视化 | (二)视觉编码、图形感知及颜色计算_第18张图片
  • 交互式探索演示
    可视化 | (二)视觉编码、图形感知及颜色计算_第19张图片

你可能感兴趣的:(#,数据可视化技术,大数据与数据分析,数据可视化,着色器)