在產(chǎn)品設(shè)計(jì)中，我們可以根據(jù)用戶習(xí)慣或用戶心理來(lái)搭建設(shè)計(jì)策略，比如有研究指出用戶在瀏覽網(wǎng)站頁(yè)面時(shí)，常會(huì)遵循F型瀏覽模式。那么我們要如何應(yīng)用F型瀏覽模式在頁(yè)面設(shè)計(jì)中？F型瀏覽模式的應(yīng)用過(guò)程中，又有哪些問(wèn)題需要避免？

今天我們來(lái)聊聊設(shè)計(jì)中的三大視覺(jué)瀏覽模型之三：F型視覺(jué)模型。

一、什么是F型視覺(jué)模型

美國(guó)長(zhǎng)期研究網(wǎng)站可用性的著名設(shè)計(jì)工程師尼爾森，于2006年4月發(fā)表了一項(xiàng)《眼睛軌跡的研究》的報(bào)告，他曾對(duì)200多名參與者進(jìn)行了研究，結(jié)果顯示用戶的主要閱讀行為在許多不同的網(wǎng)站和任務(wù)中相當(dāng)一致。這個(gè)閱讀模式看起來(lái)有點(diǎn)像字母F。

2017年該團(tuán)隊(duì)在網(wǎng)站又更新了此模型的相關(guān)實(shí)驗(yàn)結(jié)果：

報(bào)告指出用戶第一次瀏覽頁(yè)面的時(shí)候，視線通常會(huì)以字母F的形狀觀看頁(yè)面內(nèi)容，尤其是大面積文章的時(shí)候，如下圖：

1. 用戶首先讀取水平移動(dòng)，通?？缭絻?nèi)容區(qū)域的上部。這個(gè)初始元素構(gòu)成了F的頂部欄。
2. 接下來(lái)，用戶稍微向下移動(dòng)頁(yè)面，然后在第二個(gè)水平移動(dòng)中讀取，該移動(dòng)通常覆蓋比先前移動(dòng)更短的區(qū)域。
3. 最后，用戶以垂直移動(dòng)掃描內(nèi)容的左側(cè)。

有時(shí)這是一個(gè)相當(dāng)緩慢和系統(tǒng)的掃描，在眼動(dòng)追蹤熱圖上顯示為實(shí)心條紋。其他時(shí)候用戶移動(dòng)得更快，創(chuàng)建一個(gè)眼動(dòng)熱圖，最后一個(gè)元素構(gòu)成了“F”左邊豎。

使用F模式可以確保頁(yè)面上有一個(gè)高效的視覺(jué)層次結(jié)構(gòu)這樣用戶就可以快速瀏覽內(nèi)容并快速找到相應(yīng)問(wèn)題的解決方案。

適用場(chǎng)景：內(nèi)容比較多，用戶通常會(huì)用掃描的頁(yè)面。

可以看出來(lái)我們的視線由“1-2”這三個(gè)操作節(jié)點(diǎn)的最為重要：

用到我們常見的“表格頂欄”上的一行操作區(qū)來(lái)說(shuō)，從左到右操作優(yōu)先級(jí)依次為“高—中—高（中高）”，1 號(hào)位置所在地放置操作類行為是這一行【最高】的；其次是2號(hào)位置，最后是中間的 3-4號(hào)位置。

根據(jù)尼爾森F模型，我們可以得出幾個(gè)心理暗示：

1. 讀者在瀏覽界面時(shí)是快速掃視的方式，不會(huì)仔細(xì)閱讀每一個(gè)界面內(nèi)容。
2. 界面的頭兩段文字無(wú)比重要，多用小標(biāo)題、短句引起閱讀者注意。
3. 將重要的內(nèi)容放在最上邊，將重要的信息顯示在標(biāo)題和段落的前部顯示給讀者。
4. 較少的信息應(yīng)沿著設(shè)計(jì)的左邊緣放置，通常應(yīng)放置在項(xiàng)目符號(hào)點(diǎn)上，此處幾乎不需要水平移動(dòng)眼睛即可將所有內(nèi)容帶入。

二、為何要應(yīng)用F型瀏覽模式？

F型瀏覽模式將能幫助你創(chuàng)建一個(gè)具有良好視覺(jué)層級(jí)結(jié)構(gòu)的設(shè)計(jì)，這樣的設(shè)計(jì)，人們就能很舒服地瀏覽啦。

F型布局方式能遵循人的從上至下、從左至右的閱讀習(xí)慣。

三、F型瀏覽模式的應(yīng)用

F型瀏覽模式適用于以文字為主的網(wǎng)站布局，如果有非常多的內(nèi)容，尤其是大量文本內(nèi)容，用戶會(huì)對(duì)依照自然掃描格式（也就是上邊說(shuō)的F型布局模式）的設(shè)計(jì)布局會(huì)有更正向的反應(yīng)，那么如何使用F型模型：

1. 確定你的內(nèi)容的優(yōu)先級(jí)

在你布局頁(yè)面元素之前，先區(qū)分元素優(yōu)先級(jí)和重要度。你希望用戶看到什么，那么就將最重要的內(nèi)容放置在接近頁(yè)面上部的位置，以便盡可能快地傳達(dá)給用戶網(wǎng)站/頁(yè)面的目標(biāo)。

用戶通常橫向讀取頁(yè)面頭部，所以這塊區(qū)域是放置導(dǎo)航欄的好位置。

2. 為掃描而設(shè)計(jì)，而非為閱讀設(shè)計(jì)

當(dāng)我們應(yīng)用F型瀏覽模型去思考用戶行為方式的時(shí)候，可以將用戶最感興趣的內(nèi)容沿著F型瀏覽模型去布局：

• 給予更重要的元素更強(qiáng)的視覺(jué)吸引度：使用排版和對(duì)比設(shè)計(jì)來(lái)突出文本關(guān)鍵字；
• 在左側(cè)或右側(cè)放置最重要的內(nèi)容，因?yàn)檫@兩個(gè)位置是用戶橫向視線掃描開始的起點(diǎn)和終點(diǎn)。這兩處用戶會(huì)做短暫停頓，所以能給予用戶額外的時(shí)間來(lái)進(jìn)行思考。

3. 利用側(cè)邊欄

側(cè)邊欄的存在能讓用戶有更深層次的參與感，因此使用側(cè)邊欄來(lái)推動(dòng)用戶的參與感：

提供你希望用戶看到的任何內(nèi)容，可以是一個(gè)廣告，相關(guān)文章系列、社交媒體小部件等，為用戶提供一個(gè)挖掘特定內(nèi)容的工具。

如下圖的人人都是產(chǎn)品經(jīng)理，橫向的掃描的終點(diǎn)，放置的是有關(guān)聯(lián)但無(wú)直接關(guān)系的內(nèi)容，比如用戶可能感興趣的：社群入口，廣告，相關(guān)文章。

4. 避免千篇一律的布局

F型布局的缺點(diǎn)是比較單調(diào)，用戶很容易就對(duì)重復(fù)的、相似的內(nèi)容感到厭煩。所以在用戶瀏覽區(qū)域，可以適當(dāng)添加一些“微妙的元素”或者“打破預(yù)期”的布局設(shè)計(jì)，來(lái)保持用戶參與感。

比如下圖：知乎信息列表，在同樣排版的文字信息中間，插入了一個(gè)圖文的排版，一下就打破了千篇一律的布局樣式，讓人眼得到休息。

四、F型瀏覽模式的使用注意點(diǎn)

1. F模型更適合用于內(nèi)容區(qū)域以文字為主的網(wǎng)站布局，頁(yè)面的前兩段內(nèi)容是重要的，使用視覺(jué)處理方式來(lái)對(duì)標(biāo)題和副標(biāo)題進(jìn)行區(qū)分，增強(qiáng)視覺(jué)對(duì)比。
2. F型也不是絕對(duì)有效的，主要原因是因?yàn)檫@種布局本身的單調(diào)性，用戶會(huì)錯(cuò)過(guò)一些重要內(nèi)容。建議在這種布局中加入“突兀的”一行，這種差異有助于保持用戶的注意力。
3. 值得注意的是，因?yàn)槊啃薪Y(jié)尾會(huì)出現(xiàn)瀏覽中斷，所以這種地方一般用來(lái)放置一些廣告或者你想要讓用戶注意到的內(nèi)容，這個(gè)位置顯而易見，卻又不會(huì)分散用戶在主要內(nèi)容上的注意力。

五、F型模式帶來(lái)的弊端，如何解決？

前面說(shuō)到F型排版的千篇一律帶來(lái)的用戶忽視的弊端，會(huì)導(dǎo)致用戶只關(guān)注左側(cè)偏上方內(nèi)容，許多重要的內(nèi)容都會(huì)被忽視掉，并且這種模式似乎已應(yīng)用于網(wǎng)上的所有內(nèi)容。

怎么解決F型模式帶來(lái)的弊端？這就需要發(fā)揮設(shè)計(jì)師的作用，設(shè)計(jì)合理有效的樣式引導(dǎo)用戶去閱讀。

1. 使用主次標(biāo)題，與內(nèi)容做區(qū)分

這一點(diǎn)與層狀蛋糕（Kara Pernice提出）的觀點(diǎn)一致，排列結(jié)構(gòu)類似于榴蓮千層蛋糕，一層二層三層… 據(jù)Kara Pernice研究表明，這種模式是目前掃描網(wǎng)頁(yè)最有效的方式，用戶更容易找到他們想要找的信息。

下圖是夾層蛋糕模式下的眼動(dòng)實(shí)驗(yàn)結(jié)果：

從上圖分層蛋糕眼動(dòng)圖表明，小標(biāo)題（和按鈕）更能引起參與者的注意。

例如我們常見的列表頁(yè)，其結(jié)構(gòu)是標(biāo)題+圖片的瀑布流展示，主標(biāo)題簡(jiǎn)要概括，字號(hào)加粗加大，用戶通過(guò)掃描標(biāo)題來(lái)發(fā)現(xiàn)感興趣的內(nèi)容，進(jìn)而再去閱讀相關(guān)詳細(xì)正文。

2. 頁(yè)面最重要的信息要放在前面

這一點(diǎn)不僅針對(duì)的是文字內(nèi)容，也針對(duì)功能布局，重要的功能盡量放在整個(gè)頁(yè)面上方，進(jìn)行放大加粗等對(duì)比設(shè)計(jì)處理，最次要的內(nèi)容放在最下方。

3. 相關(guān)內(nèi)容進(jìn)行分組

采用格式塔接近原則，把功能相關(guān)的內(nèi)容整合在一個(gè)模塊，整體頁(yè)面模塊化，模塊與模塊之間有一定的間距，這樣可以層級(jí)清晰，有效減少用戶界面上的視覺(jué)凌亂感，快速抓住重點(diǎn)。

4. 使用標(biāo)簽或者顏色區(qū)分

使用一些特殊的設(shè)計(jì)技巧，比如顏色區(qū)分、標(biāo)簽化、增加背景等等對(duì)想要突出的內(nèi)容進(jìn)行突出設(shè)計(jì)。

5. 使用“點(diǎn)”作為視覺(jué)錨點(diǎn)

同級(jí)信息流使用點(diǎn)線面中的“點(diǎn)”來(lái)做列表視覺(jué)錨點(diǎn)設(shè)計(jì)，比如使用符號(hào)、數(shù)字、icon等等來(lái)展示。

通過(guò)解決F型設(shè)計(jì)的弊端，可以發(fā)現(xiàn)很多理論本質(zhì)上都是貫連的，如F型其解決方法就是尼爾森十大交互原則中“易取和簡(jiǎn)約原則”的具體延伸，其中也貫連著格式塔原則、對(duì)比原則等等。

最主要是看我們?nèi)绾卧趯?shí)際工作中，了解清楚設(shè)計(jì)目標(biāo)，靈活運(yùn)用多種設(shè)計(jì)理論滿足需求，學(xué)以致用，讓我們的設(shè)計(jì)有理有據(jù)！

六、總結(jié)

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

但是，沒(méi)必要完完全全嚴(yán)格遵守原則，它只是一個(gè)指導(dǎo)準(zhǔn)則，而不是一個(gè)標(biāo)準(zhǔn)模板。如果要提高用戶的視覺(jué)體驗(yàn)，就需要我們通過(guò)優(yōu)化樣式去突出重點(diǎn)，有效引導(dǎo)用戶去瀏覽。

應(yīng)用建議：

• 原則是設(shè)計(jì)的基礎(chǔ)，并非一成不變，需要結(jié)合設(shè)計(jì)原則與產(chǎn)品目標(biāo)之間的關(guān)系進(jìn)行合理運(yùn)用；
• 不需要死遵循原則，比如焦點(diǎn)模式下用戶將首先查看頁(yè)面上最主要的元素（視覺(jué)重量最大的元素或區(qū)域）。順序?qū)⑷Q于這些焦點(diǎn)的相對(duì)權(quán)重以及指示下一步要看的任何視覺(jué)提示。
• 想要讓用戶進(jìn)行某種操作時(shí)，正常情況下主要按鈕放在右側(cè)，操作流程暢通，提高效率，需要用戶確認(rèn)思考的場(chǎng)景下，主要按鈕可放在左側(cè)，達(dá)到反復(fù)確認(rèn)的目的。
• 創(chuàng)建層次結(jié)構(gòu)和流程會(huì)顛覆視覺(jué)動(dòng)線的模型。

文中如果有不嚴(yán)謹(jǐn)、錯(cuò)誤的地方希望大家給予指正，希望大家可以多多點(diǎn)贊評(píng)論鼓勵(lì)下，最后感謝您的耐心閱讀。