設計網頁的(de)23條有用技巧(眼動追蹤[Eye-Tracking]與用戶體驗)

在(zài)網絡設計領域關于(yú)眼動追蹤[Eye-Tracking]的(de)研究十分火爆，但是(shì)如何把這(zhè)些研究結果轉變爲(wéi / wèi)具體可行的(de)設計來(lái)運作依舊是(shì)個(gè)難點。以(yǐ)下就(jiù)是(shì)一(yī / yì ／yí)些來(lái)自于(yú)Eye-Tracking研究結果的(de)竅門，可以(yǐ)爲(wéi / wèi)改進你的(de)網站設計提供些意見：

1、對比圖像，文字更具吸引力

與你所認爲(wéi / wèi)的(de)相反，在(zài)浏覽一(yī / yì ／yí)個(gè)網站的(de)時(shí)候，能夠直接吸引用戶目光的(de)并不(bù)是(shì)圖像。大(dà)多數通過偶然點擊進入你的(de)網站的(de)用戶，他(tā)們是(shì)來(lái)尋覓信息的(de)而(ér)不(bù)是(shì)圖像。因此，保證你的(de)網站設計凸現出(chū)最重要(yào / yāo)的(de)信息闆塊，這(zhè)才是(shì)設計的(de)首要(yào / yāo)原則。

2、眼球的(de)第一(yī / yì ／yí)運動聚焦于(yú)網頁的(de)左上(shàng)角

用戶浏覽網頁的(de)這(zhè)一(yī / yì ／yí)習慣應該在(zài)意料之(zhī)中，畢竟左上(shàng)部爲(wéi / wèi)主要(yào / yāo)操作中心這(zhè)一(yī / yì ／yí)點爲(wéi / wèi)大(dà)多數重要(yào / yāo)的(de)計算機應用程序的(de)設計所采用。在(zài)你構建網站考慮網站設計時(shí)，應該盡量保持這(zhè)一(yī / yì ／yí)格式。要(yào / yāo)知道(dào)，如果你希望保持個(gè)人(rén)特色，搭建一(yī / yì ／yí)個(gè)成功的(de)網站，你就(jiù)必須尊重用戶們的(de)習慣。

3、用戶浏覽網頁時(shí)，首先觀察網頁的(de)左上(shàng)部和(hé / huò)上(shàng)層部分，之(zhī)後再往下閱讀，浏覽右邊的(de)内容

用戶普遍的(de)浏覽方式呈現出(chū)“F”的(de)形狀。保證網站内容的(de)重要(yào / yāo)要(yào / yāo)素集中于(yú)這(zhè)些關鍵區域，以(yǐ)此确保讀者的(de)參與。在(zài)此放置頭條，副題，熱點以(yǐ)及重要(yào / yāo)文章，這(zhè)樣可以(yǐ)吸引到(dào)讀者進行閱讀。

4、讀者會忽視橫幅廣告

研究表明，讀者常忽視大(dà)部分的(de)橫幅廣告——盡管你以(yǐ)此維持網站生計——視線往往隻停留幾分之(zhī)一(yī / yì ／yí)秒。如果你想通過廣告掙錢，那麽必須創新你的(de)廣告位以(yǐ)及合理配置網站廣告形式。

5、花哨的(de)字體和(hé / huò)格式被忽視

爲(wéi / wèi)什麽呢？那是(shì)因爲(wéi / wèi)用戶會認爲(wéi / wèi)這(zhè)些是(shì)廣告，并非他(tā)們所需要(yào / yāo)的(de)信息。事實上(shàng)，研究表明用戶很難在(zài)充滿大(dà)量顔色的(de)花哨字體格式裏尋找到(dào)所需的(de)信息，因爲(wéi / wèi)視覺線索告訴他(tā)們把這(zhè)些忽略吧。保持網站的(de)清爽，不(bù)要(yào / yāo)因爲(wéi / wèi)華而(ér)不(bù)實的(de)表面，讓重要(yào / yāo)的(de)信息被忽略。

6、用數詞來(lái)代替數字

如果使用數詞取代數字的(de)羅列，讀者會發現在(zài)你的(de)網站可以(yǐ)很容易地(dì / de)發現真實的(de)資料。要(yào / yāo)知道(dào)，你是(shì)寫給那些将第一(yī / yì ／yí)次浏覽你的(de)網站的(de)讀者，所以(yǐ)，讓他(tā)們容易發現他(tā)們所需的(de)信息，讓他(tā)們感興趣。

7、字體大(dà)小影響浏覽行爲(wéi / wèi)

想改變人(rén)們對你的(de)網頁的(de)看法嗎？改變網頁字體的(de)大(dà)小。大(dà)的(de)字體刺激浏覽，而(ér)小一(yī / yì ／yí)些的(de)字體則提高焦點閱讀量。根據你的(de)需要(yào / yāo)，合理配置兩者的(de)比例。

8、遇到(dào)感興趣的(de)内容，用戶僅會多看一(yī / yì ／yí)眼副标題

不(bù)要(yào / yāo)過分堅持副标題固定的(de)格式——保證他(tā)們的(de)相關性和(hé / huò)興趣。你也(yě)可以(yǐ)讓副标題包含關鍵詞，這(zhè)樣可以(yǐ)有效利用搜索引擎，讓它帶來(lái)讀者。

9、人(rén)們大(dà)都隻浏覽網頁的(de)小部分内容

如果在(zài)用戶浏覽的(de)時(shí)候提供信息使他(tā)們盡快鎖定目标，就(jiù)可以(yǐ)把這(zhè)一(yī / yì ／yí)點發展成爲(wéi / wèi)你的(de)優勢。突出(chū)某些部分或者創建項目列表使網頁信息容易找到(dào)和(hé / huò)閱讀。

10、簡短的(de)段落相對于(yú)長段落來(lái)說(shuō)有更好的(de)表現力

網頁信息是(shì)爲(wéi / wèi)大(dà)多數強調快速浏覽的(de)無聯網用戶提供的(de)。除非上(shàng)下文的(de)銜接要(yào / yāo)求，保持信息由簡短的(de)段落和(hé / huò)句式組成，例如這(zhè)個(gè)電子(zǐ)商務網站的(de)産品介紹。

11、根據視覺鎖定，一(yī / yì ／yí)欄格式比多欄格式擁有更好的(de)表現力

别讓過多的(de)信息把網站來(lái)訪者淹沒。大(dà)多數情況下，簡潔更具力量。多欄内容容易被用戶忽視，我們需要(yào / yāo)消除這(zhè)些幹擾。

12、網頁頂部和(hé / huò)左邊的(de)廣告更能吸引眼球

如需要(yào / yāo)在(zài)網站植入廣告，試圖使他(tā)們融入網頁的(de)左上(shàng)部，這(zhè)樣他(tā)們才能吸引到(dào)最大(dà)的(de)視覺注意力。當然，用戶僅僅會注意到(dào)這(zhè)些廣告，這(zhè)并不(bù)意味着他(tā)們會用鼠标點擊。所以(yǐ)不(bù)要(yào / yāo)爲(wéi / wèi)了(le／liǎo)提高廣告的(de)注意力而(ér)犧牲原有的(de)網站設計。

13、将廣告放置與最佳内容一(yī / yì ／yí)旁也(yě)可以(yǐ)提升注意力

如果想要(yào / yāo)提升廣告的(de)可視性和(hé / huò)點擊率，可以(yǐ)将其設置于(yú)最能引起人(rén)興趣的(de)内容一(yī / yì ／yí)旁，整合進網頁的(de)設計裏。這(zhè)樣，用戶既可以(yǐ)找到(dào)所需的(de)内容，你也(yě)能提升廣告的(de)效益。

14、在(zài)各種測試中，人(rén)們閱讀文字廣告最爲(wéi / wèi)專心

正如上(shàng)面提到(dào)的(de)，一(yī / yì ／yí)般的(de)互聯網用戶不(bù)會花費太多時(shí)間用于(yú)查看那些一(yī / yì ／yí)眼就(jiù)能看出(chū)是(shì)廣告的(de)内容。這(zhè)就(jiù)是(shì)文字廣告表現出(chū)衆的(de)原因。他(tā)們并沒有分散注意力，而(ér)是(shì)與網頁的(de)其它部分内容融爲(wéi / wèi)一(yī / yì ／yí)體，這(zhè)讓他(tā)們減少了(le／liǎo)對讀者的(de)視覺刺激，也(yě)使這(zhè)一(yī / yì ／yí)廣告形式獲得成功的(de)閱讀率。

15、越大(dà)的(de)圖像吸引越多的(de)注意力

如果要(yào / yāo)在(zài)網頁中使用圖片，那越大(dà)越好。人(rén)們更傾向于(yú)查看那些能夠清楚地(dì / de)看到(dào)細節和(hé / huò)獲取信息的(de)圖像。要(yào / yāo)保證你所用的(de)圖片與文章内容相關，否則它更容易被忽視。大(dà)多數讀者都擁有高速的(de)連接速度，所以(yǐ)請放心在(zài)你的(de)網站上(shàng)使用那些較大(dà)體積的(de)圖片。

16、幹淨、清晰的(de)特寫圖片能吸引更多的(de)視覺注意

可能那些抽象的(de)藝術圖片會讓你的(de)網站看起來(lái)很有味道(dào)，但是(shì)他(tā)們并不(bù)會吸引多少讀者的(de)注意力。如果你需要(yào / yāo)使用到(dào)這(zhè)些圖片，請确保所用圖片的(de)清晰以(yǐ)及其表達内容的(de)簡單可讀性。必須注意的(de)是(shì)，那些與真實的(de)“人(rén)”相關的(de)圖片比所謂的(de)模特圖片更爲(wéi / wèi)“優秀”。

17、标題能吸引眼球

浏覽網頁時(shí)，讀者能發現的(de)第一(yī / yì ／yí)内容是(shì)标題。确保網頁的(de)所有相關鏈接暢通和(hé / huò)有效，以(yǐ)讓讀者順利的(de)通過網站進一(yī / yì ／yí)步搜索。

18、用戶花費大(dà)量時(shí)間察看按鈕和(hé / huò)菜單

所以(yǐ)，你需要(yào / yāo)花費額外的(de)時(shí)間維護你的(de)精心設計。畢竟，他(tā)們不(bù)僅吸引了(le／liǎo)讀者的(de)眼球，更是(shì)網站設計的(de)重要(yào / yāo)組成要(yào / yāo)素。

19、表單格式可以(yǐ)延長讀者的(de)注意時(shí)間

分解内容和(hé / huò)段落，大(dà)量使用表單形式來(lái)表現你的(de)文章，可以(yǐ)保證讀者的(de)浏覽率。使用數字和(hé / huò)其它标記符号來(lái)突出(chū)文章的(de)重要(yào / yāo)内容，會讓網站更容易浏覽，用戶更快的(de)找到(dào)所需的(de)信息。

20、避免呈現大(dà)塊的(de)文本

研究顯示，一(yī / yì ／yí)般的(de)網絡浏覽者不(bù)會花費時(shí)間去閱讀大(dà)塊的(de)文本，無論他(tā)們有多重要(yào / yāo)或寫得多好。因此，必須把這(zhè)些大(dà)文本分解爲(wéi / wèi)若幹小段落。突出(chū)重要(yào / yāo)的(de)地(dì / de)方，放置點擊的(de)按鈕也(yě)可以(yǐ)提高用戶的(de)注意力。

21、格式可以(yǐ)吸引注意力

在(zài)文中使用粗體、大(dà)寫、彩體、下劃線可以(yǐ)幫助用戶獲取正文所表達的(de)最主要(yào / yāo)的(de)信息。使用時(shí)需要(yào / yāo)謹慎，因爲(wéi / wèi)過多的(de)使用會使你的(de)網頁難以(yǐ)閱讀，把讀者吓跑。

22、利用好空白

盡管把網頁的(de)每寸空間都填滿這(zhè)個(gè)想法十分誘人(rén)，但事實上(shàng)讓網站留出(chū)部分剩餘更爲(wéi / wèi)不(bù)錯。網站的(de)過量信息會把用戶淹沒，同時(shí)他(tā)們也(yě)會忘記所提供的(de)大(dà)部分的(de)内容。所以(yǐ)保持網頁的(de)簡潔，給讀者預留出(chū)一(yī / yì ／yí)些視覺空間來(lái)供讀者休息。

23、放置于(yú)網頁頂部，導航工具的(de)作用将更好的(de)發揮

理想情況下，你不(bù)會滿足于(yú)當讀者打開你的(de)網站時(shí)僅浏覽初始頁，而(ér)是(shì)希望他(tā)們浏覽翻閱，察看其它感興趣的(de)内容。将導航器置于(yú)網頁頂部，就(jiù)可以(yǐ)讓用戶通過使用這(zhè)個(gè)工具輕松的(de)找到(dào)所需的(de)目标内容。