本文將帶你理解F型布局的基本原則次屠，它是怎樣運作的，以及怎樣創(chuàng)建你自己F型布局淫半。
什么是F型布局溃槐，它如何運作匣砖？
當(dāng)人們面對大塊大塊的文字時科吭，F(xiàn)型是最常見的瀏覽模式昏滴，F(xiàn)代表“fast”。這正是用戶閱讀內(nèi)容的方法对人。幾秒里谣殊，他們眼神以神奇的速度橫跨網(wǎng)頁。
這種模式因為NNGroup的視線路徑研究而被普及牺弄，在這項研究里記錄了200多為用戶瀏覽成千上萬網(wǎng)頁時的主要閱讀行為姻几，同時，這些閱讀行為在不同的站點和任務(wù)上都保持了一致性势告。這種閱讀模式有點像F蛇捌，由以下三部分組成：
a.用戶的視線首先是水平移動，通常是瀏覽內(nèi)容區(qū)域的頂部咱台。這構(gòu)成了F上面那一橫络拌。
b.接下來，用戶的視線會沿著屏幕左側(cè)的垂直線從上到下移動回溺，從而找到段落里他們感興趣的點春贸。如果他們發(fā)現(xiàn)了感興趣的句子，視線就會形成第二條水平線遗遵。但是通常這條線會比之前的水平線短些萍恕。這構(gòu)成了F下面那條短一點兒的橫線。
c.最后车要，用戶的視線繼續(xù)沿著屏幕左側(cè)屏幕的垂直線向下移動允粤。
人的眼睛通常會在左上角開始，沿水平線移動翼岁，然后鄉(xiāng)下移動到另一條水平線维哈，在沒有感興趣的內(nèi)容時，會保持沿垂直線移動登澜。
NNGroup做的眼動研究解釋了典型用戶瀏覽大段文字時的閱讀軌跡看起來像是字母F或E阔挠。圖中紅色區(qū)域代表用戶集中閱讀，黃色代表注意力沒那么集中脑蠕，藍色區(qū)域代表一掃而過购撼，灰色區(qū)域代表根本沒注意到。
顯然谴仙，用戶瀏覽模式并不總是由這三部分組成迂求。當(dāng)用戶找到他們感興趣的內(nèi)容時，他們自然而然的就會橫向閱讀晃跺。
為什么我們要使用F型閱讀模式揩局？
F型模式會使你的設(shè)計具有良好的視覺層次，這種設(shè)計會帶給用戶良好的閱讀體驗掀虎。F型布局對于大部分西方讀者是很舒適的凌盯，因為他們的閱讀習(xí)慣是從上到下從左到右的付枫。
我們什么時候使用它？
F型模式通常用在文本較多的網(wǎng)頁驰怎，比如博客活著新聞?wù)军c阐滩。如果有大量的內(nèi)容尤其是文字內(nèi)容，自然的瀏覽模型會使用戶具有良好的體驗县忌。
如何使用F模型掂榔？
F型布局實際上讓設(shè)計師能夠把控用戶的視線。
劃分內(nèi)容的優(yōu)先級
在組織頁面重的元素前症杏，首先要劃分出來哪些是最重要的哪些是最不重要的装获。一旦你知道哪些是你想讓用戶看到的，你就應(yīng)該放在閱讀模型的熱點上厉颤，從而保證正確的交互饱溢。
最前面的兩段內(nèi)容是最重要的。將最重要的內(nèi)容放置在頁面的頂部走芋，盡可能快速地表達整個站點的主旨绩郎。用戶通常橫向閱讀頁眉，所以這個地方最好放導(dǎo)航條翁逞。
為瀏覽設(shè)計而不是閱讀
在F型閱讀模式中要時刻記住用戶的主要行為是瀏覽肋杖，所以把用戶感興趣的內(nèi)容放在瀏覽路徑上。
a.以具有誘惑力的關(guān)鍵詞起始段落
b.用戶第一眼看到的是主要元素挖函。頁面的主要元素或者區(qū)域最好具有較重的視覺重量状植。可以通過使用不同的字體樣式暗示文本的重要性（比如高亮文本中的關(guān)鍵詞）怨喘，或者某些高亮色的按鈕津畸。
每段只表述一個觀點，盡量使用點句必怜。
c.將重要的內(nèi)容（比如CTA）放在左右邊上肉拓，用戶開始或者停止橫向視線的地方。這些點會存在視線向下移動時的短暫的停留梳庆，這些短暫的停留構(gòu)成了用戶的思考時間暖途。
使用側(cè)邊
側(cè)邊欄的存在是指引用戶到更高的層級，使用側(cè)邊欄驅(qū)動用戶參與膏执。
a.明確你希望用戶看到的內(nèi)容驻售，但不適合有機的與基礎(chǔ)內(nèi)容相結(jié)合「祝可能是廣告欺栗，或者一系列文章列表，或者社交媒體組件等等。
b.把它當(dāng)作工具指引用戶發(fā)現(xiàn)指定內(nèi)容迟几。最常見的例子是分類列表消请、標(biāo)簽云，或則最熱的組件等等瘤旨。
避免單一的布局
F模式布局最大的問題是它傾向于單一布局。同一行重復(fù)和相似的內(nèi)容竖伯，會讓用戶覺得無聊存哲。如果用戶開始厭惡界面你肯定不會從中獲益的，所以增加些令人驚訝元素保持用戶的注意力七婴。
如果你的內(nèi)容文字縱向很長祟偷，當(dāng)用戶滾過第一屏后就很容易感覺無聊和空洞，這時打破布局期望的技術(shù)是非常有用的打厘。
結(jié)論：
F型布局很貼合人眼的路徑修肠，利用這個原理可以優(yōu)化你的布局結(jié)構(gòu)。但不是說你一定要嚴(yán)格遵從這個規(guī)則户盯，這是指個指導(dǎo)意見而不是模版嵌施。
