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