F型瀏覽模式:設計一個良好的視覺層級結構
本文將引導您了解F型內容布局的原理,它是如何工作的,以及如何應用到設計中?
什么是F型瀏覽模式以及它的工作原理?
F型瀏覽模式:當閱讀內容區塊時,一種最常見的用戶眼睛掃描模式。F(Fast)指的就是快速瀏覽。F型瀏覽模式闡述了用戶是如瀏覽內容。在短短幾秒內,他們的眼睛以驚人的速度掃過你的網站頁面。
該閱讀模式由NNGroup的眼動追蹤研究而被推廣普及,在這個研究中記錄了超過200位用戶瀏覽網頁時,發現用戶的主要閱讀行為在許多不同的網站和任務中相當一致。這個閱讀模式看起來有點像字母F,并包含以下3個組成部分:
- 用戶首先以水平方向閱讀,通常是在內容區域的上半部分。這個初始的部分形成了F型的頭部。
- 接下來,他們在屏幕左側垂直瀏覽,尋找段落開篇幾句中感興趣的內容。當他們找到感興趣的內容時,他們在第二個水平方向上快速瀏覽,通常這塊內容區比上一個內容區更短小、更簡潔。這部分元素形成了F的下半部分。
- 最后,用戶在垂直方向上瀏覽內容的左側區域。
NNGroup演示了眼動追蹤研究,如何揭露在從左至右閱讀文化中的用戶,他們通常是如何掃描區塊內容的,通??雌饋硐褡帜窮或E形狀。用戶看得最多的區域是紅色的,黃色區域表示較少的查看,其次是最少觀看的藍色區域?;疑珔^域表示沒有任何吸引的。
很顯然,用戶的瀏覽模式有時候不是都包含以上三部分的。當用戶發現他們感興趣的內容時,他們就會開始正常閱讀行為,形成水平閱讀。
為何要應用F型瀏覽模式?
F型瀏覽模式將能幫助你創建一個具有良好視覺層級結構的設計,這樣的設計,人們就能很舒服地瀏覽啦。
對大多數的西方讀者,F型布局方式能讓他們感到很舒服,因為他們一直是從上至下、從左至右的閱讀習慣。
何時應用F型瀏覽模式?
F型瀏覽模式適用于以文字為主的網站布局(如博客和新聞站)。如果有非常多的內容,尤其是大量文本內容,用戶會對依照自然掃描格式(也就是上邊說的F型布局模式)的設計布局會有更正向的反應。
如何應用F型瀏覽模式?
F型布局,在文字層面給設計師更多在內容展示層面的控制感。
確定你的內容的優先級
在你布局頁面元素之前,先區分元素優先級和重要度。一旦你知道你希望用戶看到什么,你就可以很簡單地將他們放置在上述瀏覽模式中的交互“熱點區域”啦。
設定初始預期
前兩段內容是最重要的。將最重要的內容放置在接近頁面上部的位置,以便盡可能快地傳達給用戶網站/頁面的目標。用戶通常橫向讀取頁面頭部,所以這塊區域是放置導航欄的好位置。
為掃描而設計,而非為閱讀設計
當我們應用F型瀏覽模型去思考用戶行為方式的時候,可以將用戶最感興趣的內容沿著F型瀏覽模型去布局:
- 用走心的關鍵字開始新的段落
- 人們首先查看頁面上最主要的元素(視覺感官吸引度最大的元素)。因此,給予更重要的元素更強的視覺吸引度:使用排版來突出文本關鍵字(例如:高亮文本中的關鍵字)、使用某些顏色突出顯示按鈕。
- 每個段落僅表達一個想法/主題,盡可能使用項目符號/編號
- 在左側或右側放置最重要的內容,因為這兩個位置是用戶橫向視線掃描開始的起點和終點。這兩處用戶會做短暫停頓,所以能給予用戶額外的時間來進行思考。
利用側邊欄
側邊欄的存在能讓用戶有更深層次的參與感,因此使用側邊欄來推動用戶的參與感:
- 提供你希望用戶看到的任何內容,可以是一個廣告,相關文章系列、社交媒體小部件等。
- 為用戶提供一個挖掘特定內容的工具。舉個例子,像分類列表、標簽云、熱門帖子等。
避免千篇一律的布局
F型布局的缺點是比較單調(或者說千篇一律)。用戶很容易就對重復的、相似的內容感到厭煩。在一個對一切都感到厭倦的用戶那邊得不到任何好處,所以在用戶瀏覽區域,可以適當添加一些“微妙的元素”來保持用戶參與感。
當你滾動瀏覽前幾個部分之后,如果內容長度很長,用戶就感覺很無聊,那么這種“打破預期”的布局手段就非常有用啦。
總結
F型瀏覽模式只是遵循人眼瀏覽的共同趨勢,以便你去優化布局結構。但是,你沒必要完完全全嚴格遵守它,因為這只是一個指導準則,而不是一個標準模板。
翻譯:Maker
校對:逗砂
原文作者:Nick Babich
原文鏈接:https://uxplanet.org/f-shaped-pattern-for-reading-content-80af79cd3394
本文由 @Maker? 翻譯發布于人人都是產品經理。未經許可,禁止轉載。
主要還是取決于內容布局、標題、網頁布局、閱讀者的心理和需求有關,和F型瀏覽模型無關
?? ?? ?? ?? ?? ??
有用,感謝