用眼球跟蹤改善網(wǎng)頁(yè)設(shè)計(jì)

你在看機(jī)器，機(jī)器也在看你。最近眼球跟蹤技術(shù)誕生了不少的應(yīng)用案例。比方說(shuō)，Intel 研發(fā) 3D 筆記本攝像頭，可以追蹤眼球讀懂情緒；上海琢視的純軟件眼球追蹤可支持用眼睛玩打飛機(jī)游戲等?，F(xiàn)在EyeQuant則利用先進(jìn)的神經(jīng)技術(shù)研究用戶眼球看網(wǎng)頁(yè)時(shí)的運(yùn)動(dòng)，從而生成設(shè)計(jì)元素和網(wǎng)頁(yè)區(qū)域的熱點(diǎn)圖（即用戶的注意力集中的區(qū)域），再研究如何改進(jìn)網(wǎng)頁(yè)設(shè)計(jì)。以下就是他們的發(fā)現(xiàn)。

Web設(shè)計(jì)應(yīng)該注意什么

眼球跟蹤技術(shù)的第一個(gè)發(fā)現(xiàn)是，Web 的 F 和 E 形模式布局設(shè)計(jì)（利用用戶大都最喜歡觀看左側(cè)屏幕的特點(diǎn)進(jìn)行布局）未必就是對(duì)的。只要內(nèi)容吸引眼球，不在 F 或 E 形模式區(qū)的地方一樣會(huì)受人關(guān)注。比方說(shuō)，高對(duì)比度、中心布置及排列整齊的內(nèi)容。實(shí)際上，Web設(shè)計(jì)時(shí)應(yīng)該更關(guān)注3W：網(wǎng)頁(yè)要說(shuō)什么（What），用戶為什么要關(guān)注（Why）以及接下來(lái)要去哪里（Where）。

某些Web設(shè)計(jì)的最佳實(shí)踐受挑戰(zhàn)

還有一些 Web 設(shè)計(jì)的最佳實(shí)踐受到了眼球跟蹤技術(shù)的挑戰(zhàn)。比方說(shuō)，傳統(tǒng)觀點(diǎn)認(rèn)為人總是會(huì)注意臉部。EyeQuant 在用眼球跟蹤技術(shù)研究了數(shù)千個(gè)不同網(wǎng)站后發(fā)現(xiàn)，臉部和注意力的確存在關(guān)系，但是人卻未必總是關(guān)注臉部。另一個(gè) Web 設(shè)計(jì)的觀點(diǎn)是要想讓文字突出，就得把字體放大。但研究發(fā)現(xiàn)，盡管有些頁(yè)面的字體很大卻被用戶無(wú)視。

關(guān)于圖庫(kù)的選擇與使用

要想圖片引人注目，最重要的是要有高反差—不僅圖片本身要有高反差，而且相對(duì)于頁(yè)面的其他內(nèi)容也要形成強(qiáng)烈對(duì)比。這不光是顏色的對(duì)比，在亮度上也要有反差。圖片需放在上半版面，位于中間或者坐上位置。而且不要放得太凌亂，應(yīng)該給頁(yè)面留點(diǎn)空白的空間。

像旋轉(zhuǎn)橫幅和幻燈片這樣的重圖像元素有效性如何？

運(yùn)動(dòng)的確可以在開始時(shí)吸引注意。換句話說(shuō)，也可能造成干擾，而這些元素往往只跟一部分瀏覽網(wǎng)頁(yè)的用戶相關(guān)，所以對(duì)于商業(yè)網(wǎng)站來(lái)說(shuō)，這些元素反而會(huì)對(duì)轉(zhuǎn)化率產(chǎn)生負(fù)面影響。

像蘋果用的那種日漸流行的大英雄區(qū)域是否有效？

所謂的大英雄區(qū)（Big hero area）是指大幅圖像伴隨少量文字的布局，蘋果尤其擅長(zhǎng)使用。如圖像是相關(guān)的話，大英雄區(qū)極其有效，否則的話就會(huì)造成干擾。如果采用圖庫(kù)的圖片的話，必須挑選可支持希望傳遞信息的圖片，而且不要過(guò)多分散對(duì)頁(yè)面其他關(guān)鍵內(nèi)容的注意力。

長(zhǎng)幅滾動(dòng)頁(yè)面還是讓重要元素保持在上半版面？

部分長(zhǎng)幅面的滾動(dòng)頁(yè)面的確非常成功，而且用戶對(duì)此似乎也越來(lái)越習(xí)慣。但是數(shù)據(jù)表明一般用戶仍把大部分時(shí)間花在上半版面。

鏈接按鈕應(yīng)該如何設(shè)計(jì)？

人是對(duì)比生物，所以按鈕與背景色之間，按鈕文字和按鈕之間都必須形成鮮明對(duì)照。

用戶會(huì)看哪里？

作為設(shè)計(jì)師應(yīng)該有能力影響用戶看什么地方，而不應(yīng)該成為某個(gè)布局或模式的奴隸。元素在頁(yè)面的布置只是影響用戶關(guān)注的其中一個(gè)因素。只要理解了注意力的建構(gòu)要素，你想讓他們看哪里他們就會(huì)看哪里。哪些是影響注意力的要素呢？這四個(gè)：對(duì)比，位置，大小和空白區(qū)域。