网页设计与色彩分析范文

摘要:

色彩在网页设计中扮演着举足轻重的角色，在影响网页功能的同时，调动着观者的情绪。文章阐述了网页色彩成像的规律和方式，着重分析了色彩在网页的可用性、认知与美感和情感中的巨大影响，并介绍了网页色彩的可用性、偏好和情感表达的评估方法。

关键词:

网页设计；色彩；界面

一、网页中的色彩

在现实世界中，我们看到的色彩由三种色光组成，他们本身不能再拆分出其他的色彩成分，所以被称为三原色。光学的三原色由红、绿、蓝组成，这三种光混合则会形成白色光。电脑的屏幕成像同样符合这一原理，由三原色光构成色彩。在网页html语言中，我们使用RGB色彩模式，通过调节三原色的数值表达确定的色彩。例如，红色的RGB数值为（225，0，0）十六进制的表示方法为（#FF0000），白色则为（#FFFFFF）。目前，一般电脑都能显示32位色彩，所以在网页界面中约存在着100万种以上的色彩。网页设计的发展大约经历了三个阶段：第一个阶段为静态网页，界面由字符组成，只能保存单纯的文本；第二个阶段，网页开始图文并茂，走上了技术与艺术结合的道路，网页的美感逐渐为人重视；第三个阶段是动态交互网页，网页承载着更大的信息量和更丰富的交互方式，网页设计成为了一门交叉的学科。色彩对于网站设计的作用是巨大的，它不仅在美学上奠定了网站的风格基础，同时对于网站的信息传达效率和功能实现也有着很大的影响。网页还可以通过色彩引起用户不同的情绪与感受，从而创造出与众不同的浏览体验。

二、色彩对网页设计的影响

（一）色彩与网页可用性网站的重中之重就是其功能性。网页需要有效地传递信息，帮助用户在互联网“地图”中来回自由穿梭，能够去往想去的地方，不至于迷路，最终攫取到自身所需的内容。网页在多大程度上能实现其目标功能被称为网页的可用性，而色彩是其中重要的影响因素之一。在导航设计中，文字与背景色彩的选择决定用户是否能快速地察觉链接并正确地点击。导航中色彩组合会影响点击精度和速度，如果一个目标对象相对显眼，相应的搜索时间可以提升83%。选用不当的图底对比色彩组合，会使文字模糊不清，难以在第一时间察觉和辨别（图1），不仅影响搜索效率，更是不美观。在颜色的选择时，应该仔细思考选择目的和期望的效果，再添加适合的颜色。在网站的布局方面，色彩起着分组和层级的作用，是用于创造界面布局的最有影响力的元素。通过色彩的选择，我们可以将界面的某些元素突出或隐藏起来。色彩不仅将元素分割开来，比如导航菜单内容文字、标题、图片、符号和广告灯等内容，也可以使界面元素互相协调，达到设计的一致性。错误的颜色选择则会导致混乱，使界面上出现“坏斑”，破坏整体效果。针对色弱和色盲的特殊用户，我们需要借助特殊的色彩模型，在网页特别是文字图底对比中使用特殊的色彩组合，使得网页在不影响视力正常的用户使用的同时，帮助低视用户突破视力缺陷的障碍。

（二）色彩、认知与美感有数据表明，用户会在打开网页的最初5秒钟内形成对网页的初步印象，并且决定是否继续浏览该网页。所以，从认知形成的角度来说，色彩很大程度上决定着一个网页的生死。色彩还有一种使人增强记忆的作用。巧妙而独特的网页色彩搭配可以浏览者留下深刻的印象，从而从海量的网站中脱颖而出。“没有丑陋的颜色，只有丑陋的搭配。”色彩的组合是影响页面美感的重要因素。有研究表明，虽然每个人对于色彩的偏好是不同的，但是其中存在着一定的规律。对于特定人群，需要开发迎合其审美的色彩组合。在选用色彩时，可以遵守视觉设计普遍规律：对比与平衡。在表达强烈的主题时（例如赛车网站），可选择对比度大的色彩，用其落差形成强烈的视觉刺激；在表达温和的主题时（例如女性网站），可选择相近的色彩，通过弱化对比迎合主题。形成色彩美感的一般规律为：色彩组合在明度、纯度和彩度三个参数中平衡，其中至少有一个参数保持接近状态，否则就容易出现混乱的情况。

（三）色彩与情感心理学家认为，情感是指个体对客观事物是否符合自身需要的态度体验。人在接触网页色彩后，会通过直觉形成一种“感觉”，继续深入探索和思考后，就会引起悲、喜、优等心理反应，形成更高层次的“感情”。在不同的用户群体中，美感偏好具有高度的主观性和差异性。根据Norman的人脑识别处理的三个层次理论，人脑对美感呈现中的色彩搭配的处理处于“本能层次（VeisceralLevel）”，即在大脑处理前就会对对象进行生理反馈。但是这一点在之前的研究中体现的不多，应为美感偏好不仅受本能影响，还会受思考（reflective）的影响。当被测者被要求“主观的判断”时，人受到文化、教育和经验影响的价值观会影响人的决策。在网页设计中，选择的色彩组合会形成不同的主题，使用户产生联想，诱发各种情感，使心理发生变化。需要注意的事，好的色彩组合必然是切合网页内容和情境的，不同的色彩适用领域也不尽相同，需要慎重的选择。例如，紫色和蓝色等冷色系会在心理上引起人们的食欲不振，因此日常生活中很少有此类颜色的碗碟。所以在设计食物类网站时，应该避免这些色彩，尽量选用刺激食欲的橘色、黄色、绿色等；在设计婴童产品的网站时，选用柔和的淡色系能唤起怜爱、柔情，非常切合主题，但是将这种组合放到商务类网站中就大不合适了。选择正确的色彩主题方能准确地传达信息，引发不同种类的情绪，从而达成网站的期望目标。

三、网页色彩的评估方式

对于网页色彩功能侧重点的不同，网页设计的色彩评估方式也会变化。以下为评估网页色彩对网页可用性、网页色彩偏好和网页色彩情感表达时常用的评估方法。网页色彩可用性评估：1.通常在选定评估对象，如导航栏、文字段落、按钮等后，以色彩为变量设置对比试验组并完成相应任务（图2），通过测算完成时间、正确率等参数评估网页可用性；2.在评估网页信息传达效率，可以通过使用眼动仪设备追踪用户瞳孔，记录注意力轨迹和视线集中点，评估重要信息是否容易被用户接受。色彩偏好评估：通常以分发调查问卷，获取被测者对网页色彩方案的评分为评估手段。在分析数据时，除了分析数据平均值外，必要时还需要分析数据方差，找出获得最高一致性评价和平均分的方案。色彩方案的方差得分可以作为平均分的补充，验证该方案是否能达成较一致的偏好感受。色彩情感表达评估：可借鉴感性工学方法，引入SD语义法。使用色彩模型，例如RGB、CMYK、PANTON、NCS等色彩体系，提取色彩属性，分发5或7点量表问卷，将情感标签量化为色彩的属性值，建立色彩与情感主题的科学关系。这一评估方法可以一定程度上地将感性的色彩进行量化，通过确定的数值找到最切合主题的色彩方案。

四、结语

欧洲与日本对色彩的研究非常深入，并取得了相当的成就。在1851年，欧洲最早进行城市色彩规划，并与1963年成立了流行色协会。而国内的色彩消费和应用市场日益壮大，但是，国内的色彩研究却还未跟上，需要通过大量实践和研究，找出符合国人审美和独具东方韵味的网页色彩搭配。色彩拥有无限的可能性。人们在浏览网站时，第一感受就是其色彩带来的整体印象，其次才是探索网站的内容。色彩影响着网站的可用性，更是调动着用户的情绪和感受。同样的网站运用不同的色彩方案，就会渲染出不一样的氛围和意义，这就是色彩的魅力所在。在选择网页中的色彩时，设计师不能够凭着自身喜好设计，而是应该有一个严谨、科学的选择方式。设计师需要在充分了解网页侧重功能与目标人群后，考虑色彩对网页的各方面影响，若有条件可以通过实验设置验证色彩搭配的准确性。

作者：谢雪莹 单位：上海交通大学媒体与设计学院