網(wǎng)頁設(shè)計(jì)的分割布局秘密

 藍(lán)藍(lán)設(shè)計(jì)：隨著互聯(lián)網(wǎng)的高速發(fā)展，各種各樣的網(wǎng)站界面設(shè)計(jì)層出不窮。在這樣的環(huán)境下，用戶是如何在浩瀚的互聯(lián)網(wǎng)海洋中快速挑選網(wǎng)站設(shè)計(jì)的呢？網(wǎng)頁設(shè)計(jì)師又如何能讓自己的網(wǎng)站設(shè)計(jì)在用戶匆匆一瞥后就迅速吸引到他們進(jìn)一步注意的呢？本文作者向用戶介紹了一種簡單的頁面布局方式——分割布局，這種布局方式試圖讓用戶初覽頁面時(shí)感受到一種友好的瀏覽體驗(yàn)。作為網(wǎng)頁設(shè)計(jì)師，我們可以參考的ui設(shè)計(jì)范例和布局原則有很多，比如說：柵格化、縱向一致性、F型布局、Z型布局、三分法則、黃金分割法等等。注重這些原則將會(huì)給你的設(shè)計(jì)帶來視覺吸引力和功能性——現(xiàn)在讓我們來看一種簡單的方式，將頁面兩等分。

雖然在一開始聽起來有點(diǎn)傻，但是這種基本布局確實(shí)能起到非常好的效果。當(dāng)我們通覽一個(gè)頁面時(shí)，我們的視線常常會(huì)沿著一個(gè)“之”字形移動(dòng)。而如果用戶的視線是沿著一條水平線移動(dòng)時(shí)——就像在Z型布局里一樣，那么他/她就會(huì)很專注（或者說嘗試著專注）。但由于初來你網(wǎng)站90%的用戶都不會(huì)很仔細(xì)的去關(guān)注你的頁面，因此讓你的設(shè)計(jì)“瀏覽起來友好”肯定會(huì)獲得不錯(cuò)回報(bào)哦！

眼動(dòng)和“之”字形

從雅虎的眼動(dòng)追蹤研究可以發(fā)現(xiàn)：

·人們通過掃視頁面的主要部分去判定這是個(gè)什么網(wǎng)站以及他們是否想在這多呆一會(huì)。
·用戶僅僅在三秒內(nèi)就會(huì)對頁面做出決定
·如果用戶決定留在頁面，他們會(huì)最關(guān)注屏幕頂部的內(nèi)容。

網(wǎng)站的用戶總是很匆忙，他們有其它的事情要做，你不要指望他們會(huì)停下來去欣賞你網(wǎng)站的美學(xué)。雖然良好的美學(xué)設(shè)計(jì)是非常重要的，但是這并不能完全激發(fā)訪問者去采取行動(dòng)——去點(diǎn)擊“立即購買”或者“了解更多”按鈕。

我們不能去埋怨這些用戶。永遠(yuǎn)記住，當(dāng)你想查詢什么東西時(shí)?你會(huì)急著打開谷歌的第一個(gè)搜索結(jié)果并且火速看完，或者更確切的說，是粗略的瀏覽整個(gè)頁面。大多數(shù)時(shí)間，你甚至是毫不留意就將鼠標(biāo)滾動(dòng)到了頁面底部。經(jīng)過這個(gè)階段后，如果你認(rèn)為這個(gè)頁面值得你花時(shí)間，你就會(huì)又回到頁面頂端并且著實(shí)花精力去閱讀和關(guān)注。

那么，用戶初始瀏覽的目的究竟是什么呢？就是在你最初掃視頁面時(shí)，捕捉到盡可能多的信息。如果我們以某種方式“制定”這種瀏覽模式，應(yīng)該就能夠得到更多訪問者的關(guān)注。通過觀察大量網(wǎng)站的熱圖，我得出了一個(gè)共通的趨勢。

在上圖中你會(huì)發(fā)現(xiàn)，你毫不費(fèi)勁就能看到那些紅點(diǎn)。奇怪的是，就經(jīng)驗(yàn)看來，相比于斜線而言，我們的視線能更輕易的跟隨水平線移動(dòng)——因?yàn)槲覀兌际茄刂本�閱讀。但請注意，我討論的是在初始瀏覽階段，并不是你關(guān)注網(wǎng)站每個(gè)細(xì)節(jié)時(shí)的階段。

每當(dāng)你不是很專注時(shí)，你的視覺流向很自然的就會(huì)呈現(xiàn)為“之”字形。除非有對比度更高或者更重要的元素“召喚”你，不然你的視線就將會(huì)遵循上圖的模式。你還會(huì)發(fā)現(xiàn)，這種模式看起來和F型布局非常相似，并且用戶會(huì)在紅色端點(diǎn)有短暫的停留。

你的大腦會(huì)在這些“暫停點(diǎn)”生成快照。在之字形布局里，在這些“暫停點(diǎn)”布置一些包含重要信息的元素，用戶的大腦就會(huì)很自然的吸收更多的細(xì)節(jié)，并將這些作為獨(dú)立實(shí)體存在的“之”形端點(diǎn)聯(lián)結(jié)起來。

“設(shè)計(jì)不僅僅是它的外觀怎樣或者感覺如何，而是它是如何工作的。——史蒂夫·喬布斯”

舉例來說，你可以利用半分割布局的這一特點(diǎn)去有效的布置你作品集的預(yù)覽、你的產(chǎn)品或服務(wù)的重要特性，這樣很快就能引起網(wǎng)站訪問者的注意。最終會(huì)激勵(lì)用戶在您的網(wǎng)站停留更久，并說服他們采取行動(dòng)。這樣的話，結(jié)果會(huì)是怎樣呢?將給您的網(wǎng)站帶來更高的轉(zhuǎn)換率，同時(shí)給訪問者帶來更好的用戶體驗(yàn)。

將分割布局應(yīng)用到設(shè)計(jì)中

讓你的設(shè)計(jì)和布局兼容“之”字形非常簡單。實(shí)際上，這和將你的頁面分為兩等份一樣簡單！兩等分的效果很好，因?yàn)?ldquo;之”字形的端點(diǎn)或多或少能對齊到這兩等分的中心。疊加使用，它們能很好的相互呼應(yīng)。將重要元素放置在你網(wǎng)頁中“之”字形的紅色端點(diǎn)處，這就是分割布局或者說1/2布局包含的基本理念。

最近，我致力于設(shè)計(jì)一個(gè)“即將來臨”的登陸頁面。我嘗試了多種布局，但是沒有一種效果讓我滿意。我?guī)缀踉嚵嗣恳环N——比如柵格化，黃金分割比，F(xiàn)型布局等。但是僅當(dāng)我將頁面兩等分時(shí)，那一刻有一種強(qiáng)烈的“我找到了！”的感覺。解決的辦法竟如此簡單！它看起來優(yōu)雅而整潔，并且提醒了我一個(gè)重要的事實(shí)：簡單不一定是壞事。你看到微軟的新標(biāo)志了嗎？