每年都會(huì)有一些新的網(wǎng)頁(yè)布局創(chuàng)意產(chǎn)生，而使一些較老的布局方案淘汰。毫無(wú)疑問，2015年的網(wǎng)頁(yè)布局是要響應(yīng)各種終端設(shè)備。實(shí)際上，這種趨勢(shì)早在2010年就在國(guó)外開始蔓延，我們可以預(yù)見的是，它在未來(lái)仍將是網(wǎng)頁(yè)布局的核心方案。

當(dāng)然，這并不意味著網(wǎng)頁(yè)布局必須朝著同一個(gè)標(biāo)準(zhǔn)化結(jié)構(gòu)進(jìn)行設(shè)計(jì)，相反，可能會(huì)有更多、更靈活的布局方式產(chǎn)生。在2015年，我們至少確定了網(wǎng)頁(yè)布局發(fā)展的四個(gè)趨勢(shì)，你可以從這些布局中找到最好的靈感，作為你網(wǎng)頁(yè)設(shè)計(jì)的起點(diǎn)。

1. 橫向分割屏幕的網(wǎng)頁(yè)布局

橫向分割屏幕是指在網(wǎng)頁(yè)設(shè)計(jì)時(shí)，將屏幕分為左右兩個(gè)部分，這兩個(gè)部分的寬高通常是相同的，且保持垂直橫向排列。這么做的主要原因有兩點(diǎn)：

(1) 同時(shí)顯示兩個(gè)重要的特征。這種情況經(jīng)常發(fā)生在企業(yè)推廣產(chǎn)品或服務(wù)時(shí)，有兩個(gè)同樣重要的賣點(diǎn)或特性需要展示在頁(yè)面上。例如，出版系統(tǒng)，即有利于出版商，又有利于讀者。通過(guò)這種網(wǎng)頁(yè)布局方式，設(shè)計(jì)師不需要區(qū)分主要或次要元素，而訪客會(huì)自覺關(guān)注什么對(duì)自己更重要。

(2) 表達(dá)一個(gè)二元性的想法。將屏幕一分為二，在設(shè)計(jì)上可以創(chuàng)建兩個(gè)互不影響的空間，可以專注于不同的主題，甚至兩個(gè)不同的產(chǎn)品。有時(shí)這種網(wǎng)頁(yè)布局方式還可以突出顯示兩個(gè)互為相反的特征。

我們來(lái)看 Desktime 首頁(yè)的網(wǎng)頁(yè)布局，他們將頁(yè)面分為左右兩部分，左側(cè)用于滿足有空閑辦公室要出租的用戶，右側(cè)滿足還沒有自己的辦公室，要尋租的用戶。這將網(wǎng)站上兩個(gè)同樣重要的功能有效地展示了出來(lái)。

Eight&Four，是一家數(shù)字營(yíng)銷公司，他們也將主頁(yè)一份為二，網(wǎng)頁(yè)設(shè)計(jì)基于白色和一個(gè)平面顏色的對(duì)比方式。這里用來(lái)表達(dá)兩個(gè)不同的特性，在頁(yè)面上分別展示。

2. 自由盒子的網(wǎng)頁(yè)布局 ( Container-Free )

事實(shí)上，這是一種極簡(jiǎn)主義的網(wǎng)頁(yè)布局方式，它的布局理念是盡可能地消除圖形結(jié)構(gòu)，取而代之的是更加自由和開放的風(fēng)格。它常常使用簡(jiǎn)單的線性結(jié)構(gòu)，甚至只采用個(gè)性字體的文字進(jìn)行布局。

從 FOREWORD 的主頁(yè)上可以清晰地看到，他們將總部設(shè)在巴黎和紐約，頁(yè)面上沒有任何圖形圖像設(shè)計(jì)，只通過(guò)開放式的字體和顏色的設(shè)計(jì)來(lái)告訴用戶他們?cè)撽P(guān)注什么。

當(dāng)然，極簡(jiǎn)主義的網(wǎng)頁(yè)布局并不是完全不能使用圖像，例如我們也可以添加一張大背景圖，來(lái)達(dá)到視覺沖擊的效果。這類似于我們前面分享的《大道至簡(jiǎn)！欣賞18款極簡(jiǎn)設(shè)計(jì)風(fēng)格的網(wǎng)站》一文。

3. 塊狀網(wǎng)格的網(wǎng)頁(yè)布局

我們必須在這里指出，網(wǎng)格結(jié)構(gòu)的布局方式非常容易創(chuàng)建響應(yīng)式網(wǎng)站。這種網(wǎng)頁(yè)布局中的每個(gè)“塊”將包含一個(gè)特定的內(nèi)容，它可能是一個(gè)標(biāo)題、一個(gè)圖像或一行文本。

每個(gè)“塊”的尺寸是統(tǒng)一的，且可以靈活改變寬高以適應(yīng)各種大小的屏幕。這使得“網(wǎng)格布局”成為一種非常通用的網(wǎng)頁(yè)布局模式，它可以有效地用于PC網(wǎng)站或移動(dòng)應(yīng)用程序。

GREATS 是一家位于紐約的男鞋銷售企業(yè)，他們的產(chǎn)品銷售主要通過(guò)網(wǎng)站。GREATS 的網(wǎng)站選擇了網(wǎng)格布局方式，在主頁(yè)堆疊模塊，每個(gè)模塊顯示一雙鞋子的圖像。

4. 單一屏幕的網(wǎng)頁(yè)布局

這種設(shè)計(jì)趨勢(shì)我們?cè)谶^(guò)去已經(jīng)看到過(guò)很多了，即網(wǎng)站是基于一個(gè)大的背景圖像進(jìn)行設(shè)計(jì)的，并且總能適應(yīng)各種終端屏幕。通常，這類網(wǎng)站非常簡(jiǎn)單，他們傾向于簡(jiǎn)約的設(shè)計(jì)感覺。

然而，這種趨勢(shì)的一個(gè)重要特征是——沒有網(wǎng)頁(yè)滾動(dòng)條。換句話說(shuō)，這些網(wǎng)站總是采取單一屏幕，也就是一屏以內(nèi)的網(wǎng)頁(yè)布局方式。

因?yàn)榭捎每臻g是有限的，這要求設(shè)計(jì)師必須有一個(gè)清晰的內(nèi)容布局方案，而且要特別注意屏幕高度的相關(guān)信息。大多數(shù)情況下，圖像會(huì)成為主導(dǎo)設(shè)計(jì)，利用其展示產(chǎn)品或喚起訪客的情感。

Shamballa Jewels 是一家經(jīng)營(yíng)珠寶首飾的公司，該網(wǎng)站用一個(gè)獨(dú)特頁(yè)面來(lái)展示他們的產(chǎn)品，這個(gè)頁(yè)面沒有滾動(dòng)條，且完全充滿整個(gè)屏幕。

該網(wǎng)站一個(gè)吸引人的地方是，背景總是在不停地切換，實(shí)際上，他們也同時(shí)使用了“橫向分割屏幕”的網(wǎng)頁(yè)布局手法，來(lái)配合圖像的交替效果。