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