每年都會有(you)一些新的(de)網(wang)頁(ye)布(bu)(bu)局(ju)創意產(chan)生，而使一些較(jiao)老的(de)布(bu)(bu)局(ju)方案淘汰(tai)。無疑問，2015年的(de)網(wang)頁(ye)布(bu)(bu)局(ju)是(shi)要響應各種(zhong)終端設備。實際(ji)上，這(zhe)種(zhong)趨勢早在(zai)2010年就在(zai)國外開始蔓(man)延(yan)，我們可以預見的(de)是(shi)，它在(zai)未來(lai)仍(reng)將(jiang)是(shi)網(wang)頁(ye)布(bu)(bu)局(ju)的(de)核心(xin)方案。

當然，這并不意味著網(wang)(wang)頁布(bu)局(ju)(ju)必(bi)須朝著同一個標(biao)準化結構進行設(she)計，相(xiang)反(fan)，可(ke)能會有更多、更靈活的(de)布(bu)局(ju)(ju)方式(shi)產(chan)生。在(zai)2015年，我(wo)們至少確定(ding)了網(wang)(wang)頁布(bu)局(ju)(ju)發展的(de)四個趨勢，你可(ke)以(yi)從這些布(bu)局(ju)(ju)中找到好(hao)的(de)靈感，作為(wei)你網(wang)(wang)頁設(she)計的(de)起點(dian)。

1. 橫向(xiang)分割屏幕的網頁布(bu)局

橫(heng)向(xiang)(xiang)分(fen)割屏幕(mu)是(shi)指在網頁設計(ji)時，將屏幕(mu)分(fen)為左右兩個部分(fen)，這兩個部分(fen)的(de)寬高通常是(shi)相同的(de)，且(qie)保持垂直橫(heng)向(xiang)(xiang)排列。這么做的(de)主(zhu)要(yao)原因有兩點：

(1) 同(tong)時(shi)顯示兩(liang)個重要(yao)的(de)特征。這種(zhong)情況經常(chang)發(fa)生在(zai)企業推廣產(chan)品(pin)或服務(wu)時(shi)，有兩(liang)個同(tong)樣重要(yao)的(de)賣(mai)點或特性需(xu)要(yao)展示在(zai)頁面上。例(li)如，出(chu)版系統，即(ji)有利于出(chu)版商(shang)，又有利于讀者。通過這種(zhong)網頁布局(ju)方式，設計(ji)師不需(xu)要(yao)區分主要(yao)或次要(yao)元素，而訪(fang)客會自(zi)覺(jue)關注什么對自(zi)己更重要(yao)。

(2) 表達一(yi)個(ge)二元(yuan)性的(de)想法(fa)。將屏幕一(yi)分為(wei)二，在設計上可以(yi)創建兩個(ge)互不(bu)影響的(de)空間，可以(yi)專注于不(bu)同(tong)的(de)主(zhu)題(ti)，甚(shen)至(zhi)兩個(ge)不(bu)同(tong)的(de)產品。有時這(zhe)種網(wang)頁布局方式還可以(yi)突出顯(xian)示兩個(ge)互為(wei)相反的(de)特征。

我們來看(kan) Desktime 首頁(ye)的網頁(ye)布局，他們將頁(ye)面分(fen)為(wei)左右(you)兩部分(fen)，左側用(yong)于滿足有(you)空閑辦公室(shi)(shi)要(yao)出(chu)租(zu)的用(yong)戶(hu)，右(you)側滿足還沒有(you)自己的辦公室(shi)(shi)，要(yao)尋租(zu)的用(yong)戶(hu)。這(zhe)將網站上(shang)兩個(ge)同樣重要(yao)的功能(neng)有(you)效地展示了出(chu)來。

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

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

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

從 FOREWORD 的主頁上可以清(qing)晰地看到，他(ta)們將總部設(she)(she)在巴黎和(he)紐(niu)約，頁面上沒有圖(tu)形圖(tu)像設(she)(she)計(ji)，只通過開(kai)放(fang)式(shi)的字體和(he)顏(yan)色(se)的設(she)(she)計(ji)來告訴用戶他(ta)們該關注什么。

當然，極簡主義的網頁布(bu)局并(bing)不是完全不能使(shi)用圖像(xiang)，例(li)如我們也可以添加(jia)一(yi)張大(da)背景圖，來(lai)達(da)到(dao)視(shi)覺(jue)沖(chong)擊(ji)的效果。這(zhe)類(lei)似于我們前面分(fen)享的《大(da)道至簡！欣賞18款極簡設計風(feng)格的網站》一(yi)文。

3. 塊(kuai)狀網格的網頁布局

我們必(bi)須在這里指出，網格結構的布(bu)局方式非常容(rong)易創(chuang)建響應式網站(zhan)。這種網頁(ye)布(bu)局中的每(mei)個“塊”將包含一(yi)(yi)個特(te)定(ding)的內容(rong)，它可(ke)能是(shi)一(yi)(yi)個標題、一(yi)(yi)個圖像或一(yi)(yi)行文(wen)本。

每個(ge)“塊(kuai)”的尺(chi)寸是統一(yi)的，且可(ke)以靈活改變(bian)寬高以適應各種(zhong)大(da)小的屏(ping)幕。這使得“網格布(bu)局(ju)”成為一(yi)種(zhong)非常通用(yong)的網頁布(bu)局(ju)模式，它可(ke)以有效(xiao)地用(yong)于PC網站或移動應用(yong)程序(xu)。

GREATS 是一(yi)家位于紐約的(de)男鞋銷(xiao)售企業，他們的(de)產品銷(xiao)售主(zhu)要通過網(wang)站。GREATS 的(de)網(wang)站選擇(ze)了網(wang)格(ge)布局方(fang)式，在主(zhu)頁(ye)堆疊模塊(kuai)，每個(ge)模塊(kuai)顯(xian)示一(yi)雙鞋子(zi)的(de)圖像。

4. 單一(yi)屏幕的網頁布局

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

然而，這種趨(qu)勢的一(yi)個重(zhong)要特征(zheng)是(shi)(shi)——沒有網頁滾(gun)動(dong)條。換句(ju)話說，這些網站總是(shi)(shi)采取(qu)單(dan)一(yi)屏幕，也就是(shi)(shi)一(yi)屏以內的網頁布局方式。

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

Shamballa Jewels 是(shi)一家經營(ying)珠寶首飾的公(gong)司，該網站用一個(ge)獨特(te)頁面來展示(shi)他(ta)們的產品，這個(ge)頁面沒有滾動(dong)條，且完全充(chong)滿整(zheng)個(ge)屏(ping)幕。

該網站一個吸引人的地(di)方是，背景總是在不停(ting)地(di)切換(huan)，實際上，他(ta)們也同時使用了“橫向分(fen)割屏幕”的網頁布局手法，來配(pei)合圖像的交(jiao)替效果(guo)。