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