視覺焦點(diǎn)與網(wǎng)頁布局設(shè)計(jì)的關(guān)系

我一貫認(rèn)為用戶體驗(yàn)不是產(chǎn)品的設(shè)計(jì)讓客戶滿意，而是讓客戶在舒服的狀態(tài)下按我們希望的步驟前進(jìn)，一個(gè)好的產(chǎn)品設(shè)計(jì)師會(huì)為他的客戶設(shè)計(jì)一個(gè)隱形的行為軌跡路線。但首先還是要滿足客戶舒服的感覺，對(duì)于網(wǎng)站來說，客戶的器官體驗(yàn)主要來自三處－－眼、手、耳。其中眼是重中之重，讓它感覺舒服了，客戶最起碼就滿意50%以上了。

以前在分析7個(gè)B2C網(wǎng)站的提過界面的寬度對(duì)用戶的瀏覽會(huì)造成障礙，原因就是視覺焦點(diǎn)造成成的。

這里有一張圖，大家將圖片放在屏幕中心顯示，然后看最下面的那一個(gè)藍(lán)色娃娃，現(xiàn)在有一個(gè)問題，能看清楚整個(gè)圖片有幾個(gè)藍(lán)色娃娃嗎？

答案是不能，因?yàn)橐暰�集中在一點(diǎn)，眼球集中點(diǎn)會(huì)以圓的形狀向外逐漸模糊，只有盯著看的最中心點(diǎn)是清楚，這個(gè)就是視覺焦點(diǎn)。

視覺焦點(diǎn)的概念最初來源于攝影，視覺焦點(diǎn)就是在有限的視線范圍內(nèi)快速捕捉你自己認(rèn)為吸引你的區(qū)域。反映在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中，就是指設(shè)計(jì)的頁面上最吸引人注意的地方，視線上集中交匯的地方，這個(gè)位置就叫焦點(diǎn)。在網(wǎng)頁設(shè)計(jì)中，引導(dǎo)用戶將關(guān)注點(diǎn)集中在你想讓他關(guān)注的區(qū)域，這個(gè)也是我之前所說的隱形的行為軌跡路線。

視覺焦點(diǎn)用在實(shí)際工作中是如何體現(xiàn)的呢？

注：下面所有的例子在體會(huì)時(shí)，請(qǐng)都以放大單頁面，并將圖片放在屏幕中心顯示

先看第一張圖片

這是一個(gè)全文字的PPT，大家請(qǐng)忘記上一篇日志中說的PPT的規(guī)則，呵呵，我們這里說視覺焦點(diǎn)。這是一篇推廣文，乍看之下，一般人的第一反應(yīng)都是，整個(gè)屏幕一片模糊，不知從哪里開始看，不知道文章寫點(diǎn)什么，對(duì)象是什么，對(duì)自己有沒有用，這一系列問題同一時(shí)間迸發(fā)出來，頭開始痛了，然后大腦下達(dá)最后指令，不看了，什么東西，太累了，關(guān)窗口。

第二張圖片

我們?nèi)趸�信息干擾，將重點(diǎn)突出，可以很清楚看到整個(gè)推廣文的重點(diǎn)－－中國密度板門戶。視覺焦點(diǎn)會(huì)在不自覺中停留在“中國密度板門戶”幾個(gè)字上面。但相信到此為止，大腦對(duì)于閱讀整篇一看就知道不好玩，純廣告的文字仍有抗拒，我們的推廣目的仍沒有達(dá)到（這種推廣文我一般很少指望客戶能當(dāng)熱門小說來拜讀，我就指望客戶能在視線掃視停留的幾分之一秒內(nèi)，關(guān)鍵信息能到他的腦海里掃掃地）

第三張圖片

我們做編輯的，永遠(yuǎn)要記住讀者在閱讀文章的時(shí)候從來不是逐字逐句，而是習(xí)慣跳躍掃視，因此，我們一定要將關(guān)鍵信息高亮顯示出來更易于讀者把握重要信息。在這次的修改中我們將網(wǎng)址突出顯示，希望能勾引有興趣的客戶可以復(fù)制這個(gè)網(wǎng)址去網(wǎng)站看看。

這是比較簡單的視覺焦點(diǎn)利用。但讀者的視覺焦點(diǎn)并不是我們想的這么簡單和如一。
 

第四張圖片

雖然使用了和第三張一樣的技巧，對(duì)“中國密度板門戶”進(jìn)行了加粗高亮顯示，但大部分讀者的視覺焦點(diǎn)一般會(huì)停留在圖片下方的三串?dāng)?shù)字上面（有米有，有米有看數(shù)字，嘻嘻），這是因?yàn)槲覀兊拇竽X對(duì)簡單的很容易理解的東西更偏好，會(huì)自動(dòng)尋找自己最容易理解的內(nèi)容先閱讀。這就是很多調(diào)查說帶圖片的文章瀏覽度會(huì)高的原因，并不是圖片容易吸引用戶閱讀，而是圖片可以幫助用戶的大腦休息然后方便閱讀文字。

第五張圖片

第六張圖片

我們了解了視覺焦點(diǎn)，那視覺焦點(diǎn)和用戶體驗(yàn)有什么關(guān)系呢，我說過用戶體驗(yàn)的最初級(jí)的就是讓用戶感覺舒服。人們看屏幕時(shí)，最舒服的視覺停留位置在屏幕正中下方位置，這個(gè)位置的時(shí)候，人的眼球是微微往下，脖子也是微微向下，正是最放松的狀態(tài)。通過第五張圖和第六張圖比較，可以很明顯感覺到人的眼球會(huì)先捕捉不同顏色的字體，但看第五張圖時(shí)，人的眼球幾乎不用移動(dòng)就可以看到高亮文字，而看第六張圖時(shí)，人的眼球會(huì)有一個(gè)很明顯的下移動(dòng)作，如果這時(shí)再把眼球移到文章的第一行，會(huì)有一個(gè)疲勞和緊張的感覺，與眼球往下的舒馳的感覺不動(dòng)。

而在網(wǎng)頁布局設(shè)計(jì)中，視覺焦點(diǎn)是如何體現(xiàn)的呢？雖然很多報(bào)告說用戶瀏覽網(wǎng)站時(shí)視線注意力呈“F現(xiàn)象”，人們喜歡第一眼看左上角的內(nèi)容，其實(shí)都是從中間往上移動(dòng)到左上角，只是這個(gè)動(dòng)作比較自然時(shí)間也短，不容易讓人注意到。一般人們第一眼如圖所示粉色的位置

時(shí)下主流的電腦屏幕都較寬，但不代表我們設(shè)計(jì)的網(wǎng)頁也要跟著變寬，如果一行文字從屏幕的左邊到屏幕的右邊，用戶在閱讀時(shí)不止需要移動(dòng)眼球，甚者還需要移動(dòng)脖子，如果是圖片多的網(wǎng)站，還好，但如果是純文字的資訊網(wǎng)站那將是一場悲劇，并不是每一個(gè)網(wǎng)站都可以像卓越的�，F(xiàn)在的網(wǎng)頁設(shè)計(jì)寬度標(biāo)準(zhǔn)是960像素，這個(gè)數(shù)字雖然沒有兼顧到800*600的用戶，但對(duì)于主流分辨率上，正好將網(wǎng)站呈現(xiàn)在屏幕的正中并兩旁有留白，給人以不狹隘不擁擠的感覺。

我們要永遠(yuǎn)記住我們不是用戶的偶像，他們不會(huì)用探照燈從頭到尾如獲至寶般關(guān)注我們的作品，用戶習(xí)慣地是掃視和快速尋找頁面上一些能夠引導(dǎo)他理解內(nèi)容的關(guān)鍵點(diǎn)。Jakbo Nielsen的研究表明：一個(gè)頁面上的認(rèn)識(shí)負(fù)擔(dān)越重，導(dǎo)航和瀏覽就會(huì)越困難，用戶離開并尋找其他替代品的可能性就越大。減少認(rèn)識(shí)負(fù)擔(dān)從減低眼球運(yùn)動(dòng)開始。