本文將引導(dǎo)您了解F型內(nèi)容布局的原理，它是如何工作的，以及如何應(yīng)用到設(shè)計(jì)中？

什么是F型瀏覽模式以及它的工作原理？

F型瀏覽模式：當(dāng)閱讀內(nèi)容區(qū)塊時(shí)，一種最常見的用戶眼睛掃描模式。F(Fast)指的就是快速瀏覽。F型瀏覽模式闡述了用戶是如瀏覽內(nèi)容。在短短幾秒內(nèi)，他們的眼睛以驚人的速度掃過你的網(wǎng)站頁面。

該閱讀模式由NNGroup的眼動(dòng)追蹤研究而被推廣普及，在這個(gè)研究中記錄了超過200位用戶瀏覽網(wǎng)頁時(shí)，發(fā)現(xiàn)用戶的主要閱讀行為在許多不同的網(wǎng)站和任務(wù)中相當(dāng)一致。這個(gè)閱讀模式看起來有點(diǎn)像字母F，并包含以下3個(gè)組成部分：

• 用戶首先以水平方向閱讀，通常是在內(nèi)容區(qū)域的上半部分。這個(gè)初始的部分形成了F型的頭部。
• 接下來，他們在屏幕左側(cè)垂直瀏覽，尋找段落開篇幾句中感興趣的內(nèi)容。當(dāng)他們找到感興趣的內(nèi)容時(shí)，他們在第二個(gè)水平方向上快速瀏覽，通常這塊內(nèi)容區(qū)比上一個(gè)內(nèi)容區(qū)更短小、更簡潔。這部分元素形成了F的下半部分。
• 最后，用戶在垂直方向上瀏覽內(nèi)容的左側(cè)區(qū)域。

NNGroup演示了眼動(dòng)追蹤研究，如何揭露在從左至右閱讀文化中的用戶，他們通常是如何掃描區(qū)塊內(nèi)容的，通?？雌饋硐褡帜窮或E形狀。用戶看得最多的區(qū)域是紅色的，黃色區(qū)域表示較少的查看，其次是最少觀看的藍(lán)色區(qū)域?；疑珔^(qū)域表示沒有任何吸引的。

很顯然，用戶的瀏覽模式有時(shí)候不是都包含以上三部分的。當(dāng)用戶發(fā)現(xiàn)他們感興趣的內(nèi)容時(shí)，他們就會開始正常閱讀行為，形成水平閱讀。

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

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

對大多數(shù)的西方讀者，F(xiàn)型布局方式能讓他們感到很舒服，因?yàn)樗麄円恢笔菑纳现料?、從左至右的閱讀習(xí)慣。

何時(shí)應(yīng)用F型瀏覽模式？

F型瀏覽模式適用于以文字為主的網(wǎng)站布局（如博客和新聞?wù)荆?。如果有非常多的?nèi)容，尤其是大量文本內(nèi)容，用戶會對依照自然掃描格式（也就是上邊說的F型布局模式）的設(shè)計(jì)布局會有更正向的反應(yīng)。

如何應(yīng)用F型瀏覽模式？

F型布局，在文字層面給設(shè)計(jì)師更多在內(nèi)容展示層面的控制感。

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

在你布局頁面元素之前，先區(qū)分元素優(yōu)先級和重要度。一旦你知道你希望用戶看到什么，你就可以很簡單地將他們放置在上述瀏覽模式中的交互“熱點(diǎn)區(qū)域”啦。

設(shè)定初始預(yù)期

前兩段內(nèi)容是最重要的。將最重要的內(nèi)容放置在接近頁面上部的位置，以便盡可能快地傳達(dá)給用戶網(wǎng)站/頁面的目標(biāo)。用戶通常橫向讀取頁面頭部，所以這塊區(qū)域是放置導(dǎo)航欄的好位置。

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

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

• 用走心的關(guān)鍵字開始新的段落
• 人們首先查看頁面上最主要的元素（視覺感官吸引度最大的元素）。因此，給予更重要的元素更強(qiáng)的視覺吸引度：使用排版來突出文本關(guān)鍵字（例如：高亮文本中的關(guān)鍵字）、使用某些顏色突出顯示按鈕。
• 每個(gè)段落僅表達(dá)一個(gè)想法/主題，盡可能使用項(xiàng)目符號/編號
• 在左側(cè)或右側(cè)放置最重要的內(nèi)容，因?yàn)檫@兩個(gè)位置是用戶橫向視線掃描開始的起點(diǎn)和終點(diǎn)。這兩處用戶會做短暫停頓，所以能給予用戶額外的時(shí)間來進(jìn)行思考。

利用側(cè)邊欄

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

• 提供你希望用戶看到的任何內(nèi)容，可以是一個(gè)廣告，相關(guān)文章系列、社交媒體小部件等。
• 為用戶提供一個(gè)挖掘特定內(nèi)容的工具。舉個(gè)例子，像分類列表、標(biāo)簽云、熱門帖子等。

避免千篇一律的布局

F型布局的缺點(diǎn)是比較單調(diào)（或者說千篇一律）。用戶很容易就對重復(fù)的、相似的內(nèi)容感到厭煩。在一個(gè)對一切都感到厭倦的用戶那邊得不到任何好處，所以在用戶瀏覽區(qū)域，可以適當(dāng)添加一些“微妙的元素”來保持用戶參與感。

當(dāng)你滾動(dòng)瀏覽前幾個(gè)部分之后，如果內(nèi)容長度很長，用戶就感覺很無聊，那么這種“打破預(yù)期”的布局手段就非常有用啦。

總結(jié)

F型瀏覽模式只是遵循人眼瀏覽的共同趨勢，以便你去優(yōu)化布局結(jié)構(gòu)。但是，你沒必要完完全全嚴(yán)格遵守它，因?yàn)檫@只是一個(gè)指導(dǎo)準(zhǔn)則，而不是一個(gè)標(biāo)準(zhǔn)模板。

翻譯：Maker

校對：逗砂

原文作者：Nick Babich

原文鏈接：https://uxplanet.org/f-shaped-pattern-for-reading-content-80af79cd3394

本文由 @Maker? 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。