- 相關(guān)推薦
網(wǎng)頁(yè)設計怎樣利用F型掃視
今天這篇文章，主要介紹「F 型掃視」。讀完后，你會(huì )明白我們到底如何瀏覽網(wǎng)頁(yè)，也知道網(wǎng)頁(yè)應該如何設計，才能帶來(lái)更好的體驗。
一、什么是「F 型掃視」?
「F 型掃視」是界面閱讀最常見(jiàn)的一種掃視模式，在有很多內容板塊的界面上非常實(shí)用�！窮」也可以被理解為「Fast」。大多數人閱讀界面內容時(shí)，都采用了「F 型掃視」模式——只需要幾秒，就可以快速將頁(yè)面掃完�！窮 型掃視」最早是由尼爾森諾曼集團(NNGroup)通過(guò)眼球追蹤實(shí)驗提出的，該項實(shí)驗記錄了 200 多名用戶(hù)閱讀上千個(gè)網(wǎng)頁(yè)的數據。實(shí)驗結果發(fā)現，用戶(hù)的閱讀習慣相當一致，即便是在不同站點(diǎn)和不同閱讀任務(wù)的前提下。實(shí)驗對象的閱讀軌跡看似像字母「F」，并包括以下 3 個(gè)部分：
首先，人們會(huì )橫向閱讀，通常掃視范圍僅停留在頁(yè)面頂端部分。這一軌跡形成了字母「F」的第一橫。
然后，我們會(huì )順著(zhù)頁(yè)面左端縱向閱讀。我們的閱讀重點(diǎn)僅停留在段首其感興趣的部分。發(fā)現感興趣的內容后，我們會(huì )再次橫向閱讀，不過(guò)這次橫向閱讀的范圍通常較第一次小。這一軌跡形成了字母「F」的第二橫。
最后，我們會(huì )再次順著(zhù)頁(yè)面左端縱向閱讀。
二、為什么用「F 型掃視」?
通過(guò)「F 型掃視」模式，更容易體現出良好的視覺(jué)層次，從而方便用戶(hù)了解界面內容。對大多數西方用戶(hù)來(lái)講，「F 型掃視」模式是非常舒適的，因為他們的閱讀習慣一直以來(lái)都是從上到下、從左至右的。
三、什么時(shí)候用「F 型掃視」最舒服?
針對有大量文本的網(wǎng)站，比如博客或新聞?wù)军c(diǎn)，「F 型掃視」模式是再好不過(guò)的選擇;在內容過(guò)多(特別是文本過(guò)多)的情況下，若頁(yè)面布局是根據自然掃視模式(即「F 型掃視」)來(lái)設計的，用戶(hù)反饋會(huì )更好。
四、網(wǎng)頁(yè)應該怎樣用「F 型掃視」?
1. 按重要性對內容排序
在設計規劃頁(yè)面元素時(shí)，一定要按重要性對各項內容進(jìn)行排序。通過(guò)排序，你可以清楚地知道你最想讓用戶(hù)閱讀的內容。這樣一來(lái)，你只需要將這些內容放在頁(yè)面的「熱點(diǎn)」區域即可。
2. 設置預定期望
整個(gè)頁(yè)面最開(kāi)始的一兩段是非常重要的。盡可能將重要內容放置在頁(yè)面頂端，從而可以在短時(shí)間內讓人們知道網(wǎng)站(或頁(yè)面)是用來(lái)做什么的。根據「F 型掃視」模式，我們通常會(huì )橫向閱讀頁(yè)面頂端。因此，在頂端區域設計一個(gè)導航欄是個(gè)不錯的選擇。用戶(hù)掃視頁(yè)面最重要的內容只需要幾秒鐘。
3. 設計要方便掃讀，而不是閱讀
設計頁(yè)面布局時(shí)，要從用戶(hù)角度出發(fā)。順著(zhù)「F 型掃視」的閱讀軌跡，將人們最感興趣的內容按重要性放置于相應區域：段首用詞一定要足夠吸引用戶(hù)眼球。用戶(hù)首先會(huì )閱讀最突出的內容(即最具視覺(jué)重量的內容)。因此，一定要凸顯重要內容的視覺(jué)重量�？梢酝ㄟ^(guò)字體排版來(lái)體現文本的重要性，比如高亮文本關(guān)鍵詞;也可以通過(guò)各種顏色突顯某些按鈕。每個(gè)段落只覆蓋一個(gè)觀(guān)點(diǎn)，并盡可能多地使用項目符號(即本條左邊的小黑圓點(diǎn))。將最重要的內容(比如行為召喚相關(guān)的內容)放置在頁(yè)面左右兩端，這也是用戶(hù)橫向掃視的起始兩端。當他們繼續往下掃視至下一橫向內容時(shí)，剛好有幾秒時(shí)間，可以讓他們稍作思考。
4. 好好利用工具欄
工具欄可以讓人們進(jìn)一步參與交互，好好利用工具欄，可以進(jìn)一步提高用戶(hù)參與度。讓希望用戶(hù)點(diǎn)擊的任何元素顯得更有特色，盡管它可能和頁(yè)面主要內容「迥然不同」，比如廣告，相關(guān)文章列表，社交媒體小組件等等。把它定義為用戶(hù)尋找特定內容(比如目錄列表，標簽群，熱門(mén)文章小組件等等)的工具。
5. 避免視覺(jué)疲勞
「F 型掃視」模式最大的缺點(diǎn)，是可能存在的視覺(jué)疲勞。要讓用戶(hù)覺(jué)得無(wú)聊，其實(shí)并不難，比如在頁(yè)面加入重復和相似的內容。如果用戶(hù)真覺(jué)得無(wú)聊了，那你也不會(huì )得到什么好處。所以，不妨試試在人們掃視范圍內加入「出人意料」的元素，從而保持用戶(hù)的參與度。此外，將頁(yè)面拆分為左右兩欄——左欄為主要信息，右欄為輔助信息(工具欄)，可以進(jìn)一步保持用戶(hù)的參與度。整個(gè)界面布局設計簡(jiǎn)單，但核心元素都體現了出來(lái)。人們打開(kāi)頁(yè)面，能夠清晰了解頁(yè)面主要功能，工具欄中也有目錄列表導航，用戶(hù)也可以直觀(guān)地看到相關(guān)內容。通過(guò)頁(yè)面左端方形卡片和引人注目的標題，可以吸引用戶(hù)關(guān)注。盡管用戶(hù)可能對這些內容不感興趣，但至少發(fā)現有趣內容的機會(huì )是存在的。順著(zhù)字母「F」的第二橫，再加入一些「出人意料」的元素，比如圖片或行為召喚相關(guān)的內容，從而進(jìn)一步保持用戶(hù)的參與度。
「F 型掃視」模式是人眼閱讀的自然軌跡。設計頁(yè)面時(shí)，結合該模式可以進(jìn)一步優(yōu)化頁(yè)面設計。但值得注意的是，最好不要死板地運用這個(gè)模式，畢竟它只能算作設計的指導原則，而非設計模板。它是死的，而人是活的。
【網(wǎng)頁(yè)設計怎樣利用F型掃視】相關(guān)文章：
網(wǎng)頁(yè)設計中的F式布局07-18
如何利用網(wǎng)頁(yè)設計的黃金比例及運用04-11
淘寶店鋪風(fēng)格如何利用網(wǎng)頁(yè)設計08-11
淘寶店鋪風(fēng)格如何利用網(wǎng)頁(yè)設計大全05-05