網(wǎng)頁設(shè)計(jì)怎樣利用“F 型掃視”習(xí)慣？

今天這篇文章，主要介紹「F 型掃視」。讀完后，你會明白我們到底如何瀏覽網(wǎng)頁，也知道網(wǎng)頁應(yīng)該如何設(shè)計(jì)，才能帶來更好的體驗(yàn)。

一、什么是「F 型掃視」？
「F 型掃視」是界面閱讀最常見的一種掃視模式，在有很多內(nèi)容板塊的界面上非常實(shí)用?！窮」也可以被理解為「Fast」。大多數(shù)人閱讀界面內(nèi)容時(shí)，都采用了「F 型掃視」模式——只需要幾秒，就可以快速將頁面掃完?！窮 型掃視」最早是由尼爾森諾曼集團(tuán)（NNGroup）通過眼球追蹤實(shí)驗(yàn)提出的，該項(xiàng)實(shí)驗(yàn)記錄了 200 多名用戶閱讀上千個(gè)網(wǎng)頁的數(shù)據(jù)。實(shí)驗(yàn)結(jié)果發(fā)現(xiàn)，用戶的閱讀習(xí)慣相當(dāng)一致，即便是在不同站點(diǎn)和不同閱讀任務(wù)的前提下。實(shí)驗(yàn)對象的閱讀軌跡看似像字母「F」，并包括以下 3 個(gè)部分：

首先，人們會橫向閱讀，通常掃視范圍僅停留在頁面頂端部分。這一軌跡形成了字母「F」的第一橫。
然后，我們會順著頁面左端縱向閱讀。我們的閱讀重點(diǎn)僅停留在段首其感興趣的部分。發(fā)現(xiàn)感興趣的內(nèi)容后，我們會再次橫向閱讀，不過這次橫向閱讀的范圍通常較第一次小。這一軌跡形成了字母「F」的第二橫。
最后，我們會再次順著頁面左端縱向閱讀。

二、為什么用「F 型掃視」？
通過「F 型掃視」模式，更容易體現(xiàn)出良好的視覺層次，從而方便用戶了解界面內(nèi)容。對大多數(shù)西方用戶來講，「F 型掃視」模式是非常舒適的，因?yàn)樗麄兊拈喿x習(xí)慣一直以來都是從上到下、從左至右的。

三、什么時(shí)候用「F 型掃視」最舒服？
針對有大量文本的網(wǎng)站，比如博客或新聞?wù)军c(diǎn)，「F 型掃視」模式是再好不過的選擇；在內(nèi)容過多（特別是文本過多）的情況下，若頁面布局是根據(jù)自然掃視模式（即「F 型掃視」）來設(shè)計(jì)的，用戶反饋會更好。

四、網(wǎng)頁應(yīng)該怎樣用「F 型掃視」？

1. 按重要性對內(nèi)容排序
在設(shè)計(jì)規(guī)劃頁面元素時(shí)，一定要按重要性對各項(xiàng)內(nèi)容進(jìn)行排序。通過排序，你可以清楚地知道你最想讓用戶閱讀的內(nèi)容。這樣一來，你只需要將這些內(nèi)容放在頁面的「熱點(diǎn)」區(qū)域即可。

2. 設(shè)置預(yù)定期望
整個(gè)頁面最開始的一兩段是非常重要的。盡可能將重要內(nèi)容放置在頁面頂端，從而可以在短時(shí)間內(nèi)讓人們知道網(wǎng)站（或頁面）是用來做什么的。根據(jù)「F 型掃視」模式，我們通常會橫向閱讀頁面頂端。因此，在頂端區(qū)域設(shè)計(jì)一個(gè)導(dǎo)航欄是個(gè)不錯(cuò)的選擇。用戶掃視頁面最重要的內(nèi)容只需要幾秒鐘。

3. 設(shè)計(jì)要方便掃讀，而不是閱讀
設(shè)計(jì)頁面布局時(shí)，要從用戶角度出發(fā)。順著「F 型掃視」的閱讀軌跡，將人們最感興趣的內(nèi)容按重要性放置于相應(yīng)區(qū)域：段首用詞一定要足夠吸引用戶眼球。用戶首先會閱讀最突出的內(nèi)容（即最具視覺重量的內(nèi)容）。因此，一定要凸顯重要內(nèi)容的視覺重量?？梢酝ㄟ^字體排版來體現(xiàn)文本的重要性，比如高亮文本關(guān)鍵詞；也可以通過各種顏色突顯某些按鈕。每個(gè)段落只覆蓋一個(gè)觀點(diǎn)，并盡可能多地使用項(xiàng)目符號（即本條左邊的小黑圓點(diǎn)）。將最重要的內(nèi)容（比如行為召喚相關(guān)的內(nèi)容）放置在頁面左右兩端，這也是用戶橫向掃視的起始兩端。當(dāng)他們繼續(xù)往下掃視至下一橫向內(nèi)容時(shí)，剛好有幾秒時(shí)間，可以讓他們稍作思考。

4. 好好利用工具欄
工具欄可以讓人們進(jìn)一步參與交互，好好利用工具欄，可以進(jìn)一步提高用戶參與度。讓希望用戶點(diǎn)擊的任何元素顯得更有特色，盡管它可能和頁面主要內(nèi)容「迥然不同」，比如廣告，相關(guān)文章列表，社交媒體小組件等等。把它定義為用戶尋找特定內(nèi)容（比如目錄列表，標(biāo)簽群，熱門文章小組件等等）的工具。

5. 避免視覺疲勞
「F 型掃視」模式大的缺點(diǎn)，是可能存在的視覺疲勞。要讓用戶覺得無聊，其實(shí)并不難，比如在頁面加入重復(fù)和相似的內(nèi)容。如果用戶真覺得無聊了，那你也不會得到什么好處。所以，不妨試試在人們掃視范圍內(nèi)加入「出人意料」的元素，從而保持用戶的參與度。此外，將頁面拆分為左右兩欄——左欄為主要信息，右欄為輔助信息（工具欄），可以進(jìn)一步保持用戶的參與度。整個(gè)界面布局設(shè)計(jì)簡單，但核心元素都體現(xiàn)了出來。人們打開頁面，能夠清晰了解頁面主要功能，工具欄中也有目錄列表導(dǎo)航，用戶也可以直觀地看到相關(guān)內(nèi)容。通過頁面左端方形卡片和引人注目的標(biāo)題，可以吸引用戶關(guān)注。盡管用戶可能對這些內(nèi)容不感興趣，但至少發(fā)現(xiàn)有趣內(nèi)容的機(jī)會是存在的。順著字母「F」的第二橫，再加入一些「出人意料」的元素，比如圖片或行為召喚相關(guān)的內(nèi)容，從而進(jìn)一步保持用戶的參與度。

「F 型掃視」模式是人眼閱讀的自然軌跡。設(shè)計(jì)頁面時(shí)，結(jié)合該模式可以進(jìn)一步優(yōu)化頁面設(shè)計(jì)。但值得注意的是，最好不要死板地運(yùn)用這個(gè)模式，畢竟它只能算作設(shè)計(jì)的指導(dǎo)原則，而非設(shè)計(jì)模板。它是死的，而人是活的。

文章名稱：網(wǎng)頁設(shè)計(jì)怎樣利用“F 型掃視”習(xí)慣？
網(wǎng)頁網(wǎng)址：http://www.bm7419.com/news/33622.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、服務(wù)器托管、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站排名、域名注冊、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)