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

1/15网页风格设计及色彩搭配技巧一、网站设计风格一个人拥有自己独特的风格，是一般人所没有的，就会让人注意到那个人的特别，若那个人的风格是正面的，甚至就会引起别人的羡慕与注意，或是赞赏。就如同一个网站，拥有别的网站所没有的风格，就会让浏览者愿意多停留些时间，细细品尝该站的内容，甚至该站会得到多人的鼓励与注目，粗略的说，网站风格可以从以下几个方向来探讨，而每一项都是有关联性的：1.色系：网页的底色、文字字型、图片的色系、颜色等等。2.排版：表格、框架的应用、文字缩排、段落等等。3.窗口：窗口效果，例如：全屏幕窗口、特效窗口等。4.程序：网页互动程序，例如：ASP.PHP.XML.CGI等等。5.特效：让网页看起来生动活泼的各种应用，如：Flash.Javascript.Javaapplets.DHTML等等。6.架构：目录规划、层次浅显易懂、选单应用等等。7.内容：网站主题、整体实用性、文件关联性、内容切合度、是否有不必要的档案等等。8.走向：对于网站的未来规划、网站整体内容走向等。以上这些项目都与网页风格有密切的关系，网页的风格不是某一项相同，网站就是有整体感，而是要各项目的配合应用，才能达到完美的网站风格设计。接下来的段落，将会为每个项目做简单的介绍。（一）色系2/15网站的色系是浏览者整体的视觉观感，若一个网站色系能有一致性，不仅会使网站看起来美观，更能让浏览者对内容不易混淆，增加了浏览的简洁与方便。而网站的色系更能衬托出网站的主题，若色系能与主题合理搭配，将会增加浏览者的易读性。网站的色系包含了网页的底色、文字字型、图片的色系、颜色等等，这不单只是将颜色搭配得当就算完美，还要配合每个内容，及网站主题。对于网站的色系，应该要在网站开始制作前，做好规划及设计，才不会到着手制作网站时，难以搭配，甚至造成混乱的设计。网页的底色是整个网站风格的重要指针。举例来说，以黑色作为背景颜色的网页，因黑色本对人的视觉上会造成黯淡的感觉，若是拿来用作活泼的儿童网站，就是不适合了。因为小孩子是天真无邪的、活泼的、有朝气的，与黑色的沉稳、黯淡，很难联想在一起。再举个例子，若是写一个有关于环保的网站，若用暗红色作为网页底色，决计不会有人联想到网页的内容是与环保有关。当然，每个人的审美观不同，可能也会对颜色的代表性看法不同，但既然网站不是只写给自己看的，就应该要注意到大部分人可能会有的观点，然后以众人居多的观点出发，来设计网页。文字字型上的设计，最好的网站是以所有浏览者都能看到的字型为主。常会看到有需多网站要求浏览者须自行下载某种字型，才能达到最佳浏览效果，这是种非常奇怪的行为。毕竟浏览者只是来找资料或是来看网站的内容，不可能会因为这种「为达最佳浏览效果」，而自行下载所需要的字型。当所要求的字型若不下载，并不会影响到网站内容上的浏览与不便，那么对浏览者的要求就微乎其微的不可能发生任何作用。这么一来，对于网页设计者来3/15说，无非是非常可惜的，因为当初的设计风格却未能让浏览者一窥全貌，岂不是白费心思的吗？何谓图片的色系？以色彩学简单的区分，可分为冷色系与暖色系，再详细一点的区分，又可分出各种颜色的色系，而色系的区分，就在于主观浏览意识上的差异了。如何将图片的色系与网站整体色系相对应，就是比较困难的地方了。对于网页初学者来说，要绘制一张图并非易事，要绘制一张符合自己网页风格的图，更是困难重重。大部分的网页制作者，并不大可能驾轻就熟的使用影像处理软件或绘图软件，于是乎，网页素材的网站就开始盛行了。当然，不会使用绘图软件并不代表网页就不能设计的很出色，若是能将网络上的素材资源妥善利用，网站也是可以走出自己的风格的。而该怎么选择适合自己网站的图片，就是门很大的学问了。选择图片该以何作为标准呢？举例来说，若网站内容为科学探讨，当然不能以卡通图片来作为插图，试想，当您正在浏览一个有关天文学的网站，却满是皮卡丘的可爱图片，不是很不协调吗？再举个例子，如果一个教学网站，里头却尽是明星图片，看上去根本就不像是教学网站，而是大杂汇的明星相片网。很多人喜欢将自己欣赏的明星照放上自己的网页中，如果仅是个人网站倒也还好，因为个人网站本就无主题居多，也就没有所谓的符不符合主题的顾虑，但若是有主题的网站，岂不糟糕？以图片内容来说，能切合网站主题最好，若不能，也别差异太多。以颜色来说，若一个网页是蓝色的底色，但整个网页的图档却乱七八糟，各种颜色纷纷出笼，更糟的是，蓝色是属于冷色系的颜色，若以蓝色为底的网页，却尽都是大红色、橘色的图片，那将会使整张网页看起来就像垃圾堆，杂乱无章。所以，可以4/15简单的归纳出，网页与图档的颜色，色系一致或是视觉效果一致，将会使网页看起来更为美观且有自己的风格。网页的颜色，并非单一就图文件、文字颜色、或是底色为主，而是以浏览者的角度来观看，整体网页看上去是偏向哪种色系。常常见到许多网站虽然色系搭配的很好，但却是没有自己的风格。以目前流行的柔色系、粉色系网站来说，就是失了自己独到的风格。因为使用粉色系的网站，不外乎都有相同的特点，文字颜色浅，底色也以浅色系为主，这样除了没有自己的风格外，看起来既不大方也难登大雅之堂。以各大搜寻网站来说，根本不会做这样的设计，因为文字颜色淡，加上底色浅，对浏览者来说，阅读上非常吃力，所以这样的设计风格也应尽量避免。一个有自己风格，且阅读起来舒适大方的网页，并不可能一次就写好，而是需要经过不厌其烦的修正、调色，才能达到最佳浏览效果的，所以制作网页也一定要有相当大的耐心。（二）排版网站的排版是让网页浏览者阅读方便，且内容主题明确的重要指针，若网站的排版经过精心规划，将会使浏览者更能迅速的找到所需的资料。就如同一本书，编排得当将会使读者一目了然，且更能了解该书所要阐述的内容。而网站的排版，就如同书册的排版一般重要。网站的排版包含了表格、框架的应用、文字缩排、段落等等，而排版并不是整齐就好，还要有明确的分类，以及主题的适当规划。表格的应用是一般大型网站最常见到的编排方式，表格能使多段文字统合整理，达到清楚易懂的效果。表格不见得是有形的表格，何位有形的表格？一般常见的有形表格，多为有框线，或是有底色。表格可多形式的运用，如图形与文字5/15间的排版，表格可将图形与文字做最恰当的编排，充分结合于网页上。然而表格的底色或底图，应避免与文字起冲突。常见表格中用的底图或底色因颜色过重，而文字不清楚，表格的重点当然仍是在于文字，不是在作为配角的底图或底色。当底图只是衬饰的作用时，就应让其中的文字清楚明了。而表格的整体配色更是重要，框线及底色都应与网页整体配色为主，若是以表格作为同一网页编排，应尽量使各表格间不致差异太大。当有需要特别彰显内容的表格，才有其必要性作不同的配色。框架的应用，对于架设于较慢的网站空间之网页，较适合框架的应用，框架可避免相同网页重复读取，拖累下载速度。但框架因切割整个画面，造成浏览的内页空间大幅度减小，故再使用框架务必要注意到内容主页的易看性。框架编排，最需要注意的是左右滚动条应尽量避免，若一个网页在阅读上，要不断的移动滚动条往右又往左移，将会对浏览者造成很大的不便。另，框架也需要注意到连结的正确性，常看到以框架为主体的网页，竟然按下选单框架页中的连结，不是显示在内容框架页中，而是另开窗口，这真是脱着裤子放屁－多此一举！且框架过多的网页，会造成浏览者不知如何找寻资料的窘境。举个最常见的例子，很多小型的个人网站，常喜欢以多框架来架构网站，数一数甚至框架页达五六个以上，有时按了左侧的选单，以为内容会出现在内容框架页，却竟然是显示在右上角的某个小角落，这不是特有风格，既不美观也不实际，更难以找到资料！框架与表格皆为网页整体编排利器，该如何运用与走出自己风格，就是需要长时间的修饰版面、观摩学习（但绝非模仿抄袭）与经验了。6/15（三）窗口窗口效果的妥善运用，可以使网页有特色，但过度的应用反而会使人厌恶，甚至关闭网页不再造访，若真的因窗口的不当运用，造成浏览者不便而不想再继续浏览，那就是非常可惜的事了。全屏幕窗口，通常不为浏览者所喜爱，尤其是强制性的全屏幕浏览，一般上网者对于不同的浏览方式并非都能欣然接受。对于图片浏览的网站，若图片很大可以采用此种方式，以方便一窥全图，但必须于连结前先注明将会开启全屏幕窗口，较不会引起浏览者的反感。现有许多个人网站，都特别喜爱使用无工具列窗口，有的网站是将整个无工具列窗口放大至全屏幕，有的网站则是过小的超迷你窗口。前一种会使人难以跳开网页浏览做其它动作，造成很大的不方便；后一种更是糟糕，窗口小到几乎无法浏览，字体小、图形小、内容更少，这种窗口让浏览者的第一感觉就是网站没内涵，又小家子气。且这两种网站，几乎都有一个最大的共通点，锁鼠标右键功能。这样的锁定，对于网站本身并无多大助益，除了让浏览者不方便外，其实浏览者根本也无意于抄袭该网站，只会让人觉得网页很没内容又要怕别人抄袭。看到这种网站，大部分的浏览者并不会觉得有风格，若是觉得有风格，也不过是流于通俗的「小气风格」。另外则是有些许初学者的网站，特别喜好滥用窗口特效，举凡网页震动、闪烁等等，这些对于内容及个人风格上也无实质助益，能避免应尽量避免。毕竟有规模、有内涵的网站，根本不会有这样乱七八糟的特效。这样的特效的确也造成了某部分的特殊效果，即是网页混乱的特别效果。且越容易滥用窗口特效的网站，7/15大多都无内容，想利用这些来混淆视听，试图造成浏览者的错觉，误以为内容丰富。但实际上欲达成的效果不但没有达到，反而会使浏览者一眼就看穿该网站制作者是一名网页新手，且该站几乎毫无内容可言。若网站本有丰富的内涵，因此而造成浏览者的错觉，岂不可惜？并非所有的窗口特效都是负面的评价，也是有某些情况时可以斟酌小心使用。若是资料量少，或是公告等小资料量的文件，可以酌量使用小窗口的开启，这种方式反而有助于网页的整体性，及浏览易读性。综合以上所述，一个成功的网站，若要走出自己的风格，并非单就窗口特效来加强，而应先注重内容，并依其网站内容来决定如何采用一些特殊的窗口，达到整个网站的风格一致性。记住，花样越多并不能让网页显得技巧高明，而是在于内容与窗口效果的完美运用。（四）程序在早期的网站中，只有让浏览者「看」的作用，伴随着多种程序语言的发展，目前常听到的网页互动程序有ASP.PHP.CGI.XML等等，上述这些网页程序，都能使网页「动」起来，而网站的功能不再只有「看」，也可以「参与」其中。然而，大多数的网页制作者，本身并不会自行开发撰写程序，故许多已是现成的程序下载网站或是免费资源网站便应运而生。对于不会撰写程序的网站制作者来说，无非是一大福音，但在套用现成程序或是使用免费资源时，也必须要注意整体的网页风格。程序也是网页的一部分，只是它们除了网页外，还有处理资料的程序代码，所以程序的应用上也是必须要谨慎的配合整个网站的风格。举个例子来说，整个网站皆以白色系为主，但留言版却莫名其妙的用了黑色系，这不是挺不搭的画面8/15吗？又，若整个网站是有关男性所喜爱的事物，讨论区却突然出现柔和的唯美女生图片，这简直就是太怪诞离奇了！故在申请免费资源或是利用下载的程序包时，必定要先注意到色系、图档是否能配合整个网站的风格、主题。以下载程序再修改来说，除非自己将原程序的「程序部分」修改百分之七十以上，才能改掉原版权，否则将会违反著作权法。在这里要做个说明，所谓的程序部分即是不包含HTML的部分，并非将版面改了改，程序就是自己的，常见到许多个人网站，将下载来的程序改了改版面，几乎没有动到程序部分，就擅自改了版权，并声明为自己所撰写，还标明「版权所有，盗拷必究」等字样。这种行为，对于稍有网页制作概念及经验的浏览者来说，除了引起严重反感外，更有可能会引起不必要的纠纷。且这样对于网站的独到风格性来说，根本没有任何助益，实是得不偿失！当然，程序也不是乱用、滥用就是代表网站制作的好，大量的重复使用不必要的程序功能，一般浏览者不会用到，只会变成无用的「网站垃圾掩埋场」。举个例子来说，祈愿版的滥用就是造成资源的浪费，一个个人网站拥有一个祈愿版已足够，甚至其实那根本是没有需要的，却还有各种不