F型瀏覽模式：設計一個良好的視覺層級結構

本文將引導您了解F型內容布局的原理，它是如何工作的，以及如何應用到設計中？

什麼是F型瀏覽模式以及它的工作原理？

F型瀏覽模式：當閱讀內容區塊時，一種最常見的用戶眼睛掃描模式。F(Fast)指的就是快速瀏覽。F型瀏覽模式闡述了用戶是如瀏覽內容。在短短几秒內，他們的眼睛以驚人的速度掃過你的網站頁面。

該閱讀模式由NNGroup的眼動追蹤研究而被推廣普及，在這個研究中記錄了超過200位用戶瀏覽網頁時，發現用戶的主要閱讀行為在許多不同的網站和任務中相當一致。這個閱讀模式看起來有點像字母F，並包含以下3個組成部分：

• 用戶首先以水平方向閱讀，通常是在內容區域的上半部分。這個初始的部分形成了F型的頭部。
• 接下來，他們在屏幕左側垂直瀏覽，尋找段落開篇幾句中感興趣的內容。當他們找到感興趣的內容時，他們在第二個水平方向上快速瀏覽，通常這塊內容區比上一個內容區更短小、更簡潔。這部分元素形成了F的下半部分。
• 最後，用戶在垂直方向上瀏覽內容的左側區域。

NNGroup演示了眼動追蹤研究，如何揭露在從左至右閱讀文化中的用戶，他們通常是如何掃描區塊內容的，通常看起來像字母F或E形狀。用戶看得最多的區域是紅色的，黃色區域表示較少的查看，其次是最少觀看的藍色區域。灰色區域表示沒有任何吸引的。

很顯然，用戶的瀏覽模式有時候不是都包含以上三部分的。當用戶發現他們感興趣的內容時，他們就會開始正常閱讀行為，形成水平閱讀。

為何要應用F型瀏覽模式？

F型瀏覽模式將能幫助你創建一個具有良好視覺層級結構的設計，這樣的設計，人們就能很舒服地瀏覽啦。

對大多數的西方讀者，F型布局方式能讓他們感到很舒服，因為他們一直是從上至下、從左至右的閱讀習慣。

何時應用F型瀏覽模式？

F型瀏覽模式適用於以文字為主的網站布局（如博客和新聞站）。如果有非常多的內容，尤其是大量文本內容，用戶會對依照自然掃描格式（也就是上邊說的F型布局模式）的設計布局會有更正向的反應。

如何應用F型瀏覽模式？

F型布局，在文字層面給設計師更多在內容展示層面的控制感。

確定你的內容的優先順序

在你布局頁面元素之前，先區分元素優先順序和重要度。一旦你知道你希望用戶看到什麼，你就可以很簡單地將他們放置在上述瀏覽模式中的交互「熱點區域」啦。

設定初始預期

前兩段內容是最重要的。將最重要的內容放置在接近頁面上部的位置，以便儘可能快地傳達給用戶網站/頁面的目標。用戶通常橫向讀取頁面頭部，所以這塊區域是放置導航欄的好位置。

為掃描而設計，而非為閱讀設計

當我們應用F型瀏覽模型去思考用戶行為方式的時候，可以將用戶最感興趣的內容沿著F型瀏覽模型去布局：

• 用走心的關鍵字開始新的段落
• 人們首先查看頁面上最主要的元素（視覺感官吸引度最大的元素）。因此，給予更重要的元素更強的視覺吸引度：使用排版來突出文本關鍵字（例如：高亮文本中的關鍵字）、使用某些顏色突出顯示按鈕。
• 每個段落僅表達一個想法/主題，儘可能使用項目符號/編號
• 在左側或右側放置最重要的內容，因為這兩個位置是用戶橫向視線掃描開始的起點和終點。這兩處用戶會做短暫停頓，所以能給予用戶額外的時間來進行思考。

利用側邊欄

側邊欄的存在能讓用戶有更深層次的參與感，因此使用側邊欄來推動用戶的參與感：

• 提供你希望用戶看到的任何內容，可以是一個廣告，相關文章系列、社交媒體小部件等。
• 為用戶提供一個挖掘特定內容的工具。舉個例子，像分類列表、標籤雲、熱門帖子等。

避免千篇一律的布局

F型布局的缺點是比較單調（或者說千篇一律）。用戶很容易就對重複的、相似的內容感到厭煩。在一個對一切都感到厭倦的用戶那邊得不到任何好處，所以在用戶瀏覽區域，可以適當添加一些「微妙的元素」來保持用戶參與感。

當你滾動瀏覽前幾個部分之後，如果內容長度很長，用戶就感覺很無聊，那麼這種「打破預期」的布局手段就非常有用啦。

總結

F型瀏覽模式只是遵循人眼瀏覽的共同趨勢，以便你去優化布局結構。但是，你沒必要完完全全嚴格遵守它，因為這只是一個指導準則，而不是一個標準模板。

翻譯：Maker

校對：逗砂

原文作者：Nick Babich

本文由 @Maker 翻譯發佈於人人都是產品經理。未經許可，禁止轉載。