原來，我們刷網頁都有這個習慣…… | 靈感早讀

A 君導讀：微信公眾號 AppSo 分享了淘寶等頁面的 2 種基本視圖。其中，提到我們習慣用 F 型的方式來瀏覽頁面。

今天這篇文章，將進一步介紹「F 型掃視」。讀完後，你會明白我們到底如何瀏覽網頁，也知道網頁應該如何設計，才能帶來更好的體驗。

什麼是「F 型掃視」？

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

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

• 人們首先會

  橫向閱讀

  ，通常掃視範圍僅停留在頁面頂端部分。這一軌跡形成了字母「F」的第一橫。
• 緊接著，我們會

  順著頁面左端縱向閱讀

  。我們的閱讀重點僅停留在段首其感興趣的部分。發現感興趣的內容後，我們會

  再次橫向閱讀

  ，不過這次橫向閱讀的範圍通常較第一次小。這一軌跡形成了字母「F」的第二橫。
• 最後，我們會

  再次順著頁面左端縱向閱讀

  。

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

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

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

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

微信公眾號 AppSo 註：作者之所以提及西方用戶的閱讀習慣，是因為有些（東方）國家或地區用戶的書寫和閱讀習慣是從右至左的。在有些國家和文化中，書寫習慣甚至以豎寫為主，相應閱讀習慣也稍顯不同。由於中文的書寫和閱讀習慣並不特別，所以本文所講的「F 型掃視」仍可以適用。

什麼時候用「F 型掃視」最舒服？

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

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

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

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

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

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

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

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

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

• 段首用詞

  一定要足夠吸引用戶眼球。
• 用戶首先會閱讀最突出的內容（即最具視覺重量的內容）。因此，一定要凸顯

  重要內容的視覺重量

  。可以通過

  字體排版

  來體現文本的重要性，比如高亮文本關鍵詞；也可以通過各種顏色突顯某些按鈕。

• 每個段落只覆蓋一個觀點

  ，並儘可能多地使用

  項目符號

  （即本條左邊的小黑圓點）。
• 將最重要的內容（比如行為召喚相關的內容）放置在

  頁面左右兩端

  ，這也是用戶橫向掃視的起始兩端。當他們繼續往下掃視至下一橫向內容時，剛好有幾秒時間，可以讓他們稍作思考。

4. 好好利用工具欄

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

• 讓希望用戶點擊的任何元素顯得

  更有特色

  ，儘管它可能和頁面主要內容「迥然不同」，比如廣告，相關文章列表，社交媒體小組件等等。

• 把它定義為用戶尋找

  特定內容

  （比如目錄列表，標籤群，熱門文章小組件等等）的工具。

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

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

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

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

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

圖片來源：tutsplus

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

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

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

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

謝謝！

作者| Nick Babich，軟體工程師，關注 UX 和 UI。

譯者| Jorri

文章授權譯自 F-Shaped Pattern for Reading Content

本文由讓手機更好用的 AppSo 翻譯出品，關注微信號 appsolution，回復「揭露」告訴你心理學家如何通過眼動追蹤，發現 3 大打臉結論。