本文將帶你理解F型布局的基本原則，它是怎樣運作的，以及怎樣創(chuàng)建你自己F型布局。
什么是F型布局，它如何運作？
當人們面對大塊大塊的文字時，F(xiàn)型是最常見的瀏覽模式，F(xiàn)代表“fast”。這正是用戶閱讀內(nèi)容的方法。幾秒里，他們眼神以神奇的速度橫跨網(wǎng)頁。
這種模式因為NNGroup的視線路徑研究而被普及，在這項研究里記錄了200多為用戶瀏覽成千上萬網(wǎng)頁時的主要閱讀行為，同時，這些閱讀行為在不同的站點和任務上都保持了一致性。這種閱讀模式有點像F，由以下三部分組成：
a.用戶的視線首先是水平移動，通常是瀏覽內(nèi)容區(qū)域的頂部。這構成了F上面那一橫。
b.接下來，用戶的視線會沿著屏幕左側的垂直線從上到下移動，從而找到段落里他們感興趣的點。如果他們發(fā)現(xiàn)了感興趣的句子，視線就會形成第二條水平線。但是通常這條線會比之前的水平線短些。這構成了F下面那條短一點兒的橫線。
c.最后，用戶的視線繼續(xù)沿著屏幕左側屏幕的垂直線向下移動。
顯然，用戶瀏覽模式并不總是由這三部分組成。當用戶找到他們感興趣的內(nèi)容時，他們自然而然的就會橫向閱讀。
為什么我們要使用F型閱讀模式？
F型模式會使你的設計具有良好的視覺層次，這種設計會帶給用戶良好的閱讀體驗。F型布局對于大部分西方讀者是很舒適的，因為他們的閱讀習慣是從上到下從左到右的。
我們什么時候使用它？
F型模式通常用在文本較多的網(wǎng)頁，比如博客活著新聞站點。如果有大量的內(nèi)容尤其是文字內(nèi)容，自然的瀏覽模型會使用戶具有良好的體驗。
如何使用F模型？
F型布局實際上讓設計師能夠把控用戶的視線。
劃分內(nèi)容的優(yōu)先級
在組織頁面重的元素前，首先要劃分出來哪些是最重要的哪些是最不重要的。一旦你知道哪些是你想讓用戶看到的，你就應該放在閱讀模型的熱點上，從而保證正確的交互。
最前面的兩段內(nèi)容是最重要的。將最重要的內(nèi)容放置在頁面的頂部，盡可能快速地表達整個站點的主旨。用戶通常橫向閱讀頁眉，所以這個地方最好放導航條。
為瀏覽設計而不是閱讀
在F型閱讀模式中要時刻記住用戶的主要行為是瀏覽，所以把用戶感興趣的內(nèi)容放在瀏覽路徑上。
a.以具有誘惑力的關鍵詞起始段落
b.用戶第一眼看到的是主要元素。頁面的主要元素或者區(qū)域最好具有較重的視覺重量?？梢酝ㄟ^使用不同的字體樣式暗示文本的重要性（比如高亮文本中的關鍵詞），或者某些高亮色的按鈕。
每段只表述一個觀點，盡量使用點句。
c.將重要的內(nèi)容（比如CTA）放在左右邊上，用戶開始或者停止橫向視線的地方。這些點會存在視線向下移動時的短暫的停留，這些短暫的停留構成了用戶的思考時間。
使用側邊
側邊欄的存在是指引用戶到更高的層級，使用側邊欄驅(qū)動用戶參與。
a.明確你希望用戶看到的內(nèi)容，但不適合有機的與基礎內(nèi)容相結合?？赡苁菑V告，或者一系列文章列表，或者社交媒體組件等等。
b.把它當作工具指引用戶發(fā)現(xiàn)指定內(nèi)容。最常見的例子是分類列表、標簽云，或則最熱的組件等等。
避免單一的布局
F模式布局最大的問題是它傾向于單一布局。同一行重復和相似的內(nèi)容，會讓用戶覺得無聊。如果用戶開始厭惡界面你肯定不會從中獲益的，所以增加些令人驚訝元素保持用戶的注意力。
如果你的內(nèi)容文字縱向很長，當用戶滾過第一屏后就很容易感覺無聊和空洞，這時打破布局期望的技術是非常有用的。
結論：
F型布局很貼合人眼的路徑，利用這個原理可以優(yōu)化你的布局結構。但不是說你一定要嚴格遵從這個規(guī)則，這是指個指導意見而不是模版。
