本文將帶你理解F型布局的基本原則，它是怎樣運(yùn)作的暑椰，以及怎樣創(chuàng)建你自己F型布局。
什么是F型布局荐绝，它如何運(yùn)作一汽？
當(dāng)人們面對(duì)大塊大塊的文字時(shí)，F(xiàn)型是最常見(jiàn)的瀏覽模式低滩，F(xiàn)代表“fast”召夹。這正是用戶閱讀內(nèi)容的方法。幾秒里恕沫，他們眼神以神奇的速度橫跨網(wǎng)頁(yè)监憎。
這種模式因?yàn)?a target="_blank" rel="nofollow">NNGroup的視線路徑研究而被普及，在這項(xiàng)研究里記錄了200多為用戶瀏覽成千上萬(wàn)網(wǎng)頁(yè)時(shí)的主要閱讀行為婶溯，同時(shí)鲸阔，這些閱讀行為在不同的站點(diǎn)和任務(wù)上都保持了一致性。這種閱讀模式有點(diǎn)像F迄委，由以下三部分組成：
a.用戶的視線首先是水平移動(dòng)褐筛，通常是瀏覽內(nèi)容區(qū)域的頂部。這構(gòu)成了F上面那一橫叙身。
b.接下來(lái)渔扎，用戶的視線會(huì)沿著屏幕左側(cè)的垂直線從上到下移動(dòng)，從而找到段落里他們感興趣的點(diǎn)信轿。如果他們發(fā)現(xiàn)了感興趣的句子晃痴，視線就會(huì)形成第二條水平線妓忍。但是通常這條線會(huì)比之前的水平線短些。這構(gòu)成了F下面那條短一點(diǎn)兒的橫線愧旦。
c.最后，用戶的視線繼續(xù)沿著屏幕左側(cè)屏幕的垂直線向下移動(dòng)定罢。
顯然，用戶瀏覽模式并不總是由這三部分組成权埠。當(dāng)用戶找到他們感興趣的內(nèi)容時(shí)榨了，他們自然而然的就會(huì)橫向閱讀。
為什么我們要使用F型閱讀模式攘蔽？
F型模式會(huì)使你的設(shè)計(jì)具有良好的視覺(jué)層次龙屉，這種設(shè)計(jì)會(huì)帶給用戶良好的閱讀體驗(yàn)。F型布局對(duì)于大部分西方讀者是很舒適的满俗，因?yàn)樗麄兊拈喿x習(xí)慣是從上到下從左到右的转捕。
我們什么時(shí)候使用它？
F型模式通常用在文本較多的網(wǎng)頁(yè)唆垃，比如博客活著新聞?wù)军c(diǎn)五芝。如果有大量的內(nèi)容尤其是文字內(nèi)容，自然的瀏覽模型會(huì)使用戶具有良好的體驗(yàn)辕万。
如何使用F模型与柑？
F型布局實(shí)際上讓設(shè)計(jì)師能夠把控用戶的視線。
劃分內(nèi)容的優(yōu)先級(jí)
在組織頁(yè)面重的元素前蓄坏，首先要?jiǎng)澐殖鰜?lái)哪些是最重要的哪些是最不重要的价捧。一旦你知道哪些是你想讓用戶看到的，你就應(yīng)該放在閱讀模型的熱點(diǎn)上涡戳，從而保證正確的交互结蟋。
最前面的兩段內(nèi)容是最重要的。將最重要的內(nèi)容放置在頁(yè)面的頂部渔彰，盡可能快速地表達(dá)整個(gè)站點(diǎn)的主旨嵌屎。用戶通常橫向閱讀頁(yè)眉推正，所以這個(gè)地方最好放導(dǎo)航條。
為瀏覽設(shè)計(jì)而不是閱讀
在F型閱讀模式中要時(shí)刻記住用戶的主要行為是瀏覽宝惰，所以把用戶感興趣的內(nèi)容放在瀏覽路徑上植榕。
a.以具有誘惑力的關(guān)鍵詞起始段落
b.用戶第一眼看到的是主要元素。頁(yè)面的主要元素或者區(qū)域最好具有較重的視覺(jué)重量尼夺∽鸩校可以通過(guò)使用不同的字體樣式暗示文本的重要性（比如高亮文本中的關(guān)鍵詞），或者某些高亮色的按鈕淤堵。
每段只表述一個(gè)觀點(diǎn)寝衫，盡量使用點(diǎn)句。
c.將重要的內(nèi)容（比如CTA）放在左右邊上拐邪，用戶開(kāi)始或者停止橫向視線的地方慰毅。這些點(diǎn)會(huì)存在視線向下移動(dòng)時(shí)的短暫的停留，這些短暫的停留構(gòu)成了用戶的思考時(shí)間扎阶。
使用側(cè)邊
側(cè)邊欄的存在是指引用戶到更高的層級(jí)汹胃，使用側(cè)邊欄驅(qū)動(dòng)用戶參與。
a.明確你希望用戶看到的內(nèi)容东臀，但不適合有機(jī)的與基礎(chǔ)內(nèi)容相結(jié)合统台。可能是廣告啡邑，或者一系列文章列表贱勃，或者社交媒體組件等等。
b.把它當(dāng)作工具指引用戶發(fā)現(xiàn)指定內(nèi)容谤逼。最常見(jiàn)的例子是分類列表贵扰、標(biāo)簽云，或則最熱的組件等等流部。
避免單一的布局
F模式布局最大的問(wèn)題是它傾向于單一布局戚绕。同一行重復(fù)和相似的內(nèi)容，會(huì)讓用戶覺(jué)得無(wú)聊枝冀。如果用戶開(kāi)始厭惡界面你肯定不會(huì)從中獲益的舞丛，所以增加些令人驚訝元素保持用戶的注意力。
如果你的內(nèi)容文字縱向很長(zhǎng)果漾，當(dāng)用戶滾過(guò)第一屏后就很容易感覺(jué)無(wú)聊和空洞球切，這時(shí)打破布局期望的技術(shù)是非常有用的。
結(jié)論：
F型布局很貼合人眼的路徑绒障，利用這個(gè)原理可以優(yōu)化你的布局結(jié)構(gòu)吨凑。但不是說(shuō)你一定要嚴(yán)格遵從這個(gè)規(guī)則，這是指?jìng)€(gè)指導(dǎo)意見(jiàn)而不是模版。
