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

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

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

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

答案是不能，因為視線集中在一點，眼球集中點會以圓的形狀向外逐漸模糊，只有盯著看的最中心點是清楚，這個就是視覺焦點。

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

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

注：下面所有的例子在體會時，請都以放大單頁面，并將圖片放在屏幕中心顯示

先看第一張圖片

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

第二張圖片

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

第三張圖片

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

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

第四張圖片

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

第五張圖片

第六張圖片

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

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

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

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