掃一掃微信二維碼

為什么喜歡運用F型瀏覽模式來設計網站界面?

河北乾澤?2016-10-22 11:57:51? 行業資訊 ?

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

什么是F模型?

F型是用戶瀏覽內容版塊時最常用的掃描瀏覽模式。

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

如《2014 Web UI模式》中所述,CNN和紐約時報都使用了F型。

尼爾森·諾曼集團的 Jakob Nielson 曾做過一項基于 232 名用戶瀏覽上千個網站的可讀性研究,并詳細闡述了 F 模型的實際意義:

  • 用戶很少會閱讀文本中的每一個字(實際上,平均只有20%的人會全部閱讀)
  • 前兩個章節最重要,是保證留存的關鍵
  • 一段話只表達一個觀點
  • 開啟新段落或新章節時,使用吸引眼球的關鍵詞

這將如何影響你的網站的界面設計?且往下看。

如何運用F型

下圖來自 Brandon Jones 的課題研究,F型可視化的樣子。

顯然,你要把最優質、最能吸引人的內容放在最上方,而左上角(見圖中點 1)就像一個整體錨點,一定會被關注到。這也是為什么許多公司的 Logo 會放在這里。

通常來說,設計師會把導航條放在頂部,從左上角(見圖中點 1)到右上角(見圖中點 2),方便用戶點擊及搜索關鍵詞,設計師們對導航條的設計也各有不同:輕細的導航條會讓用戶進一步瀏覽下方的其他內容,厚重的導航則會讓用戶更多的關注到導航條本身,而不是下方的內容。

第一行之后,用戶就會來到下一個關鍵節點(見圖中點 3)并做同樣的動作(到圖中點 4)。理論上,用戶會繼續往下瀏覽,直到他們找到感興趣的內容。但實際情況是,他們很可能在幾秒后就走人了,除非你能繼續吸引住他們。

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

比如下面的例子:

值得注意的是,因為每行結尾(如圖中2和4等右側的點)會出現瀏覽中斷,所以這種地方一般用來放置廣告。這也是為什么你總能在某一行結尾處看到“電子書新鮮出爐啦”之類的廣告。

這種廣告就很好地應用在F模型上,因為它們的位置顯而易見,卻又不會分散用戶在主要內容上的注意力。內容永遠是最重要的,只有當你要將用戶帶到更深的一個層級時,才應該布置側邊欄。

在F型下,右側邊欄的主要作用有二:

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

上面的內容可能短時間難消化,所以,下面會舉一些例子:

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

F型同樣適用于文字不多的網站。

iZettle 在其首頁運用了非常規的F型。實際上,它采用了一種F和Z的混合模型布局(后面將提到)。

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

這個模型為何有效?

設計師們都在采用F型,是因為它模擬了用戶的自然視覺模式。大部分人在他們一生中都是從上到下,從左到右地閱讀。

順應趨勢去設計一個 F 型的網站布局,意味著順應用戶的自然視覺習慣。反之,如果重內容的網站忽視F型,則會強迫用戶重新調整自己的自然視覺習慣,帶來不必要的沖突。

網站布局會影響轉化,所以,了解屏幕這塊不動產的價值則至關重要。拿Freespee來說,當他們將網站重新設計成上圖版本后,通過 A/B test 顯示,在相同的廣告開支下,只是簡單地將電話號碼放在右上角更重要的位置,就能提升 30% 的電話轉化率。

那么,讓我們來仔細分析下它的厲害之處:

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

但F型也不是絕對有效的,主要原因是因為這種布局本身的單調性——用戶很容易就因為每行內容的重復和相似而厭倦。這也是為什么建議在這種布局中加入“突兀的”一行,這種差異有助于保持用戶的注意力。

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

注意,用戶通常使用F模型下瀏覽大塊兒的內容,然后根據情況調整,以適應你的網站品牌和風格。如果你要修改這個模型,請確保你遵循 A List Apart 針對設計比例和網格所說的規則來做。

值得一提的內容

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

要展示多樣化的內容,免不了對內容進行組織整理。F模型僅僅遵循了人眼(運動)的共同趨勢。因此,你可以根據自己的布局做不同的優化處理。它只是一個指南,而不是一個模板,不用完全照搬。哪怕你只是想添加一個按鈕來強化頂部導航欄,小調整也可能帶來大不同。

ico私募赚钱