为网站寻找完美的配色

zhixun

2011-07-16 10:25  

颜色在不同文化背景下有不同的含义，在网站设计中，我们需要小心谨慎地运用色彩。来自Yahoo的专业设计师为我们生动地介绍了这方面的一些知识，对你今后的网站设计不无裨益。

大约10岁的时候，我去迪斯尼米高梅影城游玩。突然，我瞥见了一幅巨大的墙绘，那是用深浅不一、缤纷多彩的颜料绘制而成的。借用这些颜料，艺术家让生活变得生气勃勃。我该是在那一刻便意识到了我的命运从此注定：

我是名设计色彩“极客”。

我喜欢将自己沉浸在色彩之中，因为那让我兴奋不已。色彩能让你体味到情感，这实在是妙不可言；当人们注视着湛蓝的天空时，你能觑见他们脸上洋溢的那份快乐，或者，当某人在情人节收到一个红色信封时，你会感觉到他浑身散发的那股柔情。经由联想或文化影响，色彩有了含义。

我做设计的时候，会花些时间思考为何我要用这种特定的颜色。我考虑与之关联的文化影响，考虑它是否有何含意超出了我们社会的接受程度。之所以要考虑这些，是因为作为web设计者，我明白我的选择将会被成千上万乃至数百万的人看到。许多网站在页面语言的国际化上下了不少功夫，但他们是否真对颜色有所斟酌呢？颜色传递含义，而我们的假设常常是错误的。

以婚庆网站为例。在西方文化里，新娘常穿着白色礼服，因而将那种鲜艳的纯白色纳入网站设计就很常见。然而，在中国，选择红色会更为合适，因为白色是哀悼的颜色。在中国文化里，红色意味着好运、福气和爱情。加上几抹黄色，你可以暗示高贵和财富。

既然颜色的含义存在各种文化差异，你也许很想知道颜色选择的“罗塞塔石碑”（译注：比喻解开神秘之谜的线索）是什么。一般来说，蓝色和紫色是设计中用起来最放心的颜色。蓝色通常用于传递积极的信息——乐观、快乐与信心。不过，虽然这一规则适用于绝大多数国家，但像印度和日本这样的国家还是赋予了蓝色截然不同的含义。在印度，蓝色是哀悼的颜色，而在日本，蓝色表示邪恶。

另外一种认为安全的颜色是紫色。一般而言，紫色与高贵和财富相关，这是由古代渊源流传下来的，当时紫色是社会地位的一种象征。历史告诉我们，这是因为紫色染料得自海螺，它在阳光下不会褪色，相反，它会变得更明亮，在日晒雨淋之下尤为鲜艳。然而，在泰国，人们却有着别样的观念，他们将紫色用作哀悼的颜色。

令我大感惊讶的是，这么多国家使用不同的颜色来表达对所爱之人过世后的悲恸之情。在美国和英国，传统上用黑色，但是我们在此会看到全世界存在如许多的差异。我准备了一份表格，就这些差别给出了一个方便参考的分类：

了解你的受众
既然有这么多暧昧的含义，你可能在想，保险的话索性就别用颜色吧，但情况并非如此。你应当接受差异，利用它们来推广你的信息。了解你的目标受众，并照此定制网站。如果你有多类受众，可以试着通过定制门户或借助若干目标化CSS将你的网站本地化。

在使用混合色彩时，也要有自己的考虑。以股票市场为例。在美国、英国和日本，正面指示用绿色或蓝色，而负面指示用红色。而在台湾和韩国，情况则恰好相反。这无关设计的选择，而是文化的解读。在这两地，红色代表繁荣与幸运，都是正面的东西。关键在于，清楚这些微妙却十分重要的细节，尽量避免让你的访客困惑不解，避免传递错误信息的可能。

明智的话，你还要记住，12个人中就有1人是色盲。因此，像照片和插图一样，颜色应当用来支撑信息的表达，而不该成为信息本身。有项测试不错：如果把颜色去掉，看是否还能表达相同的信息。

设计师的工具箱里有许多工具，这些应当小心谨慎地使用。我见过以亮红色做背景的网站，你在房子那头都能看得见，这样的网站会很刺眼。对于医疗保健类网站而言，选择这类背景是很差劲的。过度饱和的色彩往往会让人神经紧绷，而在医院你最不愿意看到的就是濒临绝境。这当然是个极端的例子，但可以很好地说明这一问题。

下次你碰到医院职工，请看看他们穿戴的是什么。你会发现，他们的制服往往是较柔和的淡色彩，例如淡紫色、绿色或蓝色。这并非偶然：它们的意图是要传递平静、安心和洁净的感觉。温和淡雅的颜色能达到这一目的。在设计医疗保健类网站时，请使用能让受众安静的颜色，而不是让他们兴奋的颜色。

简单的颜色变化便能决定网站的观感。以伦敦大学学院医院的网站为例。我取来原始设计，并用不同颜色风格做了四个新页面：

每一种设计都有不同的观感。黑色隐含着专业/合法之意，但也让人联想到死亡。红色看上去没那么糟糕，但太接近于血的颜色，让人联想到人身伤害，而不是医疗康复。最后两例分别为绿色和蓝色。我认为两者都是有效的，但我宁愿选择蓝色。原因在于，绿色太亮了些，与网站的真正目的——让你平静和安心有所背离。
明亮起来
医院的例子与针对小孩子的网站则形成了鲜明对照。孩子能从明亮、饱和的色彩受益。这些颜色能刺激他们的头脑，吸引他们的目光。通过使用丰富的色彩，你能让他们始终兴趣盎然，并激励他们去探索设计的奥妙。大量使用暖色如红色和黄色，同时结合一些较冷的蓝色和绿色，尤其能取得好的效果。如果你为儿童网站设计选择配色方案，可以从他们的玩具汲取灵感，你会观察到，玩具制造商选择了鲜艳活泼的色彩，他们特意给玩具绘上了饱满、明亮而简单的颜色。

我最后给出的例子是食品网站。在为此行业做设计时，你应当使用能刺激食欲的颜色。由于食品的颜色多种多样，好的配色方案常常难以选定。总的说来，诸如红色、橙色、黄色和绿色这样的颜色确实能够激发食欲，同时又提供一种温馨如家的感觉。因而汉堡王、La Tasca、塞恩斯伯里和韦特罗斯在他们的商标或网站上都用到这些颜色也就不偶然了。下面呈现了他们的配色方案，它们尽可能地诱发你的饥饿感。蓝色则恰好相反，它会抑制你的食欲。

但愿这些会有助于你今后的配色方案选择，你已经学到了一些色彩理论的历史以及它们相伴的关联含义。务必聪明而细心地发挥你设计师的能力。

案例分析：Twitter
你头一次接触Twitter网站时，会注意到它的设计主要为蓝色。我们知道蓝色是一种用于web的安全色彩，因此Twitter在其网站上用到它就不足为奇了，特别是它还支持英语、法语、德语、意大利语、日语、韩语和西班牙语等多种语言。支持这么多语言意味着你的受众是多种文化的聚合体。

我们知道每12人中有1人为色盲，那么如果我们通过他们的眼睛来看这个网站，又会出现什么情况呢？

如果对比度和颜色组合太过相似，你的一部分受众就会无法看到内容。有许多方法可以模仿色盲效果。我喜欢用的程序是Color Oracle，这是一个适合Windows、Mac和Linux的色盲模拟程序，由伯恩哈德•杰尼（Bernhard Jenny）和纳撒尼尔•沃恩•科尔索（Nathaniel Vaughn Kelso）开发。

作为web设计师，我们听过渐进增强，但是有没有听过柔性降级（graceful degradation）？柔性降级指的是，网站采用现有最新最棒的功能设计和开发后，再用老的浏览器检查以确保新特性不呈现时，网站功能仍然有效。这一思想也适于色彩运用。先用你所需的所有颜色设计好网站，然后使用Color Oracle或Photoshop检查色盲支持效果。

颜色并非你工具箱里的唯一工具。选取能够凸显内容的颜色，但仍然要让用户能阅读内容。使用Color Oracle测试颜色组合，如有必要，则作出改变。记住一点，你希望自己的网站能让最广泛的受众看到，如此他们才能欣赏你的设计。
下面是标准的Twitter网站。该图显示了无色盲的人看到的Twitter主页的模样。

绿色盲：5%的男性和0.35%的女性患有这种色盲。它让这些人无法感知红绿两色。对他们而言，Twitter是如下这个模样。

红色盲：这种色觉缺陷会让红色看上去十分黯淡。它较不常见，与性别关系不大，1%的男性患有此病，而且这是遗传性的。对于那些患有红色盲的人来说，Twitter是如下这个模样。

蓝色盲：这是一种最罕见的色盲，不到0.3%的男性和女性患有这种色盲。它会限制你识别蓝-黄色谱的能力。对他们而言，Twitter是如下这个模样。