F型瀏覽模型是內(nèi)容網(wǎng)站的首選布局模型，比如新聞網(wǎng)站、博客或著陸頁。當(dāng)我們解釋完它的作用和原因時(shí)，你就會開始注意到，大量知名網(wǎng)站都在這樣做。

什么是F模型？

F型是用戶瀏覽內(nèi)容版塊時(shí)最常用的掃描瀏覽模式。

它是指，讀者會首先從左往右以水平線方向?yàn)g覽，這種瀏覽習(xí)慣是很容易理解的，然后，用戶會從屏幕最左邊垂直往下瀏覽，從段首句或小標(biāo)題中尋求自己感興趣的關(guān)鍵詞或內(nèi)容。找到后，他們又會開始從左到右正常閱讀，形成（“F”的第二條）水平線。最終就形成了一個(gè)字母 F 或 E的形狀。

如《2014 Web UI模式》中所述，CNN和紐約時(shí)報(bào)都使用了F型。

尼爾森·諾曼集團(tuán)的 Jakob Nielson 曾做過一項(xiàng)基于 232 名用戶瀏覽上千個(gè)網(wǎng)站的可讀性研究，并詳細(xì)闡述了 F 模型的實(shí)際意義：

• 用戶很少會閱讀文本中的每一個(gè)字（實(shí)際上，平均只有20％的人會全部閱讀）
• 前兩個(gè)章節(jié)最重要，是保證留存的關(guān)鍵
• 一段話只表達(dá)一個(gè)觀點(diǎn)
• 開啟新段落或新章節(jié)時(shí)，使用吸引眼球的關(guān)鍵詞

這將如何影響你的網(wǎng)站的界面設(shè)計(jì)？且往下看。

如何運(yùn)用F型

下圖來自 Brandon Jones 的課題研究，F(xiàn)型可視化的樣子。

顯然，你要把最優(yōu)質(zhì)、最能吸引人的內(nèi)容放在最上方，而左上角（見圖中點(diǎn) 1）就像一個(gè)整體錨點(diǎn)，一定會被關(guān)注到。這也是為什么許多公司的 Logo 會放在這里。

通常來說，設(shè)計(jì)師會把導(dǎo)航條放在頂部，從左上角（見圖中點(diǎn) 1）到右上角（見圖中點(diǎn) 2），方便用戶點(diǎn)擊及搜索關(guān)鍵詞，設(shè)計(jì)師們對導(dǎo)航條的設(shè)計(jì)也各有不同：輕細(xì)的導(dǎo)航條會讓用戶進(jìn)一步瀏覽下方的其他內(nèi)容，厚重的導(dǎo)航則會讓用戶更多的關(guān)注到導(dǎo)航條本身，而不是下方的內(nèi)容。

第一行之后，用戶就會來到下一個(gè)關(guān)鍵節(jié)點(diǎn)（見圖中點(diǎn) 3）并做同樣的動作（到圖中點(diǎn) 4）。理論上，用戶會繼續(xù)往下瀏覽，直到他們找到感興趣的內(nèi)容。但實(shí)際情況是，他們很可能在幾秒后就走人了，除非你能繼續(xù)吸引住他們。

因此，為了打破頁面的單調(diào)，專家們建議設(shè)計(jì)師在第二行或第三行（即“F”的第二橫或“E的第三橫）之后，借助一些“突兀的”元素來“破壞”整體布局的連續(xù)性。利用一些設(shè)計(jì)上的變化來保持視覺刺激。常用的做法是，在每過1000像素的版塊后方就來一些不一樣的布局設(shè)計(jì)。

比如下面的例子：

值得注意的是，因?yàn)槊啃薪Y(jié)尾（如圖中2和4等右側(cè)的點(diǎn)）會出現(xiàn)瀏覽中斷，所以這種地方一般用來放置廣告。這也是為什么你總能在某一行結(jié)尾處看到“電子書新鮮出爐啦”之類的廣告。

這種廣告就很好地應(yīng)用在F模型上，因?yàn)樗鼈兊奈恢蔑@而易見，卻又不會分散用戶在主要內(nèi)容上的注意力。內(nèi)容永遠(yuǎn)是最重要的，只有當(dāng)你要將用戶帶到更深的一個(gè)層級時(shí)，才應(yīng)該布置側(cè)邊欄。

在F型下，右側(cè)邊欄的主要作用有二：

• 放置有關(guān)聯(lián)但無直接關(guān)系的內(nèi)容——任何你想展示給用戶，卻與主內(nèi)容無關(guān)緊要的，比如廣告、其他文章鏈接、社交媒體控件等。
• 作為一個(gè)搜索工具——可以明顯地布置一個(gè)搜索欄，或者分類列表、標(biāo)簽云、“熱門文章”控件等。

上面的內(nèi)容可能短時(shí)間難消化，所以，下面會舉一些例子：

紐約客向我們展示了F型的廣告布局在網(wǎng)站中是很適用的。頂部David Yurman的廣告很顯眼，但好在主內(nèi)容中使用了一張紅色照片，廣告并不會喧賓奪主。如前面所說，這個(gè)廣告還放在了第二行結(jié)尾處，在換行瀏覽中斷時(shí)就能看到。

F型同樣適用于文字不多的網(wǎng)站。

iZettle 在其首頁運(yùn)用了非常規(guī)的F型。實(shí)際上，它采用了一種F和Z的混合模型布局（后面將提到）。

通過加入一句主文案（“Grow your business with iZettle”），并在大背景圖上添加一個(gè)按鈕來避免模板化。我們認(rèn)為，在布局設(shè)計(jì)時(shí)可以參考這個(gè)案例，他們最低限度地采用了F型。當(dāng)然，還有許多視覺上更為誘人的案例可以參考，但這個(gè)也是不錯的。

這個(gè)模型為何有效？

設(shè)計(jì)師們都在采用F型，是因?yàn)樗M了用戶的自然視覺模式。大部分人在他們一生中都是從上到下，從左到右地閱讀。

順應(yīng)趨勢去設(shè)計(jì)一個(gè) F 型的網(wǎng)站布局，意味著順應(yīng)用戶的自然視覺習(xí)慣。反之，如果重內(nèi)容的網(wǎng)站忽視F型，則會強(qiáng)迫用戶重新調(diào)整自己的自然視覺習(xí)慣，帶來不必要的沖突。

網(wǎng)站布局會影響轉(zhuǎn)化，所以，了解屏幕這塊不動產(chǎn)的價(jià)值則至關(guān)重要。拿Freespee來說，當(dāng)他們將網(wǎng)站重新設(shè)計(jì)成上圖版本后，通過 A/B test 顯示，在相同的廣告開支下，只是簡單地將電話號碼放在右上角更重要的位置，就能提升 30％ 的電話轉(zhuǎn)化率。

那么，讓我們來仔細(xì)分析下它的厲害之處：

• 用戶會自然而然地從圖中點(diǎn) 1 位置開始瀏覽導(dǎo)航，搜索或做其他動作，故而左上方的 Logo 能吸引用戶。
• 右上方的電話號碼（圖中點(diǎn) 2 位置）首先就能鼓動用戶，而它綠色高亮的效果更進(jìn)一步吸引了用戶。
• 網(wǎng)頁的主體里，簡潔的文案放在了點(diǎn) 3 位置。這些文字的排版也恰似一個(gè)迷你版 F 型，所以用戶會自然而然地看到下方的按鈕。

但F型也不是絕對有效的，主要原因是因?yàn)檫@種布局本身的單調(diào)性——用戶很容易就因?yàn)槊啃袃?nèi)容的重復(fù)和相似而厭倦。這也是為什么建議在這種布局中加入“突兀的”一行，這種差異有助于保持用戶的注意力。

如上圖，Kickstrater 將網(wǎng)頁分成了明顯的三行結(jié)構(gòu)。第三行則是“古怪的”那一行，通過一些垂直部件（剛好在 1000 像素左右的高度）與前面的布局模式區(qū)別開來。

注意，用戶通常使用F模型下瀏覽大塊兒的內(nèi)容，然后根據(jù)情況調(diào)整，以適應(yīng)你的網(wǎng)站品牌和風(fēng)格。如果你要修改這個(gè)模型，請確保你遵循 A List Apart 針對設(shè)計(jì)比例和網(wǎng)格所說的規(guī)則來做。

值得一提的內(nèi)容

F模型不僅僅適用于文本。

要展示多樣化的內(nèi)容，免不了對內(nèi)容進(jìn)行組織整理。F模型僅僅遵循了人眼（運(yùn)動）的共同趨勢。因此，你可以根據(jù)自己的布局做不同的優(yōu)化處理。它只是一個(gè)指南，而不是一個(gè)模板，不用完全照搬。哪怕你只是想添加一個(gè)按鈕來強(qiáng)化頂部導(dǎo)航欄，小調(diào)整也可能帶來大不同。

作者：Jerry Cao

原文：http://thenextweb.com/dd/2015/04/10/how-to-design-websites-that-mirror-how-our-eyes-work/

來源：IXDC