版面設計也可(kě)以理(lǐ)解為(wèi)布局設計，就是我們在浏覽器上說看的(de)一(yī)個完整的(de)頁面。設計師們如(rú)何将所有要體現的(de)內(nèi)容有機的(de)整合和(hé)分布，達到某種視(shì)覺效果，這就叫做(zuò)版面布局。我們将如(rú)何做(zuò)好網站的(de)版面設計呢(ne)？ 本文将介紹網頁設計的(de)步驟和(hé)布局技巧。

網頁版面設計步驟

首先我認為(wèi)是“過程注定了結果”，重視(shì)你所做(zuò)的(de)每一(yī)步并把它盡量的(de)做(zuò)到最好，相信結果也不會偏離(lí)軌道(dào)。下面先讓我們來了解一(yī)些版面設計的(de)步驟：

1、構思（結構的(de)搭建）

當然在構思之前我們總需要了解很多，如(rú)：客戶的(de)需求、網站的(de)定位、受衆群等很多方面的(de)事情，也就是說需要了解策劃方案。如(rú)果我們連這些問題都還不清楚的(de)話，請先不要去(qù)想着設計，因為(wèi)在不了解客戶需求的(de)情況下，盲目的(de)去(qù)把頁面設計達到某種視(shì)覺效果是很難的(de)、也會很容易被客戶推翻的(de)，即使客戶不懂，過關了，但是如(rú)果沒有真正為(wèi)客戶帶來價值，它還是失敗的(de)。

當我們真正了解客戶需求後，你可(kě)以盡可(kě)能的(de)發揮你的(de)想象力，将你想到的(de)"構思"畫上去(qù)（用筆(bǐ)和(hé)紙或者軟件都可(kě)以，根據自(zì)己的(de)習慣而定），這是屬于一(yī)個構思的(de)過程，不講究細膩工整，也不必考慮到一(yī)些細節的(de)部分，隻要用幾條粗陋的(de)線條勾畫出創意的(de)輪廓即可(kě)。盡可(kě)能的(de)多構思一(yī)些，以便選擇一(yī)個最适合的(de)進行搭建。

2、粗略布局

這個階段是個試用期，我們隻要把重要的(de)元素和(hé)網頁結構相結合，看看框架是否合理(lǐ)、适合客戶的(de)需求，如(rú)果都不适合你該知道(dào)怎麽做(zuò)了！

3、完善布局

當我們已經有一(yī)個很好的(de)框架時，我們需要根據客戶的(de)要求将其所需的(de)內(nèi)容有條理(lǐ)的(de)融入于整個的(de)框架中，這裏就進入了網頁布局的(de)階段了，我們需要通過我對圖片的(de)處理(lǐ)、空間的(de)合理(lǐ)利用進行編排了，這一(yī)點我在“行業網站設計心得”裏就已經提到過了，在此就不一(yī)一(yī)羅列了。下面是廣告大師樊志育在《廣告制作》中所提到的(de)，希望對大家在布局的(de)理(lǐ)論上面有所幫助。

1、正常平衡---亦稱"勻稱"。多指左右、上下對照形式，主要強調秩序，能達到安定誠實、信賴的(de)效果。.

2、異常平衡---即非對照形式，但也要平衡和(hé)韻律，當然都是不均整的(de)，此種布局能達到強調性、不安性、高(gāo)注目性的(de)效果。

3、對比---所謂對比，不僅利用色彩、色調等技巧來做(zuò)表現，在內(nèi)容上也可(kě)涉及古與今、新與舊(jiù)、貧與富等對比。

4、凝視(shì)---所謂凝視(shì)是利用頁面中人物視(shì)線，使浏覽者仿照跟随的(de)心理(lǐ)，以達到注視(shì)頁面的(de)效果，一(yī)般多用明星凝視(shì)狀。

5、空白---空白有兩種作用，一(yī)方面對其他網站表示突出卓越，另一(yī)方面也表示網頁品位的(de)優越感，這種表現方法對體顯網頁的(de)格調十分有效。

6、盡量用圖片解說---此法對不能用語言說服、或用語言無法表達的(de)情感，特别有效。圖片解說的(de)內(nèi)容，可(kě)以傳達給浏覽者的(de)更多的(de)心理(lǐ)因素。

4、深入優化

這個階段主要是針對些細節的(de)更改和(hé)優化了，比如(rú)說一(yī)些顔色飽和(hé)度、一(yī)些字體、間距的(de)調整呀。最後客戶反饋過來的(de)東西根據現有的(de)界面進行适當的(de)調整，直至客戶滿意。

在網上有許多人問我什麽樣的(de)版面布局是最好的(de)，其實我不覺的(de)某個版面是最好的(de)，我們也不能說的(de)這麽絕對，我認為(wèi)在現階段現有的(de)資源下最适合客戶需求的(de)才是“最好”的(de)。

網頁布局技巧

最開始，網頁呈現在你面前的(de)時侯，它就好像一(yī)張白紙，需要你任意揮灑你的(de)設計才思。在開始的(de)時侯，你需要明白，雖然你能控制一(yī)切你所能控制的(de)東西，但假如(rú)你知道(dào)什麽是一(yī)種約定俗成的(de)标準或者說大多數訪問者的(de)浏覽習慣，那麽你就可(kě)以在此基礎上加上自(zì)己的(de)東西。你當然也可(kě)以創造出自(zì)己的(de)設計方案，但如(rú)果你是初學(xué)者，那麽最好明白網頁布局的(de)基本概念。

1.頁面尺寸：頁面尺寸和(hé)顯示器大小及分辨率有關系，網頁的(de)局限性就在于你無法突破顯示器的(de)範圍，而且因為(wèi)浏覽器也将占去(qù)不少空間，留下給你的(de)頁面範圍就變得越來越小。一(yī)般，分辨率在1024×768的(de)情況下，頁面的(de)顯示尺寸為(wèi)1007×600；分辨率在800×600的(de)情況下，頁面的(de)顯示尺寸為(wèi)780×428個象素；分辨率在640×480的(de)情況下，頁面的(de)顯示尺寸則為(wèi)620×311個象素。從以上數據可(kě)以看出，分辨率越高(gāo)頁面尺寸越

大。

浏覽器的(de)工具欄也是影響頁面尺寸的(de)原因，目前的(de)浏覽器的(de)工具欄都可(kě)以取消或者增加，那麽當你顯示全部的(de)工具欄和(hé)關閉全部工具欄時，頁面

的(de)尺寸是不一(yī)樣的(de)。

在網頁設計過程中，向下拖動頁面是惟一(yī)給網頁增加更多內(nèi)容(尺寸)的(de)方法。但我想提醒大家，除非你能肯定站點的(de)內(nèi)容能吸引大家拖動，

否則不要讓訪問者拖動頁面超過三屏。如(rú)果需要在同一(yī)頁面顯示超過三屏的(de)內(nèi)容，那麽你最好能在上面做(zuò)上頁面內(nèi)部連接，以方便訪問者浏覽。

2.整體造型：什麽是造型，造型就是創造出來的(de)物體形象。頁面的(de)整體形象，應該是一(yī)個整體，圖形與文本的(de)接合應該層疊有序，有機統一(yī)

。雖然，顯示器和(hé)浏覽器都是矩形，但對于頁面的(de)造型，你可(kě)以充分運用自(zì)然界中的(de)其它形狀以及它們的(de)組合：矩形，圓形，三角形，菱形等。

對于不同的(de)形狀，它們所代表的(de)意義是不同的(de)。比如(rú)矩形代表着正式，規則，你注意到很多ICP和(hé)政府網頁都是以矩形為(wèi)整體造型；圓形代表着柔和(hé)，團結，溫暖，安全等，許多時尚站點喜歡以圓形為(wèi)頁面整體造型；三角形代表着力量，權威，牢固，侵略等，許多大型的(de)商業站點為(wèi)顯示它的(de)權威性常以三角形為(wèi)頁面整體造型；菱形則代表着平衡，協調，公平，一(yī)些交友站點常運用菱形作為(wèi)頁面整體造型。雖然不同形狀帶表着不同意義，但目前的(de)網頁制作多數是結合多個形狀加以設計，其中又以某種形狀為(wèi)主。

3.頁頭：頁頭又可(kě)稱之為(wèi)頁眉，頁眉的(de)作用是定義頁面的(de)主題。比如(rú)一(yī)個站點的(de)名字多數都顯示在頁眉裏。這樣，訪問者能很快知道(dào)這個站點是什麽內(nèi)容。頁頭是整個頁面設計的(de)關鍵，它将涉及到下面的(de)更多設計和(hé)整個頁面的(de)協調性。頁頭常放置站點名字的(de)圖片或公司标志以及旗幟廣告等。

4.文本：文本在頁面中多數以“行”或者“塊”(段落)出現，它們的(de)擺放位置決定者整個頁面布局的(de)可(kě)視(shì)性。在過去(qù)因為(wèi)頁面制作技術的(de)局限，文本放置位置的(de)靈活性非常小，而随着DHTML的(de)興起，文本已經可(kě)以按照自(zì)己的(de)要求放置到頁面的(de)任何位置。

5.頁腳：頁腳和(hé)頁頭相呼應。頁頭是放置站點主題的(de)地(dì)方，而頁腳則是放置制作者或者公司信息的(de)地(dì)方。你能看到，許多此類信息都是放置

在頁腳的(de)。

6.圖片：圖片和(hé)文本是網頁的(de)兩大構成元素，卻一(yī)不可(kě)。如(rú)何處理(lǐ)好圖片和(hé)文本的(de)位置成了整個頁面布局的(de)關鍵。而你的(de)布局思維也将體現

在這裏。

7.多媒體：除了文本和(hé)圖片，還有聲音，動畫，視(shì)頻等等其它媒體。雖然它們不是經常能被利用到，但随着動态網頁的(de)興起，它們在網頁布局上也變得更重要起來。