如何搞好網(wǎng)頁(yè)設(shè)計(jì)的布局

【摘 要】 網(wǎng)頁(yè)設(shè)計(jì)實(shí)際上就是平面設(shè)計(jì)，不過目的性、時(shí)效性更強(qiáng)。每一次網(wǎng)頁(yè)設(shè)計(jì)都可以看成平面設(shè)計(jì)，不同的是設(shè)計(jì)網(wǎng)頁(yè)不僅是把相關(guān)內(nèi)容放到網(wǎng)頁(yè)中就行了，它還要求網(wǎng)頁(yè)設(shè)計(jì)者能夠把這些內(nèi)容合理安排，給瀏覽者以賞心悅目的感覺，這樣才能增強(qiáng)網(wǎng)站的吸引力。網(wǎng)頁(yè)設(shè)計(jì)者能夠隨意控制頁(yè)面上所有的元素，但假如不知道什么是約定俗成的標(biāo)準(zhǔn)或者說(shuō)大多數(shù)瀏覽者的瀏覽習(xí)慣，那么就不可能在此基礎(chǔ)上加上自己的東西，從而被廣大瀏覽者所接受和欣賞。

【關(guān)鍵詞】 網(wǎng)頁(yè)設(shè)計(jì) 布局 色彩

Abstract ： Web page design is actually a graphic design， but is much stronger in the purpose and timeliness. The paper mainly discusses how to carry on the layout of the web design.

網(wǎng)頁(yè)設(shè)計(jì)就是依據(jù)網(wǎng)站宗旨，把造型、結(jié)構(gòu)、信息、色彩等視覺元素有機(jī)地統(tǒng)一在網(wǎng)頁(yè)中，并對(duì)網(wǎng)頁(yè)風(fēng)格等進(jìn)行整體設(shè)計(jì)。其目的主要是利用造型的原則和規(guī)律，合理的分配和排列文字、圖形等視覺元素，以便準(zhǔn)確、系統(tǒng)、有效地傳達(dá)信息。

1.網(wǎng)頁(yè)設(shè)計(jì)的布局

網(wǎng)頁(yè)設(shè)計(jì)實(shí)際上就是平面設(shè)計(jì)，不過目的性、時(shí)效性更強(qiáng)。每一次網(wǎng)頁(yè)設(shè)計(jì)都可以看成平面設(shè)計(jì)，不同的是設(shè)計(jì)網(wǎng)頁(yè)不僅是把相關(guān)內(nèi)容放到網(wǎng)頁(yè)中就行了，它還要求網(wǎng)頁(yè)設(shè)計(jì)者能夠把這些內(nèi)容合理安排，給瀏覽者以賞心悅目的感覺，這樣才能增強(qiáng)網(wǎng)站的吸引力。網(wǎng)頁(yè)設(shè)計(jì)者能夠隨意控制頁(yè)面上所有的元素，但假如不知道什么是約定俗成的標(biāo)準(zhǔn)或者說(shuō)大多數(shù)瀏覽者的瀏覽習(xí)慣，那么就不可能在此基礎(chǔ)上加上自己的東西，從而被廣大瀏覽者所接受和欣賞。這些概念，也就是人們常說(shuō)的章法。要做好頁(yè)面設(shè)計(jì)，就必須先了解一些網(wǎng)頁(yè)布局相關(guān)的基本概念。

1.1頁(yè)面尺寸顯示器的大小及分辨率的高低決定顯示頁(yè)面的尺寸，網(wǎng)頁(yè)的最大局限性在于頁(yè)面顯示無(wú)法突破顯示器的范圍。由于瀏覽器本身也占用了網(wǎng)頁(yè)顯示的一部分，所以能顯示網(wǎng)頁(yè)的頁(yè)面范圍已經(jīng)相當(dāng)緊張。一般情況下，顯示器在640*480像素的分辨率下，頁(yè)面的顯示尺寸為620*311像素：在800*600像素的分辨率下，顯示器的分辨率越高，能顯示的頁(yè)面尺寸就越大。

1.2整體造型造型就是創(chuàng)造出來(lái)的物體形象，這里指頁(yè)面的整體形象。盡管顯示器和瀏覽器都是矩形，但對(duì)于頁(yè)面的造型，可以充分運(yùn)用各種形狀以及它們的組合：矩形，圓形，三角形，菱形等等，但圖形與文本的結(jié)合應(yīng)該層疊有序。

1.3頁(yè)頭頁(yè)頭又稱之為頁(yè)眉，頁(yè)眉的作用是定義頁(yè)面的主題。比如一個(gè)站點(diǎn)的名字人多都顯示在頁(yè)眉里。這樣，瀏覽者一看就能知道該站點(diǎn)的主題是什么。

1.4文本文字是網(wǎng)頁(yè)的主體，是傳達(dá)信息的最重要的方式。一方面是因?yàn)闉g覽網(wǎng)頁(yè)上的文字和看書很相似，比較符合一般人的習(xí)慣，另一方面也因?yàn)槲淖炙枰拇鎯?chǔ)空間非常小。文本的擺放位置決定著整個(gè)頁(yè)面布局的可視性。在過去由于網(wǎng)頁(yè)制作技術(shù)的局限，文本放置的位置靈活性非常小，隨著Dhtml的興起，文本已經(jīng)可以放置在頁(yè)面的任何位置。

1.5頁(yè)腳頁(yè)腳是和頁(yè)眉相呼應(yīng)。頁(yè)眉是放置站點(diǎn)主題的地方，而頁(yè)腳是放置作者或公司等各種制作信息的地方。

1.6圖片圖片在網(wǎng)頁(yè)中占有非常重要的地位。因?yàn)椴捎脠D片可以減少純文字給人的枯燥感，巧妙的圖像組合可以帶給瀏覽者美的享受。

1.7多媒體多媒體一般指音頻、視頻、動(dòng)畫、虛擬現(xiàn)實(shí)等形式。將多媒體引入到網(wǎng)頁(yè)，可以在很大程度上吸引瀏覽者的注意。利用多媒體文件可以制作出更有創(chuàng)造性、藝術(shù)性的作品，它的引入使得網(wǎng)站成了一個(gè)有聲有色，動(dòng)靜相宜的世界。

1.8導(dǎo)航欄的位置導(dǎo)航欄能讓我們?cè)跒g覽時(shí)容易地到達(dá)不同的頁(yè)面，是網(wǎng)頁(yè)元素非常重要的部分，所以導(dǎo)航欄一定要清晰、醒目。一般來(lái)講，如果內(nèi)容非常多，就要考慮用“國(guó)字型”或拐角型；如果內(nèi)容不算太多而一些說(shuō)明性的東西比較多，則可以考慮標(biāo)題正文型；那幾種框架結(jié)構(gòu)的一個(gè)共同特點(diǎn)就是瀏覽方便，速度快，但結(jié)構(gòu)變化不靈活。

2.網(wǎng)頁(yè)設(shè)計(jì)的色彩搭配方法

在網(wǎng)頁(yè)設(shè)計(jì)中，色彩成為一個(gè)非常重要的研究對(duì)象，約翰內(nèi)斯？伊頓是最早引入現(xiàn)代色彩體系的教育家之一，具有非常敏感的形式認(rèn)識(shí)，他堅(jiān)信色彩是理性的，只有了解色彩的科學(xué)構(gòu)成，才能進(jìn)行有色彩的自由表現(xiàn)。

2.1明確網(wǎng)站的主題、服務(wù)對(duì)象及用色彩要表達(dá)的目的要確定一個(gè)網(wǎng)頁(yè)用什么色彩合適，即什么色彩適合什么網(wǎng)站。你必須要先弄明白該網(wǎng)站的主題和它的服務(wù)對(duì)象，以及你通過色彩希望達(dá)到的目的。

2.2確定網(wǎng)頁(yè)的主色調(diào)根據(jù)網(wǎng)站的主題、服務(wù)對(duì)象及用色目的，給網(wǎng)站的網(wǎng)頁(yè)選一個(gè)主色調(diào)，以形成一定風(fēng)格。整個(gè)網(wǎng)頁(yè)最好只有一個(gè)主色調(diào)。主調(diào)色彩一般可用公司的標(biāo)準(zhǔn)色，這符合公司的形象戰(zhàn)略，可以提升公司形象。

2.3根據(jù)主調(diào)色選擇輔助色彩主調(diào)色確定后，還可選一至兩種輔助色配合使用，整個(gè)網(wǎng)頁(yè)的色彩最好控制在三色之內(nèi)。如果整個(gè)網(wǎng)頁(yè)采用單色調(diào)，即只用一種色相，其輔助色只是在明度和純度上作調(diào)整，間用中性色。采用單色調(diào)，易形成一種風(fēng)格，在網(wǎng)頁(yè)的局部要采用少量小面積的對(duì)比色以達(dá)到豐富頁(yè)面的效果。

2.4確定背景和文本的色彩背景和文本的色彩對(duì)比要盡量大（一般明度對(duì)比為3∶1到5∶1），以便突出主要文字內(nèi)容，但不要過于亮麗，以免造成過強(qiáng)刺激的視覺效果。正文和標(biāo)題的背景色可以不同，一般正文的背景色用淡雅色較佳，標(biāo)題的背景色可用較鮮艷的。背景色如果以白色等淡色為主，其文本色要用低明度有彩色，這種搭配較利于閱讀。

2.5最后確定超鏈接、超鏈接翻轉(zhuǎn)效果當(dāng)前超鏈接及已訪問的超鏈接的色彩超鏈接的文本色彩，與其它文本的色彩要有差別，以利于瀏覽者進(jìn)一步鏈接；如果利用翻轉(zhuǎn)效果，其翻轉(zhuǎn)效果的色彩應(yīng)與超鏈接色彩不同，這樣可以突出已選到的超鏈接，但翻轉(zhuǎn)效果的色彩可以與當(dāng)前超鏈接的色彩相同；已訪問的超鏈接的色彩可以與超鏈接的色彩相同，也可以不同。

參考文獻(xiàn)：

[1]胡亞卓.淺談網(wǎng)頁(yè)設(shè)計(jì)[J].科教文匯，2008，（2）.

[2]劉佳，王倩.網(wǎng)頁(yè)設(shè)計(jì)中的色彩表現(xiàn)[J].美術(shù)大觀，2007，（11）.

（作者單位：哈爾濱工業(yè)大學(xué)建筑學(xué)院）