在網站(zhan)建設(she)設(she)計中，網頁設(she)計是核(he)心(xin)(xin)，核(he)心(xin)(xin)不僅(jin)僅(jin)體現在網頁設(she)計上(shang)，還體現在網頁的(de)(de)(de)布局(ju)上(shang)，往往一個精密的(de)(de)(de)網站(zhan)布局(ju)體現網站(zhan)的(de)(de)(de)戰(zhan)略眼(yan)光和專業(ye)水(shui)平。在網站(zhan)建設(she)中，常(chang)用(yong)的(de)(de)(de)網站(zhan)布局(ju)有以下5種(zhong)常(chang)用(yong)的(de)(de)(de)方式(shi)和技巧。

　　1.頂部大(da)圖Banner+簡單(dan)的柵(zha)格

　　無論屏(ping)幕多大(da)，這種(zhong)布局(ju)都能夠為用戶展示(shi)充足的內(nei)容(rong)，供用戶瀏(liu)覽和探索(suo)。雖然這種(zhong)布局(ju)隨著(zhu)屏(ping)幕、設備(bei)而有所差異，有的設計(ji)師會傾向于設計(ji)成固定寬或者橫跨整個頁面的布局(ju)，但是總體的模式都大(da)同小異。

　　·導航欄

　　·頂(ding)部(bu)大圖，圖片上疊(die)有文(wen)字標題

　　·2~4個分欄，承載不同(tong)類別的(de)(de)信息(xi)，有的(de)(de)會有圖標

　　·主(zhu)要(yao)的(de)內容(rong)區域

　　·頁腳

　　這種(zhong)布(bu)局設計干(gan)凈清(qing)爽，有(you)足夠強的(de)視(shi)覺表現力，并且常常采用的(de)響應式設計，斷點也很好控(kong)制。頂部大面積的(de)輪播圖或者Banner也有(you)許多插件或者應用來幫你實現。

　　2.單(dan)頁(ye)式設計這幾年非(fei)常火，它非(fei)常適宜于展現(xian)極簡的(de)(de)內容，或者專注呈(cheng)現(xian)一個主(zhu)題。當網站(zhan)的(de)(de)主(zhu)題集中，內容也比較(jiao)固定的(de)(de)時候，無需復(fu)雜的(de)(de)布局來呈(cheng)現(xian)，單(dan)頁(ye)單(dan)列式的(de)(de)布局足以應付一切。

　　·導航

　　·主(zhu)要(yao)內容區域，文字+圖片為主(zhu)

　　·頁腳

　　采用這種布局(ju)模式的時(shi)候，空間(jian)(jian)的控(kong)(kong)制(zhi)至關(guan)(guan)重要(yao)，相當考(kao)驗設計(ji)師設計(ji)留白和布局(ju)平衡的功力。元(yuan)素(su)和元(yuan)素(su)之間(jian)(jian)的疏密(mi)關(guan)(guan)系是(shi)需要(yao)設計(ji)師反復推敲的，如果空間(jian)(jian)控(kong)(kong)制(zhi)不合理會給用戶一(yi)種混亂(luan)的感(gan)覺，如果過于緊密(mi)則會產生局(ju)促感(gan)。

　　原理(li)：單(dan)頁式(shi)設計適合于小網(wang)站或者(zhe)小型項目的展示(shi)，它可以(yi)用來制(zhi)造一(yi)個(ge)簡單(dan)的介紹頁面，讓簡單(dan)的內容顯得不(bu)那么單(dan)調，強化內容的形式(shi)感(gan)和(he)重量感(gan)。對于內容簡單(dan)的博客(ke)網(wang)站而言，單(dan)頁式(shi)設計也是不(bu)錯的選擇。

　　相關(guan)趨(qu)勢：和單頁(ye)設計結(jie)合最緊密的應該(gai)是動(dong)效設計和視(shi)差滾動(dong)，他(ta)們可(ke)以讓(rang)單頁(ye)式設計更加生(sheng)動(dong)有趣，淡化單調(diao)的設計，賦(fu)予頁(ye)面更強的生(sheng)命(ming)力(li)。

　　3.通欄

　　這種(zhong)布(bu)局方式(shi)相對于大框套小(xiao)框而言，用(yong)戶瀏覽網頁不在受到方框的(de)限(xian)制，這種(zhong)方式(shi)顯得大氣些(xie)，眼界顯得更(geng)開闊些(xie)。

　　另外這(zhe)種(zhong)(zhong)方式還有一個(ge)便利之處那就是(shi)主視覺部分(fen)可以隨機靈活處理，既(ji)能往上移(yi)到(dao)網(wang)站logo和導(dao)航的(de)位置，也可以移(yi)到(dao)向下擴展的(de)內容區域。這(zhe)種(zhong)(zhong)布局(ju)方式也是(shi)網(wang)站中常用的(de)布局(ju)方式。

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

　　這種布(bu)局(ju)方式在一些資訊門戶網站(zhan)中還是比較常(chang)見的，導航直接放置(zhi)在banner的下面(mian)，這可以彌(mi)補banner中設計素材被截斷的缺(que)陷。

　　另外這(zhe)種布局方式，用(yong)戶打開網(wang)頁(ye)就(jiu)能看到網(wang)站(zhan)的(de)導航，這(zhe)樣對于(yu)新客(ke)戶來(lai)說是及其友好的(de)，新客(ke)戶不用(yong)刻意去尋找網(wang)站(zhan)的(de)導航，而且訪客(ke)可以通過第(di)一眼(yan)就(jiu)能分清網(wang)站(zhan)主要導航內容。

　　5.極簡分層

　　極簡化的(de)(de)設(she)計一(yi)直都在(zai)流(liu)行，它的(de)(de)流(liu)行不是沒有原(yuan)因的(de)(de)。開放式的(de)(de)空間(jian)讓用(yong)戶感覺更(geng)(geng)加輕松，也使得其中展現的(de)(de)內容(rong)更(geng)(geng)容(rong)易(yi)被(bei)聚焦。如果(guo)極簡化的(de)(de)頁(ye)面中加入不多的(de)(de)幾(ji)個并列的(de)(de)內容(rong)層，可以讓信息(xi)更(geng)(geng)有層次，也使得極簡的(de)(de)頁(ye)面擁有了細節。

　　這種設(she)計并不復雜(za)，但是讓頁面更加有趣了(le)(le)，它可(ke)以適配(pei)更多不同類型的(de)項目了(le)(le)。這也解釋了(le)(le)為什么(me)用戶(hu)如此(ci)的(de)喜愛類似Apple官網這樣的(de)設(she)計。

　　原(yuan)理：極(ji)簡化的頁面(mian)(mian)中加入簡單的幾個(ge)分層(ceng)，讓頁面(mian)(mian)有了(le)視覺焦點，尤其是當(dang)設計者想要(yao)引導用戶關注(zhu)到某個(ge)關鍵(jian)的內容的時候，這(zhe)種頁面(mian)(mian)布局很很容易實現這(zhe)一(yi)點。

　　相關趨勢：微(wei)妙的(de)(de)(de)陰影和漸變常常被用在(zai)這樣(yang)的(de)(de)(de)頁面當中，強(qiang)化元素之間的(de)(de)(de)層次感。雖然這些設(she)計(ji)手法(fa)一度“過時”，但(dan)是(shi)現在(zai)大有(you)卷(juan)土重來(lai)之勢，而Material Design這樣(yang)的(de)(de)(de)設(she)計(ji)風(feng)格就是(shi)它們的(de)(de)(de)沖鋒號。

　　許多設(she)(she)計(ji)手法(fa)、設(she)(she)計(ji)趨勢都(dou)常(chang)常(chang)會被人質疑，但是如果(guo)撇開情感因素，從(cong)最基本的(de)設(she)(she)計(ji)原理上來推導這些趨勢的(de)時(shi)候(hou)，能夠從(cong)根本上判讀這些設(she)(she)計(ji)手法(fa)是否真的(de)是有價值(zhi)的(de)。

　　今天所(suo)談及(ji)的這些(xie)布局是經過時間洗煉(lian)的經典(dian)設計，挑(tiao)選合適的設計趨勢(shi)同這些(xie)布局結(jie)合起(qi)來，常常能夠帶來不(bu)錯的效(xiao)果(guo)。