在網站建設設計中(zhōng)，網頁設計是核心，核心不僅僅體(tǐ)現在網頁設計上，還體(tǐ)現在網頁的布局上，往往一(yī)個精密的網站布局體(tǐ)現網站的戰略眼光和專業水平。在網站建設中(zhōng)，常用的網站布局有以下(xià)5種常用的方式和技巧。
1.頂部大(dà)圖Banner+簡單的栅格
無論屏幕多大(dà)，這種布局都能夠爲用戶展示充足的内容，供用戶浏覽和探索。雖然這種布局随着屏幕、設備而有所差異，有的設計師會傾向于設計成固定寬或者橫跨整個頁面的布局，但是總體(tǐ)的模式都大(dà)同小(xiǎo)異。
·導航欄
·頂部大(dà)圖，圖片上疊有文字标題
·2~4個分(fēn)欄，承載不同類别的信息，有的會有圖标
·主要的内容區域
·頁腳
這種布局設計幹淨清爽，有足夠強的視覺表現力，并且常常采用的響應式設計，斷點也很好控制。頂部大(dà)面積的輪播圖或者Banner也有許多插件或者應用來幫你實現。
2.單頁式設計這幾年非常火(huǒ)，它非常适宜于展現極簡的内容，或者專注呈現一(yī)個主題。當網站的主題集中(zhōng)，内容也比較固定的時候，無需複雜(zá)的布局來呈現，單頁單列式的布局足以應付一(yī)切。
·導航
·主要内容區域，文字+圖片爲主
·頁腳
采用這種布局模式的時候，空間的控制至關重要，相當考驗設計師設計留白(bái)和布局平衡的功力。元素和元素之間的疏密關系是需要設計師反複推敲的，如果空間控制不合理會給用戶一(yī)種混亂的感覺，如果過于緊密則會産生(shēng)局促感。
原理：單頁式設計适合于小(xiǎo)網站或者小(xiǎo)型項目的展示，它可以用來制造一(yī)個簡單的介紹頁面，讓簡單的内容顯得不那麽單調，強化内容的形式感和重量感。對于内容簡單的博客網站而言，單頁式設計也是不錯的選擇。
相關趨勢：和單頁設計結合最緊密的應該是動效設計和視差滾動，他們可以讓單頁式設計更加生(shēng)動有趣，淡化單調的設計，賦予頁面更強的生(shēng)命力。
3.通欄
這種布局方式相對于大(dà)框套小(xiǎo)框而言，用戶浏覽網頁不在受到方框的限制，這種方式顯得大(dà)氣些，眼界顯得更開(kāi)闊些。
另外(wài)這種方式還有一(yī)個便利之處那就是主視覺部分(fēn)可以随機靈活處理，既能往上移到網站logo和導航的位置，也可以移到向下(xià)擴展的内容區域。這種布局方式也是網站中(zhōng)常用的布局方式。
4.導航在主視覺下(xià)方的布局。
這種布局方式在一(yī)些資(zī)訊門戶網站中(zhōng)還是比較常見的，導航直接放(fàng)置在banner的下(xià)面，這可以彌補banner中(zhōng)設計素材被截斷的缺陷。
另外(wài)這種布局方式，用戶打開(kāi)網頁就能看到網站的導航，這樣對于新客戶來說是及其友好的，新客戶不用刻意去(qù)尋找網站的導航，而且訪客可以通過第一(yī)眼就能分(fēn)清網站主要導航内容。
5.極簡分(fēn)層
極簡化的設計一(yī)直都在流行，它的流行不是沒有原因的。開(kāi)放(fàng)式的空間讓用戶感覺更加輕松，也使得其中(zhōng)展現的内容更容易被聚焦。如果極簡化的頁面中(zhōng)加入不多的幾個并列的内容層，可以讓信息更有層次，也使得極簡的頁面擁有了細節。
這種設計并不複雜(zá)，但是讓頁面更加有趣了，它可以适配更多不同類型的項目了。這也解釋了爲什麽用戶如此的喜愛類似Apple官網這樣的設計。
原理：極簡化的頁面中(zhōng)加入簡單的幾個分(fēn)層，讓頁面有了視覺焦點，尤其是當設計者想要引導用戶關注到某個關鍵的内容的時候，這種頁面布局很很容易實現這一(yī)點。
相關趨勢：微妙的陰影和漸變常常被用在這樣的頁面當中(zhōng)，強化元素之間的層次感。雖然這些設計手法一(yī)度“過時”，但是現在大(dà)有卷土重來之勢，而Material Design這樣的設計風格就是它們的沖鋒号。
許多設計手法、設計趨勢都常常會被人質疑，但是如果撇開(kāi)情感因素，從最基本的設計原理上來推導這些趨勢的時候，能夠從根本上判讀這些設計手法是否真的是有價值的。
今天所談及的這些布局是經過時間洗煉的經典設計，挑選合适的設計趨勢同這些布局結合起來，常常能夠帶來不錯的效果。
