快好知 kuaihz

浅谈网页设计中的色彩理论

无可争议的是,色彩是任何设计领域中最重要的一方面。

设计师在决定了一个网站风格的同时,也决定了网站的情感,而情感的表达很大程度上取决于颜色的选择。颜色是很有力的工具,所有设计师在设计网页时就应该明白这一点。

一、颜色术语

你们当中很多人可能已经在学校学过一些色彩基础知识,让我们快速回顾一些术语,来更好的把握色彩和运用色彩。

色轮的主要组成

所有的色彩能在一个色轮中呈现。在这个色轮中,我们能把颜色分成3大块:原色,辅助色和第三颜色

三原色分别是红色,蓝色和黄色。这些色彩是基础色,他们组成了色轮上的所有其他颜色

把原色混合在一起,你就能得到辅助色,它们是橙色、绿色和紫色。

二、颜色的关系

描述颜色有大量的术语,了解这些术语将有助于我们讨论的色彩和色彩的情感含义。

互补色是互补互调的色彩,它们坐落在色轮上对立的位置。这些互补色有蓝色和橙色、紫色和黄色、以及红色和绿色。

邻色是色轮上相毗邻的色彩,所以当邻色一起用时,可以是很好的搭配,但不会有明显的对比。

第三颜色是由中间色组成的,例如黄绿色和蓝绿色,即由一个原色和一个辅助色混合组成。

三、基于情感的色彩群体

一些色彩群体是和情感联系在一起的,比如温暖、冷静和中立的情感。

暖色能让人感觉到温暖,例如红色、黄色和橙色。

冷色让人联想到凉爽和寒冷,例如蓝色,绿色和紫色。

中性色,顾名思义,并不创造怎样的情感。像灰色和棕色就是中性色。

了解色彩这些方面的知识可以用帮助一个设计师在设计网页时不用文字就能表达特定含义和特定情感,并彰显优势。

四、设计中颜色的类型

这里有两种不同的颜色系统,两者的运用取决于你设计什么。

RGB是这个色彩系统中三个基本色“红、绿、蓝”的英文缩写,这三种基本色是光的三原色。RGB运用在电视电脑屏幕和任何类型的屏幕上。

CMYK是“青色、洋红、黄色、黑色”的英文缩写,这些颜色是颜料的原色,CMYK被运用于印刷。

网页上的设计是建立在RGB色彩系统上的。

五、明智地选择色彩、传达意义

色彩理论是运用颜色背后的意义给用户带来感官体验的实践所得。这种实践经验再加上一些知识和想法可以运用到网页的设计中去。

人们往往不会同意一些特定色彩的含义以及设计师们应该用哪些颜色来加强特定的情感。但无需争论的是,客户对颜色是有情感的反应的。

当为你的设计品选择颜色时要慎重,不要无目的地使用颜色。你所选择的颜色要适合你的目标受众、能表达客户希望你传达的信息,能符合你对用户在你的网站所获得的整体感受的期望。

暖色能带来阳光明媚的情绪,用在希望带来幸福快乐感觉的网站上是明智的。举一个例子,在2009年全球经济不太好的时候,黄色变成了网页设计中非常流行的色彩,因为公司希望顾客在他们网站上有到阳光和舒适的感受。

冷色最好是用在想要表达出专业或整洁感觉的网站上,以呈现出一个冷静的企业形象。冷色表达出权威、明确和信任的感觉。例如,冷静的蓝色用在许多银行的网站上,比如大通银行。冷色运用在以乐观为主题的网站上是不明智的,因为用户会得到错误的印象。

六、颜色对于用户的意义

大多数颜色能表达积极或消极的情绪,这取决于它是怎样被运用的,以及周围其他的颜色,还有网站本身的内涵。

以下是一些流行色彩的普遍意义。

红色

红色象征着火和力量,还与激情和重要性联系在一起。它还有助于激发能量和提起兴趣。

红色的负面内涵是愤怒、危急和生气,紧急情况下,和愤怒,这也源于红色本身里的热情和进取。

橙色

橙色是色轮上红、黄两个邻色的组合色。橙色象征着幸福,快乐和阳光。这是一个欢快的色彩,唤起孩子般的生机。

橙色没有红色那么积极,但是它也有一部分这样的特质,刺激着心理活动。但它也象征着愚昧和欺骗。

黄色

明亮的黄色是一种幸福的颜色,代表着积极黄色特质:喜悦,智慧,光明,能量,乐观,和幸福。

一个昏暗的黄色则带来负面的感受:警告,批评,懒惰,和嫉妒。

绿色

绿色象征着自然,并且有一种治愈性的特质。它可以用来象征成长与和谐。绿色让人感到安全。医院经常使用绿色。

另一方面,绿色的是金钱的象征,表达着贪婪或嫉妒。它也可以被用来象征缺乏经验或初学者需要成长(“没有经验的绿色”)。

蓝色

蓝色是一个和平、平静的颜色,散发着稳定和专业性,因此它普遍运用于企业网站。蓝也可以象征着信任和可靠性。

一个冷调的阴影能带来蓝色消极的一面,象征着抑郁,冷漠和被动。

紫色

紫色是皇室和有教养的颜色,代表着财富和奢侈品。它也赋予了灵性的感觉,并鼓舞创造力。

较浅的紫色可以散发出一种神奇的感觉。它能很好地提升创造力和表达女性特质。

较深的紫色可以呈现出沮丧和悲伤的情绪。

黑色

虽然黑色是不是色轮的一部分,它仍然可以被用来暗示感觉和意义。它往往是与权力,优雅,精致,和深度联系在一起。据说在面试时穿黑色服装可以表现出应聘者是一个有力量的个体,网站也是同样的道理。

黑色也可以被看作是负面的,因为它与死亡,神秘和未知联系在一起。这是悲伤、悼念和悲哀的颜色,因此在运用时必须明智选择。

白色

白色,也不是色轮的一部分,象征纯洁和天真。它还传达着干净和安全。

相反,白色还可以被认为是寒冷和遥远的象征,代表着冬天的严酷和痛苦的特质。

七、大公司的网站颜色运用的例子

我们来看看一些大公司的网站,来知晓他们是怎么运用颜色的,以及那些颜色对于他们的用户来说意味着什么。

耐克

耐克常常更新他们的网站,但通常还是黑色和灰色的色调,它通常是暗。黑色显示着他们产品中的力量,留给大家他们向爱运动的顾客出售优质产品的印象。

白宫

白宫的网站主要是白色和浅灰色,再加上一些蓝色和红色作强调色。白色象征着希望和自由,显露出平安和纯洁的价值。红色和蓝色当然是美国的代表色,红色代表着热情和能量,蓝色则代表着稳定与和平。

亚马逊

亚马逊的网站大多是白色的,白色有着最佳的对比度和可读性。它还显露出整洁性,让用户能自由地浏览网站。以橙色和蓝色的强调色则让用户能感到安定、兴奋,也让他们期望找到最满意的采购。

Verizon公司

红色是Verizon的企业品牌主色调,也是贯穿整个网站颜色。红色有助于刺激用户的兴奋性,展示出一个出售让人兴奋和快速更新的产品的公司形象。白色背景的运用与亚马逊类似,通过一个整洁有序的界面来帮助用户阅读这个网站

百思买

百思买的网站的色调是深蓝色,显露出他们在电子市场中的稳定和实力。顾客在百思买上的大量采购使得他们需要安全感与平和感。黄色散发的快乐气氛让他们在采购时感觉到兴奋与趣味。

嘉信理

嘉信理财是一家投资公司,在不稳定的市场环境下他们需要让消费者在他们的网站上感受到平和。他们使用柔和的深蓝色调来实现这一点,并建立起一种平静、祥和的气氛。中性的棕色则是另一种帮助协调偏激的用户感受的企业色彩。橙色作为强调色,能让用户在买股票时产生兴奋感,同时也为网站带来了幸福感。

道奇

道奇的网站大多是黑色系,能让网站上的图片凸显出来。他们使用一种鲜艳的红色作为强调色。黑色给网站带来力量感,在一种精致与阳刚的氛围下展示他们的产品。黑色是一种不错的颜色,它能使产品看起来珍贵、有价值。红色则表达出激情和兴奋,是希望能让消费者认为他们是从一个值得信任、质量有保障的公司购买到的车辆。

全食食品公司

全食食品企业品牌的主色调和他们的网站色调一样,是绿色。全食食品以较高的价格售卖健康的有机食品。网页设计中的绿色很好的展示了他们所珍视的健康与纯净的概念,以及他们亲近自然的产品。他们也用了很配绿色的淡黄色作为强调色,为网站增添了趣味性。

八、颜色网站中的运用

不需要描述性的文字,颜色就能赋予网站以意义。无论你是否打算为他们加上某种意义,颜色本身就有许多特定的印象。用户浏览网页时,颜色帮助转移用户的视线,指引用户怎么去浏览一个页面。在许多企业的网站中可以看出,颜色表达了情感和价值观,向用户展示着他们的公司是怎样的、他们所售卖的产品是怎样的。

仔细挑选补色能让你更好地运用颜色,一旦选定后你想要表达的意义也就显示出来了。

配对色的运用能改变一个网站的意义。给以柔和的蓝色为色调的、表达出平静网站配上明亮的橙色,就能让它变成让人更多感受到兴奋和趣味的网站

也许你的客户认为你所设计的网站深灰色过多、太过严肃,加上柔和的蓝色能让你的网站有平静、平和的基调。

九、与色彩运用相关的资源

许多网站讨论过色彩理论和设计中的色彩使用。可以运用以下这些有用的资源来寻找色彩搭配和为你的网站设计注入更多的意义。

《20个对设计师非常有用的在线配色工具》

—参考文献—

色彩理论- 维基百科

颜色的含义-Color Wheel Pro

颜色品牌:颜色背后的含义–EveryJoe

颜色:含义,象征性和心理 -Squidoo

颜色方案的设计者3

本文来自:http://blog.jobbole.com/8597/

英文原文:http://sixrevisions.com/web_design/a-look-into-color-theory-in-web-design/

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:浅谈网页设计中的色彩理论  网页设计  网页设计词条  色彩  色彩词条  理论  理论词条  
设计

 基于微信的产品设计05:公众号自...

公众号自定义菜单是公众号会话页面中与用户产生交互的主要功能,也是公众号非常基础的运营模块。自定义菜单可以在微信公众平台的“自定义菜单”模块中进行编辑。公众平台的...(展开)

设计

 设计中的情感因素

 近日网页设计师Paul Jarvis发布文章,强调了设计中情感因素的重要性。Paul Jarvis本人还是畅销书作家,他的新作《Everything...(展开)