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

 

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

 

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

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

 

自適應(yīng)和響應(yīng)式

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

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

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

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

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

 

通欄布局

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

 

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

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

 

環(huán)繞式布局

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

 

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

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

 

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

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

 

大框套小框的布局

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

 

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

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

 

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