浅谈网页色彩设计.docx
- 文档编号:11886436
- 上传时间:2023-04-08
- 格式:DOCX
- 页数:11
- 大小:106.03KB
浅谈网页色彩设计.docx
《浅谈网页色彩设计.docx》由会员分享,可在线阅读,更多相关《浅谈网页色彩设计.docx(11页珍藏版)》请在冰豆网上搜索。
浅谈网页色彩设计
引言
21世纪的今天是一个互联的时代,当今的互联网已经成为人们心目中不可缺少的工具,随着计算机在人们日常生活中的广泛应用,网站的价值也正被人们慢慢发现,网页的形象与设计也日益被人们所重视,越来越多的人开始熟练的掌握网页设计这一门技术。
那么“怎样设计一个成功的网站?
”,已经成为越来越多的网页设计师所思考、关注的问题。
在网页设计这一过程中,“色彩”永远是最重要的一个环节,什么样的色彩搭配最能够被人吸引;什么样的色彩应用会显得平淡无味;什么样的色彩搭配起来能够突出主题,什么样的页面能够在众多的网页网页中脱颖而出,这就是我今天所要和大家一起探讨的话题。
1网页色彩设计概述
网页设计是一个多元化的组合体,它包括版式布局、色彩搭配以及中心思想的表达描述。
人们在浏览网页时,第一眼引入人们眼帘的就是网页色彩,他的效果要先于网页内容,并给人留下第一印象,起到先声夺人的效果。
有关研究资料表明:
“人的视觉器官在观察物体时,最初的20秒内色彩感觉占80%,而形体感觉占20%;两分钟后色彩占60%,形体占40%;5分钟后各占一半,并且这种状态将继续保持。
可见,色彩给人的印象是迅速、深刻、持久的。
[1]”因此,在进行强调网页文字内容以及布局的同时,作为设计人员的我们要特别注意网页最直观的因素——色彩。
色彩是艺术表现的要素之一,是在设计时产生视觉冲击力和视觉感染力的一个重要前提。
色彩可以在瞬间改变我们的情绪,不同的彩色可以让我们感到喜悦、激动、悲伤、或是乏味。
不同的色彩在搭配的时候会给人带来不同的视觉效果及心理感应,一个好的色彩搭配效果不仅依靠个体文化、艺术修养、个人感觉、经验、以及想象力,还需要遵循一定的规律在里面。
如今互联网已经成为人们生活中不可缺少的一部分,网站形象及页面设计也逐渐被人们所重视,而网页色彩是体现网站形象的主要因素之一,在网页设计中,设计师根据和谐、均衡和重点突出的原则,将不同的色彩进行组合、搭配来构成美丽的页面。
但是往往色彩搭配往往是设计师头疼的事情,在网页设计中,页面背景、图片选择、文字颜色、以及超链接、连接经过字体颜色等等应该采用什么色彩进行搭配,搭配什么样的色彩才能更协调、更能体现出中心内涵,我想是网页设计师最想知道的。
接下来我们就带着这些问题,一同研究关于网页色彩搭配设计相关知识。
2色彩对人们的心理作用
“色彩的直接心理效应来自色彩的物理光刺激对人的生理发生的直接影响。
心理学家对此曾做过许多实验。
他们发现,在红色环境中,人的脉搏会加快,血压有所升高,情绪兴奋冲动。
而处在蓝色环境中,脉搏会减缓,情绪也较沉静。
有的科学家发现,颜色能影响脑电波,脑电波对红色反应是警觉,对蓝色的反应是放松。
[3]”
2.1不同色彩对人们的心理作用
红色:
色感温暖,性格刚烈而外向,是一种对人刺激性很强的颜色。
红色容易引起人的注意,也容易使人兴奋、激动、紧张、冲动。
红色在各种媒体中被广泛的运用,除了具有较佳的明视效果外,更被用来传达具有活力、积极、热诚、温暖以及前进等含义的企业形象与精神。
另外,红色也常被用作警告、危险、禁止、防火等标识色。
另外长时间观看还容易造成视觉疲劳。
橙色:
介于红色和黄色之间,是一种激进的色彩,它也具有红色相识的特征:
使脉搏加速,并有温度升高的感受。
橙色是十分活泼的光辉色彩,是暖色系中最温暖的色彩,它使我们联想到金色的秋天,丰硕的果实,因此是一种富足的、快乐而幸福的色彩。
橙色用于页面设计的配色上给人华丽、快乐、兴奋的感觉。
橙色适用于对视觉要求较高的时尚网站,并且由于橙色非常亮丽活泼具有香甜的口感,所以也常用于食品和饮品的展示上。
黄色:
明度较高,是色彩中最亮的颜色,因此净化藏给人留下明亮、辉煌、灿烂、愉快、高贵和柔和的印象,在各种色彩中最为娇气。
黄色具有明朗、愉快、高贵、富有等色彩,黄色有着金色的光芒,有希望与功名等象征意义,还代表着土地,象征着权力,并且还带有神秘的宗教色彩。
黄色是明亮的且可以给人甜蜜和幸福感的颜色。
蓝色:
给人以平静、理智、准确的感觉,大多用于企业或商品的标准色中。
蓝色还具有深远、广博、永恒、清爽的特性,一般容易联想到天空和海洋。
另外蓝色也代表忧郁、浪漫。
蓝色的稳定性特强,如果加入其他少量的颜色,也不会对蓝色的性格构成明显的影响蓝色还能够营造出和平淡雅洁净及可靠等氛围。
在商业设计中强调科技、商务的企业形象时,大多选用蓝色当标准色,在网站设计中是运用得最多的颜色。
绿色:
介于冷暖两种色彩之间,具有和平、健康、青春、安全的感觉。
在商业网页设计中,绿色所传递的是清爽、理想、希望和生长的意象。
绿色通常与环保意识有关,也经常使人联想到有关健康方面的事物。
绿色与人类息息相关,是自然之色,代表了生命与希望,也充满了青春与活力。
它生机勃勃,象征着生命。
它本身具有特定的与自然、健康相关的感受,所以也经常被用于与自然、健康相关的站点。
绿色包含黄色和蓝色两种成分,在绿色中,将黄色的扩张蓝色的收缩感受相中和平,将黄色的温暖与蓝色的寒冷相抵消。
使得绿色的性格趋于宁静、安稳。
是一种柔顺、恬静、满足及优美的色彩。
紫色:
不同明度给人的不同感觉不同,明度较低的紫色,给人一种沉闷、神秘的感觉,也色加入少量的白色,就会成为一种十分优美、柔和的色彩。
不过紫色整体色彩一向是:
优雅、高贵和浪漫、情感。
白色:
白光是所有颜色光线的集合,白色反射所有的光线,不吸收任何可见光,因此白色被作为纯洁、虚无、轻盈、光明的象征。
白色可以和其他任何颜色搭配,但如果在白色中加入其它任何色,都会影响其纯洁性。
在商业设计中,白色具有洁白明快纯真和清洁的意象。
白色是网页设计中通用的颜色,它具有容易突出彩度的特性,当一个页面设计未使用白色时,往往会感觉空间减弱,容易造成猜度不够明确、页面沉闷等反应。
黑色具有严肃、神秘、沉着、刚毅、高贵的感觉。
和白色一样也适合和许多勾住搭配,在不同环境下给人的感觉不同。
灰色具有柔和、中庸、高雅的意象,属于中间的性格色彩。
灰色是视觉中最安静的色彩,有很强的调和对比的作用。
3网页色彩搭配特性
在进行网页色彩选择时,除了要考虑色彩的对人们的心理作用之外,还要了解色彩的所具有的特性,才能更好的在网页设计中用好色彩,从而设计出精美的网页在网页设计中要考虑以下色彩具有以下的特性。
3.1色彩的鲜明性
网站的鲜明性会在瞬间给浏览者留下印象,有耳目一新的感觉,因此在进行网页设计时,鲜明的颜色对比能够引起人的注意。
3.2色彩的独特性
网站的用色要有自己独特的色彩,只有与众不同的色彩,才能给浏览者留下对网站深刻的印象。
所以在网页设计中就需要与众不同的色彩搭配,能够衬托出网站所固有的特性,使得浏览者能够对该网站产生深刻的印象。
3.3色彩的艺术性
设计是一门艺术,网站设计是一项艺术性活动,因此在进行网页设计时要遵循艺术原则。
在考虑网站本身的特点前提下,按照内容决定形式原则,对网站大胆的艺术创作,设计出击符合网站特点有具有艺术特色的网站。
3.4色彩的合适性
即网站色彩与网站内容气氛相适配,不同网站主题选择的颜色不同,例如用蓝色体现理性、科技型的专业,用粉色体现女性柔美,用绿色体现自然、健康的惬意。
还有就是在进行网页设计色彩选择时,还要考虑到人眼睛的生理特点,不能用大面积的高纯色相,这样长时间关注容易引起人的视觉疲劳。
也就是说色彩与你所要表达的网站内容气氛相适合。
4网页设计中常用配色方案及现实应用
不同颜色与不同颜色的搭配会给人产生不同的感受,下面就介绍几种颜色常用搭配方案以及在现实生活中的应用。
红色——是一种激奋的色彩,能够给人一种激动,愤怒、热情的感觉。
在网页设计中以红色作为主色调的网站相对较少,主要以点睛色、辅助色以达到衬托醒目的效果。
红色与少量黄色搭配:
会使页面热力强盛、产生动感和活力。
红色与黑色或是深灰色搭配:
被誉为经典搭配,在网页设计中被誉为商业成功色,也是网页设计中最常用的色彩搭配,红与黑色搭配重常常被用于时尚前卫、充满个性活力的网站;例如,如图4.1可口可乐公司的红色调为主题,红色与深灰色搭配的网站,给人带来活力与激情,同时与消费者产生共鸣;
图4.1
蓝色——蓝色给人一种平静、安全、凉爽、清新的感觉。
[3]”,在所有网站中,蓝色或许是最安全的一种颜色。
因为蓝色是最受欢迎的颜色之一,所以他可以用于任何类型网站的设计。
“浅蓝与绿色、白色搭配:
在网页设计中是比较常见的,他们搭配在一起的时候会使页面显得非常干净、清爽,“绿色代表着植物和生长,而蓝色容易让人想到空气和水”,
“在创建最保守和最具有吸引力的颜色组合时,人们经常会考虑使用蓝绿组合、它可以新来的备选方案。
[5]”如图4.2蓝色为主题与绿色作为点缀,使整个页面显得清爽、干净富有时尚感。
图4.2
橙色——既能表现出青春、活力又能表表现出稳重大方,可以通过变换不同色调营造出不同氛围,在网页设计中也是比较常用的颜色。
使用亮度、纯度较高的橙色会给人一种明朗新鲜的感觉。
橙色与浅黄色、绿色、黄绿色等邻近色搭配在一起通过不同明度、纯度的变化可以得到更丰富、刚好的视觉效果,只要在视觉效果上将色阶处理的井然有序,会使得整个页面看起来新鲜、华丽富有活力。
橙色与浅蓝色、蓝色、浅绿色等搭配使用可以得到明亮、欢快的颜色效果。
橙色的轻快、激奋、热烈、时尚的效果与中性的灰色的搭配既刺激又和谐,例如图4.3,高纯的的橙色与中性的灰色是页面显得既时尚又不是稳重。
图4.3
绿色——介于黄色与蓝色之间属于比较中庸的颜色是和平色,常常与自然、环保联系在一起,绿色偏向于宁静、自然美、生机勃勃可与多种颜色搭配在一起产生而达到和谐的效果。
“绿色的运用都营造出了一种平静而安全的感觉,而且很多网站给人一种非常清新宜人的感觉[5]”是设计师经常依赖的灵活颜色。
适当运用不同纯度的绿色、浅绿色搭配在一起会使得页面充满活力与朝气而又醒目。
例如图4.4,以白色为背景色,利用不同纯度、明度、的绿色搭配局部黑色使得页面清新、自然,体现出环保这一主题。
图4.4
黄色——似乎是一个比较合群的颜色,几乎能与任何颜色进行搭配,由于其明度比较高,有时候可以代替白色的明度,达到醒目的效果,但是值得注意的是,黄色不能放在浅色背景上,尤其是白色上,因为其明度比较接近,很难辨别。
深黄色不能与深红色、深紫色进行搭配。
高亮度的黄色与黑色或深灰色搭配在一起形成强烈的对比效果,如图4.5,又有色彩的丰富感,使页面达到项目、清新整洁的效果。
这也是在配色网站中经常见到的配色。
黄色与绿色搭配,会使页面显得富有朝气与活力。
黄色与红色搭配,在网页设计中常用作渲染热闹、喜庆、红火的气氛。
图4.5
紫色——紫色有时让人感到沉闷、孤寂,但是在紫色里加入少量的白色就会变成一种十分优美、柔和的色彩,随着白色的不断加入会产生不同色彩感的紫色,紫色的沉闷性格消失,而变得优雅、充满女性魅力。
“紫色在WEB设计中用的比较少,也许是因为用这种颜色有局限性或存在感知问题,人们都觉得紫色充满女性气息。
[6]”.
不同颜色的紫色调能营造出很浓郁的女性气息,如果在深灰色的衬托下,会显示出更大的魅力。
紫红色是女性的代表色,给人浪漫、柔和、高贵和华丽优雅,“高彩度的紫红色可以表现出超凡的华丽,而低彩度的紫红色可以表现出高雅的气质。
[7]”例如图4.6,一个女性化妆品的网站运用紫红色,来表现女性的优雅、华贵的特质。
图4.6
图4.7
很少有纯白色的网站,通常白色与其他颜色进行搭配使用,但由于白色具有洁白明快纯真和清洁的意象,与少量的彩色进行搭配是页面显得干净透亮,在色彩纷杂的现代网页设计中,白色的网站会使浏览者眼前一亮,留下深刻印象。
例如图4.7,白色与配以绿色点缀,使页面显得干净整洁。
黑色——是一种流行色,可以和任何颜色搭配,“黑色还具有高贵、稳重、科技的意象,是许多科技网站的主色调配合其他辅助色,营造出科技的神秘感。
另外在一些音乐网站中也常常用黑色为主色调,营造出炫酷的氛围。
[8]”如图4.8黑色主题网站体现出公司的科技、神秘感。
图4.8
灰色——是中性色,可以与任何颜色进行搭配,随着色彩纷杂的网站层出不穷,人们追求素雅的感觉日趋严重,灰色网站也越来越流行,尤其是韩国网站多以淡淡的灰色调为主题,使页面美观大方,尤其是不同的色彩的淡灰色备受消费者的喜爱。
此外“在许多高科技产品,尤其是金属材料有关的产品,几乎都采用灰色来展现高科技的形象。
灰色也是网页设计中较为流行的颜色。
[9]”如图4.9,苹果的官方网站,就是以灰色调为主题,不同层次的灰色配以纯度较高的其他色,体现出苹果公司的科技、时尚形象。
图4.9
5怎样设计出一个令人满意的网站
网页设计是一个综合性比较强的设计类型,它对设计师的要求比较高。
在进行网页设计时我们要注意以下几点:
首先,必须明确网站的服务对象。
网站有行业类型的也有综合类型的,无论是哪一种都要对用户的喜好考虑全面。
在进行网页色彩搭配针对时不同的用户群所搭配的页面颜色是不同的,这一点也是很重要的一点,当用户打开一个与自己的身份、角色相适应的网站的时候,会产生一种信任感。
所以设计师应该对站点进行深入的了解,通过借鉴相同领域其他成功的作品,加以配合合适的色彩,使得整体的风格更贴近内容,从而产生好的创意页面出来。
其次,设计师要明确自己的想法,能够明确自己现实追求的艺术效果。
在当今的人现实生活中各行各业特色是显而易见的。
多比较你的网站色彩与整体风格是否突出了该行业的特色,能够使用户第一眼看到的时候不会误解行业错误。
当行业定位后,再使用你的个性因素,使用个性化色彩来突出行业特色,使得大家对你的网站感兴趣,这才叫与众不同。
最后,明确自己的网站印象后,努力加强突出这种印象。
然后制定出一套基本的规格和色系,最终运用到页面中。
现在了解了色彩以及网页的特点之后,怎样做到把这两点结合起来,下面就是网页设计中色彩搭配的一些技巧。
6网页设计色彩搭配技巧
在进行网页设计时,色彩搭配起来有很多种,通过了解成熟、流行的网站我们可以归纳出以下几点网页色彩搭配技巧。
6.1使用一种颜色
首先选定一种颜色,通过调整不同的饱和度和明度,进而对颜色加深或减淡,产生新的色彩。
这样色彩会显得协调统一,有层次感,却又不单调。
6.2使用两种颜色
所谓邻近色即在色环上临近的颜色,例如蓝色和绿色,红色和黄色。
采用邻近色进行网页色彩设计可以避免色彩杂乱,易于达到页面的和谐统一。
另一种方法就是选一种颜色,然后选择它的对比色(在Photoshop中按Ctrl+shift+i进行反选),在进行选择对比色的时候一定要注意对比色与主色调的面积,对比色的面积上一定不能与主色面积相近。
6.3使用同一种色系
简单的说就是使用同一种感觉的颜色,比如使用淡蓝、淡绿、淡黄,土黄、土灰、土蓝,粉红、粉蓝等等。
在进行选择同一种色系的时候根据个人的习惯方法各有不同,例如我习惯性在Photoshop里选择拾色库中自定义中的页面,然后选择同一种感觉的颜色就可以了。
6.4使用黑、白色和一种色彩
无论网站色主色调是什么样的,都会使用到黑白两种颜色色。
一个网站必须有重色,能够压住页面,如果一个页面没有重色,会显得轻浮;此外还必须有亮色,提亮页面效果,如果没有亮色,会显得死气沉沉没有生机。
黑色和白色是两个亮度极端的色彩,黑白搭配可以表现出强烈的艺术感。
值得注意的是在使用黑色、白色和一种颜色进行搭配的时候一定还要注意色彩明度的对比。
6.5网页设计中色彩搭配值得注意的地方
网页设计无论用什么颜色,所要注意的都少不了以下几点:
首先,对比要强烈,背景与前文要对比强烈,以便于突出文章的内容,绝对不要使用花纹繁琐的图案作为背景;其次,避免网页花哨。
不要用过多的颜色,应尽量控制在三种颜色以内。
结论
通过以上论述,我们了解了不同色彩对人们的心理作用相关知识,以及色彩在网页设计中的色彩搭配技巧。
在进行网页设计中总体的流程就是:
首先,明确网站的主题、服务对象及用色彩要表达的目的要确定一个网页用什么色彩合适,即什么色彩适合什么网站。
其次,确定网页的主色调根据网站的主题、服务对象及用色目的,给网站的网页选一个主色调,以形成一定风格。
整个网页最好只有一个主色调。
第三,根据主调色选择辅助色彩主调色确定后,还可选一至两种辅助色配合使用,整个网页的色彩最好控制在三色之内。
第四,确定背景和文本的色彩背景和文本的色彩对比要尽量大(一般明度对比为3∶1到5∶1),以便突出主要文字内容,但不要过于亮丽,以免造成过强刺激的视觉效果。
最后,确定超链接、超链接翻转效果当前超链接及已访问的超链接的色彩超链接的文本色彩,与其它文本的色彩要有差别,以利于浏览者进一步链接。
总之网页设计对色彩搭配的要求还是很高的,漂亮的页面设计必定会有合适的色彩搭配组合,在日常的网页设计中,我们应掌握好网页设计色彩的技巧与手法,多借鉴大型、成熟的网站,并进行不断总结,形成自己的一套设计风格路线。
致谢
网页色彩搭配虽然说在网页设计中并不陌生,但是作为网页设计师来说是掌握的必要知识,在这次创作过程中,我参阅了大量的书籍和资料,也向指导老师进行请教。
再次我要特别感谢我的指导老师徐娜老师,在我完成毕业设计的过程中,她给予了我大量的指导与帮助,是她帮我理清了毕业设计的创作思路,并帮我解答我在创作的过程中的疑虑。
还要特意感谢我的班主任于润波老师,是她在我创作的过程中,不断对毕业设计的时间接节点进行提示。
感谢我挚爱的大学同学,使他们在我创作过程中对毕业设计中不明白的地方耐心的进行解答,他们给了我很多建议、和动力。
感谢学校给予我提供学习、锻炼的的平台。
眼看四年的大学时光即将逝去,需要感谢的人还有很多,越是临近尾声越是不舍得。
放眼未来,虽然离开了一个学习的平台,但是后面还会有很多学习的地方、也有挑战的地方,凭借四年的学习、锻炼,我相信:
我能!
注释
[1]
[2]
[3]
[4]PatrickMcNeil.网页色彩设计创意书[M].北京:
人民邮电出版社,2010:
129
[5]PatrickMcNeil.网页色彩设计创意书[M].北京:
人民邮电出版社,2010:
157
[6]PatrickMcNeil.网页色彩设计创意书[M].北京:
人民邮电出版社,2010:
133
[7]
[8]
[9]
参考文献
[1]PatrickMcNeil.网页色彩设计创意书[M].北京:
人民邮电出版社,2010:
129
[2]刘洪峰.网页设计色彩配色应用[C].江西:
江西美术出版社,2001.
[3]赵国志.色彩构成[C].辽宁:
辽宁美术出版社,2002.
[4]辜居.国外精彩网页设计[C].江西:
江西美术出版社,2001.
[5]约翰内斯.伊顿·色彩艺术[C].世界图书出版公司.1999.
[6]张洪德.色彩设计搭配手册[M].上海:
上海科学技术文献出版社,2006-1-1.
[7]张磊,胡柳.专业色彩搭配手册----网页配色[M].印刷工业出版社.2011-11-1.
[8]刘佳,王倩.网页设计中的色彩表现[J].美术大观.2007.
附录
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 浅谈 网页 色彩 设计