网页设计中的颜色

作者 Isar界面设计公司

阅读本文英文原文（翻译：刘松涛）
本文经 北京伊萨尔界面设计有限公司授权发表

摘要

从心理学角度来讲，不同的颜色代表不同的意思。从这个观点出发，本文讨论网页界面中背景颜色和内容颜色的关系。了解这个关系，有利于：a) 为网页中不同的内容选择适合的颜色；b) 浏览网页时，可以方便的找到需要的内容。

关键字：color, interface, web design

1. 介绍

1.1 研究来源

颜色是能够辅助界面设计的重要的文化元素(Chen，1999)。Luscher和Scott(1969)阅读了近150篇文章，并通过Luscher颜色试验，揭示颜色和人的个性的关系。每个人都有其各自的颜色喜好，不过，这个喜好会根据不同的物体而发生变化（Cooper B. Holmes 和 Jo Ann Buchanan，1984）。在我们的网页设计工作中，我们发现不同的网页内容，用户对颜色的喜好也应该是不同的。

1.2 研究目标

现在我们的生活离不开网络。随着国际互联网和内部网的发展，在网页界面上我们经常看到越来越多丰富多彩的内容。比如， Sun公司的外部网站大概有2万个网页，内部网上则有2百万个网页。大量的信息的确给用户提供了很多资料。然而，也带来了查询所需内容的麻烦，若遇到结构混乱的网页界面，用户则更是一筹莫展。因此，除了设计好合理的信息分类和网站结构外，最好还能利用不同的背景颜色来区分不同的内容。

在我们以往的研究中发现过一个现象：浏览者常常深陷复杂的网站结构中，不知道自己在哪儿，也不知道怎么回去。

此研究目的是要找出网页设计中最适当的背景色与内容的匹配关系，为网页设计提供准则。

2. 研究手段

我们的研究手段是试验。研究对象是20岁到35岁之间的男性16名，女性17名。其中一些人是来自不同学校的不同年级的学生，还有些人则是上班族。我们认为这个年龄段的人是最主要的上网人群。

具体的研究过程是顺序进行的。首先，我们访问了中国的30家知名企业的网站。从中找出最常被访问的信息类别8类。如下：

• 主页
• 关于我们
• 公司新闻
• 产品信息
• 服务/技术支持
• 财务（股票、财务、购买或通过互联网的购买）
• 人力资源（招聘或培训）
• 网络社区（合作伙伴、会员中心或企业文化）

然后，我们请参与试验者来为上述分类配上不同的颜色。他们使用微软Word软件中的绘画功能来填充他们认为最好的颜色。之后，我们收集结果进行分析。

3. 结果和分析

色彩学里有三原色：红、绿、蓝。两两混合后产生出另外三种颜色：黄、蓝绿、紫。在色谱中是：红、黄、绿、蓝绿、蓝、紫。黑是红、绿、蓝的组合。根据冷暖色划分，则可以分成八色：橙是最暖色，红和黄是暖色，红紫和黄绿是略暖色，蓝绿和绿紫是略冷色，蓝色是最冷色。白色反光最强，感觉较冷；黑色吸光最强，感觉较暖（Munseu, 1915）。

在试验中我们让试验者根据下面的表一来选择背景颜色：

表一：表中的数字是选择表顶部颜色的人数，这些颜色是网页左手边的内容。

下面我们来分析一下。

3.1 主页

此次研究中，对公司网站的主页(homepage)由如下实验结果，见图一：

图一，颜色和主页

如图所示，多数参与试验的人倾向蓝色作为公司网站的主页的背景颜色。本次试验中占50%。在试验者眼中，蓝色代表了纯洁和高尚。网页背景使用蓝色可令访问者感觉舒适并且较为容易相信网页所属公司。蓝色的引入是一个好的开端。

背景使用蓝色则白色的文字比较容易辨识，黄色次之。

3.2 关于我们

下面我们来看一下关于我们:

图二：颜色和关于我们

从上图中可以看出来，对于公司的介绍性内容，半数人选择红色、橙色和紫色。还有25%的人选择绿色。

红色、橙色和紫色同属于一个色彩序列，都是暖色。红色和橙色又表示热情。使用这类的颜色来作介绍公司的网页的背景，可以使该公司显得精力充沛、动感十足。白色字体放在红或橙色背景上最明显，黄色次之。

多数人选择紫色的人认为，紫色代表尊严和高贵，可令访问者对该公司产生尊敬感。

绿色代表生命和希望，同时也和年轻和成长相关。和选择红色或橙色的人一样，选择绿色的人认为绿色可是该公司显得很有生命力。白色或黄色的文字，放在绿色背景上非常突出，很合适。

3.3 公司新闻

公司新闻这个栏目也提供了关于公司的有关信息，我们的研究中发现一般的人喜欢蓝色。为什么呢？因为蓝色给人宁静、健康的感觉。这样网页的访问者会通过蓝色感觉公司的信息更可信。

图三：颜色和公司新闻

3.4 产品

下图中，我们可以看出来有超过一半的人—66%的人选择蓝色或近似的颜色的冷色。这些人认为这类颜色给人以安全和庄重的感觉，从而对该公司产品有信心。

图四：颜色与产品

3.5 服务/技术支持

在服务和技术支持类中，我们的试验结果和上述产品类基本一致。蓝色或近似的冷色选择的比较多。原因也类似，服务和产品一样重要，公司也需要其顾客对其服务有信心。不管怎么样，公司在推销自己的时候，服务越来越重要了。

图五：颜色与服务/技术支持

3.6 财务

这一类和公司的财务有关，比如采购、投资、通过互联网的购买等。对于这类网页的背景颜色，我们的试验者倾向于暖色：红色或黄色。传统上，红色代表吉利；黄色代表财运。而今在股市，红色却常用来警告投资者。所以这里使用红色很容易吸引投资者目光。此外，33%的人选择了蓝色，他们认为这类内容必须让人感觉非常可靠，使用蓝色就比较必要了。最后，我们不能忽略14%的人选择黑色，代表了稳定和坚实。

此类信息有两类颜色的喜好：暖色来吸引目光；冷色代表抽象的含义。

图六：颜色与财务

3.7 人力资源

人力资源/人事/培训的类别中，各种颜色的使用几乎都有。红色、绿色、黄色、灰色均有选择。各种颜色的喜好都有各自的理由。

• 红色： 引人注目，欢迎新人加盟；
• 蓝色：茁壮发展（海洋和蓝天）；
• 绿色：活泼、动感；
• 黄色：充满希望，孕育美好的未来。

上述颜色均昭示着希望，而不让人感觉没有热情。

若我们使用黄色为背景，则最好使用黑色或红色的文字。

图七：颜色与人力资源

3.8 网络社区

网络社区或会员栏目是公司与客户交流的地方。在此，客户可以给公司以建议或意见，也可以得到公司活动的信息，或加入公司组织的俱乐部等。我们发现19%的试验者选择了红色，29%选择了蓝色，33%的绿色，19%的蓝色。绿色相对较多，绿色在色谱中处在中间位置，比较柔和，对护目较好，这样客户可以感觉到温暖舒适，并乐于加入社区。

图八：颜色与网络社区

4 结论

一般来说，试验参加者大多喜欢红、蓝、绿，作为网页的背景色，这些恰恰是三原色。它们在色谱中是最纯的颜色，我们可以认为我们这个试验的参加者偏好纯色的网页。

当具体访问某个类别内容的时候，人们也较喜欢一些特定的颜色。所以，我们认为网页内容的类别和其使用的颜色具有一定的关系。通过试验，我们发现如下规律：

• 关于我们：红色, 橙色，绿色
• 公司新闻：蓝色
• 产品介绍：蓝色， 绿色
• 服务/技术支持：蓝色， 绿色
• 财务（股票、财务、购买或通过互联网购买）：红色，蓝色
• 人力资源（招聘或培训）：蓝色, 绿色, 黄色，灰白
• 主页：蓝色
• 网络社区（合作伙伴、会员中心、或企业文化）：绿色，蓝色

通过研究，我们发现为特定内容的网页选用适当的颜色很重要，这不仅可以告诉浏览着他们目前在浏览哪类信息，还可以让浏览者在浏览时感觉舒适。令人舒适的网页设计可以进一步让用户对该公司产生好感，这是很重要的。