眾所周知，我們大部分的用戶群體閱讀習(xí)慣，從左到右，從上至下，這跟西方文化是差不多的，接下來將從瀏覽模式、瀏覽路徑、頁面布局進(jìn)行分析，優(yōu)化頁面布局，提升閱讀效率和體驗。

早在 2006 年，尼爾森團(tuán)隊發(fā)表過一篇關(guān)于《眼睛軌跡的研究》報告，提到了"F"型瀏覽模式，為大眾所知且影響深刻的瀏覽模式，除了剛剛說的"F"型的瀏覽模式，那是否還有哪些模式？有的，經(jīng)過相關(guān)資料的查詢，總結(jié)了以下瀏覽模式。

一、 "F"型瀏覽模式

"F"型模式通常在網(wǎng)頁或手機(jī)端瀏覽長篇文本時形成，眼球運(yùn)動是掃描頁面而非閱讀。具體表現(xiàn)為：

1. 用戶首先在水平移動中瀏覽，通常是在內(nèi)容區(qū)域的上部，形成了 F 的頂欄；
2. 接下來，用戶將頁面向下移動一點，然后在第二次水平移動中掃描，該移動通常覆蓋比上一次移動更短的區(qū)域，形成了 F 的下橫線；
3. 最后，用戶垂直掃描內(nèi)容的左側(cè)，可能是一個緩慢、概要性的掃描，在眼動追蹤熱圖上顯示為實心條紋；有時眼球移動得很快，創(chuàng)建了一個更多斑點的熱圖，最后一個元素構(gòu)成了 F 的詞干。

這是眼動實驗的追蹤熱圖，紅色是關(guān)注最多和最長的區(qū)域，黃色次之，紫色是關(guān)注最少的區(qū)域，沒有顏色的部分，是測試參與者沒有注視過。

大部分的用戶習(xí)慣是從左往右，從上至下的瀏覽的模式，某些特定的用戶是從右往左的瀏覽方式，不管怎么樣的，都是會形成類似于"F"的瀏覽路徑，從右往左的用戶形成的是水平對稱的"F"。

手機(jī)端的瀏覽同樣也是適用"F"型瀏覽模式，因為手機(jī)屏幕較小，可視區(qū)域也就更小，比 PC 端更簡潔。

1. "F"型瀏覽的設(shè)計要點：

1. 用戶是掃描屏幕，不會仔細(xì)地一個字一個字閱讀頁面內(nèi)容，有可能會錯過某些關(guān)鍵信息。
2. 頁面的頭兩段非常重要，用戶基本上最關(guān)注這個部分。這兩段的好壞能直接影響用戶是否有興趣繼續(xù)瀏覽。
3. 將關(guān)鍵詞盡可能地提前在標(biāo)題、副標(biāo)題和段落的前部顯示給用戶。

"F"型瀏覽模式是用戶常用的瀏覽模式，適用于大部分場景，在瀏覽電腦或手機(jī)屏幕的時候，快速掃碼且不會逐個閱讀上面的每一個字，通過一種掃描的形式快速瀏覽，尋找關(guān)鍵信息，以提高效率，減少時間和精力的花費。

二、"Z"型瀏覽模式

顧名思義，追蹤人們?yōu)g覽屏幕眼動的路徑，從左到右，從上到下，形成類似字母"Z"形狀，通常適用于不以文本段落展示為主要內(nèi)容的頁面。

正常來說，用戶會按照紫色的路徑進(jìn)行瀏覽（遵循古騰堡原則），將重要的信息放置在 1 和 4 的位置，若 2 沒有信息，會自然而然跳過，形成綠色的瀏覽路徑（如下圖）。設(shè)計時采用"Z"型布局，將重要的信息放在視覺自然落到的地方，并且增強(qiáng)視覺強(qiáng)點，從而達(dá)到用戶體驗自然的瀏覽方式。

三、專注瀏覽模式（Commitment pattern）

這種模式已不是掃描，而是仔細(xì)閱讀，用戶會閱讀文本大部分或所有的字句，花在閱讀上的時間和精力也是最多的，但閱讀所有內(nèi)容能收集更多信息，相比"F"型瀏覽不會錯過關(guān)鍵信息。通常在任務(wù)或興趣的驅(qū)使下才會發(fā)生，比如要考試了學(xué)習(xí)、上級分配了任務(wù)等。

四、斑點瀏覽模式（Marking pattern）

在瀏覽的時候，用戶會關(guān)注的某些特定的關(guān)鍵字，如字體加粗、顏色突出的位置，感興趣的關(guān)鍵詞等，就會特別關(guān)注該區(qū)域的內(nèi)容，從而在頁面中形成類似斑點的熱圖。

從這張圖可以了解到，用戶在瀏覽的時候，左側(cè)是正常的 F 型瀏覽，瀏覽到感興趣的信息，就會在該區(qū)域停留。

五、分層蛋糕瀏覽模式（Layer-cake pattern）

當(dāng)一篇文章中包含標(biāo)題/副標(biāo)題，或者加粗字體等突出的地方，用戶就會專注突出的位置，然后快速描述正文，就會形成類似了分層蛋糕那樣的圖。

從上圖分析可知，用戶會重點關(guān)注藍(lán)色字體，也是作者想要傳達(dá)給讀者的信息，通過瀏覽重點信息，能快速理解文案內(nèi)容，是除了專注模式外，也是用戶掃描頁面的最有效方式。

六、思考

下面我們看一下"Z"型和對齊排版這兩種布局方式（也是我們常用的設(shè)計排版方式），對我們設(shè)計的影響。

大家可以先想一下，這 2 種排版方式，用戶的瀏覽軌跡是怎么樣的呢？

下面是經(jīng)過眼動實驗的兩張圖（上面的"點"次數(shù)表示用戶注視的次數(shù)，"點"大小表示用戶停留的時間長短）。

兩種排版方式，用戶都從一開始就被第一行中引人注目的產(chǎn)品圖片所吸引，發(fā)現(xiàn)對于了解產(chǎn)品信息是有幫助，下面瀏覽到圖片的時候都會查看，除此之外，他們的眼睛在文本和圖像之間多次移動，并根據(jù)最先引起他們注意的內(nèi)容引導(dǎo)到下一行。因此，這兩種布局排版差別不大。

若我們換成裝飾性的圖片，圖片包含的信息有限，會有什么樣的結(jié)果呢？

事實上，圖 1 用戶剛開始瀏覽會關(guān)注上面的圖片和文字，發(fā)現(xiàn)圖片上沒有價值的信息，只是裝飾使用，就會忽略下面看到的圖片從而跳過。圖 2 是對齊方式布局，從而更方便跳過，圖 1 按照"F"型的瀏覽習(xí)慣，視線會短暫停留在左側(cè)的圖像，無法完全跳過。

所以，頁面中若圖片是裝飾性的，用戶會選擇忽略，左對齊的排版對用戶瀏覽會更友好點。"Z"型的排版，圖片對眼睛來說很像障礙物，他的目光引導(dǎo)到一張圖片上后，他立即將目光從圖片上移開，轉(zhuǎn)向文字。

另外，按照我們的瀏覽習(xí)慣，自然而然地會關(guān)注頁面的左側(cè)，當(dāng)如果右側(cè)的內(nèi)容或圖像明顯突出的時候，會優(yōu)先關(guān)注突出部分內(nèi)容。

還有個有趣的現(xiàn)象，大多數(shù)用戶瀏覽頁面滾動到了底部，會向上滾動，返回查看幾眼圖片，再離開頁面。

七、總結(jié)

1. "F"型瀏覽適用于文本頁面，"Z"型瀏覽適用常規(guī)的頁面，瀏覽模式之間可能存在嵌套，需根據(jù)實際的場景進(jìn)行布局設(shè)計。
2. 包含圖片的頁面比單純的文本更能獲得用戶的興趣，同時含信息的圖片比裝飾性圖片更能吸引用戶關(guān)注。當(dāng)然也沒必要為了布局使用無意義的圖片，使用圖片布局都是有目的的，包括輔助說明、品牌宣傳等。
3. 若排版是包含信息的圖片，可以采用對齊或"Z"型排版，對用戶的影響差別不大。
4. 對于裝飾性的圖像，可以采用對齊的方式排版，用戶可選擇性忽略這些圖片，將更多視線花在文案上，體驗上會友好一點。而"Z"型的排版能一定程度上增加圖像曝光度，用戶很難跳過。
5. 通常頁面中的第 1 張圖像所包含的信息很重要，從而讓用戶覺得接下來的圖像是否有價值，是否值得花時間查看圖像?？梢詫⑿畔⒘看蟮膬?nèi)容放在第一行的左側(cè)，裝飾性的圖片盡量不要頂部或者左側(cè)，避免吸引用戶眼球，發(fā)現(xiàn)沒意義后重新定向視線，增加用戶困擾。
6. 對于帶有裝飾性圖片的文本對齊，圖片不要超過文本頂部對齊，或者視覺區(qū)域比文本更大，可以將它們與相應(yīng)的文本水平對齊，以避免吸引眼球，導(dǎo)致用戶重新定向。
7. 用戶瀏覽完頁面后，大部分用戶會返回再次查看，可以適當(dāng)考慮在底部新增「回到頂部」的功能，方便用戶返回查看。

參考鏈接：

1. https://www.nngroup.com/articles/zigzag-page-layout/
2. https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content-discovered/

歡迎關(guān)注團(tuán)隊微信公眾號：兆日 UCD