由于網(wǎng)站涉及元素較廣，不少站長在開始做網(wǎng)站時都會猶豫不決，覺得無從下手，常常心有余而力不足，難以做出一個令人滿意的網(wǎng)站。其實，網(wǎng)頁設(shè)計是遵循一定的規(guī)則的，在安排各種元素、進行細節(jié)設(shè)計之前我們首先應(yīng)該定好網(wǎng)頁的布局模式。合理的網(wǎng)頁布局是一個網(wǎng)站的穩(wěn)固基石，它有利于內(nèi)容信息框架的建立、圖片文本的合理搭配以及用戶的順暢體驗，在網(wǎng)站表現(xiàn)力方面發(fā)揮著重要作用。而小飛在仔細觀察中發(fā)現(xiàn)，這有一些通用性很強的網(wǎng)頁模式，它們緊密貼合了用戶的瀏覽和使用習(xí)慣，適用范圍較廣。如果你不知道在網(wǎng)站中使用哪種布局，不妨來看一看吧!這5種網(wǎng)頁布局可是憑借其獨有的魅力迸發(fā)著源源不斷的生命力，也許可以幫你省去不少時間和精力呢!
1、背景大圖+簡單多列布局
背景大圖和簡單多列布局算的上是黃金搭檔。一方面，背景大圖可以充分吸引用戶的注意力，激發(fā)用戶的興趣，另一方面，多列布局將次級元素以簡潔、明了的方式呈現(xiàn)出來，更進一步讓用戶有點擊瀏覽的欲望。除此以外，使用這種布局模式的網(wǎng)站不僅看上去很干凈、清爽，有足夠強勁的視覺表現(xiàn)力，而且還能夠突破斷點的限制，不管設(shè)備屏幕的大小，都為用戶展示充足的內(nèi)容，供用戶瀏覽和探索，做到真正的響應(yīng)式。盡管由于設(shè)備的差異，網(wǎng)站的具體布局可能會有所出入，比如使用固定寬或流體布局等。但網(wǎng)站總體布局模式是大同小異的，一般包括以下幾個部分：
導(dǎo)航菜單欄
背景大圖，附有文字標(biāo)題
2~4個分欄，承載不同類別的信息
主要內(nèi)容區(qū)域
頁腳
相關(guān)趨勢：現(xiàn)在使用這種布局的網(wǎng)站越來越多地采用色彩豐富的圖標(biāo)或插畫，讓網(wǎng)頁更顯豐富和多彩。另外，這種風(fēng)格也常與扁平化設(shè)計風(fēng)格結(jié)合在一起。
2、單頁單欄布局
如果你沒有太多的內(nèi)容，或者只是想做一個主題頁面，在近幾年很火熱的單頁式設(shè)計就非常適合你。正如它的名字那樣，它非常適宜于展現(xiàn)極簡的內(nèi)容。單頁式設(shè)計最適合于小網(wǎng)站或者小型項目的設(shè)計。它可以讓介紹頁面更簡潔，也能讓簡單的信息更突出，更有分量。對于一些內(nèi)容比較簡單的博客網(wǎng)站而言，單頁設(shè)計也是不錯的選擇。不過在網(wǎng)站中選用這種布局時，我們需要著重考慮元素的間隔問題。單頁單欄設(shè)計相當(dāng)考驗設(shè)計師留白和布局平衡的功底，過于緊密的元素會讓網(wǎng)站顯得很急促，訪客在瀏覽時也容易有障礙;而過于松散的安排又會讓網(wǎng)站看上去空洞無物，所以反復(fù)推敲網(wǎng)站各種元素的親疏遠近排列很是重要。起飛頁自助建站系統(tǒng)就非常適合創(chuàng)建單頁式布局的網(wǎng)站，有多個單頁式的模版可以使用。
下面是這種設(shè)計布局的基本組成部分：
導(dǎo)航
主要內(nèi)容區(qū)域，文字+圖片為主
頁腳
相關(guān)趨勢：和單頁單欄設(shè)計布局結(jié)合最緊密要數(shù)動畫效果和視差滾動。這些效果可以讓略顯沉悶的單頁式設(shè)計變得生動有趣，增添一些不一樣的色彩。
3、不規(guī)則柵格
除了前面提到的簡單柵格以外，我們還可以在網(wǎng)站中使用自定義的不規(guī)則柵格布局，將柵格分成多個整齊的行和列或是經(jīng)典的4*4格局等。自定義柵格布局可能在設(shè)計師的作品集中最為常見，不同設(shè)計師通常會對柵格系統(tǒng)有不一樣的理解和運用。除了視覺化元素以外，不少設(shè)計師還在柵格中填充色彩或文本信息。為什么自定義柵格布局會受到這么多人的喜歡呢?最大的原因就在于它的組織性，它可以在呈現(xiàn)大量內(nèi)容的同時不顯冗余、繁瑣，它具有規(guī)律性和可預(yù)見性，用戶能夠更加快速獲取想要的信息。除此以外，自定義柵格很是自由，站長們可以根據(jù)自己的需要合理安排網(wǎng)格的多少，設(shè)計出的布局也是獨一無二的。不過，在設(shè)計自定義布局時，我們一定要注意柵格行、列尺寸和間距的控制，如果這些細節(jié)沒有控制好的話，很有可能破壞整個設(shè)計的美感。
相關(guān)趨勢：不少設(shè)計師開始將平鋪的網(wǎng)格與動畫結(jié)合起來，比如設(shè)置點擊按鈕讓網(wǎng)格翻轉(zhuǎn)顯示額外的信息。另外，柵格系統(tǒng)也可以和卡片式設(shè)計很好的結(jié)合在一起，更好的整合圖片、文字等多種元素。
4、經(jīng)典的F式布局
研究表明，用戶在瀏覽網(wǎng)頁時習(xí)慣沿著F式的閱讀軌跡。這也就是說，用戶喜歡從左到右閱讀，然后向下移動，再繼續(xù)從左到右閱讀。這種F式的閱讀模式對應(yīng)的網(wǎng)頁布局就是F式布局，將最關(guān)鍵的信息沿著字母F的形狀放置。這迎合了用戶的閱讀習(xí)慣，便于用戶與網(wǎng)站進行交互。下面是F式布局的基本框架：
頁眉和導(dǎo)航菜單
靠左的一欄相對較寬，展示主要內(nèi)容
靠右常為側(cè)邊欄，展示相關(guān)鏈接等內(nèi)容
頁腳
相關(guān)趨勢：提到F式布局，設(shè)計師常會想到側(cè)邊欄。有時，他們會翻轉(zhuǎn)側(cè)邊欄的位置，或是將側(cè)邊欄與導(dǎo)航菜單結(jié)合在一起。還有，不少設(shè)計師在F形狀區(qū)域使用超大背景圖吸引用戶的注意力。
5、極簡分層
極簡主義的設(shè)計一直都很受歡迎，它的流行不是沒有原因的。極簡主義提供了充分的留白，能夠營造輕松愉悅的氛圍，同時也會讓網(wǎng)站的重點內(nèi)容更容易被聚焦。而在極簡化的頁面中添加幾個分層，可以讓信息更有層次，也使得這個頁面擁有更多細節(jié)、更生動有趣。極簡分層的布局可以適配多種不同元素的項目，在站長想要引導(dǎo)用戶關(guān)注某個關(guān)鍵內(nèi)容時也比較適用。
相關(guān)趨勢：由于極簡分層強調(diào)元素之間的層次感，一些微妙的陰影和漸變開始被用在這樣的布局之中。雖然這些設(shè)計技巧曾一度過時落伍，但現(xiàn)在大有卷土重來之勢，Material Design就是它們的先鋒。不過，當(dāng)然添加的只是一些微妙的元素，并不意味著擬物特效的回歸。
今天介紹的這些布局模式都是經(jīng)過實踐檢驗的，在起起伏伏之后仍舊在浪潮中占有一席之地，這也從側(cè)面證明了他們的優(yōu)勢所在。借助這些布局模式做出的網(wǎng)站不一定有多出色，但一定是簡單、易讀的。如果你想錦上添花的話，你可以在運用這些布局模式的基礎(chǔ)上選擇一些合適的流行趨勢，做出更有魅力的網(wǎng)站?？靵砥痫w頁自助建站平臺()做一個網(wǎng)站吧!
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
