亚洲国产精品久久精品成人_国产步兵社区视频在线观看_国产不卡免费视频_午夜私人影院免费体验区

一個(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ǎng)站界面的三個(gè)功能。

引導(dǎo)用戶(hù)

網(wǎng)站對(duì)用戶(hù)的引導(dǎo)，就像暗中一只無(wú)形的手，會(huì)指引用戶(hù)通過(guò)點(diǎn)擊等操作按鈕瀏覽網(wǎng)站，了解信息，而不會(huì)帶給用戶(hù)壓迫感。比如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)簽分類(lèi)的鏈接。

Abduzeedo

建立情感聯(lián)系

人們?nèi)ゲ蛷d用餐，其實(shí)不會(huì)只把餐廳當(dāng)做一個(gè)解決食欲的地方。他們會(huì)關(guān)注到餐廳的場(chǎng)地、氛圍、菜式甚至是其中的一些特別的情調(diào)，他們?cè)谶@里交談、交易。同樣道理，用戶(hù)會(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è)物體的特別注意力，我們這里可以稱(chēng)之為焦點(diǎn)。大部分的人都會(huì)被頁(yè)面中的焦點(diǎn)所吸引。

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

F模式

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

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

用戶(hù)極少逐字閱讀文字。

每個(gè)段落的開(kāi)始兩個(gè)字最為重要，這將決定內(nèi)容是否能留住用戶(hù)。

初始段落，副標(biāo)題和要點(diǎn)都要保持醒目。

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

在所有瀏覽模式中，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í)慣，用戶(hù)首先關(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ù)雜的話(huà)，那么用這個(gè)模式，效果就會(huì)稍差。當(dāng)然，這些都不是絕對(duì)的。當(dāng)Z模式簡(jiǎn)化布局，就可以增加轉(zhuǎn)化率，下面這些是可以去簡(jiǎn)化的地方:

背景——運(yùn)用獨(dú)立的背景能將用戶(hù)的視線范圍鎖定在你的框架內(nèi)容里。

要點(diǎn)1——你的LOGO放置的首要位置。

要點(diǎn)2——增加一個(gè)顏色鮮明的輔助操作指令，幫助用戶(hù)遵循Z路線瀏覽模式。

頁(yè)面中心——頁(yè)面的中心獨(dú)立于頁(yè)頭和頁(yè)尾的部分，引導(dǎo)用戶(hù)Z路線瀏覽視線。

要點(diǎn)3——增加可以從正在瀏覽的位置移動(dòng)去到底部的圖標(biāo)，也就是可以隨時(shí)抵達(dá)最終目標(biāo)。

要點(diǎn)4——Z模式最底部的水平線上的內(nèi)容，這將是提供給用戶(hù)首要操作的最佳位置。

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

你可以在整個(gè)頁(yè)面不斷重復(fù)Z模式的規(guī)律，就像你在下圖中看到的那樣，一開(kāi)始這個(gè)頁(yè)面就有一個(gè)注冊(cè)按鈕，通過(guò)水平位置的瀏覽，用戶(hù)已經(jīng)獲悉了這一信息，下拉會(huì)出現(xiàn)產(chǎn)品的賣(mài)點(diǎn)，這些賣(mài)點(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)鍵。