在網(wǎng)站建設設計中，網(wǎng)頁(yè)設計是核心，核心不僅僅體現在網(wǎng)頁(yè)設計上，還體現在網(wǎng)頁(yè)的布局上，往往一個(gè)精密的網(wǎng)站布局體現網(wǎng)站的戰略眼光和專(zhuān)業(yè)水平。在網(wǎng)站建設中，常用的網(wǎng)站布局有以下5種常用的方式和技巧。

　　1.頂部大圖Banner+簡(jiǎn)單的柵格

　　無(wú)論屏幕多大，這種布局都能夠為用戶(hù)展示充足的內容，供用戶(hù)瀏覽和探索。雖然這種布局隨著(zhù)屏幕、設備而有所差異，有的設計師會(huì )傾向于設計成固定寬或者橫跨整個(gè)頁(yè)面的布局，但是總體的模式都大同小異。

　　·導航欄

　　·頂部大圖，圖片上疊有文字標題

　　·2~4個(gè)分欄，承載不同類(lèi)別的信息，有的會(huì )有圖標

　　·主要的內容區域

　　·頁(yè)腳

　　這種布局設計干凈清爽，有足夠強的視覺(jué)表現力，并且常常采用的響應式設計，斷點(diǎn)也很好控制。頂部大面積的輪播圖或者Banner也有許多插件或者應用來(lái)幫你實(shí)現。

　　2.單頁(yè)式設計這幾年非常火，它非常適宜于展現極簡(jiǎn)的內容，或者專(zhuān)注呈現一個(gè)主題。當網(wǎng)站建設的主題集中，內容也比較固定的時(shí)候，無(wú)需復雜的布局來(lái)呈現，單頁(yè)單列式的布局足以應付一切。

　　·導航

　　·主要內容區域，文字+圖片為主

　　·頁(yè)腳

　　采用這種布局模式的時(shí)候，空間的控制至關(guān)重要，相當考驗設計師設計留白和布局平衡的功力。元素和元素之間的疏密關(guān)系是需要設計師反復推敲的，如果空間控制不合理會(huì )給用戶(hù)一種混亂的感覺(jué)，如果過(guò)于緊密則會(huì )產(chǎn)生局促感。

　　原理：?jiǎn)雾?yè)式設計適合于小網(wǎng)站或者小型項目的展示，它可以用來(lái)制造一個(gè)簡(jiǎn)單的介紹頁(yè)面，讓簡(jiǎn)單的內容顯得不那么單調，強化內容的形式感和重量感。對于內容簡(jiǎn)單的博客網(wǎng)站建設而言，單頁(yè)式設計也是不錯的選擇。

　　相關(guān)趨勢：和單頁(yè)設計結合最緊密的應該是動(dòng)效設計和視差滾動(dòng)，他們可以讓單頁(yè)式設計更加生動(dòng)有趣，淡化單調的設計，賦予頁(yè)面更強的生命力。

　　3.通欄

　　這種布局方式相對于大框套小框而言，用戶(hù)瀏覽網(wǎng)頁(yè)不在受到方框的限制，這種方式顯得大氣些，眼界顯得更開(kāi)闊些。

　　另外這種方式還有一個(gè)便利之處那就是主視覺(jué)部分可以隨機靈活處理，既能往上移到網(wǎng)站logo和導航的位置，也可以移到向下擴展的內容區域。這種布局方式也是網(wǎng)站中常用的布局方式。

　　4.導航在主視覺(jué)下方的布局。

　　這種布局方式在一些資訊門(mén)戶(hù)網(wǎng)站建設中還是比較常見(jiàn)的，導航直接放置在banner的下面，這可以彌補banner中設計素材被截斷的缺陷。

　　另外這種布局方式，用戶(hù)打開(kāi)網(wǎng)頁(yè)就能看到網(wǎng)站的導航，這樣對于新客戶(hù)來(lái)說(shuō)是及其友好的，新客戶(hù)不用刻意去尋找網(wǎng)站的導航，而且訪(fǎng)客可以通過(guò)第一眼就能分清網(wǎng)站主要導航內容。

　　5.極簡(jiǎn)分層

　　極簡(jiǎn)化的設計一直都在流行，它的流行不是沒(méi)有原因的。開(kāi)放式的空間讓用戶(hù)感覺(jué)更加輕松，也使得其中展現的內容更容易被聚焦。如果極簡(jiǎn)化的頁(yè)面中加入不多的幾個(gè)并列的內容層，可以讓信息更有層次，也使得極簡(jiǎn)的頁(yè)面擁有了細節。

　　這種設計并不復雜，但是讓頁(yè)面更加有趣了，它可以適配更多不同類(lèi)型的項目了。這也解釋了為什么用戶(hù)如此的喜愛(ài)類(lèi)似Apple官網(wǎng)這樣的設計。

　　原理：極簡(jiǎn)化的頁(yè)面中加入簡(jiǎn)單的幾個(gè)分層，讓頁(yè)面有了視覺(jué)焦點(diǎn)，尤其是當設計者想要引導用戶(hù)關(guān)注到某個(gè)關(guān)鍵的內容的時(shí)候，這種頁(yè)面布局很很容易實(shí)現這一點(diǎn)。

　　相關(guān)趨勢：微妙的陰影和漸變常常被用在這樣的頁(yè)面當中，強化元素之間的層次感。雖然這些設計手法一度“過(guò)時(shí)”，但是現在大有卷土重來(lái)之勢，而Material Design這樣的設計風(fēng)格就是它們的沖鋒號。

　　許多設計手法、設計趨勢都常常會(huì )被人質(zhì)疑，但是如果撇開(kāi)情感因素，從最基本的設計原理上來(lái)推導這些趨勢的時(shí)候，能夠從根本上判讀這些設計手法是否真的是有價(jià)值的。

　　今天所談及的這些網(wǎng)站建設布局是經(jīng)過(guò)時(shí)間洗煉的經(jīng)典設計，挑選合適的設計趨勢同這些布局結合起來(lái)，常常能夠帶來(lái)不錯的效果。

http://ezekroy.com/jianzhanzhishi/6242.html 常見(jiàn)網(wǎng)站建設設計布局分享