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

 

網(wǎng)站設計首頁(yè)布局.jpg

 

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

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

 

自適應和響應式

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

兩者最大的區別在于

前者只根據瀏覽器寬度作出布局的調整，后者是根據設備的不同而作出的調整。

前者的調整只停留在左右上下位置上的調整，后者涉及到內容的增減等。

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

 

通欄布局

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

 

左右對稱(chēng)結構布局

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

 

環(huán)繞式布局

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

 

“同”字型結構布局

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

 

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

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

 

大框套小框的布局

這種布局方式即是我在上面提到的常見(jiàn)的布局，不是說(shuō)這種布局方式一無(wú)是處，但我們總不能只會(huì )這一種布局方式，次次套用吧?按照這種布局當然也可以做出來(lái)漂亮的設計，但畢竟方框限制的視線(xiàn)的擴展，如果客戶(hù)要求做出大氣的感覺(jué)，一般不會(huì )按照這種方式來(lái)布局，通常來(lái)講，大氣意味著(zhù)開(kāi)闊視野。

 

合理的主顏色和統一的頁(yè)面風(fēng)格

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

 

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