可视化设计中色彩可用性研究

邓列成

摘 要：为了深入研究色彩编码在可视化中的应用以及其对受众可用性的影响，并改善用户在可视化界面操作的中的用户体验。本文综合了现有理论文献并结合实践探索与案例分析，旨在探讨如何在实际应用中合理、灵活地运用色彩，以提升可视化中信息的表达便捷性、高效性。并提炼出可视化设计中色彩应用方法和原则，为可视化设计领域提供有关色彩编码的一定的实践和指导，并在利用色彩增强受众信息理解速度等方面提供了有价值的参考借鉴。

关键词：可视化设计；数据可视化；色彩心理

Abstract： In order to delve into the application of color encoding in visualization， its impact on audience usability， and improve the user experience in operating visual interfaces， this paper integrates existing theoretical literature with practical exploration and case analysis. The objective is to explore how to use color in a rational and flexible manner in real-world applications to enhance the convenience and efficiency of information expression in visualization. Additionally， this research aims to extract methods and principles of color application in visual design， providing practical guidance and insights regarding color encoding in the field of visual design. It also offers valuable references and guidance for practitioners in utilizing color to enhance audiences speed of information comprehension and other related aspects.

Keywords： Visual design；data visualization；color psychology

0 引言

数据可视化技术是当今社会独有的视觉形式。然而，设计适当的可视化来理解数据是一个复杂的过程，其中涉及到数据挖掘、可视化算法和用户界面等多个方面。信息设计大师爱德华·塔夫特认为，优秀的视觉设计应该是“将清晰的思考视觉化”。

影响可视化信息传达的原因多种多样，本文主要从色彩可用性角度切入，探讨色彩显著性对于可视化中信息搜索和信息识别的效率的影响，探究视觉设计中的色彩是如何实现“将清晰的思考视觉化”。

1 视化设计与色彩可用性

由于数据在当今社会呈现出热火朝天的发展态势，因而对于数据可视化探究变得不可避免。它并不是一个新学科，计算机技术和统计学发展早已为数据可视化的出现和活跃奠定了深厚的基础，如今随着网络的普及渗入医疗、教育、经济、人文、政府等社会的等各个其他领域。简单来说，数据可视化是部分科学和部分美学的结合，它将信息和设计融合，利用图形和表格的易传达性，帮助受众便捷地区分、感知并了解更多信息。David McCandless在《数据可视化之美》的演讲中就将视觉化的信息比数据密林中的空旷天地，可以将人们从令人窒息的信息洪流中解放出来[1]。

研究发现，色彩差异可以在瞬时的200毫秒之内被检测到，甚至可能在个体意识到色彩变化之前就已被察觉（即所谓的前意识注意），由此可以预见色彩对信息识别的重要作用。Kevin Mullet在《设计视觉界面》中指出：“设计关注的是发现最适于传达某些信息的呈现方式”[2]。因而设计中色彩编码的合理运用意义重大，层级分明和丰富多样的色彩表现方式能够让原本复杂且庞大的数据集转换为精心设计的视觉设计，使之被用户高效的处理。

2 可视化设计中色彩心理分析

2.1 色觉感知和色彩呈现

根据现代视觉生理学原理，物理颜色通过神经生理机制转化为人类感知的色彩，使我们能够分辨光暗和颜色，进而观察和理解这个物质世界。这一感知过程主要依赖于人眼视网膜内的视杆细胞和视锥细胞。视杆细胞能察觉明暗但无法識别颜色，视锥细胞则对颜色敏感，它们通过红、绿、蓝像素组合来探测并呈现更多的颜色。

事实上，每种视锥细胞敏感的光谱比我们通常想象的要广泛，而且其敏感范围存在重叠。因此，我们以视锥细胞的感知频率大致将其分为低频、中频和高频细胞，这些细胞分别对不同频谱范围内的光信号有敏感反应。

大脑通过对视神经传来的中、低频视锥细胞信号进行减法处理，去除冗余信息并提取出“红—蓝”减影信号通[3]。类似地，其他神经元对来自高、低频视锥细胞的信号进行减法运算，得到“黄—蓝”剪影信号通道。第三组通过将中、低频视锥细胞的信号相加，形成亮度信号通道。人眼的视锥细胞充当三种色光的接收器，将接收到的光波转化为神经脉冲，使颜色信息传递至大脑，大脑通过综合处理这些传入信号，就能呈现出丰富的颜色。

通过对色觉感知方式探究，我们了解了人类视觉系统的独特特质。首先，我们发现人眼对颜色和亮度差异的敏感度远超过对绝对亮度水平的敏感度，尤其对于对比鲜明的边缘更加敏感。其次，人类的色彩辨别能力存在一定的限制，其识别能力受到深浅度、色块大小和分隔距离等视觉系统运作方式的影响。最后，色觉感知能力较弱的人群也应被充分考虑。

2.2 可视化中的色彩心理

2.2.1 格式塔

格式塔理论由奥地利心理学家艾伦菲尔于1912年提出。格式塔心理学强调经验和行为的整体性，其核心观点是“整体不等于部分之和”，意识不只是感觉元素的集合，行为也并非仅仅是反射弧的循环。最重要的格式塔视觉法则包括：接近性原则、相似性原理、对称性原理、封闭性原理、连续性原理、主题/背景原理以及共同命运原理。巧妙地运用这些原则，将极大地促进可视化中信息清晰和简洁的传达。

在色彩选择和搭配中，这些原则发挥着关键作用。例如在接近性原则中，物体间的距离会影响我们对它们是否属于同一类信息的感知。左侧黑色星形图案由于距离接近，人们会视觉上认为它们属于一个整体；相反，右侧的图案则被视为另一个整体（图1）。据此，我们可以通过调整物体间距和色彩区分，来降低用户界面的视觉混乱感和复杂度。

其他格式塔原则也为优化可视化中的视觉效果提供了帮助。在视觉场景中各种格式塔原理并不是相互孤立的，而是共同且交织地起作用。设计者需要综合运用不同原理并进行大量对比，以确定各个设计元素、色彩以及它们之间的关系是否符合设计的初衷。

2.2.2 符号学

符号学在英语中有两个意义相同的名词：semiology和semiotic，前者由瑞士语言学家索绪尔创造，后者由美国哲学家皮尔斯提出[4]。本文将重点讨论符号学在设计中的应用，特别是在情感工程和产品语义学领域。

产品语义学以符号学为理论基础，研究产品的信息与其功能直接的关系。它将产品视为设计师和用户之间的直接沟通媒介，旨在传达产品的内在含义并体现社会价值。设计师通过“编码”的过程将原始信息加工，将物理实用性、文化意义和审美价值等融入产品中，从而使其具有符号化的特征。消费者作为接收者则进行“解码”过程，解构符号化的产品并形成准确的认知和感知[5]。

感性工学则主张“形式追随情感”的哲学理念，该理念认为成功的产品设计不仅需要满足功能性需求，更应考虑满足消费者的主观心理需求。但用户对产品的感知是一个复杂且高度主观的过程，有研究表明，大部分产品设计更多是设计师审美的体现，而非对客户趋势的真实反映。为了解决这些问题，感性工学进行了大量研究，探索产品设计元素与人类情感需求的关系，尝试通过出表法、印象法等理解用户感知的方法[6]，将人的感性因素量化，以此来把握消费者的感受和评价。如谷歌公司的Laura Granka通过使用眼动追踪技术来研究用户行为，并发表了一系列研究成果，促进了产品交互的流畅性。

3 色彩对于頁面可用性的探索

本章通过对于可视化设计色彩的心理和生理研究，将格式塔理论和符号学理论与实践探索相结合，总结了页面中色彩可用性设计的相关原理。

3.1 视觉设计的易用性、易理解性

色彩对于信息传达如何更加容易和准确，不得不与社会认知学和生理理论相结合使其变得高效。用户处理可视化编码的过程主要分为三个模式感知阶段，视觉处理系统快速的将视野分为不同的区域和形式，反馈到大脑对信息进行处理和编辑。我们在视觉处理阶段对于颜色的调整和与优化，将有助受众对于信息的快速理解能力和高效处理能力。对于颜色的搭配主要分为以下几个方面。

3.1.1 视觉结构和视觉层次的设计

在可视化页面设计中，层次化的视觉呈现方式，能够帮助受众轻松的跳过干扰信息快速找到关键点。设计者将中心螺旋图的饱和度与背景拉开差距，使人的视觉注意力在图片中心，次要信息以灰色为主，减轻了视觉干扰，使设计阅读起来高效快速（图2）。

由此我们基于视觉结构总结出一些规律：首先尽量使用少于6个不同可变的亮度层次。大块的视觉区域应当使用饱和度较低的颜色；小块视觉区域则相反，饱和度高、明度跟亮的颜色能帮助用户更加容易辨认。其次小块区域的标记通常用点和线更加合理，能够保证信息的可识别度，而对于大块视觉区域面和线则更加合适。

3.1.2 页面细节色彩的规划和重点信息的视觉信息的强调

人的视觉系统对于颜色间的差别感知是有限的，颜色的深浅度、色块大小和分隔距离这三个方面影响了我们区分颜色的能力。通常在可视化界面中，以下几个原则能够确保用户能够高效获取信息：第一，用饱和度、亮度以及色相区分颜色，通过在灰度模式下观察颜色的区分状况，确保色彩之间有较高的反差；第二，有限的资源优先分配，通过提高小面积色彩的饱和度来增加色彩显著性。例如，标记出错信息，可以运用高纯度、明度的红色提示用户操作不当；第三，注意色块之间的分隔距离，运用颜色区分区域，功能相关的信息距离较近，不相关的信息距离分隔较远，以此优化用户视觉流程。

3.1.3 对于色盲人士的考虑

据数据表明，大约有8%的男性和0.5%的女性有颜色视觉障碍。因此，为了特殊人群的便利性，在设计时在颜色之外使用其他文字或符号提示，不完全依赖颜色，如加拿大某地区通过圆、正方形以及圆形来区分红绿灯的颜色；确保色彩的对比度，在完全灰度的情况下可以识别，对比度越高，色盲人士越能看出来两个不同项目的差别。

3.2 视觉设计的美观性、欢愉性

在满足可视化实用性和高效传达的基本需求后，审美元素将成为激发用户兴趣和热情的关键因素。这些元素可以是纯装饰性的，也可以是被用于提高可视化成果的接受度的。可视化中色彩的表现形式多种多样，但大多遵循以下原则。

3.2.1 色调统一原则

格式塔原理认为人类视觉是整体的，视觉设计时要注意色彩搭配的和谐性。设计师应避免将对抗色过度靠近，以防视觉对抗产生视觉干扰和让人难受的心理感受。在有意识地考虑全局效果的前提下，设计师可以通过弱化某些颜色或突出某些信息以改变可视化的使用方式。

3.2.2 形式的创新性原则

一个真正“美丽”的可视化效果应该提供一种新颖的数据观察视角或独特的美学效果。这些新颖性并非为了追求新颖而设计，而是为了提高效率。Federica在描绘的信息图中，运用了独特的黄金分割海螺来表示数据，并通过海螺所在的位置高低和形状大小及完整程度暗示数量的多少，十分具有创意和美学观感（图3）。

3.3 视觉设计的相关性、联想性

当色彩特征不断积累，观察者对色彩时会产生特殊的情感，这是人类记忆与色彩相互作用的结果。此时，色彩不再仅是简单的信息，而是成为传递人类情感的媒介。根据符号学理论，色彩与社会性的结合在可视化中的使用主要分为以下两种情况。

3.3.1 文化和知识相关的可视代码

不同的知识文化体系对使得人们能对代码具有不同的接受度或者不同的理解，地质学家感知地表地形结构的理想方式是等高线图，对于普通大众来说阴影图标识则更加直观。色彩形成的社会文化环境，包括熟悉的色彩和元素，期望的使用场景并与其统一的全局风格等。熟悉的外观和感觉可以使读者更轻松或者舒适地接受展现处理的信息。

3.3.2 经验和回忆相关的可视代码

通过对外部刺激特征进行编码，触发观察者记忆中的类型编码。比如，可以综合考虑色彩对于心理效应的影响，如轻重感、强弱感、进退感、冷暖感等[7]，以实现色彩功能美和藝术美的统一。

4 结语

可视化设计是一种跨学科的实践，涉及艺术、设计、计算机科学、心理学和社会学等多个领域。其设计目标不仅是传递信息，还包括激发观察者的兴趣，引导他们对数据进行深入的理解和探索。

在设计过程中，设计师需要从多个角度考虑，包括但不限于数据的性质、目标受众的需求、实际使用场景、当前可用技术等等。这需要设计师具有丰富的经验和专业知识，才能创建出既美观又实用的可视化设计。

因此，我们期待在未来，可视化设计将进一步发展，并在不同领域发挥其重要作用，也希望更多的研究能够探索如何更好地利用可视化设计来解释复杂的数据，帮助人们更好地理解世界。

5 参考文献

[1][美]Julie Steele&Noah Iliinsk.数据可视化之美[M].北京：机械工业出版社，2011：163.

[2][美]Alan Cooper，Robert Reimann，David Cronin.About Face 4：交互设计精髓[M].北京：中国工信出版社，2015：325-326.

[3][美]Jeff Johson.认知与设计-理解UI设计准则[M].北京：人民邮电出版社，2011：46-50.

[4][美]库尔特·考夫卡.格式塔心理学原理[M].杭州：浙江教育出版社，1999：168-188.

[5]柳瑄.基于产品语义学的老年用户电子书界面设计研究[D].南京：南京工业大学，2012.

[6]王震亚.基于感性工学的装载机人机系统设计研究[D].济南：山东大学，2011.

[7]贾欣荷.面积与距离因素在界面色彩感知中的作用研究[D].南京：东南大学，2017.