善用F式佈局讓網頁可讀性更強

導語：雖然網頁排版方式千變萬化，但是佈局方式通常都遵循着幾種常見的規則。在諸多佈局方式當中，F式佈局是可用性較強，且適用範圍較廣的一種。今天的文章同你來探討F式佈局在網頁中的運用。

F式佈局的設計基礎是用户掃視內容的時候，實現的運動軌跡和字母F相似，而佈局匹配這種這種閲讀方式可以讓用户更快(Fast)地獲取信息，因此得名為F式佈局。

　　F式佈局從何而來?

F式佈局源於NNGroup的一項眼動研究項目，他們跟蹤了超過 200 名用户瀏覽各種網頁時的眼動軌跡，發現用户的眼球快速瀏覽網頁時，尤其是在快速瀏覽文字內容的時候，眼球的運動軌跡類似字母F，並且整個運動過程遵循下面三個部分：

·用户先會沿着水平方向瀏覽，優先瀏覽內容塊的上部，這個時候的眼動構成了字母F 最上面一橫。

·接下來視線會沿着屏幕左側向下垂直掃視，尋找段落中能引起興趣點的內容，當他們發現引起他們興趣的內容之時，繼續橫向仔細瀏覽，而通常這些內容對應的`視線範圍會比第一次橫向瀏覽的範疇要更小一些，而這個視線軌跡則構成了字母F 中間的一橫。

·接下來用户會將視線移到屏幕左側，繼續向下瀏覽。

我們瀏覽內容的方式被訓練為從左上角開始水平瀏覽，回到左側向下掃視找到興趣點，繼續橫向瀏覽。

NNGroup 的眼動跟蹤研究證明了這一點，紅色的部分是用户感興趣的區域，黃色的區域次之，不感興趣的則為藍色的區域，灰色的區域是用户直接忽略不作停留的部分。

顯然，用户的瀏覽過程並不全是分為三個部分，但是它的模式是沿用下來的。

　　為何要使用F式佈局?

F式佈局能讓你創造出更加富有層次感的設計，這樣的設計更容易為用户瀏覽和獲取信息。對於世界範圍內絕大多數的國家和地區而言，F式佈局是非常符合閲讀習慣的。這種規則使得它可以廣泛運用在UI和網頁設計上。

什麼時候使用F式佈局?

諸如新聞和博客這種重文本內容的網站是適合F式佈局的，它主要適用於文本的閲讀。

CNN 就是使用F式佈局的

　　如何運用F式佈局?

F式佈局讓設計師能夠更好控制內容的可見性。

　　1、確定內容的優先級

如果你對於頁面中內容的輕重緩急有着足夠的瞭解，那麼就可以結合用户的瀏覽習慣，將重要的內容排布在用户視線時常停留的位置。讓這些呈現重要內容的“熱點區域”承載核心的交互。

　　2、設置初始預期

文本的前幾段內容是非常之重要的。儘量讓最核心、最重點的內容放置在頁面的頂端，這也是為什麼標題、引言和導航欄是如此的重要的原因。

用户能夠在幾秒鐘之內快速讀取內容。