網(wǎng)站色彩搭配技巧
2011-09-03 文章來(lái)源: 建站學(xué)
以下內(nèi)容來(lái)自哪里我也記不清了，只記得收藏多年，現(xiàn)拿出來(lái)給大家分享，希望能對(duì)新手有幫助
一個(gè)人擁有自己獨(dú)特的風(fēng)格，是一般人所沒(méi)有的，就會(huì)讓人注意到那個(gè)人的特別，若那個(gè)人的風(fēng)格是正面的，甚至就會(huì)引起別人的羨慕與注意，或是贊賞。就如同一個(gè)網(wǎng)站，擁有別的網(wǎng)站所沒(méi)有的風(fēng)格，就會(huì)讓瀏覽者愿意多停留些時(shí)間，細(xì)細(xì)品嘗該站的內(nèi)容，甚至該站會(huì)得到多人的鼓勵(lì)與注目，粗略的說(shuō)，網(wǎng)站風(fēng)格可以從以下幾個(gè)方向來(lái)探討，而每一項(xiàng)都是有關(guān)聯(lián)性的：
1. 色系：網(wǎng)頁(yè)的底色、文字字型、圖片的色系、顏色等等。
2. 排版：表格、框架的應(yīng)用、文字縮排、段落等等。
3. 窗口：窗口效果，例如：全屏幕窗口、特效窗口等。
4. 程序：網(wǎng)頁(yè)互動(dòng)程序，例如：ASP . PHP . XML . CGI等等。
5. 特效：讓網(wǎng)頁(yè)看起來(lái)生動(dòng)活潑的各種應(yīng)用，如：Flash . Java script . Java applets . DHTML等等。
6. 架構(gòu)：目錄規(guī)劃、層次淺顯易懂、選單應(yīng)用等等。
7. 內(nèi)容：網(wǎng)站主題、整體實(shí)用性、文件關(guān)聯(lián)性、內(nèi)容切合度、是否有不必要的檔案等等。
8. 走向：對(duì)于網(wǎng)站的未來(lái)規(guī)劃、網(wǎng)站整體內(nèi)容走向等。
以上這些項(xiàng)目都與網(wǎng)頁(yè)風(fēng)格有密切的關(guān)系，網(wǎng)頁(yè)的風(fēng)格不是某一項(xiàng)相同，網(wǎng)站就是有整體感，而是要各項(xiàng)目的配合應(yīng)用，才能達(dá)到完美的網(wǎng)站風(fēng)格設(shè)計(jì)。接下來(lái)的段落，將會(huì)為每個(gè)項(xiàng)目做簡(jiǎn)單的介紹。
一、色系
網(wǎng)站的色系是瀏覽者整體的視覺(jué)觀感，若一個(gè)網(wǎng)站色系能有一致性，不僅會(huì)使網(wǎng)站看起來(lái)美觀，更能讓瀏覽者對(duì)內(nèi)容不易混淆，增加了瀏覽的簡(jiǎn)潔與方便。而網(wǎng)站的色系更能襯托出網(wǎng)站的主題，若色系能與主題合理搭配，將會(huì)增加瀏覽者的易讀性。
網(wǎng)站的色系包含了網(wǎng)頁(yè)的底色、文字字型、圖片的色系、顏色等等，這不單只是將顏色搭配得當(dāng)就算完美，還要配合每個(gè)內(nèi)容，及網(wǎng)站主題。對(duì)于網(wǎng)站的色系，應(yīng)該要在網(wǎng)站開(kāi)始制作前，做好規(guī)劃及設(shè)計(jì)，才不會(huì)到著手制作網(wǎng)站時(shí)，難以搭配，甚至造成混亂的設(shè)計(jì)。
網(wǎng)頁(yè)的底色是整個(gè)網(wǎng)站風(fēng)格的重要指針。舉例來(lái)說(shuō)，以黑色作為背景顏色的網(wǎng)頁(yè)，因黑色本對(duì)人的視覺(jué)上會(huì)造成黯淡的感覺(jué)，若是拿來(lái)用作活潑的兒童網(wǎng)站，就是不適合了。因?yàn)樾『⒆邮翘煺鏌o(wú)邪的、活潑的、有朝氣的，與黑色的沉穩(wěn)、黯淡，很難聯(lián)想在一起。
再舉個(gè)例子，若是寫一個(gè)有關(guān)于環(huán)保的網(wǎng)站，若用暗紅色作為網(wǎng)頁(yè)底色，決計(jì)不會(huì)有人聯(lián)想到網(wǎng)頁(yè)的內(nèi)容是與環(huán)保有關(guān)。當(dāng)然，每個(gè)人的審美觀不同，可能也會(huì)對(duì)顏色的代表性看法不同，但既然網(wǎng)站不是只寫給自己看的，就應(yīng)該要注意到大部分人可能會(huì)有的觀點(diǎn)，然后以眾人居多的觀點(diǎn)出發(fā)，來(lái)設(shè)計(jì)網(wǎng)頁(yè)。
文字字型上的設(shè)計(jì)，最好的網(wǎng)站是以所有瀏覽者都能看到的字型為主。常會(huì)看到有需多網(wǎng)站要求瀏覽者須自行下載某種字型，才能達(dá)到最佳瀏覽效果，這是種非常奇怪的行為。畢竟瀏覽者只是來(lái)找資料或是來(lái)看網(wǎng)站的內(nèi)容，不可能會(huì)因?yàn)檫@種「為達(dá)最佳瀏覽效果」，而自行下載所需要的字型。
當(dāng)所要求的字型若不下載，并不會(huì)影響到網(wǎng)站內(nèi)容上的瀏覽與不便，那么對(duì)瀏覽者的要求就微乎其微的不可能發(fā)生任何作用。這么一來(lái)，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)者來(lái)說(shuō)，無(wú)非是非常可惜的，因?yàn)楫?dāng)初的設(shè)計(jì)風(fēng)格卻未能讓瀏覽者一窺全貌，豈不是白費(fèi)心思的嗎？
何謂圖片的色系？以色彩學(xué)簡(jiǎn)單的區(qū)分，可分為冷色系與暖色系，再詳細(xì)一點(diǎn)的區(qū)分，又可分出各種顏色的色系，而色系的區(qū)分，就在于主觀瀏覽意識(shí)上的差異了。如何將圖片的色系與網(wǎng)站整體色系相對(duì)應(yīng)，就是比較困難的地方了。對(duì)于網(wǎng)頁(yè)初學(xué)者來(lái)說(shuō)，要繪制一張圖并非易事，要繪制一張符合自己網(wǎng)頁(yè)風(fēng)格的圖，更是困難重重。大部分的網(wǎng)頁(yè)制作者，并不大可能駕輕就熟的使用影像處理軟件或繪圖軟件，于是乎，網(wǎng)頁(yè)素材的網(wǎng)站就開(kāi)始盛行了。當(dāng)然，不會(huì)使用繪圖軟件并不代表網(wǎng)頁(yè)就不能設(shè)計(jì)的很出色，若是能將網(wǎng)絡(luò)上的素材資源妥善利用，網(wǎng)站也是可以走出自己的風(fēng)格的。而該怎么選擇適合自己網(wǎng)站的圖片，就是門很大的學(xué)問(wèn)了。
選擇圖片該以何作為標(biāo)準(zhǔn)呢？舉例來(lái)說(shuō)，若網(wǎng)站內(nèi)容為科學(xué)探討，當(dāng)然不能以卡通圖片來(lái)作為插圖，試想，當(dāng)您正在瀏覽一個(gè)有關(guān)天文學(xué)的網(wǎng)站，卻滿是皮卡丘的可愛(ài)圖片，不是很不協(xié)調(diào)嗎？再舉個(gè)例子，如果一個(gè)教學(xué)網(wǎng)站，里頭卻盡是明星圖片，看上去根本就不像是教學(xué)網(wǎng)站，而是大雜匯的明星相片網(wǎng)。
很多人喜歡將自己欣賞的明星照放上自己的網(wǎng)頁(yè)中，如果僅是個(gè)人網(wǎng)站倒也還好，因?yàn)閭€(gè)人網(wǎng)站本就無(wú)主題居多，也就沒(méi)有所謂的符不符合主題的顧慮，但若是有主題的網(wǎng)站，豈不糟糕？
以圖片內(nèi)容來(lái)說(shuō)，能切合網(wǎng)站主題最好，若不能，也別差異太多。以顏色來(lái)說(shuō)，若一個(gè)網(wǎng)頁(yè)是藍(lán)色的底色，但整個(gè)網(wǎng)頁(yè)的圖檔卻亂七八糟，各種顏色紛紛出籠，更糟的是，藍(lán)色是屬于冷色系的顏色，若以藍(lán)色為底的網(wǎng)頁(yè)，卻盡都是大紅色、橘色的圖片，那將會(huì)使整張網(wǎng)頁(yè)看起來(lái)就像**堆，雜亂無(wú)章。所以，可以簡(jiǎn)單的歸納出，網(wǎng)頁(yè)與圖檔的顏色，色系一致或是視覺(jué)效果一致，將會(huì)使網(wǎng)頁(yè)看起來(lái)更為美觀且有自己的風(fēng)格。
網(wǎng)頁(yè)的顏色，并非單一就圖文件、文字顏色、或是底色為主，而是以瀏覽者的角度來(lái)觀看，整體網(wǎng)頁(yè)看上去是偏向哪種色系。常常見(jiàn)到許多網(wǎng)站雖然色系搭配的很好，但卻是沒(méi)有自己的風(fēng)格。以目前流行的柔色系、粉色系網(wǎng)站來(lái)說(shuō)，就是失了自己獨(dú)到的風(fēng)格。
因?yàn)槭褂梅凵档木W(wǎng)站，不外乎都有相同的特點(diǎn)，文字顏色淺，底色也以淺色系為主，這樣除了沒(méi)有自己的風(fēng)格外，看起來(lái)既不大方也難登大雅之堂。以各大搜尋網(wǎng)站來(lái)說(shuō)，根本不會(huì)做這樣的設(shè)計(jì)，因?yàn)槲淖诸伾?，加上底色淺，對(duì)瀏覽者來(lái)說(shuō)，閱讀上非常吃力，所以這樣的設(shè)計(jì)風(fēng)格也應(yīng)盡量避免。
一個(gè)有自己風(fēng)格，且閱讀起來(lái)舒適大方的網(wǎng)頁(yè)，并不可能一次就寫好，而是需要經(jīng)過(guò)不厭其煩的修正、調(diào)色，才能達(dá)到最佳瀏覽效果的，所以制作網(wǎng)頁(yè)也一定要有相當(dāng)大的耐心。
二、排版
網(wǎng)站的排版是讓網(wǎng)頁(yè)瀏覽者閱讀方便，且內(nèi)容主題明確的重要指針，若網(wǎng)站的排版經(jīng)過(guò)精心規(guī)劃，將會(huì)使瀏覽者更能迅速的找到所需的資料。就如同一本書，編排得當(dāng)將會(huì)使讀者一目了然，且更能了解該書所要闡述的內(nèi)容。而網(wǎng)站的排版，就如同書冊(cè)的排版一般重要。網(wǎng)站的排版包含了表格、框架的應(yīng)用、文字縮排、段落等等，而排版并不是整齊就好，還要有明確的分類，以及主題的適當(dāng)規(guī)劃。
表格的應(yīng)用是一般大型網(wǎng)站最常見(jiàn)到的編排方式，表格能使多段文字統(tǒng)合整理，達(dá)到清楚易懂的效果。表格不見(jiàn)得是有形的表格，何位有形的表格？一般常見(jiàn)的有形表格，多為有框線，或是有底色。表格可多形式的運(yùn)用，如圖形與文字間的排版，表格可將圖形與文字做最恰當(dāng)?shù)木幣?，充分結(jié)合于網(wǎng)頁(yè)上。
然而表格的底色或底圖，應(yīng)避免與文字起沖突。常見(jiàn)表格中用的底圖或底色因顏色過(guò)重，而文字不清楚，表格的重點(diǎn)當(dāng)然仍是在于文字，不是在作為配角的底圖或底色。當(dāng)?shù)讏D只是襯飾的作用時(shí)，就應(yīng)讓其中的文字清楚明了。而表格的整體配色更是重要，框線及底色都應(yīng)與網(wǎng)頁(yè)整體配色為主，若是以表格作為同一網(wǎng)頁(yè)編排，應(yīng)盡量使各表格間不致差異太大。當(dāng)有需要特別彰顯內(nèi)容的表格，才有其必要性作不同的配色。
框架的應(yīng)用，對(duì)于架設(shè)于較慢的網(wǎng)站空間之網(wǎng)頁(yè)，較適合框架的應(yīng)用，框架可避免相同網(wǎng)頁(yè)重復(fù)讀取，拖累下載速度。但框架因切割整個(gè)畫面，造成瀏覽的內(nèi)頁(yè)空間大幅度減小，故再使用框架務(wù)必要注意到內(nèi)容主頁(yè)的易看性。框架編排，最需要注意的是左右滾動(dòng)條應(yīng)盡量避免，若一個(gè)網(wǎng)頁(yè)在閱讀上，要不斷的移動(dòng)滾動(dòng)條往右又往左移，將會(huì)對(duì)瀏覽者造成很大的不便。
另，框架也需要注意到連結(jié)的正確性，?？吹揭钥蚣転橹黧w的網(wǎng)頁(yè)，竟然按下選單框架頁(yè)中的連結(jié)，不是顯示在內(nèi)容框架頁(yè)中，而是另開(kāi)窗口，這真是脫著褲子放屁－多此一舉！且框架過(guò)多的網(wǎng)頁(yè)，會(huì)造成瀏覽者不知如何找尋資料的窘境。
舉個(gè)最常見(jiàn)的例子，很多小型的個(gè)人網(wǎng)站，常喜歡以多框架來(lái)架構(gòu)網(wǎng)站，數(shù)一數(shù)甚至框架頁(yè)達(dá)五六個(gè)以上，有時(shí)按了左側(cè)的選單，以為內(nèi)容會(huì)出現(xiàn)在內(nèi)容框架頁(yè)，卻竟然是顯示在右上角的某個(gè)小角落，這不是特有風(fēng)格，既不美觀也不實(shí)際，更難以找到資料！
框架與表格皆為網(wǎng)頁(yè)整體編排利器，該如何運(yùn)用與走出自己風(fēng)格，就是需要長(zhǎng)時(shí)間的修飾版面、觀摩學(xué)習(xí)（但絕非模仿抄襲）與經(jīng)驗(yàn)了。
