得不說(shuō)，網(wǎng)頁(yè)設計絕對是有套路的！網(wǎng)頁(yè)布局雖然千變萬(wàn)化，但是如果你仔細觀(guān)察，會(huì )發(fā)現有一些布局適用范疇相當廣，經(jīng)久不衰。今天的文章，我們就來(lái)聊一下5種經(jīng)典的網(wǎng)頁(yè)布局。

在開(kāi)始一個(gè)新的網(wǎng)頁(yè)設計項目的時(shí)候，不知道你會(huì )不會(huì )有那么一瞬間的猶豫："這個(gè)項目要從哪里著(zhù)手呢？"伴隨著(zhù)這種猶豫的，是"做點(diǎn)前所未有的作品"的沖動(dòng)。不過(guò)，很多時(shí)候，這些沖動(dòng)和猶豫都在需求的磨合、設計的細化中，逐步淡化。相比大家也都發(fā)現了，網(wǎng)頁(yè)布局在很多時(shí)候都是相似的，甚至可以說(shuō)，有些布局模式是長(cháng)盛不衰的。

這些布局模式，或者說(shuō)框架，幾乎是"約定俗成"的，它們?yōu)橛脩?hù)所熟知，它們本身也更貼合用戶(hù)對內容的識別模式和使用習慣。今天的文章，我們一同來(lái)聊聊五種擁有持久生命力的優(yōu)秀網(wǎng)頁(yè)布局，也許你的下一個(gè)網(wǎng)頁(yè)設計項目可以直接從這五種布局模式入手，無(wú)需過(guò)多猶豫和糾結。

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í)現。

原理：這種布局中，每個(gè)元素都各司其職，并且整個(gè)流程是富有邏輯的，頂部大圖足以營(yíng)造氛圍，給予用戶(hù)特定的體驗，下面的次一級元素能夠做的很好的支撐。

相關(guān)趨勢：越來(lái)越多這類(lèi)網(wǎng)頁(yè)開(kāi)始采用色彩豐富的插畫(huà)式的圖標，而扁平化的設計和這種布局頁(yè)面有著(zhù)天然的契合。

2、單頁(yè)設計，單欄布局

單頁(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、自定義柵格

那些被整齊分割出來(lái)的網(wǎng)頁(yè)布局從來(lái)都沒(méi)有過(guò)時(shí)過(guò)。無(wú)論是分割得細碎的網(wǎng)頁(yè)區域還是大塊的頁(yè)面區塊，大多都需要借助一套干凈整齊的柵格來(lái)支撐。在此基礎上，內容按部就班地被置于不同的區塊中，被精心地組織展示出來(lái)。

在設計師的作品集頁(yè)面中，你可以發(fā)現各種各樣自定義的柵格布局。自定義柵格展示內容的優(yōu)勢在于，它可以同時(shí)呈現大量的視覺(jué)化的內容，看起來(lái)足夠豐富又不會(huì )落于下乘。下面這個(gè)圖庫的效果看起來(lái)就相當震撼。

在柵格中填充色彩，還可以用來(lái)承載文字內容。不同的區塊之間不一定非要用線(xiàn)條進(jìn)行分割，可供選擇的方案有很多，不過(guò)千萬(wàn)要控制好柵格尺寸和間距?？刂撇缓玫募毠?，整個(gè)設計的平衡感可能會(huì )被破壞。

原理：柵格的優(yōu)勢在于它的組織性，對于用戶(hù)而言，它具有規律性和可預期性。一個(gè)漂亮的柵格系統能夠讓用戶(hù)更快找到需要的內容，在視覺(jué)上也更加協(xié)調自然。

相關(guān)趨勢：柵格很容易被人視為卡片這樣的元素，可以為其加入翻轉等各式各樣的動(dòng)效，呈現出更多的信息和視覺(jué)層次。

4、經(jīng)典的F式布局

研究表明，用戶(hù)在瀏覽網(wǎng)頁(yè)的時(shí)候，習慣于沿著(zhù)F式的閱讀軌跡來(lái)瀏覽信息，也就是說(shuō)，用戶(hù)喜歡從左到右閱讀，然后向下移動(dòng)，再繼續從左到右閱讀。

這種F式的閱讀模式對應的網(wǎng)頁(yè)布局就是F式布局，最關(guān)鍵的信息靠左顯示，從上到下盡量保持在一條線(xiàn)上。

·頁(yè)頭和導航

·靠左的一欄相對較寬，展示主要的內容

·靠右常為側邊欄，展示相關(guān)鏈接等內容

·頁(yè)腳

原理：人的行為很容易受到習慣的影響，而研究也證實(shí)了人思考、行為確實(shí)是模式化的。從左到右，自上而下，人們大多習慣了這種行為模式。F式的布局模式擁有良好的適用性，便于用戶(hù)理解和交互。

相關(guān)趨勢：F式布局中側邊玩法很多，有的設計師會(huì )將導航與之結合，或者在頁(yè)面頂部加上大圖Banner。

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)格就是它們的沖鋒號。

結語(yǔ)

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