网页布局色彩搭配技巧.docx

网页布局色彩搭配技巧.docx

《网页布局色彩搭配技巧.docx》由会员分享，可在线阅读，更多相关《网页布局色彩搭配技巧.docx（9页珍藏版）》请在冰点文库上搜索。

网页布局色彩搭配技巧

网页设计的基础--网页布局

正如您现在看到的，网页的布局变得越来越重要。

访问者不愿意再看到只注重内容的站点。

虽然内容很重要，但只有当网页布局和网页内容成功结合时，这种网页或者站点才是招人喜欢的。

缺任何一面你都无法留住太过“挑剔”的访问者。

　　网页布局的基本理念

　　最开始网页呈现在你面前的时侯，它就好像一张白纸，它需要挥洒你的设计才华。

假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你可以在此基础上加上自己的东西。

总结出来就是先锋在线网站制作人员对网页布局的设计理念：

　　1.页面尺寸：

　　一般分辨率在800×600的情况下，页面显示尺寸为780×428象素；分辨率在640×480的情况下页面显示尺寸为620×311象素；分辨率在1024×768的情况下，页面显示尺寸为1007×600。

分辨率越高页面尺寸越大。

我们经常看到有的网页上的说明：

本网页适合在1024×768分辨率下浏览...不要搞成这样！

永远不要让浏览者调整分辨率去适应你的网页尺寸，而是应该自动适应浏览者的分辨率尺寸，这就是使用者（浏览者）优先原则。

　　浏览器的工具栏也是影响页面尺寸的原因。

一般目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不一样的。

　　在网页设计过程中，向下拖动页面大概是惟一给网页增加更多内容（尺寸）的方法。

但我想提醒大家除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。

虽然现在很多鼠标都有滚轮设计，但是网页的设计布局是越少用到鼠标越好。

　　2.整体形象：

　　是图形与文本的结合应该是层叠有序的整体。

虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：

矩形、圆形、三角形、菱形等轮廓。

　　对于不同的形状，它们所代表的意义是不同的。

比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型；圆形轮廓代表柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型轮廓；三角形、梯形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。

虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形设计，只是其中某种图形的比例可能占的多一些。

　　3.页眉和页脚：

　　页头又称为页眉，页眉的作用是定义页面的主题。

比如一个站点的名字多数都显示在页眉里。

这样，访问者能很快知道这个站点是什么内容。

页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。

页头常放置站点名字的图片和公司标志以及旗帜广告。

页脚和页头相呼应。

页头是放置站点主题的地方，而页脚是放置公司信息或者作者信息的地方，如：

本网页由某某制作维护...先锋在线制作的网页通常不在此处放置作者信息。

　　4.文本和图片：

　　文本在页面中出现多数以行或者块（段落）出现，它们的摆放位置决定整个页面布局的可视性。

以前因为页面制作技术的局限，文本位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。

图片和文本是网页的两大构成元素，缺一不可。

如何处理好图片和文本的位置成了整个页面布局的关键。

而你的布局思维也将体现在这里。

　　5.多媒体

　　除了文本和图片，还有声音，动画，视频等等其它媒体。

虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得很重要，但是flash动画不利于搜索引擎的爬虫找到和识别。

网页设计的原则

一、使用者优先：

　　无论什么时候，不管是着手准备设计网页之前、正在设计之中或者已经设计完毕，有一个最高准则就是∶使用者优先。

因为没有使用者去光顾或者不方便使用者浏览，任何自认再好的网页都是没有意义的。

二、考虑大多数人的连线状况

　　国内互联网还处于初级阶段，带宽不足，而且经常塞车严重，所以设计网页时必需以这种普遍状况为设计考量，不要放置一堆会加重网络拥挤或让人等得发火的东西。

完成之后最好自己透过Modem拨号上网的方式来亲自测试一下。

三、考虑使用者的浏览器

　　如果要让所有的人都可以毫无障碍地观看您的网页，那就最好使用所有浏览器都可以阅读的格式，不要使用只有部份浏览器可以支持的HTML格式或程序技巧。

如果既想展现自己的高超技术又不想放弃一些潜在观众，可以考虑在主页中设置几种不同的观赏模式选项（例如纯文字模式、Frame模式、Java模式等等）供浏览者自行选择。

四、内容永远第一　

　内容可以是任何东西，包括文字、图片、影像、声音等等，但一定要跟这个网站所要提供的讯息有关系。

一个好的网站在进行实际的HomePage建置之前，首先应考虑的就是上面的四个要点。

下面是在着手网页制作过程中，所应该掌握的几个重点原则：

五、着手规划、确定特色、锁定目标

　　规划时必须确定网站的性质、内容、目标客户、受众，然后根据本身的条件来设置范围。

网络的特色是及时、新鲜、丰富、热闹，这是吸引大家上网的条件，如果本身条件强大，可以根据上述原则使自己网站成为一个全方位的信息提供者，如果不足，就做单方面资源的提供者；此外，还可以在特殊议题或主题上加以突出，进一步锁定目标观众，四个字：

扬长避短。

六、首页很重要

　　虽然是废话，还是要强调一下，因为它是网站的第一印象。

最好第一页就有很清楚的类别选项，而且尽量符合人性化，让参观者可以很快找到需要的主题。

在设计上最好秉持干净清爽的原则。

若无需要，尽量不要放置大型图形文件或加上不适当的程序，那样会增加下载时间，导致访问者失去耐心；注意画面不要太过杂乱无序。

七、分类

　　可以按主题分类、按性质分类、按机关组织分类，或按人类思考直觉式地分类等等，一般而言，按人类的直觉式思考会比较亲切。

但无论哪一种分类方法，都要让使用者可以很容易找到目标。

而且分类方法最好尽量保持一致，若要混用多种分类方法也要掌握不让使用者搞混的原则。

此外，在每个分类选项的旁边或下一行，最好也加上这个选项内容的简要说明。

八、互动

　　好网站必须与使用者有良好的互动，包括在整个设计呈现、使用界面导引等等，都应掌握互动的原则，让使用者感觉他的每一步都确实得到适当的回应，这部分需要一些设计上的技巧。

事实上，好的网站设计必须加上个人技巧、经验累积以及软硬件技术的配合运用等。

九、图形应用技巧

　　图形带有醒目、吸引人以及传达讯息的功能，好的图形应用可以让网页设计增色不少，但不当的图形应用则会带来反效果，而其中又以大量使用无意义及大型的图形为最大败笔。

先锋在线建议：

应尽量缩小或省略图形。

目前国内的网络传输资源有限，使用图形时一定要考虑传输时间的问题。

根据经验与统计，使用者可以忍受的最长等待时间大约是90秒钟。

因此必须依据HTML文件、图形文件的大小，考虑传输速率、延迟时间、网络状况，以及服务端与使用者终端的软硬件条件，估算网页的传输与显示时间。

在图形使用上，尽量采用一般浏览器均可支持的压缩图形格式，例如JPG与GIF等，可以节省传输时间。

十、网页背景

　　不少人喜欢在网页加上背景图案，认为可以增加美感，但这样会耗费传输时间，而且容易影响阅读视觉，反而给使用者不好的印象。

笔者建议，若没有绝对必要，最好避免使用背景图案，保持干净清爽的本文。

但如果真的喜欢使用背景，那么最好使用单一色系，而且要跟前景的文字可以明显区别，最忌讳使用花俏多色的背景，这样会严重混乱使用者的阅读。

十一、HTML格式的注意事项

　　如果本身网站想让别人可以透过搜寻站来找到，那么千万不要忘了在Title指令中加上可供搜寻的关键字。

在PC系统下，文件的大小写不用区分，但在UNIX系统下，则大小写有区分，需要注意。

十二、避免滥用技术

　　好的技术运用会让网页栩栩如生，叹为观止；但不当的技术则适得其反，反而成为网页设计的败笔。

首先使用技术时一定要考虑传输时间，不要成为他人观看的沉重负担；其次，技术一定要与本身网站的性质及内容相配合，不要耍一大堆不相干的技术。

Java小程序也是目前网络上的常见技术，它长于动态物象的呈现，虽然只要浏览器支持就可以动，但同样，也需要考虑传输时间，以及电脑系统负荷等问题。

最后，技术最好不要用得太过多样而复杂，有些人似乎不表现一下自己就不快乐，却忽略了原则上应适可而止才能恰到好处。

十三、经常更新、维护

　　大家都想看新鲜的东西，没人对过时信息有兴趣，所以资料一定要注意时效性。

先锋在线建议，不妨每隔一阵子就对页面设计做一次小翻新，时时保持新鲜感。

最后，须考量的就是事后维护管理的问题，个人性质的网站在维护管理上比较简单，公司网站的维护更新就更重要了。

疏可走马，密不容针

在国画中，有一句描述布局的话比较经典，叫做“计白当黑”，所谓“疏可走马，密不容针”，就是说空着的地方和着了墨的地方一样，都是整体的组成部分。

一枝笔、一张纸，计黑当白，也计白当黑，用现代人的观点说，无非是一种艺术的造型与空间的分割。

这是书家画手孜孜追求的一种境界。

可见留白是非常重要的，网页设计上要想空白的地方但看起来舒服，还是要下点功夫的。

　　网页上的空白部分，同其它页面内容如文本、图片、动画等一样，都是设计制作网页时要通盘斟酌的。

　　设计者在设计网页时也就是在和浏览者做交流，好的设计师能够同浏览者进行心理的对话——不仅仅通过文字、图片、动画...同时也借助留白进行表达，只有照顾了整个页面空间的分配，留白才能表现出一定的活力，其实在排版布局中，我们经常在不知不觉地利用着留白，试想如果页面上充满了图片和文字，一点空隙都不留，那就根本谈不上韵律，利用留白来使页面布局平衡，在一种不平衡中营造平衡，达到错落有致的效果，这样就会使页面生动起来。

我们应该在网页中通过留白的作用，使整个内容排布得松紧有度。

网页配色方案的选择和色彩使用技巧

　　要说色彩的运用，还是先谈谈黑白灰色彩的应用吧，因为黑白灰色彩是万能色，可以跟任意一种色彩搭配。

当你为某种色彩的搭配苦恼的时候，不防试试用黑白灰。

当你觉得两种色彩的搭配不协调，试试加入黑色，或者灰色，或许会有意想不到的效果哦。

　　对一些明度较高的网站，配以黑色，可以适当地降低其明度。

白色是网站用的最普遍的一种颜色。

很多网站甚至留出大块的白色空间，作为网站的一个组成部分。

这就是留白艺术。

很多设计性网站较多运用留白艺术。

留白，给人一个遐想的空间，恰当的留白对于协调页面的均衡起到相当大的作用。

确定网站的主题色，一个网站不可能单一的运用一种颜色，让人感觉单调，乏味；但是也不可能将所有的颜色都运用到网站中，让人感觉轻浮，花哨。

一个网站必须有一种或两种主题色，不至于让客户迷失方向，也不到于单调，乏味。

所以确定网站的主题色也是设计者必须考虑的问题之一。

　　一个页面尽量不要超过4种色彩，用太多的色彩让人没有方向，没有侧重。

当主题色确定好以后，考虑其它配色时，一定要考虑其它配色与主题色的关系，要体现什么样的效果。

另外哪种因素占主要地位，是明度，纯度还是色相。

先锋在线的网页使用蓝色为主色，配以黄色，因为这两种颜色的搭配最协调也最丰富，可以有许多变化，稳重优雅中不失灵动，更与桔色的LOGO相得益彰，避免只有蓝色产生冷冷清清的感觉，整体显得很整洁很和谐，和谐就是恰到好处。

网站风格的确立

一个人拥有自己独特的风格是一般人所没有的，这个叫做个性，如果有特殊的需要，甚至可以变成另类，呵呵，总之就是会让人注意到那种特别，若那个人的个性风格是正面的积极的，甚至会引起别人的羡慕与注意或是赞赏。

就如同一个网站，拥有别的网站所没有的风格，就会让浏览者愿意多停留些时间，细细品尝该站的内容，甚至该站会得到多人的鼓励与注目，粗略的说，网站风格可以从以下几个方向来探讨，而每一项都是有关联性的：

1、色系：

网页的底色、文字字型、图片的色系、颜色等等，更详细的色板可参考网页配色方案的选择和色彩使用技巧。

2、排版：

表格、框架的应用、文字缩排、段落等等，特别要注意错别字。

3、窗口：

窗口效果，例如：

全屏幕窗口、特效窗口等。

4、程序：

网页互动程序，例如：

ASP.PHP.XML.CGI等等。

5、特效：

让网页看起来灵动活泼的各种应用，如：

Flash.Javascript.Javaapplets.DHTML等等。

6、架构：

目录规划、层次浅显易懂、选单应用等等原则就是适于浏览和阅读。

7、内容：

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

8、走向：

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

　　以上这些项目都与网页风格有密切的关系，网页的风格不是某一项相同，网站就是有整体感，而是要各项目的配合应用，才能达到完美的网站风格设计。

在中国，很多设计师喜欢模仿，中国五千年传统文化里我们画画练字多是采用临摹描白等方法，老外叫“COPY（拷贝）”，是可以理解的，所谓见贤思齐就是看到优秀的人就希望自己也能象他一样，临摹的和拷贝的自然也通常是优秀作品。

但作为网页设计者应该找到自己的定位，就是要针对不同内容来策划网站设计，以自己的领悟理解设计出最适合于此的风格。

最重要的就是多做网站了，最好是不同形式内容的网站，还要经常对优秀站点加以分析，更有利于在自己网页设计工作中进行系统的规划。

韩国网站的设计构思

韩国网站设计的色彩搭配一直都非常大胆，冷色暖色常常不按常理搭配，视觉冲击很强，色彩丰富但却不花哨，颜色突出却并不刺眼，可充分说明设计者对色彩搭配及分布的了解。

以下是韩国网页设计中常用的色谱，但不是全部，只是一小部分：

由下图我们可以学到使用渐变色的图片可以使图形乃至网页更有层次感立体感，无规则的布局中又有充分的规则性，给人一种深沉而不俗气，稳重而不呆板的感觉，没有太多颜色搭配，色彩不在多而在于精，看似平平无奇又不失时尚，flash动画、栏目导航、logo一个都不少，看起来很象中国人设计的网页，仔细一看又不一样，里面有精美矢量图的运用以及层次分明的叠加设计：

　下图构思巧妙，浑然一体，采用漂亮的活泼灵动的黄色系为主色调，整体是一个可爱得冒泡儿的啤酒杯，与企业品牌相得益彰，巧妙地将LOGO和店名放在醒目位置，结构紧凑而不拥挤，左侧几个泡泡更具匠心，不但使整体布局更加生动，与商家品牌更贴切，给人一种眼前一亮的视觉冲击，虽然是商业网站却做得很脱俗：

韩国网页设计大多干净整洁，给人以清新明快之感，页面层次丰富，不按常规布局，动画以及BANNER个性突出，大量运用叠加效果，风格特异，充分体现设计师的创意和制作功底，非常值得我们学习和借鉴，如果大家还没看过瘾，可以到我站的韩国网页模板查看更多经典韩国网页样例。

Google官方的网页设计建议

Google官方对于此问题的阐述原文如下：

Makeasitewithaclearhierarchyandtextlinks.Everypageshouldbereachablefromatleastonestatictextlink.

Offerasitemaptoyouruserswithlinksthatpointtotheimportantpartsofyoursite.Ifthesitemapislargerthan100orsolinks,youmaywanttobreakthesitemapintoseparatepages.

Createauseful,information-richsiteandwritepagesthatclearlyandaccuratelydescribeyourcontent.

Thinkaboutthewordsuserswouldtypetofindyourpages,andmakesurethatyoursiteactuallyincludesthosewordswithinit.

Trytousetextinsteadofimagestodisplayimportantnames,content,orlinks.TheGooglecrawlerdoesn'trecognizetextcontainedinimages.

MakesurethatyourTITLEandALTtagsaredescriptiveandaccurate.

CheckforbrokenlinksandcorrectHTML.

Ifyoudecidetousedynamicpages（i.e.,theURLcontainsa'?

'character）,beawarethatnoteverysearchenginespidercrawlsdynamicpagesaswellasstaticpages.Ithelpstokeeptheparametersshortandthenumberofthemsmall.

Keepthelinksonagivenpagetoareasonablenumber（fewerthan100）.

翻译过来就是：

使网站有清晰的结构和文本链接，每一个页面至少要有一个静态文本链接入口。

为用户提供一个站点地图：

转向网站的重要部分。

如果站点地图页面超过100个链接，则需要将页面分成多个页面。

创建有用的，信息量丰富的站点，清晰并正确的描述你的信息。

想像用户可能用来找到你的关键词，并保证这些关键词在网站中出现。

尽可能使用文本，而不是图片显示重要的名称，内容和链接。

GOOGLE的机器人不能识别图片中的文字。

保证页面的TITLE和ALT标记正确的精确描述

检查死链接并修正这些HTML错误。

如果你打算使用动态页面，链接中包含"?

"，必须了解：

并非所有的搜索引擎的机器人能象对待静态页面一样对待动态页面，保持动态页面的参数尽可能的少会很有帮助。

保持一个页面中的链接数少于100个。