無從下手？也許你該從這五種經(jīng)典網(wǎng)頁布局開始設(shè)計

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

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

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

1、頂部大圖Banner+簡單的柵格

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

·導航欄
·頂部大圖，圖片上疊有文字標題
·2~4個分欄，承載不同類別的信息，有的會有圖標
·主要的內(nèi)容區(qū)域
·頁腳

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

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

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

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

單頁式設(shè)計這幾年非?；?，它非常適宜于展現(xiàn)極簡的內(nèi)容，或者專注呈現(xiàn)一個主題。當網(wǎng)站的主題集中，內(nèi)容也比較固定的時候，無需復雜的布局來呈現(xiàn)，單頁單列式的布局足以應(yīng)付一切。

·導航
·主要內(nèi)容區(qū)域，文字+圖片為主
·頁腳

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

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

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

3、自定義柵格

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

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

在柵格中填充色彩，還可以用來承載文字內(nèi)容。不同的區(qū)塊之間不一定非要用線條進行分割，可供選擇的方案有很多，不過千萬要控制好柵格尺寸和間距。控制不好的細節(jié)，整個設(shè)計的平衡感可能會被破壞。

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

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

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

研究表明，用戶在瀏覽網(wǎng)頁的時候，習慣于沿著F式的閱讀軌跡來瀏覽信息，也就是說，用戶喜歡從左到右閱讀，然后向下移動，再繼續(xù)從左到右閱讀。

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

·頁頭和導航
·靠左的一欄相對較寬，展示主要的內(nèi)容
·靠右常為側(cè)邊欄，展示相關(guān)鏈接等內(nèi)容
·頁腳

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

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

5、極簡分層

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

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

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

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

結(jié)語

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

今天所談及的這些布局是經(jīng)過時間洗煉的經(jīng)典設(shè)計，挑選合適的設(shè)計趨勢同這些布局結(jié)合起來，常常能夠帶來不錯的效果。