網(wǎng)頁(yè)設(shè)計(jì)！聊聊兩種最常見(jiàn)的網(wǎng)頁(yè)布局設(shè)計(jì)模式

從今天開始，我們也來(lái)聊聊UI設(shè)計(jì)。當(dāng)我們談?wù)揢I設(shè)計(jì)時(shí)，其實(shí)我的知識(shí)貢獻(xiàn)范圍也只能是WEB端，當(dāng)然WEB端和軟件端大同小異。但不管是設(shè)計(jì)網(wǎng)頁(yè)界面還是軟件界面，作為設(shè)計(jì)師，那就絕對(duì)不會(huì)否認(rèn)這一點(diǎn)：比例、顏色、大小等微妙的元素間的平衡不是一項(xiàng)輕松的工作。

網(wǎng)頁(yè)UI設(shè)計(jì)也是一樣，一個(gè)網(wǎng)站就像和其他傳統(tǒng)的藝術(shù)創(chuàng)作一樣遵循同樣的規(guī)律，最終達(dá)到視覺(jué)的藝術(shù)效果。這是美學(xué)的范疇，同時(shí)隱含著現(xiàn)代商業(yè)的法則。一個(gè)優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)必定是讓人輕松又足夠吸引的。

視覺(jué)的創(chuàng)作組合

讓我們先談?wù)劊W(wǎng)站界面的三個(gè)功能。

引導(dǎo)用戶

網(wǎng)站對(duì)用戶的引導(dǎo)，就像暗中一只無(wú)形的手，會(huì)指引用戶通過(guò)點(diǎn)擊等操作按鈕瀏覽網(wǎng)站，了解信息，而不會(huì)帶給用戶壓迫感。比如Square這個(gè)網(wǎng)站，當(dāng)你不斷下拉的時(shí)候，會(huì)出現(xiàn)相應(yīng)的文字提示你接下來(lái)繼續(xù)到哪里。

Squareup

呈現(xiàn)內(nèi)容間的關(guān)系

按照一定的布局去展示網(wǎng)站的主次內(nèi)容優(yōu)先級(jí)，比如abduzeedo這個(gè)網(wǎng)站，就將主推的內(nèi)容放在了最大的頂部三個(gè)卡片展示上，其他的普通內(nèi)容則在下方以列表的方式展示，底部則是一些標(biāo)簽分類的鏈接。

Abduzeedo

建立情感聯(lián)系

人們?nèi)ゲ蛷d用餐，其實(shí)不會(huì)只把餐廳當(dāng)做一個(gè)解決食欲的地方。他們會(huì)關(guān)注到餐廳的場(chǎng)地、氛圍、菜式甚至是其中的一些特別的情調(diào)，他們?cè)谶@里交談、交易。同樣道理，用戶會(huì)因?yàn)楹湍愕木W(wǎng)站內(nèi)容產(chǎn)生的情感聯(lián)系而接受網(wǎng)頁(yè)界面或交互的小小瑕疵。

瀏覽模式：人眼焦點(diǎn)預(yù)測(cè)

就像你的眼睛會(huì)更快關(guān)注到快速移動(dòng)的物體，或當(dāng)你在街邊被高冷美好的模特吸引一樣。人眼會(huì)在看這一行為中自動(dòng)啟發(fā)對(duì)眼界中出現(xiàn)的某個(gè)物體的特別注意力，我們這里可以稱之為焦點(diǎn)。大部分的人都會(huì)被頁(yè)面中的焦點(diǎn)所吸引。

例如一篇文章的展示，也會(huì)遵循相同的瀏覽模式。99Designs的設(shè)計(jì)作者Alex就提到了兩種主要的瀏覽模式。

F模式

這主要在一些以文字為主的網(wǎng)站出現(xiàn)，例如博客。F模式就是指，用戶通常會(huì)沿著左側(cè)垂直瀏覽而下，先去尋找文章中每個(gè)段落開頭的興趣點(diǎn)，這時(shí)，如果用戶發(fā)現(xiàn)了他喜歡的，他就會(huì)從這里開始水平線方向的閱讀。最終結(jié)果就是用戶的視線呈F型或者E型進(jìn)行瀏覽。

The Nielsen Norman機(jī)構(gòu)曾對(duì)232名用戶對(duì)上千個(gè)網(wǎng)站的瀏覽習(xí)慣進(jìn)行觀察，總結(jié)出F模式的特點(diǎn)：

用戶極少逐字閱讀文字。每個(gè)段落的開始兩個(gè)字最為重要，這將決定內(nèi)容是否能留住用戶。初始段落，副標(biāo)題和要點(diǎn)都要保持醒目。

下圖里的頁(yè)面可以看到，重要的內(nèi)容很清晰的展示出來(lái)，并且不會(huì)讓用戶花很多時(shí)間去瀏覽，而次要的內(nèi)容也能快速盡收眼底。F模式對(duì)于那些嵌入廣告的網(wǎng)站也是極為有用的，即使有了廣告，也不會(huì)影響到內(nèi)容。只要記住，內(nèi)容為王，導(dǎo)航可以讓用戶更深入地瀏覽下去。

在所有瀏覽模式中，F(xiàn)模式就是一個(gè)引導(dǎo)路線圖，而不僅僅是一個(gè)頁(yè)面。因?yàn)�，F(xiàn)模式的網(wǎng)站除了頂部展示區(qū)外，其他的內(nèi)容會(huì)顯得更平淡。就像下圖所示，頂部1000像素后，網(wǎng)站就在水平方向加入了一些卡片式的內(nèi)容組件，讓網(wǎng)頁(yè)內(nèi)容更有趣。

Z模式

Z模式的瀏覽模式在于網(wǎng)頁(yè)內(nèi)容主要不是文字的頁(yè)面。不論是否因?yàn)檫@里有個(gè)菜單欄，還是就僅僅因?yàn)閺淖蟮接易陨隙碌拈喿x習(xí)慣，用戶首先關(guān)注的頁(yè)頭水平方向上的內(nèi)容。當(dāng)視線抵達(dá)底部時(shí)，又遵循著從左到右的習(xí)慣模式，重復(fù)再水平掃視頁(yè)尾的最底部的內(nèi)容。

Z模式幾乎可以適用到任何的網(wǎng)頁(yè)交互，Z模式的優(yōu)點(diǎn)就是簡(jiǎn)單。如果你的網(wǎng)站內(nèi)容很多并且很復(fù)雜的話，那么用這個(gè)模式，效果就會(huì)稍差。當(dāng)然，這些都不是絕對(duì)的。當(dāng)Z模式簡(jiǎn)化布局，就可以增加轉(zhuǎn)化率，下面這些是可以去簡(jiǎn)化的地方:

背景——運(yùn)用獨(dú)立的背景能將用戶的視線范圍鎖定在你的框架內(nèi)容里。要點(diǎn)1——你的LOGO放置的首要位置。要點(diǎn)2——增加一個(gè)顏色鮮明的輔助操作指令，幫助用戶遵循Z路線瀏覽模式。頁(yè)面中心——頁(yè)面的中心獨(dú)立于頁(yè)頭和頁(yè)尾的部分，引導(dǎo)用戶Z路線瀏覽視線。要點(diǎn)3——增加可以從正在瀏覽的位置移動(dòng)去到底部的圖標(biāo)，也就是可以隨時(shí)抵達(dá)最終目標(biāo)。要點(diǎn)4——Z模式最底部的水平線上的內(nèi)容，這將是提供給用戶首要操作的最佳位置。

預(yù)測(cè)用戶的視線將會(huì)占有極大的優(yōu)勢(shì)。在布局你的頁(yè)面元素時(shí)前，你就可以知道優(yōu)先的該擺放在什么位置。一旦你知道你想要用戶先看到什么，你就能可以通過(guò)視線的規(guī)律，將你的重點(diǎn)內(nèi)容放在用戶的“熱點(diǎn)”里。

你可以在整個(gè)頁(yè)面不斷重復(fù)Z模式的規(guī)律，就像你在下圖中看到的那樣，一開始這個(gè)頁(yè)面就有一個(gè)注冊(cè)按鈕，通過(guò)水平位置的瀏覽，用戶已經(jīng)獲悉了這一信息，下拉會(huì)出現(xiàn)產(chǎn)品的賣點(diǎn)，這些賣點(diǎn)的展示就是遵循重復(fù)著Z模式的最佳例子，直到最下方的支付選項(xiàng)就抵達(dá)了Z模式的最尾部那個(gè)水平線。

后記：

在設(shè)計(jì)中，我們所思考的總是比我們呈現(xiàn)出來(lái)的更多。不管怎樣，這兩種模式只是一個(gè)小結(jié)，實(shí)際創(chuàng)作過(guò)程全是花樣百出，絕不是兩種模式就能輕松完成的。但是，在規(guī)律面前，多多益善總不會(huì)錯(cuò)。靈活運(yùn)用規(guī)律才是關(guān)鍵。