網(wǎng)站主頁的常見布局方式

網(wǎng)站主頁設(shè)計中如何將其布局的井井有條是至關(guān)重要的，因為這個也能影響到網(wǎng)站的優(yōu)化跟用戶體驗。要想設(shè)計出能夠吸引人的網(wǎng)頁形式，就要對布局和網(wǎng)頁設(shè)計有一個全面的把握，遵守統(tǒng)一變化的原則，強化版面的外形特征，體現(xiàn)設(shè)計的生命力，與此同時，還要通過精心的設(shè)計與安排，進行整體上的比較，在保證形式上的和諧以外，還要保證其疏密有致，輕重適度，最終體現(xiàn)設(shè)計上的別具一格。 

關(guān)于網(wǎng)站主頁的布局

一般主頁是網(wǎng)站的直接入口！是對網(wǎng)站訪客留下第一印象的最重要的頁面！網(wǎng)站首頁是訪問量最多的，也決定了其他頁面的風格，網(wǎng)站的布局就像建房子，地基打得牢固與否直接影響整棟房子的美觀。設(shè)計師在設(shè)計過程中的布局思路非常重要。所以我們設(shè)計網(wǎng)站時首頁必須要考慮清楚怎樣設(shè)計，比如如何排版、布局，什么樣的配色等等。網(wǎng)站首頁策劃時應該是要首先定義出網(wǎng)站的整體色素和元素的統(tǒng)一性制作、設(shè)計，另外就是對網(wǎng)站產(chǎn)品展現(xiàn)形式的策劃和產(chǎn)品形態(tài)的定位！

自適應和響應式

自適應網(wǎng)頁設(shè)計（Responsive Web Design）最早是由Ethan Marcotte在2010年提出，是指可以自動識別屏幕寬度、并做出相應調(diào)整的網(wǎng)頁設(shè)計。隨著移動化網(wǎng)頁需求的增長，在自適應基礎(chǔ)上又誕生了響應式網(wǎng)頁設(shè)計（Adaptive Web Design）。

兩者最大的區(qū)別在于

前者只根據(jù)瀏覽器寬度作出布局的調(diào)整，后者是根據(jù)設(shè)備的不同而作出的調(diào)整。

前者的調(diào)整只停留在左右上下位置上的調(diào)整，后者涉及到內(nèi)容的增減等。

在這項技術(shù)的支持下，我們現(xiàn)在能看到很多網(wǎng)站把最大主體區(qū)域做到了1600px，但同時又支持手機正常顯示。

通欄布局

這種布局方式讓視線不再受到方框的限制，比起上面的布局方式，自然多了些大氣、開闊的味道來。另外，主視覺部分還可以靈活處理，既可以向上拓展到logo和導航的頂部位置，也可以向下拓展到內(nèi)容區(qū)域，這種布局方式也是非常常見的布局方式。

左右對稱結(jié)構(gòu)布局

左右對稱結(jié)構(gòu)是網(wǎng)頁布局中最為簡單的一種?！白笥覍ΨQ”所指的只是在視覺上的相對對稱，而非幾何意義上的對稱，這種結(jié)構(gòu)將網(wǎng)頁分割為左右兩部分。一般使用這種結(jié)構(gòu)的網(wǎng)站均把導航區(qū)設(shè)置在左半部，而右半部用作主體內(nèi)容的區(qū)域。左右對稱性結(jié)構(gòu)便于瀏覽者直觀地讀取主體內(nèi)容，但是卻不利于發(fā)布大量的信息，所以這種結(jié)構(gòu)對于內(nèi)容較多的大型網(wǎng)站來說并不合適。欄目劃分結(jié)構(gòu)清晰、分開主次性，重為左，此為右。

環(huán)繞式布局

這種布局方式看上去更加靈活，banner區(qū)域相對較小，就可以在頁面放置更多的信息內(nèi)容。

“同”字型結(jié)構(gòu)布局

“同”字結(jié)構(gòu)名副其實，采用這種結(jié)構(gòu)的網(wǎng)頁，往往將導航區(qū)置于頁面頂端，一些如廣告條、友情鏈接、搜索引擎、注冊按鈕、登陸面板、欄目條等內(nèi)容置于頁面兩側(cè)，中間為主體內(nèi)容，這種結(jié)構(gòu)比左右對稱結(jié)構(gòu)要復雜一點，不但有條理，而且直觀，有視覺上的平衡感，但是這種結(jié)構(gòu)也比較僵化。在使用這種結(jié)構(gòu)時，高超的用色技巧會規(guī)避“同”字結(jié)構(gòu)的缺陷。

網(wǎng)頁布局均勻，避免頭重腳輕，重量失衡

網(wǎng)頁的布局均勻，體現(xiàn)在網(wǎng)頁規(guī)劃和設(shè)計時欄目與欄目、色塊與色塊、圖片與文字之間的搭配協(xié)調(diào)問題，好的頁面會做到搭配合理，避免頭重腳輕、重量失衡的現(xiàn)象，和給訪客造成心理上的不適。 

大框套小框的布局

這種布局方式即是我在上面提到的常見的布局，不是說這種布局方式一無是處，但我們總不能只會這一種布局方式，次次套用吧?按照這種布局當然也可以做出來漂亮的設(shè)計，但畢竟方框限制的視線的擴展，如果客戶要求做出大氣的感覺，一般不會按照這種方式來布局，通常來講，大氣意味著開闊視野。

合理的主顏色和統(tǒng)一的頁面風格

在確定網(wǎng)站的主顏色時，一定要根據(jù)所要設(shè)計的網(wǎng)站的行業(yè)特征和所面向的訪問對象來選擇合理的主顏色，如作為機械裝備類的多以藍色、灰色為主，在主顏色、欄目及網(wǎng)站首頁版塊確定后，其它的附屬頁面也應該依次風格來設(shè)置。一般網(wǎng)頁的大色塊區(qū)域以不超過3種顏色為好。

網(wǎng)頁的布局不可能像平面設(shè)計那么簡單，雖然網(wǎng)頁制作已經(jīng)擺脫了HTML時代，但是還沒有完全做到揮灑自如，這就決定了網(wǎng)頁的布局是有一定規(guī)則的。一個頁面存在多個功能模塊，它們的展現(xiàn)形式應該如何，就要考慮各個模塊的重要程度，重要信息、重要功能模塊“靠上靠左”呈現(xiàn)，這是因為這些地方從位置上講比較有吸引眼球的優(yōu)勢，要做到“突出重點”。