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

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

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

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

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

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

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

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

先看第一張圖片

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

第二張圖片

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

第三張圖片

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

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

第四張圖片

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

第五張圖片

第六張圖片

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

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

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

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