每年都會(hui)有一(yi)些新的網(wang)(wang)頁布(bu)局(ju)創意(yi)產生(sheng)，而使一(yi)些較老(lao)的布(bu)局(ju)方(fang)案淘汰。毫無(wu)疑問(wen)，2015年的網(wang)(wang)頁布(bu)局(ju)是要響應各種終端設(she)備。實際上，這種趨勢早在2010年就在國(guo)外開(kai)始蔓延(yan)，我(wo)們可以預見的是，它在未(wei)來仍(reng)將是網(wang)(wang)頁布(bu)局(ju)的核心方(fang)案。

當(dang)然，這(zhe)并(bing)不意(yi)味著網(wang)頁布局(ju)必須朝著同一(yi)個(ge)標準化結構進行設計，相(xiang)反，可能會(hui)有更多(duo)、更靈活(huo)的布局(ju)方式產生。在2015年(nian)，我(wo)們至少確定了網(wang)頁布局(ju)發展的四個(ge)趨(qu)勢，你可以從這(zhe)些布局(ju)中找到最好的靈感，作為(wei)你的起點(dian)。

1. 橫向分割屏幕的網頁布局

橫向(xiang)分(fen)(fen)割(ge)屏(ping)幕是(shi)指在網頁設計時，將屏(ping)幕分(fen)(fen)為左(zuo)右(you)兩(liang)(liang)個部(bu)分(fen)(fen)，這兩(liang)(liang)個部(bu)分(fen)(fen)的寬(kuan)高(gao)通常是(shi)相同的，且保持(chi)垂直橫向(xiang)排(pai)列。這么做的主要原因(yin)有兩(liang)(liang)點：

(1) 同時顯示兩(liang)個重(zhong)要(yao)(yao)的特征。這(zhe)種情況經常發生(sheng)在企業推(tui)廣產品或服務時，有(you)兩(liang)個同樣重(zhong)要(yao)(yao)的賣點或特性需(xu)要(yao)(yao)展示在頁(ye)面(mian)上。例如(ru)，出版(ban)系統(tong)，即(ji)有(you)利(li)于出版(ban)商(shang)，又有(you)利(li)于讀者。通過這(zhe)種網頁(ye)布局方式，設計(ji)師不(bu)需(xu)要(yao)(yao)區(qu)分主要(yao)(yao)或次要(yao)(yao)元素(su)，而訪客會自(zi)覺關注(zhu)什么對自(zi)己更重(zhong)要(yao)(yao)。

(2) 表(biao)達一(yi)個(ge)二元性(xing)的想法(fa)。將(jiang)屏幕一(yi)分為二，在設計(ji)上可以(yi)創建(jian)兩個(ge)互(hu)不(bu)影響的空間，可以(yi)專注于不(bu)同(tong)的主題，甚至兩個(ge)不(bu)同(tong)的產品。有時(shi)這(zhe)種網頁(ye)布局方式還可以(yi)突(tu)出顯示兩個(ge)互(hu)為相(xiang)反的特征。

我們(men)來(lai)看 Desktime 首頁(ye)(ye)的(de)網頁(ye)(ye)布局，他們(men)將頁(ye)(ye)面分(fen)為左右兩部分(fen)，左側(ce)用(yong)于(yu)滿足(zu)有空閑辦(ban)公(gong)室(shi)要出租的(de)用(yong)戶，右側(ce)滿足(zu)還沒(mei)有自己的(de)辦(ban)公(gong)室(shi)，要尋租的(de)用(yong)戶。這將網站上兩個(ge)同樣重(zhong)要的(de)功能有效地展示了出來(lai)。

Eight&Four，是一(yi)家數(shu)字(zi)營銷(xiao)公司(si)，他們也將(jiang)主頁(ye)一(yi)份(fen)為(wei)二，網頁(ye)設計基于白色和(he)一(yi)個平面顏(yan)色的對比方式。這里用來(lai)表(biao)達兩個不同的特性，在頁(ye)面上分別展示。

2. 自由盒子的網頁布局 ( Container-Free )

事實(shi)上，這(zhe)是(shi)一種(zhong)極(ji)簡(jian)主義的網頁(ye)布(bu)局方式，它(ta)的布(bu)局理念是(shi)盡(jin)可能地消除(chu)圖形結(jie)(jie)構(gou)，取(qu)而代之(zhi)的是(shi)更加自由和開放的風(feng)格(ge)。它(ta)常常使用簡(jian)單的線性結(jie)(jie)構(gou)，甚(shen)至只采用個性字體的文字進行布(bu)局。

從 FOREWORD 的主頁上(shang)可(ke)以清晰地看(kan)到，他(ta)們將總部(bu)設(she)在巴黎和(he)紐(niu)約，頁面(mian)上(shang)沒有任何圖形圖像(xiang)設(she)計，只通過開放式的字體和(he)顏色的設(she)計來告(gao)訴用(yong)戶他(ta)們該關注什么。

當然，極簡主義(yi)的網(wang)頁布局并(bing)不是完(wan)全不能使用圖(tu)像，例如(ru)我們(men)也可以添加一(yi)張(zhang)大背(bei)景圖(tu)，來達(da)到視覺沖擊的效果。這類似(si)于我們(men)前面分享的《》一(yi)文。

3. 塊狀網格的網頁布局

我們必須在(zai)這(zhe)(zhe)里指(zhi)出，網(wang)格結(jie)構的(de)(de)布局(ju)方式非常容(rong)易(yi)創建響應式網(wang)站。這(zhe)(zhe)種網(wang)頁(ye)布局(ju)中(zhong)的(de)(de)每(mei)個(ge)“塊”將包(bao)含一(yi)個(ge)特定的(de)(de)內容(rong)，它可能是(shi)一(yi)個(ge)標題、一(yi)個(ge)圖像或一(yi)行文本。

每個“塊(kuai)”的(de)尺寸是統一的(de)，且可以(yi)靈活改變寬高以(yi)適應各種大小的(de)屏幕(mu)。這使得“網(wang)格布(bu)局”成為一種非(fei)常通用的(de)網(wang)頁(ye)布(bu)局模式，它可以(yi)有效地用于(yu)PC網(wang)站或移(yi)動應用程序。

GREATS 是一家(jia)位于紐(niu)約的(de)男鞋(xie)銷售企(qi)業，他們的(de)產品銷售主要通(tong)過網站(zhan)。GREATS 的(de)網站(zhan)選擇了網格布局方式，在主頁堆疊模塊(kuai)，每個模塊(kuai)顯(xian)示一雙(shuang)鞋(xie)子的(de)圖像。

4. 單一屏幕的網頁布局

這種(zhong)設計趨(qu)勢(shi)我們在過去已經看到(dao)過很(hen)多了，即網站(zhan)是基于(yu)一個大的背景圖像進行設計的，并且總能適(shi)應各種(zhong)終端屏幕。通常，這類(lei)網站(zhan)非常簡單，他(ta)們傾向于(yu)簡約的設計感覺(jue)。

然而，這(zhe)種趨勢(shi)的一個重要(yao)特征是——沒有網(wang)(wang)頁滾動條。換句話(hua)說，這(zhe)些網(wang)(wang)站總是采取單(dan)一屏幕(mu)，也就(jiu)是一屏以內的網(wang)(wang)頁布局方式。

因為(wei)可用空(kong)間(jian)是(shi)有限的，這(zhe)要求設(she)計(ji)師必須有一個清晰的內容布局方(fang)案，而(er)且要特別注意屏(ping)幕高度(du)的相關信(xin)息。大多(duo)數(shu)情(qing)況下，圖像會成為(wei)主導設(she)計(ji)，利用其展示產(chan)品或喚起(qi)訪客的情(qing)感。

Shamballa Jewels 是一家(jia)經營(ying)珠寶首(shou)飾的公司，該網站用(yong)一個(ge)(ge)獨特頁面(mian)來展(zhan)示他(ta)們的產品，這個(ge)(ge)頁面(mian)沒有(you)滾(gun)動條，且完全(quan)充(chong)滿整個(ge)(ge)屏幕(mu)。

該網站(zhan)一個吸引人的地(di)方是(shi)(shi)，背景總(zong)是(shi)(shi)在不停地(di)切(qie)換，實際上，他(ta)們也(ye)同時(shi)使用了“橫向分割屏幕(mu)”的網頁布局手法(fa)，來(lai)配合圖像(xiang)的交替效果。