北京单场玩法

你知道用戶刷網頁的「F 型掃視」習慣嗎?

2017-05-12

什么是「F 型掃視」?

「F 型掃視」是界面閱讀最常見的一種掃視模式,在有很多內容板塊的界面上非常實用。「F」也可以被理解為「Fast」。大多數人閱讀界面內容時,都采用了「F 型掃視」模式——只需要幾秒,就可以快速將頁面掃完

「F 型掃視」最早是由尼爾森諾曼集團(NNGroup)通過眼球追蹤實驗提出的,該項實驗記錄了 200 多名用戶閱讀上千個網頁的數據。實驗結果發現,用戶的閱讀習慣相當一致,即便是在不同站點和不同閱讀任務的前提下。實驗對象的閱讀軌跡看似像字母「F」,并包括以下 3 個部分:

  • 人們首先會橫向閱讀,通常掃視范圍僅停留在頁面頂端部分。這一軌跡形成了字母「F」的第一橫。

  • 緊接著,我們會順著頁面左端縱向閱讀。我們的閱讀重點僅停留在段首其感興趣的部分。發現感興趣的內容后,我們會再次橫向閱讀,不過這次橫向閱讀的范圍通常較第一次小。這一軌跡形成了字母「F」的第二橫。

  • 最后,我們會再次順著頁面左端縱向閱讀

在下面這張圖,紅色區域是人們的核心閱讀重點,黃色區域是次閱讀重點,緊接著是相對關注較少的藍色區域,而灰色區域基本不受用戶關注。可以看出,我們瀏覽網頁基本構成了 F 型。

通過熱度圖,尼爾森諾曼集團揭示了眼球追蹤實驗是如何發現用戶閱讀軌跡的(本處用戶特指閱讀習慣為從左至右的用戶)。

很明顯,我們的掃視模式并不只包含 3 個部分。當我們發現其感興趣的內容后,就會重點閱讀該部分,從而形成相應的橫向閱讀軌跡。

為什么用「F 型掃視」

通過「F 型掃視」模式,更容易體現出良好的視覺層次,從而方便用戶了解界面內容。對大多數西方用戶來講,「F 型掃視」模式是非常舒適的,因為他們的閱讀習慣一直以來都是從上到下、從左至右的。

注:作者之所以提及西方用戶的閱讀習慣,是因為有些(東方)國家或地區用戶的書寫和閱讀習慣是從右至左的。在有些國家和文化中,書寫習慣甚至以豎寫為主,相應閱讀習慣也稍顯不同。由于中文的書寫和閱讀習慣并不特別,所以本文所講的「F 型掃視」仍可以適用。

什么時候用「F 型掃視」最舒服?

針對有大量文本的網站,比如博客或新聞站點,「F 型掃視」模式是再好不過的選擇。

在內容過多(特別是文本過多)的情況下,若頁面布局是根據自然掃視模式(即「F 型掃視」)來設計的,用戶反饋會更好。

CNN 首頁也使用了「F 型掃視」模式

網頁應該怎樣用「F 型掃視」?

借助「F 型掃視」模式,設計師在頁面內容選題方面有更多的「話事權」。

1. 按重要性對內容排序

在設計規劃頁面元素時,一定要按重要性對各項內容進行排序。通過排序,你可以清楚地知道你最想讓用戶閱讀的內容。這樣一來,你只需要將這些內容放在頁面的「熱點」區域即可。

2. 設置預定期望

整個頁面最開始的一兩段是非常重要的。盡可能將重要內容放置在頁面頂端,從而可以在短時間內讓人們知道網站(或頁面)是用來做什么的

根據「F 型掃視」模式,我們通常會橫向閱讀頁面頂端。因此,在頂端區域設計一個導航欄是個不錯的選擇。

用戶掃視頁面最重要的內容只需要幾秒鐘。圖片來源:tutsplus

3. 設計要方便掃讀,而不是閱讀

設計頁面布局時,要從用戶角度出發。順著「F 型掃視」的閱讀軌跡,將人們最感興趣的內容按重要性放置于相應區域

  • 段首用詞一定要足夠吸引用戶眼球。

  • 用戶首先會閱讀最突出的內容(即最具視覺重量的內容)。因此,一定要凸顯重要內容的視覺重量。可以通過字體排版來體現文本的重要性,比如高亮文本關鍵詞;也可以通過各種顏色突顯某些按鈕。

  • 每個段落只覆蓋一個觀點,并盡可能多地使用項目符號(即本條左邊的小黑圓點)。

  • 將最重要的內容(比如行為召喚相關的內容)放置在頁面左右兩端,這也是用戶橫向掃視的起始兩端。當他們繼續往下掃視至下一橫向內容時,剛好有幾秒時間,可以讓他們稍作思考。

4. 好好利用工具欄

工具欄可以讓人們進一步參與交互,好好利用工具欄,可以進一步提高用戶參與度。

  • 讓希望用戶點擊的任何元素顯得更有特色,盡管它可能和頁面主要內容「迥然不同」,比如廣告,相關文章列表,社交媒體小組件等等。

  • 把它定義為用戶尋找特定內容(比如目錄列表,標簽群,熱門文章小組件等等)的工具。

Medium 在工具欄中加入了二級導航

5. 避免視覺疲勞

「F 型掃視」模式最大的缺點,是可能存在的視覺疲勞。要讓用戶覺得無聊,其實并不難,比如在頁面加入重復和相似的內容。如果用戶真覺得無聊了,那你也不會得到什么好處。所以,不妨試試在人們掃視范圍內加入「出人意料」的元素,從而保持用戶的參與度。

這個「打破預期」的頁面布局技巧,在有長篇幅內容的頁面上特別適用。試想,如果人們瀏覽類似頁面時,盡是沉悶或無聊的內容,那他們很快就會「想吐」……

下圖頁面的上半部分,頁面的任務宣言(即圖中 This is a headline … 該句)置于頁面頂端,可以在短時間內向用戶傳達該頁面的功能

此外,將頁面拆分為左右兩欄——左欄為主要信息,右欄為輔助信息(工具欄),可以進一步保持用戶的參與度

圖片來源:tutsplus

整個界面布局設計簡單,但核心元素都體現了出來。人們打開頁面,能夠清晰了解頁面主要功能,工具欄中也有目錄列表導航,用戶也可以直觀地看到相關內容。

通過頁面左端方形卡片和引人注目的標題,可以吸引用戶關注。盡管用戶可能對這些內容不感興趣,但至少發現有趣內容的機會是存在的。

順著字母「F」的第二橫,再加入一些「出人意料」的元素,比如圖片或行為召喚相關的內容,從而進一步保持用戶的參與度。

結束語

「F 型掃視」模式是人眼閱讀的自然軌跡。設計頁面時,結合該模式可以進一步優化頁面設計。但值得注意的是,最好不要死板地運用這個模式,畢竟它只能算作設計的指導原則,而非設計模板。它是死的,而人是活的。

謝謝!

 

譯者:Jorri

作者:Nick Babich,軟件工程師,關注 UX 和 UI。

來源:http://www.ifanr.com/app/814890

原文地址: F-Shaped Pattern for Reading Content


  • 查看地圖,了解我們的位置
  • 關注微信,一舉一動盡在掌握

億校云是一支致力于開拓學校型軟件的團隊,
專注于為校園互聯網建設提供解決方案。

    • 公司:杭州億校云信息技術有限公司
    • 地址:杭州市濱江區濱文路426號文苑大廈13樓1308
    • 電話:0571-85100351
    • 郵箱:[email protected]
Close
北京单场玩法 宝贝计划官网客户端 哪个棋牌软件有二八杠 什么生意挣钱 奔跑吧动物游戏机技巧 同城信息小程序赚钱 魔法师计划免费账号 北京pk拾计划app ag金拉霸老虎机攻略 uu捕鱼手机版 二不同直选