本文根据北京大学公开课《数据可视化》共63讲的学习笔记整理而成。课程由北京大学智能学院袁晓如老师主讲系统讲解了可视化的基本原理与设计方法。以下内容聚焦于课程中关于“颜色”的部分从物理基础、视觉感知、心理效应到设计准则做一次相对完整的梳理。因个人理解有限如有不准确之处恳请指正。一、颜色在可视化中的角色亮度和色彩是可视化中最常用的视觉通道。光照射到物体表面经人眼感知后通过视神经和视觉皮层我们才能在认知系统中构建起视觉认知与心理感受。颜色在艺术作品中是十分明显的表达手段在数据可视化中同样扮演着相当重要的角色。理解颜色如何工作需要从三个层面入手物理层面光谱与光源、生理层面人眼与视觉系统和心理层面最终的认知与情感感受。这三个层面构成了颜色从物理世界到人类感知的完整链条。二、颜色的物理基础颜色产生于光谱分布。我们看到颜色来自于可见光但不能直接在视觉系统中形成相应的反应。视网膜上的视锥细胞根据波长从长L、中M、短S三个方面对光线进行响应。不同生物感受的光谱范围不同。人类的视网膜对光谱的编码是有限的——可以将光谱看作高维数据而人眼将其降维为三维信号LMS响应。有意思的是不同的原始光谱可能产生相同的编码结果这被称为同色异谱Metamerism。三、颜色的标准处理管道颜色信息遵循一条严格的加工流水线阶段处理层级模型/变量核心含义物理输入物理世界光能光谱功率分布颜色的原始物理载体生物-色度学量化物理世界→视觉系统视锥细胞反应L,M,S→ CIEX,Y,Z视锥细胞吸收光谱完成第一次降维再通过标准化转换得到CIE三刺激值这是颜色的客观物理度量神经拮抗编码视觉系统神经级拮抗编码将XYZ重组为对立色通道亮度通道A和色度通道R-G, Y-B亮度和色彩在神经源头就已分离感知模型心理物理模型CIELAB、HVC将神经信号映射到均匀感知空间定义颜色的外观属性表层模型上下文感知CIECAM02输入观察环境背景、周围、适应白点输出最终感知颜色这一管道解释了可视化中一个重要的设计依据可以用亮度表示数值、用色相表示类别——因为它们在视觉神经层面就是分开处理的。四、颜色的心理因素颜色感知并非孤立发生它受到周围环境的显著影响。课程中专门讨论了颜色表现Color Appearance这个概念——颜色的感知不止于单一色块本身还取决于三个空间层次刺激Stimulus我们正在观察的目标颜色或物体本身是直接感知对象。邻近Background紧邻目标周围的颜色区域直接影响同时对比与锐化效应。环境Surround观察者视野内更远处的整体色彩环境影响色适应与整体白平衡。这三个层次共同决定了颜色的最终感知结果。基于这三层结构颜色表现涉及四种核心效应适应Adaptation人眼会长时间适应环境主色调导致颜色感知偏移。例如从室外进入暖光室内白纸仍会被感知为白色——这是视觉系统在主动进行“白平衡”。适应的核心驱动因素是环境Surround层的整体色温。同时对比Simultaneous Contrast环境颜色会增加其自身的相反颜色补色以获得更强的视觉对比。具体来说深色背景 → 目标颜色显得更亮红色背景 → 目标颜色中的绿色成分被增强蓝色背景 → 目标颜色中的黄色成分被增强一个经典的例子是两条颜色完全相同的细线放在不同的背景上会让人感觉颜色不同——一条带灰一条带黄。这说明邻近背景不同会导致对同一目标颜色的感知不同。同时对比的核心驱动因素是邻近Background层的颜色。不同的背景也会产生我们感知最后结果的不同。不同的背景颜色可以加强或减弱我们中间的颜色。由于背景不同我们可以锐化相互之间的对比。空间因素Spatial Factors目标物体的大小、形状、间距和排列方式会影响颜色感知。例如小色块在大面积同色背景下可能会变色细线与大色块的感知颜色也不同。在可视化中标记的大小必须纳入颜色考量——小标记需要更高的饱和度和明度对比才能被准确感知。上下文的颜色Contextual Color整个场景的颜色构成包括文化语义和场景预期会影响单个颜色的解读。例如红色在某些文化中代表危险在另一些文化中代表喜庆——语义上下文会覆盖物理色度值。这也呼应了后续“颜色设计准则”中关于文化预期的讨论。同时对比与锐化的区别需要说明的是课程中还提到了一个与同时对比密切相关的概念——锐化Crispening两者的关注点不同同时对比关注单个目标颜色的绝对感知背景改变目标颜色的色调或明度锐化关注两个目标颜色的相对差异背景调节人眼的差异敏感度在这里面上下两个色块它们之间有很小的差异。如果背景和我们需要对比的色块有强烈差异我们就会忽略两个色块之间的差异。如果背景和两个色块的颜色比较接近。我们就能更容易地感知到两个方块之间的差异。我们的感知依赖于我们的背景。五、CIE标准测度与色度图CIE标准观测者CIE标准观测者是基于大量人类颜色匹配实验统计得出的标准颜色匹配函数用于量化任意光谱在人眼中产生的颜色刺激。它定义了三个标准化的颜色匹配函数分别对应X、Y、Z三刺激值。同色异谱的数学根源在于不同光谱分布经过标准观测者加权积分后可能得到相同的XYZ值——物理不同感知相同。色度图Chromaticity Diagram将XYZ投影到二维平面上可以区分色彩与亮度。投影公式为且满足x y z 1因此只需(x, y)两个坐标即可表示色度。色度图上有几个关键标识光谱轨迹Spectrum Locus马蹄形曲线边缘代表纯光谱色黑体轨迹Black-body Curve不同色温下黑体辐射的颜色变化路径紫线Purple Line连接光谱两端的直线代表非光谱色在色度图中越接近边缘颜色越接近纯色高饱和度越接近中心颜色越接近白色或灰色低饱和度。六、RGB色度与设备色域在CIE色度图中显示设备的三原色R、G、B分别位于三角形的三个顶点所有可显示颜色均落在这个三角形内部。三条核心几何规则纯色的红绿蓝是顶点R、G、B三原色决定了色域范围两种颜色的融合在连线上两色混合后位于它们之间连线的某一点色域是一个三角形R、G、B顶点围成的区域即该设备能显示的全部颜色不同的显示设备对应色度空间中不同的三角形。随着显示技术的进步sRGB → Adobe RGB → DCI-P3 → Rec.2020覆盖的范围也在不断扩大。一个重要结论任何显示设备都无法覆盖人眼可见的全部颜色——色域三角形永远小于整个CIE色度图的马蹄形区域。七、对立色彩与色盲对立色彩Opponent Color人眼视觉系统在神经层面将视锥细胞的LMS响应通过线性组合重新编码为三个独立的对立通道通道轴方向感知内容消色轴亮度黑 ↔ 白明暗感知红-绿轴红 ↔ 绿红绿色相对立感知蓝-黄轴蓝 ↔ 黄蓝黄色相对立感知第一级映射的逻辑是亮度通道 ≈ L M长波中波红-绿通道 ≈ L − M长波与中波相减蓝-黄通道 ≈ S − (L M)短波与长中波之和相减色盲的神经学解释色盲的本质是某一个或多个对立通道的信号对比度减弱或消失。红绿色盲红弱/绿弱约占总人口主要是男性的8%蓝弱较为罕见1%全色盲则极为罕见。在可视化中必须考虑色盲因素。约10%的人有不同程度的色觉缺陷这个比例并不算小。不恰当的颜色方案如红绿配对对色盲人群可能完全无法分辨——红色和橙色在红色弱视角下均偏黄全色盲则只能依靠亮度差异勉强区分。我们希望修改颜色方案后具有不同色觉缺陷的人可以更好地感知颜色之间的差异。我们使用不同的颜色方案对于色觉正常的人来说通常都可以很好地区分。然而当配色方案选择不当时色盲或色弱人群可能无法有效分辨其中的信息。以红色弱Protanomaly为例原本清晰可辨的红色与橙色在其视角下均偏黄虽然勉强可以区分但辨识度明显下降对于全色盲人群而言则只能依靠极其有限的亮度差异来辨别内容信息损失非常严重。这样的可视化形式显然无法满足色觉缺陷人群的使用需求。色盲人群在整体人群中并不是一个非常稀少的数目并不是所有的可视化都认真对待色盲方面的考虑。八、颜色设计准则为何需要关注颜色不良的颜色设计会让人疑惑——制造视觉混乱误导注意力。而好的设计让信息更吸引人视觉风格逐渐成熟文档和网页设计也在持续进化。正如唐·诺曼Don Norman所说“Attractive things work better.”吸引人的东西用起来更顺手。积极情绪能够促进认知灵活性和问题解决能力。如何使颜色有效设计有效的颜色需要考虑多重上下文直接的 vs. 需学习的红色危险先天 vs 股票红跌绿涨文化约定任何人 vs. 专家通用设计需考虑色盲专家可接受更复杂的编码关键的 vs. 上下文的关键信息高对比突出辅助信息低饱和融入文化 vs. 预期不同文化中颜色含义不同时间 vs. 金钱经验法则快速落地 vs 精细用户试验需投入“Good ideas executed with superb craft.” —— 唯精湛之工艺可实施精妙之想法。颜色设计术语颜色设计有三个基础术语色相Hue颜色的“种类”位于色轮之上。红、黄、蓝是主要色相橘黄、绿、紫是次要色相。色轮上相对的颜色互为对比色相邻的则是近似色。彩度/饱和度Saturation/Chroma与灰色的距离即颜色的强度或纯度。明度/亮度Value/Lightness颜色的明暗程度从深到浅。饱和度与明度适用于所有颜色而不仅仅是灰色。深色和浅色深色Shade纯色 黑色 → 降低饱和度降低明度。浅色Tint纯色 白色 → 降低饱和度升高明度。“彩色并非都有高饱和度”——只有纯色不加黑/白/灰才拥有最高的饱和度。深色和浅色虽然仍是彩色有色相但饱和度已经降低了。颜色设计三大原则原则一控制明度确保文字/图形与背景之间有足够的明度对比易读性避免因明度不当造成错误的视觉强调——明度高的区域会自然“弹出”原则二使用中性背景控制颜色之间的相互干扰最小化“同时对比”效应——中性色背景不偏向任何色相确保前景颜色被准确感知原则三控制色相种类控制颜色的“弹出效应”刻意控制哪些元素“弹出”定义颜色分组——同组用相近色相不同组用不同色相避免太多竞争颜色带来的视觉混乱三大原则的优先级控制明度最高明度差异是视觉感知的最基础通道其次是使用中性背景背景选错会系统性扭曲所有前景颜色最后是控制色相种类。构想信息呈现的目标E.R. Tufte有一句重要的提醒“避免制造灾难是色彩设计上的第一准则——不要损害信息的呈现。”颜色在信息呈现中有四个根本目标目标核心用途设计策略用以标注标识类别、身份或属性使用不同色相区分类别用以测量表示数值、量级或梯度使用顺序色阶或发散色阶用以表达或模仿现实模拟真实世界的视觉特征使用自然色符合物理规律和用户预期用以装饰提升美观度不得干扰前三个目标的信息传递标注的考量当颜色用于标注时需要系统性地考虑三类问题第一类颜色编码的重要性颜色是必须使用唯一区分手段还是附加提示冗余信息需要快速反应还是允许仔细查看需要依赖图例查阅还是要求用户记住第二类形状和结构问题物体有多大小物体需要更高的饱和度和明度对比物体数量及可重叠性数量多时色相应更少需要可读还是仅可见第三类背景问题是否有既定语义红色危险/停止绿色安全/通过是分组关系用不同色相还是顺序关系用明度/饱和度渐变环境颜色和形状如何示例可以使用色相的不同来区分关注的焦点。可以用来标注分类。可以高亮背景进行分组。场景量化标准颜色使用的数量和复杂度应与任务所需的响应速度成反比。响应越紧急颜色越少响应越从容颜色可越多。场景响应速度颜色数量核心策略飞机驾驶舱/雷达装置极快紧急反馈极少5-7种只保留最关键状态信息必须瞬间理解不可依赖图例公路标志较快中等10-15种颜色作为冗余编码颜色形状文字配合固定语义无线电图谱慢仔细检查较多连续色阶允许精细渐变和多种颜色可查阅图例“仔细检查时可以分辨相应的颜色。显然在需要快速反应时不可用。”设计铁律场景决定策略而非审美决定策略。九、ColorBrewer选色工具ColorBrewer是由宾夕法尼亚州立大学的Cynthia Brewer教授及其团队开发的在线颜色方案选择工具。它根据数据类型提供经过科学计算和测试的颜色方案。ColorBrewer提供四种尺度尺度类型对应数据设计逻辑典型方案定性Qualitative分类变量无序使用不同色相区分不同类别Set1、Set3、Paired、Dark2顺序Sequential有序数据单向使用明度主导渐变浅色→低值深色→高值Blues、Reds、YlOrRd发散Diverging双向有序数据两种对比色相中间浅色中性值两端深色极端值RdBu红-蓝、Spectral二值Binary二分类变量两种状态只使用两种颜色通常以明度差异为主进行区分基于顺序方案提取两端如浅蓝/深蓝顺序方案里又可以支持双向——即发散方案。一个典型示例是美国2000年人口普查图用紫色表示人口减少、黄色表示人口增加两种颜色从中点的中性色向两端逐渐加深颜色的深浅代表变化的强度。这种“双向标尺”让人一眼看出哪些地区“变多”、哪些“变少”深浅变化则直观展示变化幅度。用户输入需求分类型或定量型后系统会推荐经过计算的颜色方案。小结颜色在数据可视化中既是信息载体也是设计工具。从物理光谱到视锥细胞响应从CIE标准测度到对立色编码从同时对比效应到具体的场景化设计策略——理解这一完整的链条有助于我们在实际工作中做出更合理的设计决策。课程中反复强调的一个观点值得记住颜色设计的首要准则是不要损害信息的呈现。美观是手段而非目的。而恰当地运用颜色让信息被正确且高效地理解才是可视化颜色设计的根本追求。笔记整理自公开课内容如有不当之处欢迎指正。课程来源本文根据北京大学公开课《数据可视化》共63讲的学习笔记整理而成课程链接 【公开课】北京大学数据可视化
数据可视化中的颜色（学习笔记）
本文根据北京大学公开课《数据可视化》共63讲的学习笔记整理而成。课程由北京大学智能学院袁晓如老师主讲系统讲解了可视化的基本原理与设计方法。以下内容聚焦于课程中关于“颜色”的部分从物理基础、视觉感知、心理效应到设计准则做一次相对完整的梳理。因个人理解有限如有不准确之处恳请指正。一、颜色在可视化中的角色亮度和色彩是可视化中最常用的视觉通道。光照射到物体表面经人眼感知后通过视神经和视觉皮层我们才能在认知系统中构建起视觉认知与心理感受。颜色在艺术作品中是十分明显的表达手段在数据可视化中同样扮演着相当重要的角色。理解颜色如何工作需要从三个层面入手物理层面光谱与光源、生理层面人眼与视觉系统和心理层面最终的认知与情感感受。这三个层面构成了颜色从物理世界到人类感知的完整链条。二、颜色的物理基础颜色产生于光谱分布。我们看到颜色来自于可见光但不能直接在视觉系统中形成相应的反应。视网膜上的视锥细胞根据波长从长L、中M、短S三个方面对光线进行响应。不同生物感受的光谱范围不同。人类的视网膜对光谱的编码是有限的——可以将光谱看作高维数据而人眼将其降维为三维信号LMS响应。有意思的是不同的原始光谱可能产生相同的编码结果这被称为同色异谱Metamerism。三、颜色的标准处理管道颜色信息遵循一条严格的加工流水线阶段处理层级模型/变量核心含义物理输入物理世界光能光谱功率分布颜色的原始物理载体生物-色度学量化物理世界→视觉系统视锥细胞反应L,M,S→ CIEX,Y,Z视锥细胞吸收光谱完成第一次降维再通过标准化转换得到CIE三刺激值这是颜色的客观物理度量神经拮抗编码视觉系统神经级拮抗编码将XYZ重组为对立色通道亮度通道A和色度通道R-G, Y-B亮度和色彩在神经源头就已分离感知模型心理物理模型CIELAB、HVC将神经信号映射到均匀感知空间定义颜色的外观属性表层模型上下文感知CIECAM02输入观察环境背景、周围、适应白点输出最终感知颜色这一管道解释了可视化中一个重要的设计依据可以用亮度表示数值、用色相表示类别——因为它们在视觉神经层面就是分开处理的。四、颜色的心理因素颜色感知并非孤立发生它受到周围环境的显著影响。课程中专门讨论了颜色表现Color Appearance这个概念——颜色的感知不止于单一色块本身还取决于三个空间层次刺激Stimulus我们正在观察的目标颜色或物体本身是直接感知对象。邻近Background紧邻目标周围的颜色区域直接影响同时对比与锐化效应。环境Surround观察者视野内更远处的整体色彩环境影响色适应与整体白平衡。这三个层次共同决定了颜色的最终感知结果。基于这三层结构颜色表现涉及四种核心效应适应Adaptation人眼会长时间适应环境主色调导致颜色感知偏移。例如从室外进入暖光室内白纸仍会被感知为白色——这是视觉系统在主动进行“白平衡”。适应的核心驱动因素是环境Surround层的整体色温。同时对比Simultaneous Contrast环境颜色会增加其自身的相反颜色补色以获得更强的视觉对比。具体来说深色背景 → 目标颜色显得更亮红色背景 → 目标颜色中的绿色成分被增强蓝色背景 → 目标颜色中的黄色成分被增强一个经典的例子是两条颜色完全相同的细线放在不同的背景上会让人感觉颜色不同——一条带灰一条带黄。这说明邻近背景不同会导致对同一目标颜色的感知不同。同时对比的核心驱动因素是邻近Background层的颜色。不同的背景也会产生我们感知最后结果的不同。不同的背景颜色可以加强或减弱我们中间的颜色。由于背景不同我们可以锐化相互之间的对比。空间因素Spatial Factors目标物体的大小、形状、间距和排列方式会影响颜色感知。例如小色块在大面积同色背景下可能会变色细线与大色块的感知颜色也不同。在可视化中标记的大小必须纳入颜色考量——小标记需要更高的饱和度和明度对比才能被准确感知。上下文的颜色Contextual Color整个场景的颜色构成包括文化语义和场景预期会影响单个颜色的解读。例如红色在某些文化中代表危险在另一些文化中代表喜庆——语义上下文会覆盖物理色度值。这也呼应了后续“颜色设计准则”中关于文化预期的讨论。同时对比与锐化的区别需要说明的是课程中还提到了一个与同时对比密切相关的概念——锐化Crispening两者的关注点不同同时对比关注单个目标颜色的绝对感知背景改变目标颜色的色调或明度锐化关注两个目标颜色的相对差异背景调节人眼的差异敏感度在这里面上下两个色块它们之间有很小的差异。如果背景和我们需要对比的色块有强烈差异我们就会忽略两个色块之间的差异。如果背景和两个色块的颜色比较接近。我们就能更容易地感知到两个方块之间的差异。我们的感知依赖于我们的背景。五、CIE标准测度与色度图CIE标准观测者CIE标准观测者是基于大量人类颜色匹配实验统计得出的标准颜色匹配函数用于量化任意光谱在人眼中产生的颜色刺激。它定义了三个标准化的颜色匹配函数分别对应X、Y、Z三刺激值。同色异谱的数学根源在于不同光谱分布经过标准观测者加权积分后可能得到相同的XYZ值——物理不同感知相同。色度图Chromaticity Diagram将XYZ投影到二维平面上可以区分色彩与亮度。投影公式为且满足x y z 1因此只需(x, y)两个坐标即可表示色度。色度图上有几个关键标识光谱轨迹Spectrum Locus马蹄形曲线边缘代表纯光谱色黑体轨迹Black-body Curve不同色温下黑体辐射的颜色变化路径紫线Purple Line连接光谱两端的直线代表非光谱色在色度图中越接近边缘颜色越接近纯色高饱和度越接近中心颜色越接近白色或灰色低饱和度。六、RGB色度与设备色域在CIE色度图中显示设备的三原色R、G、B分别位于三角形的三个顶点所有可显示颜色均落在这个三角形内部。三条核心几何规则纯色的红绿蓝是顶点R、G、B三原色决定了色域范围两种颜色的融合在连线上两色混合后位于它们之间连线的某一点色域是一个三角形R、G、B顶点围成的区域即该设备能显示的全部颜色不同的显示设备对应色度空间中不同的三角形。随着显示技术的进步sRGB → Adobe RGB → DCI-P3 → Rec.2020覆盖的范围也在不断扩大。一个重要结论任何显示设备都无法覆盖人眼可见的全部颜色——色域三角形永远小于整个CIE色度图的马蹄形区域。七、对立色彩与色盲对立色彩Opponent Color人眼视觉系统在神经层面将视锥细胞的LMS响应通过线性组合重新编码为三个独立的对立通道通道轴方向感知内容消色轴亮度黑 ↔ 白明暗感知红-绿轴红 ↔ 绿红绿色相对立感知蓝-黄轴蓝 ↔ 黄蓝黄色相对立感知第一级映射的逻辑是亮度通道 ≈ L M长波中波红-绿通道 ≈ L − M长波与中波相减蓝-黄通道 ≈ S − (L M)短波与长中波之和相减色盲的神经学解释色盲的本质是某一个或多个对立通道的信号对比度减弱或消失。红绿色盲红弱/绿弱约占总人口主要是男性的8%蓝弱较为罕见1%全色盲则极为罕见。在可视化中必须考虑色盲因素。约10%的人有不同程度的色觉缺陷这个比例并不算小。不恰当的颜色方案如红绿配对对色盲人群可能完全无法分辨——红色和橙色在红色弱视角下均偏黄全色盲则只能依靠亮度差异勉强区分。我们希望修改颜色方案后具有不同色觉缺陷的人可以更好地感知颜色之间的差异。我们使用不同的颜色方案对于色觉正常的人来说通常都可以很好地区分。然而当配色方案选择不当时色盲或色弱人群可能无法有效分辨其中的信息。以红色弱Protanomaly为例原本清晰可辨的红色与橙色在其视角下均偏黄虽然勉强可以区分但辨识度明显下降对于全色盲人群而言则只能依靠极其有限的亮度差异来辨别内容信息损失非常严重。这样的可视化形式显然无法满足色觉缺陷人群的使用需求。色盲人群在整体人群中并不是一个非常稀少的数目并不是所有的可视化都认真对待色盲方面的考虑。八、颜色设计准则为何需要关注颜色不良的颜色设计会让人疑惑——制造视觉混乱误导注意力。而好的设计让信息更吸引人视觉风格逐渐成熟文档和网页设计也在持续进化。正如唐·诺曼Don Norman所说“Attractive things work better.”吸引人的东西用起来更顺手。积极情绪能够促进认知灵活性和问题解决能力。如何使颜色有效设计有效的颜色需要考虑多重上下文直接的 vs. 需学习的红色危险先天 vs 股票红跌绿涨文化约定任何人 vs. 专家通用设计需考虑色盲专家可接受更复杂的编码关键的 vs. 上下文的关键信息高对比突出辅助信息低饱和融入文化 vs. 预期不同文化中颜色含义不同时间 vs. 金钱经验法则快速落地 vs 精细用户试验需投入“Good ideas executed with superb craft.” —— 唯精湛之工艺可实施精妙之想法。颜色设计术语颜色设计有三个基础术语色相Hue颜色的“种类”位于色轮之上。红、黄、蓝是主要色相橘黄、绿、紫是次要色相。色轮上相对的颜色互为对比色相邻的则是近似色。彩度/饱和度Saturation/Chroma与灰色的距离即颜色的强度或纯度。明度/亮度Value/Lightness颜色的明暗程度从深到浅。饱和度与明度适用于所有颜色而不仅仅是灰色。深色和浅色深色Shade纯色 黑色 → 降低饱和度降低明度。浅色Tint纯色 白色 → 降低饱和度升高明度。“彩色并非都有高饱和度”——只有纯色不加黑/白/灰才拥有最高的饱和度。深色和浅色虽然仍是彩色有色相但饱和度已经降低了。颜色设计三大原则原则一控制明度确保文字/图形与背景之间有足够的明度对比易读性避免因明度不当造成错误的视觉强调——明度高的区域会自然“弹出”原则二使用中性背景控制颜色之间的相互干扰最小化“同时对比”效应——中性色背景不偏向任何色相确保前景颜色被准确感知原则三控制色相种类控制颜色的“弹出效应”刻意控制哪些元素“弹出”定义颜色分组——同组用相近色相不同组用不同色相避免太多竞争颜色带来的视觉混乱三大原则的优先级控制明度最高明度差异是视觉感知的最基础通道其次是使用中性背景背景选错会系统性扭曲所有前景颜色最后是控制色相种类。构想信息呈现的目标E.R. Tufte有一句重要的提醒“避免制造灾难是色彩设计上的第一准则——不要损害信息的呈现。”颜色在信息呈现中有四个根本目标目标核心用途设计策略用以标注标识类别、身份或属性使用不同色相区分类别用以测量表示数值、量级或梯度使用顺序色阶或发散色阶用以表达或模仿现实模拟真实世界的视觉特征使用自然色符合物理规律和用户预期用以装饰提升美观度不得干扰前三个目标的信息传递标注的考量当颜色用于标注时需要系统性地考虑三类问题第一类颜色编码的重要性颜色是必须使用唯一区分手段还是附加提示冗余信息需要快速反应还是允许仔细查看需要依赖图例查阅还是要求用户记住第二类形状和结构问题物体有多大小物体需要更高的饱和度和明度对比物体数量及可重叠性数量多时色相应更少需要可读还是仅可见第三类背景问题是否有既定语义红色危险/停止绿色安全/通过是分组关系用不同色相还是顺序关系用明度/饱和度渐变环境颜色和形状如何示例可以使用色相的不同来区分关注的焦点。可以用来标注分类。可以高亮背景进行分组。场景量化标准颜色使用的数量和复杂度应与任务所需的响应速度成反比。响应越紧急颜色越少响应越从容颜色可越多。场景响应速度颜色数量核心策略飞机驾驶舱/雷达装置极快紧急反馈极少5-7种只保留最关键状态信息必须瞬间理解不可依赖图例公路标志较快中等10-15种颜色作为冗余编码颜色形状文字配合固定语义无线电图谱慢仔细检查较多连续色阶允许精细渐变和多种颜色可查阅图例“仔细检查时可以分辨相应的颜色。显然在需要快速反应时不可用。”设计铁律场景决定策略而非审美决定策略。九、ColorBrewer选色工具ColorBrewer是由宾夕法尼亚州立大学的Cynthia Brewer教授及其团队开发的在线颜色方案选择工具。它根据数据类型提供经过科学计算和测试的颜色方案。ColorBrewer提供四种尺度尺度类型对应数据设计逻辑典型方案定性Qualitative分类变量无序使用不同色相区分不同类别Set1、Set3、Paired、Dark2顺序Sequential有序数据单向使用明度主导渐变浅色→低值深色→高值Blues、Reds、YlOrRd发散Diverging双向有序数据两种对比色相中间浅色中性值两端深色极端值RdBu红-蓝、Spectral二值Binary二分类变量两种状态只使用两种颜色通常以明度差异为主进行区分基于顺序方案提取两端如浅蓝/深蓝顺序方案里又可以支持双向——即发散方案。一个典型示例是美国2000年人口普查图用紫色表示人口减少、黄色表示人口增加两种颜色从中点的中性色向两端逐渐加深颜色的深浅代表变化的强度。这种“双向标尺”让人一眼看出哪些地区“变多”、哪些“变少”深浅变化则直观展示变化幅度。用户输入需求分类型或定量型后系统会推荐经过计算的颜色方案。小结颜色在数据可视化中既是信息载体也是设计工具。从物理光谱到视锥细胞响应从CIE标准测度到对立色编码从同时对比效应到具体的场景化设计策略——理解这一完整的链条有助于我们在实际工作中做出更合理的设计决策。课程中反复强调的一个观点值得记住颜色设计的首要准则是不要损害信息的呈现。美观是手段而非目的。而恰当地运用颜色让信息被正确且高效地理解才是可视化颜色设计的根本追求。笔记整理自公开课内容如有不当之处欢迎指正。课程来源本文根据北京大学公开课《数据可视化》共63讲的学习笔记整理而成课程链接 【公开课】北京大学数据可视化
