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

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

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

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

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

二.大略布局
在草案的根底上，將你確定需求放置的功能模塊安排到頁面上。(注：功能模塊咱們在"主頁規(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)思的布局。）

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

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

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

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

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

經(jīng)過不斷的嘗試和琢磨，你的網(wǎng)頁一定會亮麗起來的哦:)

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

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

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

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

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

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

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

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