F型瀏覽模型是內(nèi)容網(wǎng)站的首選布局模型，比如新聞網(wǎng)站、博客或著陸頁(yè)。當(dāng)我們解釋完它的作用和原因時(shí)，你就會(huì)開(kāi)始注意到，大量知名網(wǎng)站都在這樣做。
什么是F模型？
F 型是用戶瀏覽內(nèi)容版塊時(shí)最常用的掃描瀏覽模式。
它是指，讀者會(huì)首先從左往右以水平線方向?yàn)g覽，這種瀏覽習(xí)慣是很容易理解的，然后，用戶會(huì)從屏幕最左邊垂直往下瀏覽，從段首句或小標(biāo)題中尋求自己感興趣的關(guān)鍵詞或內(nèi)容。找到后，他們又會(huì)開(kāi)始從左到右正常閱讀，形成（“F”的第二條）水平線。最終就形成了一個(gè)字母 F 或 E的形狀。
如《2014 Web UI模式》中所述，CNN 和紐約時(shí)報(bào)都使用了F型。
尼爾森·諾曼集團(tuán)的 Jakob Nielson 曾做過(guò)一項(xiàng)基于 232 名用戶瀏覽上千個(gè)網(wǎng)站的可讀性研究，并詳細(xì)闡述了 F 模型的實(shí)際意義：
用戶很少會(huì)閱讀文本中的每一個(gè)字（實(shí)際上，平均只有20％的人會(huì)全部閱讀）
前兩個(gè)章節(jié)最重要，是保證留存的關(guān)鍵
一段話只表達(dá)一個(gè)觀點(diǎn)
開(kāi)啟新段落或新章節(jié)時(shí)，使用吸引眼球的關(guān)鍵詞
這將如何影響你的網(wǎng)站的界面設(shè)計(jì)？且往下看。南寧網(wǎng)站建設(shè)
如何運(yùn)用 F 型
下圖來(lái)自 Brandon Jones 的課題研究，F(xiàn)型可視化的樣子。
顯然，你要把最優(yōu)質(zhì)、最能吸引人的內(nèi)容放在最上方，而左上角（見(jiàn)圖中點(diǎn) 1）就像一個(gè)整體錨點(diǎn)，一定會(huì)被關(guān)注到。這也是為什么許多公司的 Logo 會(huì)放在這里。
通常來(lái)說(shuō)，設(shè)計(jì)師會(huì)把導(dǎo)航條放在頂部，從左上角（見(jiàn)圖中點(diǎn) 1）到右上角（見(jiàn)圖中點(diǎn) 2），方便用戶點(diǎn)擊及搜索關(guān)鍵詞，設(shè)計(jì)師們對(duì)導(dǎo)航條的設(shè)計(jì)也各有不同：輕細(xì)的導(dǎo)航條會(huì)讓用戶進(jìn)一步瀏覽下方的其他內(nèi)容，厚重的導(dǎo)航則會(huì)讓用戶更多的關(guān)注到導(dǎo)航條本身，而不是下方的內(nèi)容。
第一行之后，用戶就會(huì)來(lái)到下一個(gè)關(guān)鍵節(jié)點(diǎn)（見(jiàn)圖中點(diǎn) 3）并做同樣的動(dòng)作（到圖中點(diǎn) 4）。理論上，用戶會(huì)繼續(xù)往下瀏覽，直到他們找到感興趣的內(nèi)容。但實(shí)際情況是，他們很可能在幾秒后就走人了，除非你能繼續(xù)吸引住他們。
因此，為了打破頁(yè)面的單調(diào)，專(zhuān)家們建議設(shè)計(jì)師在第二行或第三行（即“F”的第二橫或“E的第三橫）之后，借助一些“突兀的”元素來(lái)“破壞”整體布局的連續(xù)性。利用一些設(shè)計(jì)上的變化來(lái)保持視覺(jué)刺激。常用的做法是，在每過(guò)1000像素的版塊后方就來(lái)一些不一樣的布局設(shè)計(jì)。
比如下面的例子。
值得注意的是，因?yàn)槊啃薪Y(jié)尾（如圖中2和4等右側(cè)的點(diǎn)）會(huì)出現(xiàn)瀏覽中斷，所以這種地方一般用來(lái)放置廣告。這也是為什么你總能在某一行結(jié)尾處看到“電子書(shū)新鮮出爐啦”之類(lèi)的廣告。
這種廣告就很好地應(yīng)用在F模型上，因?yàn)樗鼈兊奈恢蔑@而易見(jiàn)，卻又不會(huì)分散用戶在主要內(nèi)容上的注意力。內(nèi)容永遠(yuǎn)是最重要的，只有當(dāng)你要將用戶帶到更深的一個(gè)層級(jí)時(shí)，才應(yīng)該布置側(cè)邊欄。
在F型下，右側(cè)邊欄的主要作用有二：
放置有關(guān)聯(lián)但無(wú)直接關(guān)系的內(nèi)容——任何你想展示給用戶，卻與主內(nèi)容無(wú)關(guān)緊要的，比如廣告、其他文章鏈接、社交媒體控件等。
作為一個(gè)搜索工具——可以明顯地布置一個(gè)搜索欄，或者分類(lèi)列表、標(biāo)簽云、“熱門(mén)文章”控件等。
上面的內(nèi)容可能短時(shí)間難消化，所以，下面會(huì)舉一些例子：
紐約客向我們展示了F型的廣告布局在網(wǎng)站中是很適用的。頂部David Yurman的廣告很顯眼，但好在主內(nèi)容中使用了一張紅色照片，廣告并不會(huì)喧賓奪主。如前面所說(shuō)，這個(gè)廣告還放在了第二行結(jié)尾處，在換行瀏覽中斷時(shí)就能看到。
F型同樣適用于文字不多的網(wǎng)站。
iZettle 在其首頁(yè)運(yùn)用了非常規(guī)的F型。實(shí)際上，它采用了一種F和Z的混合模型布局（后面將提到）。
通過(guò)加入一句主文案（“Grow your business with iZettle”），并在大背景圖上添加一個(gè)按鈕來(lái)避免模板化。我們認(rèn)為，在布局設(shè)計(jì)時(shí)可以參考這個(gè)案例，他們最低限度地采用了F型。當(dāng)然，還有許多視覺(jué)上更為誘人的案例可以參考，但這個(gè)也是不錯(cuò)的。
這個(gè)模型為何有效？
設(shè)計(jì)師們都在采用F型，是因?yàn)樗M了用戶的自然視覺(jué)模式。大部分人在他們一生中都是從上到下，從左到右地閱讀。
順應(yīng)趨勢(shì)去設(shè)計(jì)一個(gè) F 型的網(wǎng)站布局，意味著順應(yīng)用戶的自然視覺(jué)習(xí)慣。反之，如果重內(nèi)容的網(wǎng)站忽視 F 型，則會(huì)強(qiáng)迫用戶重新調(diào)整自己的自然視覺(jué)習(xí)慣，帶來(lái)不必要的沖突。
網(wǎng)站布局會(huì)影響轉(zhuǎn)化，所以，了解屏幕這塊不動(dòng)產(chǎn)的價(jià)值則至關(guān)重要。拿 Freespee 來(lái)說(shuō)，當(dāng)他們將網(wǎng)站重新設(shè)計(jì)成上圖版本后，通過(guò) A/B test 顯示，在相同的廣告開(kāi)支下，只是簡(jiǎn)單地將電話號(hào)碼放在右上角更重要的位置，就能提升 30％ 的電話轉(zhuǎn)化率。
那么，讓我們來(lái)仔細(xì)分析下它的厲害之處：
用戶會(huì)自然而然地從圖中點(diǎn) 1 位置開(kāi)始瀏覽導(dǎo)航，搜索或做其他動(dòng)作，故而左上方的 Logo 能吸引用戶。
右上方的電話號(hào)碼（圖中點(diǎn) 2 位置）首先就能鼓動(dòng)用戶，而它綠色高亮的效果更進(jìn)一步吸引了用戶。
網(wǎng)頁(yè)的主體里，簡(jiǎn)潔的文案放在了點(diǎn) 3 位置。這些文字的排版也恰似一個(gè)迷你版 F 型，所以用戶會(huì)自然而然地看到下方的按鈕。
但 F 型也不是絕對(duì)有效的，主要原因是因?yàn)檫@種布局本身的單調(diào)性——用戶很容易就因?yàn)槊啃袃?nèi)容的重復(fù)和相似而厭倦。這也是為什么建議在這種布局中加入“突兀的”一行，這種差異有助于保持用戶的注意力。
如上圖，Kickstrater 將網(wǎng)頁(yè)分成了明顯的三行結(jié)構(gòu)。第三行則是“古怪的”那一行，通過(guò)一些垂直部件（剛好在 1000 像素左右的高度）與前面的布局模式區(qū)別開(kāi)來(lái)。
注意，用戶通常使用F模型下瀏覽大塊兒的內(nèi)容，然后根據(jù)情況調(diào)整，以適應(yīng)你的網(wǎng)站品牌和風(fēng)格。如果你要修改這個(gè)模型，請(qǐng)確保你遵循 A List Apart 針對(duì)設(shè)計(jì)比例和網(wǎng)格所說(shuō)的規(guī)則來(lái)做。
值得一提的內(nèi)容
F 模型不僅僅適用于文本。
要展示多樣化的內(nèi)容，免不了對(duì)內(nèi)容進(jìn)行組織整理。F 模型僅僅遵循了人眼（運(yùn)動(dòng)）的共同趨勢(shì)，因此，你可以根據(jù)自己的布局做不同的優(yōu)化處理。它只是一個(gè)指南，而不是一個(gè)模板，不用完全照搬。哪怕你只是想添加一個(gè)按鈕來(lái)強(qiáng)化頂部導(dǎo)航欄，小調(diào)整也可能帶來(lái)大不同。
