网页风格设计及色彩搭配技巧

网页风格设计及色彩搭配技巧
网页风格设计及色彩搭配技巧

网页风格设计及色彩搭配技巧

一、网站设计风格

一个人拥有自己独特的风格,是一般人所没有的,就会让人注意到那个人的特别,若那个人的风格是正面的,甚至就会引起别人的羡慕与注意,或是赞赏。就如同一个网站,拥有别的网站所没有的风格,就会让浏览者愿意多停留些时间,细细品尝该站的内容,甚至该站会得到多人的鼓励与注目,粗略的说,网站风格可以从以下几个方向来探讨,而每一项都是有关联性的:

1. 色系:网页的底色、文字字型、图片的色系、颜色等等。

2. 排版:表格、框架的应用、文字缩排、段落等等。

3. 窗口:窗口效果,例如:全屏幕窗口、特效窗口等。

4. 程序:网页互动程序,例如:ASP . PHP . XML . CGI等等。

5. 特效:让网页看起来生动活泼的各种应用,如:Flash . Java script . Java applets . DHTML等等。

6. 架构:目录规划、层次浅显易懂、选单应用等等。

7. 内容:网站主题、整体实用性、文件关联性、内容切合度、是否有不必要的档案等等。

8. 走向:对于网站的未来规划、网站整体内容走向等。

以上这些项目都与网页风格有密切的关系,网页的风格不是某一项相同,网站就是有整体感,而是要各项目的配合应用,才能达到完美的网站风格设计。接下来的段落,将会为每个项目做简单的介绍。

(一)色系

网站的色系是浏览者整体的视觉观感,若一个网站色系能有一致性,不仅会使网站看起来美观,更能让浏览者对内容不易混淆,增加了浏览的简洁与方便。而网站的色系更能衬托出网站的主题,若色系能与主题合理搭配,将会增加浏览者的易读性。

网站的色系包含了网页的底色、文字字型、图片的色系、颜色等等,这不单只是将颜色搭配得当就算完美,还要配合每个内容,及网站主题。对于网站的色系,应该要在网站开始制作前,做好规划及设计,才不会到着手制作网站时,难以搭配,甚至造成混乱的设计。

网页的底色是整个网站风格的重要指针。举例来说,以黑色作为背景颜色的网页,因黑色本对人的视觉上会造成黯淡的感觉,若是拿来用作活泼的儿童网站,就是不适合了。因为小孩子是天真无邪的、活泼的、有朝气的,与黑色的沉稳、黯淡,很难联想在一起。

再举个例子,若是写一个有关于环保的网站,若用暗红色作为网页底色,决计不会有人联想到网页的内容是与环保有关。当然,每个人的审美观不同,可能也会对颜色的代表性看法不同,但既然网站不是只写给自己看的,就应该要注意到大部分人可能会有的观点,然后以众人居多的观点出发,来设计网页。

文字字型上的设计,最好的网站是以所有浏览者都能看到的字型为主。常会看到有需多网站要求浏览者须自行下载某种字型,才能达到最佳浏览效果,这是种非常奇怪的行为。毕竟浏览者只是来找资料或是来看网站的内容,不可能会因为这种「为达最佳浏览效果」,而自行下载所需要的字型。

当所要求的字型若不下载,并不会影响到网站内容上的浏览与不便,那么对浏览者的要求就微乎其微的不可能发生任何作用。这么一来,对于网页设计者来

说,无非是非常可惜的,因为当初的设计风格却未能让浏览者一窥全貌,岂不是白费心思的吗?

何谓图片的色系?以色彩学简单的区分,可分为冷色系与暖色系,再详细一点的区分,又可分出各种颜色的色系,而色系的区分,就在于主观浏览意识上的差异了。如何将图片的色系与网站整体色系相对应,就是比较困难的地方了。对于网页初学者来说,要绘制一张图并非易事,要绘制一张符合自己网页风格的图,更是困难重重。大部分的网页制作者,并不大可能驾轻就熟的使用影像处理软件或绘图软件,于是乎,网页素材的网站就开始盛行了。当然,不会使用绘图软件并不代表网页就不能设计的很出色,若是能将网络上的素材资源妥善利用,网站也是可以走出自己的风格的。而该怎么选择适合自己网站的图片,就是门很大的学问了。

选择图片该以何作为标准呢?举例来说,若网站内容为科学探讨,当然不能以卡通图片来作为插图,试想,当您正在浏览一个有关天文学的网站,却满是皮卡丘的可爱图片,不是很不协调吗?再举个例子,如果一个教学网站,里头却尽是明星图片,看上去根本就不像是教学网站,而是大杂汇的明星相片网。

很多人喜欢将自己欣赏的明星照放上自己的网页中,如果仅是个人网站倒也还好,因为个人网站本就无主题居多,也就没有所谓的符不符合主题的顾虑,但若是有主题的网站,岂不糟糕?

以图片内容来说,能切合网站主题最好,若不能,也别差异太多。以颜色来说,若一个网页是蓝色的底色,但整个网页的图档却乱七八糟,各种颜色纷纷出笼,更糟的是,蓝色是属于冷色系的颜色,若以蓝色为底的网页,却尽都是大红色、橘色的图片,那将会使整张网页看起来就像垃圾堆,杂乱无章。所以,可以

简单的归纳出,网页与图档的颜色,色系一致或是视觉效果一致,将会使网页看起来更为美观且有自己的风格。

网页的颜色,并非单一就图文件、文字颜色、或是底色为主,而是以浏览者的角度来观看,整体网页看上去是偏向哪种色系。常常见到许多网站虽然色系搭配的很好,但却是没有自己的风格。以目前流行的柔色系、粉色系网站来说,就是失了自己独到的风格。

因为使用粉色系的网站,不外乎都有相同的特点,文字颜色浅,底色也以浅色系为主,这样除了没有自己的风格外,看起来既不大方也难登大雅之堂。以各大搜寻网站来说,根本不会做这样的设计,因为文字颜色淡,加上底色浅,对浏览者来说,阅读上非常吃力,所以这样的设计风格也应尽量避免。

一个有自己风格,且阅读起来舒适大方的网页,并不可能一次就写好,而是需要经过不厌其烦的修正、调色,才能达到最佳浏览效果的,所以制作网页也一定要有相当大的耐心。

(二)排版

网站的排版是让网页浏览者阅读方便,且内容主题明确的重要指针,若网站的排版经过精心规划,将会使浏览者更能迅速的找到所需的资料。就如同一本书,编排得当将会使读者一目了然,且更能了解该书所要阐述的内容。而网站的排版,就如同书册的排版一般重要。网站的排版包含了表格、框架的应用、文字缩排、段落等等,而排版并不是整齐就好,还要有明确的分类,以及主题的适当规划。

表格的应用是一般大型网站最常见到的编排方式,表格能使多段文字统合整理,达到清楚易懂的效果。表格不见得是有形的表格,何位有形的表格?一般常见的有形表格,多为有框线,或是有底色。表格可多形式的运用,如图形与文字

间的排版,表格可将图形与文字做最恰当的编排,充分结合于网页上。

然而表格的底色或底图,应避免与文字起冲突。常见表格中用的底图或底色因颜色过重,而文字不清楚,表格的重点当然仍是在于文字,不是在作为配角的底图或底色。当底图只是衬饰的作用时,就应让其中的文字清楚明了。而表格的整体配色更是重要,框线及底色都应与网页整体配色为主,若是以表格作为同一网页编排,应尽量使各表格间不致差异太大。当有需要特别彰显内容的表格,才有其必要性作不同的配色。

框架的应用,对于架设于较慢的网站空间之网页,较适合框架的应用,框架可避免相同网页重复读取,拖累下载速度。但框架因切割整个画面,造成浏览的内页空间大幅度减小,故再使用框架务必要注意到内容主页的易看性。框架编排,最需要注意的是左右滚动条应尽量避免,若一个网页在阅读上,要不断的移动滚动条往右又往左移,将会对浏览者造成很大的不便。

另,框架也需要注意到连结的正确性,常看到以框架为主体的网页,竟然按下选单框架页中的连结,不是显示在内容框架页中,而是另开窗口,这真是脱着裤子放屁-多此一举!且框架过多的网页,会造成浏览者不知如何找寻资料的窘境。

举个最常见的例子,很多小型的个人网站,常喜欢以多框架来架构网站,数一数甚至框架页达五六个以上,有时按了左侧的选单,以为内容会出现在内容框架页,却竟然是显示在右上角的某个小角落,这不是特有风格,既不美观也不实际,更难以找到资料!

框架与表格皆为网页整体编排利器,该如何运用与走出自己风格,就是需要长时间的修饰版面、观摩学习(但绝非模仿抄袭)与经验了。

(三)窗口

窗口效果的妥善运用,可以使网页有特色,但过度的应用反而会使人厌恶,甚至关闭网页不再造访,若真的因窗口的不当运用,造成浏览者不便而不想再继续浏览,那就是非常可惜的事了。

全屏幕窗口,通常不为浏览者所喜爱,尤其是强制性的全屏幕浏览,一般上网者对于不同的浏览方式并非都能欣然接受。对于图片浏览的网站,若图片很大可以采用此种方式,以方便一窥全图,但必须于连结前先注明将会开启全屏幕窗口,较不会引起浏览者的反感。

现有许多个人网站,都特别喜爱使用无工具列窗口,有的网站是将整个无工具列窗口放大至全屏幕,有的网站则是过小的超迷你窗口。前一种会使人难以跳开网页浏览做其它动作,造成很大的不方便;后一种更是糟糕,窗口小到几乎无法浏览,字体小、图形小、内容更少,这种窗口让浏览者的第一感觉就是网站没内涵,又小家子气。

且这两种网站,几乎都有一个最大的共通点,锁鼠标右键功能。这样的锁定,对于网站本身并无多大助益,除了让浏览者不方便外,其实浏览者根本也无意于抄袭该网站,只会让人觉得网页很没内容又要怕别人抄袭。看到这种网站,大部分的浏览者并不会觉得有风格,若是觉得有风格,也不过是流于通俗的「小气风格」。

另外则是有些许初学者的网站,特别喜好滥用窗口特效,举凡网页震动、闪烁等等,这些对于内容及个人风格上也无实质助益,能避免应尽量避免。毕竟有规模、有内涵的网站,根本不会有这样乱七八糟的特效。这样的特效的确也造成了某部分的特殊效果,即是网页混乱的特别效果。且越容易滥用窗口特效的网站,

大多都无内容,想利用这些来混淆视听,试图造成浏览者的错觉,误以为内容丰富。但实际上欲达成的效果不但没有达到,反而会使浏览者一眼就看穿该网站制作者是一名网页新手,且该站几乎毫无内容可言。若网站本有丰富的内涵,因此而造成浏览者的错觉,岂不可惜?

并非所有的窗口特效都是负面的评价,也是有某些情况时可以斟酌小心使用。若是资料量少,或是公告等小资料量的文件,可以酌量使用小窗口的开启,这种方式反而有助于网页的整体性,及浏览易读性。

综合以上所述,一个成功的网站,若要走出自己的风格,并非单就窗口特效来加强,而应先注重内容,并依其网站内容来决定如何采用一些特殊的窗口,达到整个网站的风格一致性。记住,花样越多并不能让网页显得技巧高明,而是在于内容与窗口效果的完美运用。

(四)程序

在早期的网站中,只有让浏览者「看」的作用,伴随着多种程序语言的发展,目前常听到的网页互动程序有ASP . PHP . CGI . XML等等,上述这些网页程序,都能使网页「动」起来,而网站的功能不再只有「看」,也可以「参与」其中。然而,大多数的网页制作者,本身并不会自行开发撰写程序,故许多已是现成的程序下载网站或是免费资源网站便应运而生。对于不会撰写程序的网站制作者来说,无非是一大福音,但在套用现成程序或是使用免费资源时,也必须要注意整体的网页风格。

程序也是网页的一部分,只是它们除了网页外,还有处理资料的程序代码,所以程序的应用上也是必须要谨慎的配合整个网站的风格。举个例子来说,整个网站皆以白色系为主,但留言版却莫名其妙的用了黑色系,这不是挺不搭的画面

吗?又,若整个网站是有关男性所喜爱的事物,讨论区却突然出现柔和的唯美女生图片,这简直就是太怪诞离奇了!故在申请免费资源或是利用下载的程序包时,必定要先注意到色系、图档是否能配合整个网站的风格、主题。

以下载程序再修改来说,除非自己将原程序的「程序部分」修改百分之七十以上,才能改掉原版权,否则将会违反著作权法。在这里要做个说明,所谓的程序部分即是不包含HTML的部分,并非将版面改了改,程序就是自己的,常见到许多个人网站,将下载来的程序改了改版面,几乎没有动到程序部分,就擅自改了版权,并声明为自己所撰写,还标明「版权所有,盗拷必究」等字样。这种行为,对于稍有网页制作概念及经验的浏览者来说,除了引起严重反感外,更有可能会引起不必要的纠纷。且这样对于网站的独到风格性来说,根本没有任何助益,实是得不偿失!

当然,程序也不是乱用、滥用就是代表网站制作的好,大量的重复使用不必要的程序功能,一般浏览者不会用到,只会变成无用的「网站垃圾掩埋场」。举个例子来说,祈愿版的滥用就是造成资源的浪费,一个个人网站拥有一个祈愿版已足够,甚至其实那根本是没有需要的,却还有各种不同版面的祈愿版,除了资源上的浪费外,也几乎没有浏览者会去留下愿望。无用的程序,就算再好再可爱,没有用途充其量就是垃圾!当网站的垃圾越来越多,就会发臭!原来的内容就会被这些发臭了的垃圾给通通掩埋起来了!

再举个更为常见的例子,一个普通网站拥有一个留言版就符合所需了,但每每逛网站时,总会见到「备用一版」、「备用二版」、「备用三版」、「悄悄话一版」、「悄悄话二版」、「悄悄话三版」等等等,若没有内容多到需要区分不同的留言内容,这些杂乱的备用XX版就可以免了。这一大堆的留言版,只会让浏览者望而

怯步,也不知道该留哪一个,更是小网站的一大特色!

请记住,在网页制作的准则上,没有所谓的「数大就是美」,有时候就像是「老太婆的臭皮靴,又臭又长」,很容易使人生厌的!

(五)特效

网站的特效,能够使网站看起来更为生动活泼,以常见的几种技术来说,包含了Flash . Java script . Java applets . DHTML等等。适当得宜的使用这些网页小技巧,如同蜻蜓点水般的不着痕迹带过,往往能让这写小特效发挥最大的效果,使网页更美观且创造出独特的风格。这些小技巧多为网络上随处可以复制的小程序,所以要了解,浏览者并不会因为五花八门的特效觉得这个网站的技巧非常高明。因为这些技巧不管用得再多、用得再杂,都是复制来的。而不着痕迹的使用这些特效,让特效船过水无痕的在网页中起作用,才是网站成功的设计!

举几个最常见的特效例子,像是欢迎讯息,咚的一声跳出来,如果只是一个欢迎光临,大可不必要这样扰人,更甚者,还接二连三的好几的欢迎讯息,先是「您好!欢迎光临本站!」、「请使用600*800的屏幕分辨率来浏览本站」、「这里是xx小站」,再来「请将本网站加入我的最爱喔!」,这种接二连三的讯息,让计算机咚咚咚咚的响个不停,而浏览者又必须一个个按下确定才能进入网页,实在是无聊之举。还有的,进站时还要问您的大名,问完之后再跳出个讯息「xxx您好,欢迎您的光临!」,这只会另浏览者非常反感,一点窝心的感觉也没有。最后,都问候完祖宗十八代,又跳出个强制加入我的最爱,其实这种网站也根本不会有浏览者愿意将其加入最爱,简直到了讨人厌、惹人闲的地步了!

跟着鼠标的一堆文字或是图片,既无意义也不美观,根本也没有必要这样的扰乱视线。最常见的,将鼠标的指针更改,改的哪里能连结,哪里不能连结都不

清不楚的,既无风格可言,也无美观可言,更无技巧可说。这种特效也应尽量避免,除非您的网页不想让人知道有什么连结,这种特效就可以肆无忌惮的使用了。当然,不会有一个制作网站者,一点都不希望浏览者清楚自己的连结,而找不到想看的内容的。若真这样,也不可能会建网站了,不是吗?

像是雪花片片飞的网站,也是很不可取的。试想,如果您要看一篇文章,却一直有「垃圾」掉下来挡住您的视线,这种感觉岂不是很糟糕吗?浏览者是来看网页的内容的,不是来看您一片片掉下来的「遮蔽物」。浏览器的状态列跑马灯,也是常见的扰人特效之一,当您正在欣赏网站内容时,却觉得屏幕闪呀闪的,既刺眼又无意义,故大可不必滥用此特效。

但也不是就全盘否定特效的使用,像是一篇内容繁多的长篇文章,若此时能有个十字对准线,肯定能对浏览上有帮助。若能融合各类选单,适时的出现于网页中,既能增加版面一致性,又能不着痕迹的使用特效,更能有整体性的风格。所以网页特效不是不要用,应该是要用得恰当,用得友善,用得配合网站风格,这样特效才能真正发挥它的效用。

(六)架构

一个网站若能有清楚的目录架构,除了对制作网站者来说容易维护外,更能让浏览者对于不熟悉的网站环境轻易上手。而网站的架构可由几个方向来说起,分别为目录规划、层次浅显易懂、选单应用等等。

网站的架构规划,应该于网页的制作前先制定完整,若以后有所更动,也都尽量不要更改到大的结构目录,否则将造成网站熟客又必须重新了解环境,若更动幅度太大,又没有详尽的解说,更可能因此丧失部份常客。别说这是不可能的事情,毕竟网络上还是有很多对于计算机不甚了解的网友,而网站不是单只为了

点脑知识够的浏览者所写,必须兼顾到所有层面。当然,您也可以说您的网站只要给少部分的人看,只是,建立一个网站的最终目的,不就是希望能有大量的人潮吗?

当一个网站越来越多内容时,层次结构就会越来越复杂,身为站长的您,当然对自己的网站了若指掌,清楚的知道自己的网页层次架构。然而,您的网站并非只是给自己独自品尝的,层次的浅显易懂就是很重要的课题了。有的网站目录越来越多,却也越来越混乱,不同内容的资料,却放到相同的关联连结下。对于混乱的设计,一般的浏览者是不可能猜出您的心,知道不同性质资料的连结竟会在相同关联连结下的!写网页要能够总是以浏览者作为出发点,这样的网站才能在架构上取得各种不同阶层、不同种类之浏览者的驻足、栖息。

也常常会见到有的网站因内容过于繁杂众多,而浏览到最后不知该怎么回主页、回目录页。此时若能有导览列,或是加上回上页或回目录页的连结设计,必定能让浏览者感到方便与贴心。

而网站的架构,最终是以选单作为表达的方式,树状选单往往能让浏览者清楚明确。而选单的风格设计,也常常最能突显出该站的风格与特色。网页若能搭配适当的选单,选择不花俏、不造成视觉障碍的效果,就能够让整个网站的特有风格显现出来了。

(七)内容

网站的内容,就如同书的文字一般重要,书没有了内页,就算封面再漂亮、再精致,都只是个徒俱美丽空壳的纸版罢了;如果书的内容杂乱无章或是不切合书名,那么买书的人一定会非常懊恼也非常生气。网站也是一样的道理,如果网站没有内容,就算装扮得再美轮美奂,也不配称为网站;如果网站的内容杂七杂

八或是与站名摸不着边儿,那么不小心踏进来的浏览者,必然会非常举丧也非常不悦。网站的内容范围很广,可简单分出下列几种:网站主题、整体实用性、文件关联性、内容切合度、是否有不必要的档案等等。

所有的网站必然都有一个明确主题,而网站的整体内容都会绕着这个主题来发展。没有主题的网站很难拥有固定的常客,就像是大杂汇,内容再多也都是杂而不精。一般的浏览者,查询资料者居多,当然也是希望查询到精确且多量的资料。而大杂汇的网站,因为质不精,对于这种大多数的浏览者来说,只是没有用的垃圾堆。想来建网者必然不希望自己的网页被看作是垃圾堆,所以,就该在一开始到以后的更新,都有个明确的主题。

网站的整体实用性,包含了资料的实用性及参考价值,若网站有明确的主题,应该要尽量避免不相关的其它主题出现。若出现了与主题不符的其它资料,这就像是一片花丛中出现了一坨粪般的另人嫌恶,也没有网站的整体风格。而许多的个人网站就像是大杂汇般,有教学、祈愿、养宠物、文章搜集等等一些毫无关联性的资料。然而个人网站之所以会称之为个人网站,就在于它有着「杂货铺」的魅力,总能吸引些浏览族群的目光。但若是希望自己的网站上大雅之堂,就应确立主题,并对于该主题整理有用且实用的资料。

文件的关联性也是内容的重要指针,在一个大主题下,往往能分之初很多相关联的小主题。此时就应该对其详加分类统合,明确的让浏览者知道这些小主题相互之间的关联性。而不是东一堆,西一堆的文件,没有统合的文件,就算与主题有部分上的关联性,在一般的浏览者眼中,也都会成为没有用的垃圾,这样实在是非常可惜。

统合来说,一个网站的内容,当然越多会会好,只是再资料多的同时,也要

注意到这个资料是否切合主题、是否对网站有用、归纳的是否妥当明了、有没有不必要的档案,这样网页的内容才能真正渐渐迈向量多质精之路,也才能走出属于自己主题的风格。

(八)走向

网站的走向是一个网站未来的重要指针,常常见到有的网站动不动就说要关站了,其实这些网站大多数是因为没有规划好网站的未来走向,站长自己看不到未来,浏览者当然也看不到网页有所更新,久了,自然而然就不再有人光顾,而网站自然也跟着被迫关站了。相信没有一个站长再开站时会想着以后要关站吧?既然不愿意落得此下场,就应该好好考虑网站以后的整体走向。

而网站的走向,应与网站主题永远的相符合,举个例子,一个新闻网站是不大可能转向成卡通网站的,就算转型了,那么以前的常客必然也是失去了,这样不就是等于关了旧站,再开新站吗?浏览者会成为某个网站的常客,必然是他对该主题有强烈的兴趣,一但该网站的主题不那么的切合了,这些常客就会另寻喜欢的网站了。

想让网站永远,有自己独到的味道,对完美有所坚持,网站的未来规划是必修的功课。

二、网站色彩搭配

(一)色彩的心理感觉。不同的颜色会给浏览者不同的心理感受。

红色---是一种激奋的色彩。刺激效果,能使人产生冲动,愤怒,热情,活力的感觉。

绿色---介于冷暖两中色彩的中间,显得和睦,宁静,健康,安全的感觉。

它和金黄,淡白搭配,可以产生优雅,舒适的气氛。

橙色---也是一种激奋的色彩,具有轻快,欢欣,热烈,温馨,时尚的效果。

黄色---具有快乐,希望,智慧和轻快的个性,它的明度最高。

蓝色---是最具凉爽,清新,专业的色彩。

它和白色混合,能体现柔顺,淡雅,浪漫的气氛(象天空的色彩:)

白色---具有洁白,明快,纯真,清洁的感受。

黑色---具有深沉,神秘,寂静,悲哀,压抑的感受。

灰色---具有中庸,平凡,温和,谦让,中立和高雅的感觉。

每种色彩在饱和度,透明度上略微变化就会产生不同的感觉。以绿色为例,黄绿色有青春,旺盛的视觉意境,而蓝绿色则显得幽宁,阴深。

(二)网页色彩搭配的原理

1.色彩的鲜明性。网页的色彩要鲜艳,容易引人注目。

2.色彩的独特性。要有与众不同的色彩,使得大家对你的印象强烈。(参考设计思考第二篇网站CI的标准色彩一节)

3.色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。

4.色彩的联想性。不同色彩会产生不同的联想,蓝色想到天空,黑色想到黑夜,红色想到喜事等,选择色彩要和你网页的内涵相关联。

(三)网页色彩掌握的过程

随着网页制作经验的积累,我们用色有这样的一个趋势:单色->五彩缤纷->标准色->单色。一开始因为技术和知识缺乏,只能制作出简单的网页,色彩单一;在有一定基础和材料后,希望制作一个漂亮的网页,将自己收集的最好的图片,最满意色彩堆砌在页面上;但是时间一长,却发现色彩杂乱,没有个性和风

格;第三次重新定位自己的网站,选择好切合自己的色彩,推出的站点往往比较成功;当最后设计理念和技术达到顶峰时,则又返朴归真,用单一色彩甚至非彩色就可以设计出简洁精美的站点。

(四)网页色彩搭配的技巧

文章写到这里,有心急的网友要问了:“到底用什么色彩搭配好看呢?你能不能推荐几种配色方案?”别急,这里有一点技巧,可以帮助你迅速成为调色大师:)

1.用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,(说得通俗些就是将色彩变淡或则加深),产生新的色彩,用于网页。这样的页面看起来色彩统一,有层次感。

2.用两种色彩。先选定一种色彩,然后选择它的对比色(在photoshop里按ctrl+shift+I)。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。

3.用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。确定色彩的方法各人不同,我是在photoshop里按前景色方框,在跳出的拾色器窗中选择"自定义",然后在"色库"中选就可以了:)

4.用黑色和一种彩色。比如大红的字体配黑色的边框感觉很"跳"。

(五)在网页配色中,忌讳的是:

1.不要将所有颜色都用到,尽量控制在三种色彩以内。

2.背景和前文的对比尽量要大,(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容。

网页设计配色方案-基本色

网页设计配色方案-基本色 配色方案一(紫色): 版面表格边框颜色#983498 版面标题表格颜色#d890d8 版面内容表格颜色1 #f8dcf8 版面内容表格颜色2,颜色1和颜色2在bbs风格中互相穿插排列#fff0ff 版面标题表格字体颜色#602060 版面内容表格字体颜色#602060 提醒语句颜色#602060 配色方案二(粉色): 版面表格边框颜色#f00078 版面标题表格颜色#ff98do 版面内容表格颜色1 #ffe8f0 版面内容表格颜色2,颜色1和颜色2在bbs风格中互相穿插排列#fff6fc 版面标题表格字体颜色#602060 版面内容表格字体颜色#602060 提醒语句颜色#602060 配色方案三(果绿色): 版面表格边框颜色#507010 版面标题表格颜色#a0dc40 版面内容表格颜色1 #e8f8d0 版面内容表格颜色2,颜色1和颜色2在bbs风格中互相穿插排列#f8fcf0 版面标题表格字体颜色#003300 版面内容表格字体颜色#003300 提醒语句颜色#309478 配色方案四(深绿色): 版面表格边框颜色#288058 版面标题表格颜色#88d8b0 版面内容表格颜色1 #e0f4e8 版面内容表格颜色2,颜色1和颜色2在bbs风格中互相穿插排列#f0f8f0 版面标题表格字体颜色#205838 版面内容表格字体颜色#205838 提醒语句颜色#287048 配色方案五(金黄色): 版面表格边框颜色#co7800 版面标题表格颜色#ffc562 版面内容表格颜色1 #ffeed0 版面内容表格颜色2,颜色1和颜色2在bbs风格中互相穿插排列#Fffaf0 版面标题表格字体颜色#754900

网页设计,色彩搭配分析

在网页设计中,对目前的网站配色(Landscape of color)认真琢磨一下还是非常有趣的。大多数网站或多或少相同,但是颜色的设计搭配却是一个非常给力的工具。 我并不想尝试去阐述一些具有革命性的东西或者是特别的发现。但如果大部分网站都采用同样的配色方案,那对颜色意味着什么呢?实际上,远超出你的想象。幻想一下整个世界的每一个网站都是非常漂亮和五彩缤纷的,但它同时也意味着千篇一律。这就像你文章中每一个段落的粗体。 因此,当配色方案比较柔和的时候,它允许有更多的机会。 关注你想要的任何东西 许多网站都有一个基本的灰度配色方案-白色的背景和黑色的字体。(网页中)想让你看到的部分会赋予颜色作为强调。这就是为什么网页不会充满颜色—它们使用在想让你看到的按钮,标题或者链接上面。 Vibrant ,当你第一次登陆它们的主页,主页的背景和图片是黑白的,网站标志,可点击的按钮和汉堡菜单是亮黄色,这些可以很快的(在灰度背景中)脱颖而出,吸引你的注意力。 另一个例子是Takeit; 当你第一次登录他们的主页就看一个大大的蓝色背景。然而,其他的都是白色的。最前面并且居中的大标题会让你的注意力集中在中间。

同时,你的眼睛在很短的时间内就能注意尺寸较小但是仍然明显的APP商城的按钮。你可以从中研究一下是颜色如何引导用户的注意力的。 创造个性 颜色是非常奇妙的,因为它可以展现一个网站或者品牌的语气和情绪。Beagle (很遗憾,译者访问的时候,网站已经不在了)提供创建项目简介的服务,他们的网站使用了较轻的茶色。当你向下滚动他们的主页时,你会看到棕色,炭色,绿色,甚至粉红色这样一些愉快的色调。世俗的色调(earthly tones)看起来专业和优雅,给人对于其所代表的公司(留下)一个非常好的印象。 An Interesting Day网站它特指“在奥斯陆峡湾(Oslofjord)的一个小岛上举办的一个不可思议的,为期一天的会议”(“a weird, one-day conference on a tiny island in the Oslofjord”)。当红色的背景和红色的字体在上面的时候,

网页设计的6条配色原则

网页设计的6条配色原则 网站的配色对内容而言就像衣服对于人的重要性,对此你必须制定一套完美的并且合身的衣服。下面小编为大家整理了网页设计的6条配色原则,希望能帮到大家! 一个在网页设计中最根本的原则是,无论你花了多少时间创造了一个辉煌的设计,其最终的作用是发挥出内容的核心位置。你的配色方案永远不应该比它呈现的内容的更加“响亮”。你的设计应该是在后台,目的是帮助突出网站的内容。 淡色的画布突出了图像,而明亮的画布有时反而不能突出你的内容。 用Photoshop或者Sketch等软件设计网站的时候,创建设计的过程往往是相互独立的。有些设计单个看起来很不错,也能被你的客户所接受,但是当它真正被设计成网页的时候不适当的配色往往会分散访客的注意力。事实上,网页设计的过程是和内容紧密相连的,很多制作高品质的网页看上去空空荡荡,几乎没有内容。 这是一个伟大的想法:你可以在你的网站上先铺陈出你的内容,用设计软件也好用代码也好,然后在你内容的周围设计你的网页。当然这也是一个特殊情况,如果一个特定风格的图像和照片都能和你的设计和谐的融为一体,那么你的

设计配色才算是完美。试想一下,网站的配色对内容而言就像衣服对于人的重要性,对此你必须制定一套完美的并且合身的衣服。 你可以为你的网站基调选择无数种颜色,不过我建议你采用最简单的颜色,比如白色/浅灰色与深灰色的搭配文字背景。 你可以看看任何热门的网站、模版、主题,白色或浅灰色与深灰色搭配成了大多数的选择,这当然也是有充分理由的。这样的搭配对访客而言提高了你内容的可读性,并且把你的图片突出在最前方。 一般来说,你的文字最好避免使用墨黑色,深灰色一般更容易阅读。 文字颜色建议范围:#333333到#666666;背景颜色建议范围:#FFFFFF到#CCCCCC。 当然,这些颜色的选择都不是固定死的。只不过如果你是新手,以上的配色方案你可以放心使用。 如果你选择好几种不同的色调来,那么你的配色方案绝大多数是有问题的。你颜色用得越多,你的页面就越来越难以控制。所以,在你网页以灰色基调的前提下,你最好只选择一种鲜艳的颜色来作为你想要突出的事物,比如标题、菜单、按钮等等。你的高亮颜色可以是蓝色、红色、绿色,等等。

平面设计网页设计色彩搭配原理

平面设计网页设计色彩搭配原理 一:各种色彩的象征: 红色热情、活泼、热闹、革命、温暖、幸福、吉祥、危险...... 橙色光明、华丽、兴奋、甜蜜、快乐...... 黄色明朗、愉快、高贵、希望、发展、注意...... 绿色新鲜、平静、安逸、和平、柔和、青春、安全、理想...... 蓝色深远、永恒、沉静、理智、诚实、寒冷...... - 紫色优雅、高贵、魅力、自傲、轻率...... 白色纯洁、纯真、朴素、神圣、明快、柔弱、虚无...... 灰色谦虚、平凡、沉默、中庸、寂寞、忧郁、消极...... 黑色崇高、严肃、刚健、坚实、粗莽、沉默、黑暗、罪恶、恐怖、绝望、死亡...... 颜色分为冷暖两色,这两个大的慨念 色彩的心理效应 色彩的直接心理效应来自色彩的物理光刺激对人的生理发生的直接影响。 心理学家对此曾做过许多实验。他们发现,在红色环境中,人的脉搏会加快,血压有所升高,情绪兴奋冲动。而处在蓝色环境中,脉搏会减缓,情绪也较沉静。有的科学家发现,颜色能影响脑电波,脑电波对红色反应是警觉,对蓝色的反应是放松。自19世纪中叶以后,心理学已从哲学转入科学的范畴,心理学家注重实验所验证的色彩心理的效果。二:网业设计中色彩的搭配 1黑黄2黄黑3黑白4紫黄5紫白6蓝白7绿白8白黑9黄绿 10 黄蓝背景与配色的搭配(选自日本佐藤垣宏的《我们的生活与配色》) 背景(底色)配色 黑白-黄-黄橙-黄绿-橙 什么颜色在一起搭配最好看 恰到好处地运用色彩的两种观感,不但可以修正、掩饰身材的不足,而且能强调突出你的优点。如对于上轻下重的形体,宜选用深色轻软的面

料做成裙或裤,以此来削弱下肢的粗壮。身材高大丰满的女性,在选择搭配外衣时,亦适合用深色。这条规律对大多数人适用,除非你身体完美无缺,不需要以此来遮掩什么。有些MM总认为色彩堆砌越多, 越“丰富多彩”。集五色于一身,遍体罗绮,镶金挂银,其实效果并不好。服饰的美不美,并非在于价格高低,关键在于配饰得体,适合年龄、身份、季节及所处环境的风俗习惯,更主要是全身色调的一致性,取得和谐的整体效果。“色不在多,和谐则美”,正确的配色方法,应该是选择一两个系列的颜色,以此为主色调,占据服饰的大面积,其他少量的颜色为辅,作为对比,衬托或用来点缀装饰重点部位,如衣领、腰带、丝巾等,以取得多样统一的和谐效果 总的来说,服装的色彩搭配分为两大类,一类是协调色搭配,另外一类则是对比色搭配。 对比色搭配分为 1、强烈色配合: 指两个相隔较远的颜色相配,如:黄色与紫色,红色与青绿色,这种配色比较强烈。日常生活中,我们常看到的是黑、白、灰与其他颜色的搭配。黑、白、灰为无色系,所以,无论它们与哪种颜色搭配,都不会出现大的问题。一般来说,如果同一个色与白色搭配时,会显得明亮;与黑色搭配时就显得昏暗。因此在进行服饰色彩搭配时应先衡量一下,你是为了突出哪个部分的衣饰。不要把沉着色彩,例如:深褐色、深紫色与黑色搭配,这样会和黑色呈现“抢色”的后果,令整套服装没有重点,而且服装的整体表现也会显得很沉重、昏暗无色。 黑色与黄色是最亮眼的搭 白黑-红-紫-蓝紫-蓝红白-黄-蓝-蓝绿-黄绿蓝白-黄-黄橙-橙对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景,但浏览一下大型的商业网站,你会发现他们更多运用的是白色、蓝色、黄色等,使得网页显得典雅,大方和温馨。更重要的是,这样可以大大加快浏览者打开网页的速度。一般来说,网页的背景色应该柔和一些、素一些、淡一些,再配上深色的文字,使人看起来自然、舒畅。而为了追求醒目的视觉效果,可以为标题使用较深的颜色。下面是我做网页和浏览别人的网页时,对网页背景色和文字色彩搭配积累的经验,这些颜色可以做正文的底色,也可以做标题的底色,再搭配不同的字体,一定会有不错的效果,希望对大家在制作网页时有用。 BgcolorΚ?#F1FAFA?———做正文的背景色好,淡雅

广告设计中的色彩搭配技巧

广告设计中的色彩搭配技巧 广告设计中的色彩搭配技巧 色彩要具有强烈的吸引力和表达力 吸引力是指能以色彩吸引消费者,在不知不觉中左右人的感觉情绪、精神乃至行动。色彩并非孤立存在,它的运用同整个设计构思、构图以及图形、文字等紧密联系在一起。诸多视觉元素按照一定的 规律排列组合,形成视觉秩序美感,满足人们“人人爱美”的心理,实现色彩的装饰功能。当今世界素食业巨子麦当劳的招牌以红色做 底色,上面是代表麦当劳标志的金色“M”,红色代表“停止”,黄 色代表“注意”。街上行人走到麦当劳门前,看到广告语“请进麦 当劳休息一会吧”,便会被吸引驻足进屋。 色彩的象征性和识别性 广告色彩设计要与商品的属性配合,其色彩设计应该使顾客能联想出商品的特点、性能。也就是说,不论什么颜色,都应以配合商 品的内容为准。顾客看到广告海报上的色彩,就能联想到商品,如 绿色体现青豆罐头,桔黄色说明是橙汁。如粉紫色具有轻柔、典雅、充满女性柔润的'特点,在妇女用品、化妆品、纺织品广告设计中十 分流行。而“温暖、强烈”象征的红、橙、茶、褐、黑等色,往往 用于咖啡的广告设计。 色彩要明快、简洁、整体 由于色彩是在有限的空间内实现,就要求所设计的色彩应高度提炼与概括,通过独特的色彩来强化视觉冲击力,吸引顾客的注意力,增强识别记忆力的作用。色彩不一定要追求十分丰富、繁多或者高 级灰调子,它不仅仅要满足于人们视觉上的观感之悦,更重要的是 通过准确的色彩设计将商品推销给消费者。凡是符合明快、简洁、 整体设计原则的色彩,就较易打动消费者,引起注意,进而产生购 买欲。

设计的色彩设计应该从以下几点注意:一是色彩与商品的照应关系;二是色彩和色彩本身的对比关系。这两点是色彩运用中的关键 所在。 色彩与商品的照应 从行业上讲,如食品类正常的用色其主色调桔红、橙、黄等色彩来表述,这样使人联想到面包、橙子等食品的颜色,给人以温暖和 亲近之感。从性能特征上,单就食品而言,蛋糕点心类多用金色、 黄色、浅黄色给人以香味袭人之印象;茶、啤酒类等饮料多用红色 或绿色类,意味着茶的浓重与芳香;蕃茄汁、苹果汁多用红色,集 中表明着该物品的天然属性。 色彩与色彩的对比关系 所谓对比,一般有以下方面的对比:即色彩使用的深浅对比、色彩使用的反差对比、色彩使用的点面对比等等。 色彩使用的反差对比--即色彩属性之间形成的视觉反差:明暗反差、补色反差,如橙和蓝的对比;冷暖反差,如蓝和绿的对比;动 静反差,如宁静的人物与跳跃的文字对比;轻重反差,如深沉的背 景与轻快色彩的对比等。 色彩使用的点与面对比(或大小对比)--这种对比,即大面积色彩与小面积色彩差异的对比,大面积色彩是构成主色调的主要因素,利用小面积的对比关系衬托被强调的元素。 设计师在设计过程中只有准确的把握色彩的特点,了解照应关系以及色彩和色彩本身的对比关系,并将二者恰当的结合在设计过程中,才能设计出更能适合消费者需求以及更能体现产品特性的优秀 设计作品。

网页设计中颜色搭配的重要性常见颜色的含义资料

网页设计中颜色搭配的重要性, 常见颜色的含义( 网页设计中颜色搭配的重要性, 常见颜色的 含义(1) 贝塔网络 发布时间:2007-12-1916:37:29评论:0点 击:23一步、底色和图形色色彩搭配的问题确实不是一个简单的问题。这一代的设计师比上一代的设计师,所能运用的色彩工具多了许多。如今,我们能运用好计算机为我们提供的丰富色彩,看来不是很简单的事情。就我个人而言,在我从事设计师工作以来,往往也会迷失在色彩的世界。现在交流一下自己学过的和掌握的一些经验,希望大家指正。配色所要注意的要素实际设计时,我们经常会按照设计的目的来考虑与形态、肌理有关联的配色及色彩面积的处理方案,这个方案就是我的配色计划。在做配色计划时,我们应该考虑下述几点以突出视觉效果。1. 底色和图形色在设计时我们会经常遇到用几个色做各种形的构成,作为底的色我们往往会将它推远,而作为图形或文字的色我们要将它拉近。这就需要我们了解受配色关系的影响是什么样的。一般明亮和鲜艳的色比暗浊的色更容易有图形效果。因此,配 色时为了取得明了的图形效果必须首先考虑图形色和底色的关系。图形色要和底色有一定的对比度。这样才可以很明确的传达我们要表现的东西。我们要突出的图形色必须让它能够吸引观者的主要注意力。如果不是这样就会喧宾夺主。 第二步、整体色调如果我们想使我们的设计能够充满生气,稳健,冷清或者温暖,寒冷等感觉都是由整体色调决定的。那么我们怎么能够控制好整体色调呢?只有控制好构成整体色调的色相、明度、纯度关系和面积关系等。才可以控制好我们设计的整体色调。首先要在配色中心决定占大面积的色,并根据这一色来选择不同的配色方案会得到不同的整体色调。从中选择出我们想要的。如果我们用暖色系列来做我们的整体色调则会呈现出温暖的感觉,反之亦然。如果用暖色和纯度高的色

网页设计色彩搭配的基本知识

网页设计色彩搭配的基本知识 网页设计色彩搭配的基本知识 一、确定主体色 遵循主从关系,这是最稳定的处理色彩原则。 其实红、黄、绿、蓝、紫等每一个字都代表一类具体的颜色,也就是色相了,它是指色彩的相貌,是区别色彩种类的名称。在页面上,除白色为背景外大量使用的颜色,就是这个网页的主体颜色。 如果在同一个页面内运用了多种颜色,把握不好的话,就无法确定 哪个是主体色。因为其他的颜色面积不能过大,遵循主从关系。 二、相近色 选择色彩相近的颜色,非常容易搭配。 解释一下:假设在红色里面加白,红色就会越来越亮,明度提高。而加黑,红色就越来越暗。明度降低。那么色彩的明度就是指任何 一种色彩的明暗程度。 假设在蓝色里面加了黑、白、灰,或另一种颜色,就会使得蓝色不纯,不再鲜艳。那么色彩的纯度就是指彩色系中每个色彩的'鲜艳 程度。 同色彩系(同色相),明度不同或纯度不同的几种颜色容易搭配,比如挑几种深浅不同的绿色来搭配,一般页面不会有太大问题;同一 页面尽量不要多出4种颜色。超级连接的色彩搭配也是遵循以上的 原则。而文字颜色的搭配,则要与背景分离。有个小方法:打开Dreamweaver的颜色盒(如下图)。如果它们6色为一组的话,每组 都是很不错的配色方案,但是都比较高调。其实如果搭配颜色的时 候遇到麻烦,就可以在颜色面板中,调入不同的几种色系,看看它 们相邻的颜色,或隔几种色来搭配,找合适你页面的颜色绝对不难。

三、色彩均衡 它是比较保险的配色互补原则。多种颜色同时存在的时候不容易把握好,一定要调和统一。 比如利用色彩错视现象,其中的重量错视在实用设计时用处很多。也就是明度高的浅亮色看起来较轻,明度低的深暗色则较重。 那么在网页设计中,如果运用了较多明度较高的颜色。比如图3 中左边是比较浅的颜色或亮的颜色,就可以用黑色,或同色相的深 色小面积压一下,点缀一下,使得页面不要太轻,达到色彩重量的 平衡。平衡的颜色较符合多数人的色彩心理。根据你的情况,如选 用黑色,可能会严肃和庄重,而用同色相的深色,则轻松一些。 四、黑白灰运用 其实黑白灰是宝贝,万不可小看它们。 如果在用色上遇到麻烦,可以大面积的加白,灰;小面积加黑来 调节其他颜色搭配不当。遇到使用纯度很高的颜色,比如纯蓝,纯 黄等,这样的搭配会很鲜艳,视觉感觉比较兴奋。把这样的颜色明 度抬高或降低,搭配上灰、白色,也是调节的方法。 五、色彩心理与情感 选择适合内容风格的颜色。 1.色彩有冷暖的感觉。如儿童类站点不要使用冷色系,且色彩要丰富一些。 2.色彩有柔软和坚硬感。同色相,明度高,则有柔软感。明度低,则会有坚硬感。女性站点,适量选用柔美的淡粉色或高级灰,而男 性类站点,就可以使用棕色,深蓝色。 3.从色相看,暖色给人的感觉华丽;从明度看,明度高的感觉华丽;从纯度看,纯度高的色彩给人的感觉华丽。由此首饰类站点可以 使用高雅的咖啡和金黄色,而香水类站点可以用明度高的淡绿或浅 蓝色。

网页设计中的色彩选择与搭配技巧

网页设计中的色彩选择与搭配技巧 Color selection and matching techniques in Web Design 朱晶 zhujing 江西先锋软件职业技术学院网络学院专职教师network Academy of ahead software vocational college,Jiangxi,330041,china [摘要]在网页设计中,色彩有着不可或缺的重要地位。提出色彩运用应注意的原则、色彩搭配的建议,从美学角度探讨色彩在网页设计中的运用,以发挥色彩在网页中的视觉冲击作用,以高超的配色技巧大胆创新,创造出更时尚、更具吸引力的网页设计作品。 网页的色彩是树立网站形象的关键之一,色彩搭配却是让网页设计者感到头疼的问题。网页的背景,文字,图标,边框,超链接等,应该采用什么样的色彩,应该搭配什么色彩才能最好的表达出预想的内涵,在本章中将详细叙述色彩的选择与和搭配技巧。[summary]Page design, color has an important status. Proposed the use of color should be noted that the principle of the proposal with a color, from an aesthetic point of color in web design to explore the use of color in order to play at the page of the visual impact of the role of the color superb skills to bold innovation, to create a more stylish, more an attractive Web page design。 Page color is to establish the image of one of the keys to web, color match is so that the page was headache Designer. Web page background, text, icons, borders, hyperlink and so on, should be what color, what color should match the best in order to express the desired content, in this chapter will be described in detail and select colors and match skills。 [关键字]色彩、网页、搭配 [key word] color、web page、match [中图法分类号] Z42 引言 众所周之,在网页设计中色彩的运用和搭配是很重要的环节,色彩是艺术表现的要素之一。在网页设计中,我们的设计师根据和谐、均衡和重点突出的原则,将不同的色彩进行组合.搭配来构成美丽的页面。根据色彩对人们心理的影响,合理地加以运用。 1、非彩色的搭配 黑白是最基本和最简单的搭配,白字黑底,黑底白字都非常清晰明了。灰色是万能色,可以和任何彩色搭配,也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩,那么用灰色试试,效果绝对不会太差。 1.1 黑色 黑色的内涵最为丰富和复杂,黑色具有很强的感染力,能够表现出特有的高贵显得严肃、庄严和坚毅。另外,黑色还具有恐怖、烦恼、忧伤、消极、沉睡、悲痛甚至死亡等意象。黑色用在宗教网站中显出严肃和庄严。黑色是一种流行色,适合于许多色彩搭配。黑色还具有高贵、稳重、科技的意象,是许多科技网站的主色调配合其他辅助色,营造出科技的神秘感。另外在一些音乐网站中也常常用黑色为主色调,营造出炫酷的氛围。 1.2 白色 白光是所有颜色光线的集合,白色反射所有的光线,不吸收任何可见光,因此白色被作为纯粹、虚无、轻盈、光明及金属的象征。在商业设计中,白色具有洁白明快纯真

网页设计中颜色搭配的重要性常见颜色的含义

网页设计中颜色搭配的重要性,常见颜色的含义() 网页设计中颜色搭配的重要性,常见颜色的含义(1) 贝塔网络发布时间:2007-12-1916:37:29评论:0点击:23 一步、底色和图形色色彩搭配的问题确实不是一个简单的问题。这一代的设计师比上一代的设计师,所能运用的色彩工具多了许多。如今,我们能运用好计算机为我们提供的丰富色彩,看来不是很简单的事情。就我个人而言,在我从事设计师工作以来,往往也会迷失在色彩的世界。现在交流一下自己学过的和掌握的一些经验,希望大家指正。配色所要注意的要素实际设计时,我们经常会按照设计的目的来考虑与形态、肌理有关联的配色及色彩面积的处理方案,这个方案就是我的配色计划。在做配色计划时,我们应该考虑下述几点以突出视觉效果。1.底色和图形色在设计时我们会经常遇到用几个色做各种形的构成,作为底的色我们往往会将它推远,而作为图形或文字的色我们要将它拉近。这就需要我们了解受配色关系的影响是什么样的。一般明亮和鲜艳的色比暗浊的色更容易有图形效果。因此,配

色时为了取得明了的图形效果必须首先考虑图形色和底色的关系。图形色要和底色有一定的对比度。这样才可以很明确的传达我们要表现的东西。我们要突出的图形色必须让它能够吸引观者的主要注意力。如果不是这样就会喧宾夺主。 第二步、整体色调如果我们想使我们的设计能够充满生气,稳健,冷清或者温暖,寒冷等感觉都是由整体色调决定的。那么我们怎么能够控制好整体色调呢?只有控制好构成整体色调的色相、明度、纯度关系和面积关系等。才可以控制好我们设计的整体色调。首先要在配色中心决定占大面积的色,并根据这一色来选择不同的配色方案会得到不同的整体色调。从中选择出我们想要的。如果我们用暖色系列来做我们的整体色调则会呈现出温暖的感觉,反之亦然。如果用暖色和纯度高的色作为整体色调则给人以火热刺激的感觉,以冷色和纯度低的色为主色调则让人感到清冷、平静的感觉。以明度高的色为主则亮丽,而且变得轻快,以明度低的色为主则显得比较庄重、肃穆。取对比的色相和明度则活泼,取类似、同一色系则感到稳健。色相数多则会华丽,少则淡雅、清新。以上几点整体色调的选择要根据我们所要表达的内容来决定。 第三步、配色的平衡颜色的平衡就是颜色的强弱、轻重、浓淡这种关系的平衡。这些元素在感觉上会左右颜色的平衡关系。因此,即使相同的配色,也将会根据图形的形状和面积的大小来决定成为调和色

网页风格设计及色彩搭配技巧

网页风格设计及色彩搭配技巧 一、网站设计风格 一个人拥有自己独特的风格,是一般人所没有的,就会让人注意到那个人的特别,若那个人的风格是正面的,甚至就会引起别人的羡慕与注意,或是赞赏。就如同一个网站,拥有别的网站所没有的风格,就会让浏览者愿意多停留些时间,细细品尝该站的内容,甚至该站会得到多人的鼓励与注目,粗略的说,网站风格可以从以下几个方向来探讨,而每一项都是有关联性的: 1. 色系:网页的底色、文字字型、图片的色系、颜色等等。 2. 排版:表格、框架的应用、文字缩排、段落等等。 3. 窗口:窗口效果,例如:全屏幕窗口、特效窗口等。 4. 程序:网页互动程序,例如:ASP . PHP . XML . CGI等等。 5. 特效:让网页看起来生动活泼的各种应用,如:Flash . Java script . Java applets . DHTML等等。 6. 架构:目录规划、层次浅显易懂、选单应用等等。 7. 内容:网站主题、整体实用性、文件关联性、内容切合度、是否有不必要的档案等等。 8. 走向:对于网站的未来规划、网站整体内容走向等。 以上这些项目都与网页风格有密切的关系,网页的风格不是某一项相同,网站就是有整体感,而是要各项目的配合应用,才能达到完美的网站风格设计。接下来的段落,将会为每个项目做简单的介绍。 (一)色系

网站的色系是浏览者整体的视觉观感,若一个网站色系能有一致性,不仅会使网站看起来美观,更能让浏览者对内容不易混淆,增加了浏览的简洁与方便。而网站的色系更能衬托出网站的主题,若色系能与主题合理搭配,将会增加浏览者的易读性。 网站的色系包含了网页的底色、文字字型、图片的色系、颜色等等,这不单只是将颜色搭配得当就算完美,还要配合每个内容,及网站主题。对于网站的色系,应该要在网站开始制作前,做好规划及设计,才不会到着手制作网站时,难以搭配,甚至造成混乱的设计。 网页的底色是整个网站风格的重要指针。举例来说,以黑色作为背景颜色的网页,因黑色本对人的视觉上会造成黯淡的感觉,若是拿来用作活泼的儿童网站,就是不适合了。因为小孩子是天真无邪的、活泼的、有朝气的,与黑色的沉稳、黯淡,很难联想在一起。 再举个例子,若是写一个有关于环保的网站,若用暗红色作为网页底色,决计不会有人联想到网页的内容是与环保有关。当然,每个人的审美观不同,可能也会对颜色的代表性看法不同,但既然网站不是只写给自己看的,就应该要注意到大部分人可能会有的观点,然后以众人居多的观点出发,来设计网页。 文字字型上的设计,最好的网站是以所有浏览者都能看到的字型为主。常会看到有需多网站要求浏览者须自行下载某种字型,才能达到最佳浏览效果,这是种非常奇怪的行为。毕竟浏览者只是来找资料或是来看网站的内容,不可能会因为这种「为达最佳浏览效果」,而自行下载所需要的字型。 当所要求的字型若不下载,并不会影响到网站内容上的浏览与不便,那么对浏览者的要求就微乎其微的不可能发生任何作用。这么一来,对于网页设计者来

网页经典配色艺术

网页经典配色艺术 内容简介: 本书首先讲解了色彩的理论与配色方法,主要包括色彩的基础知识、网页配色标准与技巧及色彩的配色方案,然后通过案例分析了色调、色相和意象配色方案,再通过对大量的国内外优秀网页设计作品配色技巧的分析,培养读者对色彩的感觉,提高色彩的运用能力。本书配套光盘中包含大量配色方案、网页模板、网页Banner和Logo,以及配色辞典等资料。 本书适合网页设计人员,以及对网页设计感兴趣的读者。 未经许可,不得以任何方式复制或抄袭本书之部分或全部内容。 版权所有,侵权必究。 图书在版编目(CIP)数据 网页经典配色艺术/张新伟编著.—北京:电子工业出版社,2009.6 (精彩网页设计) ISBN 978-7-121-08228-3 I. 网…Ⅱ.张…Ⅲ.主页制作-配色Ⅳ.TP393.092 中国版本图书馆CIP数据核字(2009)第015558号 责任编辑:王树伟田志虹 印刷: 装订: 出版发行:电子工业出版社 北京市海淀区万寿路173信箱邮编:100036 开本:787×1092 1/16 印张:19.5 字数:608.4千字 印次:2009年6月第1次印刷 印数:5 000 册定价:69.90 元(含光盘1张) 凡所购买电子工业出版社图书有缺损问题,请向购买书店调换。若书店售缺,请与本社发行部联系,联系及邮购电话:(010)88254888。 质量投诉请发邮件至zlts@https://www.360docs.net/doc/5f11444417.html,。盗版侵权举报请发邮件至dbqq@https://www.360docs.net/doc/5f11444417.html,。 服务热线:(010)88258888。

前言 在人的视野里,这个世界中,无论是天空、大地、山水、花草,还是生活中的衣、食、住、行,色彩都是无处不在的。它像一位魔术师,可以通过冷暖和深浅等因素的变化,表现出灿烂的微笑或忧郁的心情,影响着人们的心理感受。 在网络的世界里,色彩也同样多姿多彩。什么样的网页才能获得访问者的青睐呢?如何才能设计出与众不同的漂亮网页呢?通过观察和比较可以发现,一个优秀的网页,通常要具备丰富的内容、合理的版式、独特的风格和悦目的色彩,并在这几个方面都要实现和谐的统一。所以当今的设计者不仅要掌握基本的网页制作技术,还需要掌握有关版式风格设计及色彩搭配等方面的知识和技巧,再通过自己在工作中的实践经验积累,才能逐步成为一个优秀的网页设计师。 在网络世界中,人们不再局限于简单的文字与图片的组合,而是更加追求网页的美观与舒适,最直接的体现就是网页的设计风格越来越受到重视。而色彩作为网页给访问者的最初印象,在网页设计中占有举足轻重的地位。目前,国内的众多网站在内容制作方面都发展得较为完善,因此,版式风格特色鲜明并有与网站主题相得益彰的配色方案,是决定网站成功与否的重要因素。 本书正是遵循以上理念,在讲解色彩相关概念和网页配色原理的基础之上,采用了大量国内外网站的配色成功案例进行实战点评。帮助读者在鉴赏过程中逐步掌握不同情况下网页配色的规律与技巧,进而成为网页设计的行家里手。 本书内容 本书共分为两大部分。第1部分(第1~3章)讲解色彩理论与配色方法,主要包括色彩的基础知识、网页配色标准与技巧及色彩的配色方案。通过案例分析了色调、色相和意象配色方案。第2部分(第4~10章)是网页配色应用与实践讲解,对大量网页用色特点进行分析,并学习国内外优秀网页设计作品的配色技巧。通过这些分析,有助于培养读者对色彩的感觉,提高色彩的运用能力。 本书特点 紧跟当今最前卫的色彩流行趋势。本书精选的优秀网页设计作品大部分是韩国、欧美的网页案例,展示了最时尚的网页设计风格,提供了最实用的设计版式和最前卫的配色经验,拓展读者的创意空间。 专业的网页配色参考手册。本书通过分析不同类型网站受众的不同特点和针对不同的网站主题来合理布置色彩,有针对性地使用色彩来体现网站的特色,使读者快速领会配色要诀。 提供最丰富的配色方案和版式设计方案。颜色搭配得当,网页就成功了一半,再搭配合理的版式设计,使网页更成功。 特别说明 由于网站的更新速度快、时效性强,本书中提供的网址链接仅供参考。 另外,为了给读者提供更丰富的配色方案参考,本书大部分章节提供了颜色的RGB色值,由于实际操作环境的不同,实际数值可能与本书中给出的数值稍有不同,但不会对颜色造成太大影响。 由于作者水平有限,错误和不足之处在所难免。您在阅读过程中如有任何问题,欢迎和作者交流探讨。 编著者

网页设计配色及字体规范

网页设计配色及字体规范 颜色的使用在网页制作中起着非常关键的作用,同事字体是网页设计中最重要的细节,本内容由小编跟大家分享网页设计配色及字体规范,欢迎大家学习与借鉴! 对于刚开始学习制作网页的人来说,往往不容易驾驭好网页的颜色搭配。除了学习各种色彩理论和方法之外,多学习一些著名网站的用色方法,对于我们制作美丽的网页可以起到事半功倍的作用。总结了一些著名网站的颜色搭配方法,这些方法可以让我们的学习少走弯路,快速提高我们的网页制作水平。 我们所有网页上颜色,在HTML下看到的是以颜色英文单词或者十六进制的表示方法(如#000000表示为黑色)。不同的颜色有着不同的含义,给人各种丰富的感觉和联想。 红色:热情、奔放、喜悦、庄严 黄色:高贵、富有、灿烂、活泼 黑色:严肃、夜晚、沉着 白色:纯洁、简单、洁净 蓝色:天空、清爽、科技 绿色:植物、生命、生机 灰色:庄重、沉稳 紫色:浪漫、富贵

棕色:大地、厚朴 不同的网站有着自己不同的风格,也有着自己不同的颜色。网站使用颜色大概分为几种类型: 在现在企业中,公司的CI形象显得尤其重要,每一个公司的CI设计必然要有标准的颜色。比如新浪网的主色调是一种介于浅黄和深黄之间的颜色,同时形象宣传、海报、广告使用的颜色都和网站的颜色一致。 许多网站使用颜色秉承的是公司的风格。比如海尔使用的颜色是一种中性的绿色,即充满朝气有不失自己的创新精神。女性网站使用粉红色的较多,大公司使用蓝色的较多……这些都是在突出自己的风格。 这些网站的颜色使用很大一部分是凭自己的个人爱好,以个人网站较多使用,比如自己喜欢红色、紫色、黑色等,在做网站的时候就倾向于这种颜色。每一个人都有自己喜欢的颜色,因此这种类型称为习惯色。 网页设计的颜色搭配需要在实践中不断的摸索和不断的创新,认真学习别人的先进方法和经验,可以快速的提高我们的制作水平。 可以说。网页颜色搭配得当,成功也就走了一半。 标准网页的宽度、字体、字号等的设计原则 中文网页一般文字正文都采用宋体12号(12px)字体,因为这个字体是系统对于浏览器特别优化过的字体。虽然

网页设计配色实例

网页设计配色 颜色的使用在网页制作中起着非常关键的作用,有很多网站以其成功的色彩搭配令人过目不忘。但是对于刚开始学习制作网页的人来说,往往不容易驾驭好网页的颜色搭配。除了学习各种色彩理论和方法之外,笔者认为多学习一些著名网站的用色方法,对于我们制作美丽的网页可以起到事半功倍的作用。所以,笔者总结了一些著名网站的颜色搭配方法,这些方法可以让我们的学习少走弯路,快速提高我们的网页制作水平。 一、网页颜色原理和象征意义 我们所有网页上颜色,在HTML下看到的是以颜色英文单词或者十六进制的表示方法(如#000000表示为黑色)。不同的颜色有着不同的含义,给人各种丰富的感觉和联想。 红色:热情、奔放、喜悦、庄严 黄色:高贵、富有、灿烂、活泼 黑色:严肃、夜晚、沉着 白色:纯洁、简单、洁净 蓝色:天空、清爽、科技 绿色:植物、生命、生机 灰色:庄重、沉稳 紫色:浪漫、富贵 棕色:大地、厚朴 二、网页颜色的使用风格 不同的网站有着自己不同的风格,也有着自己不同的颜色。网站使用颜色大概分为几种类型: 1、公司色 在现在企业中,公司的CI形象显得尤其重要,每一个公司的CI设计必然要有标准的颜色。比如新浪网的主色调是一种介于浅黄和深黄之间的颜色,同时形象宣传、海报、广告使用的颜色都和网站的颜色一致。再比如国富投资公司的主色调是C:100%,M:60%,Y:0%,K:0%。这样的颜色使用到网站上显得色调自然、底蕴深厚。 2、风格色 许多网站使用颜色秉承的是公司的风格。比如海尔使用的颜色是一种中性的绿色,即充满朝气有不失自己的创新精神。女性网站使用粉红色的较多,大公司使用蓝色的较多……这些都是在突出自己的风格。

设计颜色搭配表

设计颜色搭配表(very good)

最佳颜色搭配 一、色彩处理 色彩是人的视觉最敏感的东西。主页的色彩处理得好,可以锦上添花,达到事半功倍的效果。色彩总的应用原则应该是“总体协调,局部对比”,也就是:主页的整体色彩效果应该是和谐的,只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上,可以根据主页内容的需要,分别采用不同的主色调。因为色彩具有象征性,例如:嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色,例如:军警的橄榄绿,医疗卫生的白色等。色彩还具有明显的心理感觉,例如冷、暖的感觉,进、退的效果等。另外,色彩还有民族性,各个民族由于环境、文化、传统等因素的影响,对于色彩的喜好也存在着较大的差异。充分运用色彩的这些特性,可以使我们的主页具有深刻的艺术内涵,从而提升主页的文化品位。下面介绍几种常用的配色方案: 1.暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用,可使主页呈现温馨、和煦、热情的氛围。 2.冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运用,可使主页呈现宁静、清凉、高雅的氛围。 3.对比色调。即把色性完全相反的色彩搭配在同一个空间里。例如:红与绿、黄与紫、橙与蓝等。这种色彩的搭配,可以产生强烈的视觉效果,给人亮丽、鲜艳、喜庆的感觉。当然,对比色调如果用得不好,会适得其反,产生俗气、刺眼的不良效果。这就要把握“大调和,小对比”这一个重要原则,即总体的色调应该是统一和谐的,局部的地方可以有一些小的强烈对比。 最后,还要考虑主页底色(背景色)的深、浅,这里借用摄影中的一个术语,就是“高调”和“低调”。底色浅的称为高调;底色深的称为低调。底色深,文字的颜色就要浅,以深色的背景衬托浅色的内容(文字或图片);反之,底色淡的,文字的颜色就要深些,以浅色的背景衬托深色的内容(文字或图片)。这种深浅的变化在色彩学中称为“明度变化”。有些主页,底色是黑的,但文字也选用了较深的色彩,由于色彩的明度比较接近,读者在阅览时,眼睛就会感觉很吃力,影响了阅读效果。当然,色彩的明度也不能变化太大,否则屏幕上的亮度反差太强,同样也会使读者的眼睛受不了。 网页色彩的搭配 网页的色彩是树立网站形象的关键之一,色彩搭配却是网友们感到头疼的问题。网页的背景,文字,图标,边框,超链接...,应该采用什么样的色彩,应该搭配什么色彩才能最好的表达出预想的内涵呢?阿捷这里谈一些心得,希望对你有所启发。 首先我们先来了解一些色彩的基本知识: 1.颜色是因为光的折射而产生的。 2.红,黄,蓝是三原色,其它的色彩都可以用这三种色彩调和而成。网页html语言中的色彩表达即是用这三种颜色的数值表示例如:红色是color (255,0,0)十六进制的表示方法为(FF0000)白色为(FFFFFF), 我们经常看到的"bgColor=#FFFFFF"就是指背景色为白色。

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

对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景,但浏览一下大型的商业网站,你会发现他们更多运用的是白色、蓝色、黄色等,使得网页显得典雅,大方和温馨。更重要的是,这样可以大大加快浏览者打开网页的速度。 一般来说,网页的背景色应该柔和一些、素一些、淡一些,再配上深色的文字,使人看起来自然、舒畅。而为了追求醒目的视觉效果,可以为标题使用较深的颜色。下面是我做网页和浏览别人的网页时,对网页背景色和文字色彩搭配积累的经验,这些颜色可以做正文的底色,也可以做标题的底色,再搭配不同的字体,一定会有不错的效果,希望对大家在制作网页时有用。 BgcolorΚ″#F1FAFA″———做正文的背景色好,淡雅 BgcolorΚ″#E8FFE8″———做标题的背景色较好 BgcolorΚ″#E8E8FF″———做正文的背景色较好,文字颜色配黑色 BgcolorΚ″#8080C0″———上配黄色白色文字较好 BgcolorΚ″#E8D098″———上配浅蓝色或蓝色文字较好 BgcolorΚ″#EFEFDA″———上配浅蓝色或红色文字较好 BgcolorΚ″#F2F1D7″———配黑色文字素雅,如果是红色则显得醒目 BgcolorΚ″#336699″———配白色文字好看些 BgcolorΚ″#6699CC″———配白色文字好看些,可以做标题 BgcolorΚ″#66CCCC″———配白色文字好看些,可以做标题 BgcolorΚ″#B45B3E″———配白色文字好看些,可以做标题 BgcolorΚ″#479AC7″———配白色文字好看些,可以做标题 BgcolorΚ″#00B271″———配白色文字好看些,可以做标题 BgcolorΚ″#FBFBEA″———配黑色文字比较好看,一般作为正文 BgcolorΚ″#D5F3F4″———配黑色文字比较好看,一般作为正文 BgcolorΚ″#D7FFF0″———配黑色文字比较好看,一般作为正文 BgcolorΚ″#F0DAD2″———配黑色文字比较好看,一般作为正文

网页设计的色彩搭配

网页设计的色彩搭配 导语:网页设计是根据企业希望向浏览者传递的信息,进行网站功能策划,然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种,精美的网页设计,对于提升企业的互联网品牌形象至关重要。下面我们来看看网页设计的色彩搭配,希望对大家有所帮助。 网页设计的色彩搭配能改变人们对这个网页的整体印象,带给访客一种视觉冲击力,用色彩方案做出一个有品质的网页。IT培训网总结了几个网页设计的色彩搭配方案,让初学者在没有足够理论知识和经验的情况下,也能做出来差不多的网页。 网页设计配色学问,说难不难,说其容易也不简单,选择对的颜色搭配或许是成功的一半,它能抓住用户对网站的第一感觉,传递信任感,让用户更容易记住。 在选择的颜色当中,善用透明度、柔光,颜色加深等方法来调试颜色的搭配,哪怕只选择黑白色,也可通过这种方式让颜色看起来不失光彩。 颜色特效包括阴影,扭曲渐变,高光,线条映衬等,注重颜色的细节往往还是配色的成功之道,颜色种类尽管单调,但在特效上运用得当,也能彰显网页艺术特性。

当然,在网页设计选择色彩之前,一定要先综合考量网站的特性,前期工作固然不可忽略,免得最终设计的效果与用户的期待不相符,造成用户体验不佳的结果。 说到这个,也即是网站的定位和受众目标的考虑,例如:科技类的网站用户印象中都是充满神秘的,那么黑色,蓝色估计是比较容易接受的网站风格,最好迎合用户的认知习惯;再如,生态环保类网站,用户可能首先想到的是绿色,那就不能选择出入太大的颜色作为主色调。 用户对颜色的认知绝大多数是类似的,无论是哪一类的网页,如果太过花哨不仅不会带给用户视觉的享受,还会干扰视觉,那么很明显,网页在显眼的颜色方面配色最好不要超过三种,以免造成页面视觉体验的混乱。 许多人认为不懂颜色搭配,就应找专业的颜色搭配来参考,从网络上搜集大量的配色工具来帮助设计,事实上这种方式会阻碍配色思维的发挥,甚至被误导。 对于主色,只要选择色相差异明显的,在对比色、临近色、冷暖色调之间能够达到互补就可以了,或者在自己选择好的主色中参考类似网站案例,就可以简单完成配色。 网页设计涉及到的技术至关重要,它实质上更多的是一门艺术。出色的网页设计能够给用户留下深刻的印象,包括

网页设计的布局与用色技巧

网页设计的布局与用色技巧 摘要:网页设计是一们新兴的设计类和网络的交叉学科,近几年`随着网络的发展而逐渐收到人们的重视,它本身以网络为载体,把各种信息以最快捷、方便的方式传达给民众。在这种标准的要求下,逐步产生了审美的需求。人们对美的追求是不断深入的,网页设计同样如此。一个内容空洞无物的网页既使做得再漂亮也不会吸引人,顶多赢得几声赞叹,没有任何的用处。没有实用性的东西是不会具有生命力的。要想将页面做的更漂亮,就要求设计师要用较好的审美方面的素质,同时要有丰富的平面设计的经验。这样才能在设计时驾轻就熟。 关键词:网页,布局,用色 一、网站首页设计、风格定位、色彩搭配、版面布局的技巧 首先我们需要了解一下网站的页面组成,网站一般包括以下几部分: 首页:网站的门面,如同公司的形象,特别注重设计和规划。 框架页:网站的主要结构页面,又称次首页、内页,大型网站往往框架页即首页,如一些门户网站。框架页主要是网站内部主要栏目的首页,讲究风格的一致性,并于主页呼应。 普通页:网站主要的承载信息的页面,设计要求不高,但要求链接准确、文字无误、图文并茂,并沿袭网页的风格。 弹出页:一般用于广告、新闻、消息、到其他网站的链接等等,

一般用的很少。 从功能上来看,首页主要承担着树立企业形象(当然不仅仅是首页)的作用,框架页在导航方面起着重要的作用,比如各栏目内部主要内容的介绍,都可以在框架页中体现再进入普通页,让浏览者能够迅速了解网站各栏目的主要内容,择其需要而浏览,而普通页则是主要的信息页面,也是网站的最终页面. 二、色彩搭配 1、运用相同色系色彩:所谓相同色系,是指几种色彩在色相环上位置十分相近;左右或同一色彩不同明度的几种色彩这种搭配的优点是易于使网页色彩趋于一致,对于网页设计新手有很好的借鉴作用,这种用色方式容易塑造网页和谐统一的氛围,缺点是容易造成页面的单调,因此往往利用局部加入对比色来增加变化,如局部对比色彩的图片等。 2、运用对比色或互补色:所谓对比色,是指色相环相距较远,视觉效果鲜亮、强烈,而互补色则是色相环上相距最远的连种色彩,其对比关系最强烈、最富有刺激性,往往使画面十分突出,这种用色方式容易塑造活泼、韵动的网页效果,特别适合体现轻松、积极的素材的网站,缺点是容易造成色彩的花,使用中注意色彩使用的度。 3.使用过渡色:过渡色能够神奇地将几种不协调的色彩统一起

相关文档
最新文档