規(guī)劃主頁(yè)的第一步是規(guī)劃版面布局。

就象傳統(tǒng)的報(bào)刊雜志編輯一樣，咱們將網(wǎng)頁(yè)看作一張報(bào)紙，一本雜志來(lái)進(jìn)行排版布局。盡管動(dòng)態(tài)網(wǎng)頁(yè)技能的發(fā)展使得咱們開始趨向于學(xué)習(xí)場(chǎng)景編劇，但是固定的網(wǎng)頁(yè)版面規(guī)劃根底依然是有必要學(xué)習(xí)和掌握的。它們的基本原理是共通的，你能夠領(lǐng)會(huì)關(guān)鍵，觸類旁通。版面指的是閱讀器看到的完整的一個(gè)頁(yè)面（能夠包含結(jié)構(gòu)和層）。因?yàn)槊總�(gè)人的顯示器分辨率不同，所以同一個(gè)頁(yè)面的大小或許呈現(xiàn)640*480像素,800*600像素,1024*768像素等不同尺寸。

布局，便是以最適合閱讀的辦法將圖片和文字排放在頁(yè)面的不同方位。你或許留意到：“最適合”是一個(gè)不確定的形容詞，什么才是最適合的呢？抱愧的是阿捷不能也不或許給您一個(gè)完整的正確的答案。就好比有人希望知道成功的秘訣是什么，成功者只能主張您用什么辦法，什么途徑才干最簡(jiǎn)單獲得成功，而不或許有一步成功的"秘訣"告訴您。

咱們?cè)谝?guī)劃思考系列文章第四篇講過(guò)站點(diǎn)全體的構(gòu)思，版面布局也是一個(gè)構(gòu)思的問(wèn)題，但要比站點(diǎn)全體的構(gòu)思簡(jiǎn)單，有規(guī)律的多。讓咱們先來(lái)了解一下版面布局的步驟：

一.草案
新建頁(yè)面就象一張白紙，沒(méi)有任何表格，結(jié)構(gòu)和約定俗成的東西，你能夠盡或許的發(fā)揮你的想象力，將你想到的"現(xiàn)象"畫上去（咱們主張您用一張白紙和一支鉛筆，當(dāng)然用作圖軟件photoshop等也能夠）。這歸于創(chuàng)造階段，不考究細(xì)膩整齊，不必考慮細(xì)節(jié)功能，只以粗陋的線條勾畫出構(gòu)思的概括即可。盡你的或許多畫幾張，最后選定一個(gè)滿意的作為持續(xù)創(chuàng)造的腳本。

二.大略布局
在草案的根底上，將你確定需求放置的功能模塊安排到頁(yè)面上。(注：功能模塊咱們?cè)?主頁(yè)規(guī)劃-引子"中提過(guò)，首要包含網(wǎng)站標(biāo)志,主菜單,新聞,搜索,友誼鏈接,廣告條,郵件列表,計(jì)數(shù)器,版權(quán)信息等)。留意，這兒咱們有必要遵從杰出重點(diǎn)、平衡諧調(diào)的準(zhǔn)則，將網(wǎng)站標(biāo)志，主菜單等最重要的模塊放在最顯眼，最杰出的方位，然后在考慮次要模塊的排放。

三.定案
將大略布局精細(xì)化，具體化。（靠你的才智和經(jīng)歷，拐彎抹角多方聯(lián)想，才干作出具有構(gòu)思的布局。）

在布局過(guò)程中，咱們能夠遵從的準(zhǔn)則有：

1、正常平衡---亦稱"勻稱"。多指左右、上下對(duì)照辦法，首要著重秩序，能到達(dá)安靖誠(chéng)實(shí)、信任的作用。
2、反常平衡---即非對(duì)照辦法，但也要平衡和韻律，當(dāng)然都是不均整的，此種布局能到達(dá)著重性、不安性、高注目性的作用。
3、比照---所謂比照，不僅使用顏色、色彩等技巧來(lái)作體現(xiàn)，在內(nèi)容上也可觸及古與今、新與舊、貧與富等比照。
4、凝視---所謂凝視是使用頁(yè)面中人物視線，使閱讀者模仿跟從的心思，以到達(dá)凝視頁(yè)面的作用，一般多用明星凝視狀。
5、空白---空白有兩種作用，一方面對(duì)其他網(wǎng)站表明杰出卓越，另一方面也表明網(wǎng)頁(yè)品位的優(yōu)越感，這種體現(xiàn)辦法對(duì)體顯網(wǎng)頁(yè)的風(fēng)格十分有用。
6、盡量用圖片解說(shuō)---此法對(duì)不能用言語(yǔ)壓服、或用言語(yǔ)無(wú)法表達(dá)的情感，特別有用。圖片解說(shuō)的內(nèi)容，能夠傳達(dá)給閱讀者的更多的心思因素。

—— 轉(zhuǎn)載自廣告大師樊志育《廣告制造》

以上的規(guī)劃準(zhǔn)則，盡管枯燥，但是咱們?nèi)绻�能領(lǐng)會(huì)并活用到頁(yè)面布局里，作用就大不一樣了。比方，

·網(wǎng)頁(yè)的白色背景太虛，則能夠加些色快； 
·版面零星，能夠用線條和符號(hào)串聯(lián)； 
·左邊文字過(guò)多，右面則能夠插一張圖片堅(jiān)持平衡； 
·表格太規(guī)矩，能夠改用導(dǎo)角試試。

經(jīng)過(guò)不斷的嘗試和琢磨，你的網(wǎng)頁(yè)一定會(huì)亮麗起來(lái)的哦:)

看看咱們經(jīng)常用到的版面布局辦法：

1."T"結(jié)構(gòu)布局。所謂"T"結(jié)構(gòu)。便是指頁(yè)面頂部為橫條網(wǎng)站標(biāo)志+廣告條，下方左邊為主菜單，右面顯示內(nèi)容的布局，因?yàn)椴藛螚l背景教深，全體作用相似英文字母"T",所以咱們稱之為"T"形布局。這是網(wǎng)頁(yè)規(guī)劃頂用的最廣返的一種布局辦法。這種布局的長(zhǎng)處是頁(yè)面結(jié)構(gòu)明晰，主次清楚。是初學(xué)者最簡(jiǎn)單上手的布局辦法。缺點(diǎn)是規(guī)矩板滯，如果細(xì)節(jié)顏色上不留意，很簡(jiǎn)單讓人"看之無(wú)味"。

2."口"型布局。這是一個(gè)象形的說(shuō)法，便是頁(yè)面一般上下各有一個(gè)廣告條，左邊是主菜單，右面放友誼連接等，中間是首要內(nèi)容。這種布局的長(zhǎng)處是充分使用版面，信息量大。缺點(diǎn)是頁(yè)面擁堵，不夠靈敏。也有將四邊空出，只用中間的窗口型規(guī)劃，例如網(wǎng)易壁紙站。

3."三"型布局。這種布局多用于國(guó)外站點(diǎn)，國(guó)內(nèi)用的不多。特點(diǎn)是頁(yè)面上橫向兩條色塊，將頁(yè)面全體分割為四部分，色塊中大多放廣告條。

4.對(duì)稱比照布局。顧名思義，采納左右或許上下對(duì)稱的布局，一半深色，一半淺色，一般用于規(guī)劃型站點(diǎn)。長(zhǎng)處是視覺(jué)沖擊力強(qiáng)，缺點(diǎn)是將兩部分有機(jī)的結(jié)合比較困難。

5.POP布局。POP引自廣告術(shù)語(yǔ)，便是指頁(yè)面布局象一張宣揚(yáng)海報(bào)，以一張精美圖片作為頁(yè)面的規(guī)劃中心。常用于時(shí)尚類站點(diǎn)，比方ELLE.com。長(zhǎng)處顯而易見(jiàn)：漂亮吸引人。缺點(diǎn)便是速度慢。作為版面布局仍是值得學(xué)習(xí)的。

以上總結(jié)了現(xiàn)在網(wǎng)絡(luò)上常見(jiàn)的布局，其實(shí)還有許許多多別具一格的布局，關(guān)鍵在于你的構(gòu)思和規(guī)劃了。關(guān)于版面布局的技巧，這兒供給四個(gè)主張，您能夠自己琢磨：

1.加強(qiáng)視覺(jué)作用
2.加強(qiáng)案牘的可視度和可讀性
3.一致感的視覺(jué)
4.新鮮和個(gè)性是布局的最高境界