网页设计中的颜色运用

转载 2007年09月19日 09:08:00
摘要
从心理学角度来讲,不同的颜色代表不同的意思。从这个观点出发,本文讨论网页界面中背景颜色和内容颜色的关系。了解这个关系,有利于:a) 为网页中不同的内容选择适合的颜色;b) 浏览网页时,可以方便的找到需要的内容。
关键字:color, interface, web design
1. 介绍
1.1 研究来源
颜色是能够辅助界面设计的重要的文化元素(Chen1999)LuscherScott(1969)阅读了近150篇文章,并通过Luscher颜色试验,揭示颜色和人的个性的关系。每个人都有其各自的颜色喜好,不过,这个喜好会根据不同的物体而发生变化(Cooper B. Holmes Jo Ann Buchanan1984)。在我们的网页设计工作中,我们发现不同的网页内容,用户对颜色的喜好也应该是不同的。
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 结论
一般来说,试验参加者大多喜欢红、蓝、绿,作为网页的背景色,这些恰恰是三原色。它们在色谱中是最纯的颜色,我们可以认为我们这个试验的参加者偏好纯色的网页。
当具体访问某个类别内容的时候,人们也较喜欢一些特定的颜色。所以,我们认为网页内容的类别和其使用的颜色具有一定的关系。通过试验,我们发现如下规律:
·         关于我们:红色, 橙色绿色
·         公司新闻:蓝色
·         产品介绍:蓝色绿色
·         服务/技术支持:蓝色绿色
·         财务(股票、财务、购买或通过互联网购买):红色蓝色
·         人力资源(招聘或培训):蓝色, 绿色, 黄色,灰白
·         主页:蓝色
·         网络社区(合作伙伴、会员中心、或企业文化):绿色蓝色
通过研究,我们发现为特定内容的网页选用适当的颜色很重要,这不仅可以告诉浏览着他们目前在浏览哪类信息,还可以让浏览者在浏览时感觉舒适。令人舒适的网页设计可以进一步让用户对该公司产生好感,这是很重要的。
 

网页设计中的中国传统色彩速查表 颜色值

原文作者:青女 附注及色样添加:Quester ████ 粉红(#ffb3a7),即浅红色。别称:妃色 杨妃色 湘妃色 妃红色  ████ 妃色 妃红色(#ed5736):古同“绯”,粉红色。...
  • ren8179
  • ren8179
  • 2013年04月07日 12:21
  • 1081

网页设计颜色十六进制值大全

此红色的十六进制值:#0 在下面的色表中,垂直的数值是绿色值,水平的数值是蓝色值: 此红色的十六进制值:#FF 在下面的色表中,垂直的数值是绿色值,水平的数值是蓝色值...

平面与网页设计中关于颜色搭配的问题

有位网友问我:色彩调整需要一定的色彩知识,但在讲解ps的有关书籍中都不讲解色彩知识(只有简单的概念介绍),在网上也很难找到这方面的资料,因此不少人只有一个色彩方面的基本概念,真要运用起来,总是感到无从...

网页设计的12种颜色

前不久,ColourLovers.com公布了一项调查结果。 他们发现,美国前100大网站的Logo,主要使用12种颜色。其中,采用蓝色的网站最多,红色排在第二种,黄色排在第三种。 我...
  • xhgrid
  • xhgrid
  • 2012年08月09日 14:31
  • 296

网页设计中文字颜色的搭配技巧

原文网址:http://hi.baidu.com/life_on_the_way/blog/item/8bbdc9a49059cbf29152ee1d.html      BgcolorΚ...

颜色在网页设计中的重要性【附30个优秀案例】

作为设计师,在创建网站的时候,最关心的是在不影响可用性的情况下如何捕捉观众的注意力。做到这点的唯一方法是通过提升你的创意水平,以创造一些真正令人印象深刻的东西。 颜色有不同的作用,在网页设计中的有...

经典网页设计:使用颜色滤镜效果的20个网站

大的背景图像已经成为了今年网页设计的趋势。在图像排布文本和按钮并很好的搭配相当具有挑战性。因此,设计师使用创意的 Photoshop 滤镜和渐变来在图像上创建一个遮罩,并在其上放置其他的网页设计元素。...

网页设计颜色搭配图

  • 2014年09月24日 13:43
  • 1.62MB
  • 下载

网页设计各种颜色搭配 并且哪几种颜色可以做成哪种风格

粉色:红色 +白色 pink:red +white  颜色的调配 (水以适宜为准,水多则浅,少则深,)   标准间色是二原色等量混合的结果,不等量混合则滋生出不同色相变化。如:   红+黄...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网页设计中的颜色运用
举报原因:
原因补充:

(最多只允许输入30个字)