在網(wǎng)頁(yè)或APP設(shè)計(jì)中，如果想讓用戶更舒適、更有效率地瀏覽，設(shè)計(jì)人員則需要對(duì)頁(yè)面瀏覽順序進(jìn)行合理布局，從而提升用戶的使用體驗(yàn)。那么，你可以結(jié)合哪些視覺動(dòng)線模型來做好界面布局設(shè)計(jì)？本文便總結(jié)了三大模型以及相應(yīng)的設(shè)計(jì)技巧，一起來看看吧。

今天我們來聊聊設(shè)計(jì)中的三大視覺瀏覽模型：古騰堡原則、Z型布局模型、F型布局模型，最后提供10個(gè)設(shè)計(jì)視覺動(dòng)線的小技巧。

一、視覺動(dòng)線

視覺動(dòng)線不是什么新詞：在互聯(lián)網(wǎng)以前，經(jīng)常在雜志或報(bào)紙領(lǐng)域應(yīng)用。在屏幕上閱讀比在紙上閱讀更累，更容易被打斷，因此在線上為用戶建立視覺路徑比原來的報(bào)紙雜志更為重要。

在網(wǎng)頁(yè)或者APP設(shè)計(jì)中，視覺動(dòng)線是指對(duì)頁(yè)面的瀏覽順序。建立視覺動(dòng)線是通過頁(yè)面布局設(shè)計(jì)，使用戶快速理解內(nèi)容和導(dǎo)航元素。

尤其在第一次進(jìn)入網(wǎng)站時(shí)，用戶可以通過快速的視線掃描內(nèi)容，來判斷哪些是他們需要的內(nèi)容。任何內(nèi)容都可能成為吸引用戶的元素：詞語(yǔ)，句子，圖像或動(dòng)畫。

1. 為什么需要建立視覺動(dòng)線？

用戶體驗(yàn)專家雅各布尼爾森回答了“人們?nèi)绾卧诰€閱讀”的問題，簡(jiǎn)單地說：“人們不會(huì)逐字閱讀網(wǎng)頁(yè); 他們用視線掃描頁(yè)面。這就說明：如果我們不確定這個(gè)網(wǎng)站是否能提供想要的內(nèi)容，那我們不會(huì)花時(shí)間和精力去探索這個(gè)網(wǎng)站。

作為一名設(shè)計(jì)師，如何讓用戶快速掃描閱讀，找到他們所需的內(nèi)容是用戶體驗(yàn)至關(guān)重要的一步，也是實(shí)現(xiàn)產(chǎn)品目標(biāo)的重要一步。

為了創(chuàng)造出訪客眼睛要遵循的正確途徑，你需要了解我們的眼睛是如何掃描處理信息的。

如果你能預(yù)測(cè)用戶的視線將會(huì)占有極大的優(yōu)勢(shì)，在布局頁(yè)面元素時(shí)前，你就可以知道優(yōu)先的該擺放在什么位置，一旦你知道你想要用戶先看到什么，你就能可以通過視線的規(guī)律將你的重點(diǎn)內(nèi)容放在用戶的“熱點(diǎn)”里。

2. 有效的視覺動(dòng)線設(shè)計(jì)的作用

1. 幫助用戶快速完成任務(wù)，實(shí)現(xiàn)用戶目標(biāo)；
2. 用戶在搜索他們需要的內(nèi)容時(shí)會(huì)少犯錯(cuò)誤；
3. 用戶可以快速了解網(wǎng)站的結(jié)構(gòu)和導(dǎo)航邏輯；
4. 降低跳出率，提高用戶留存；
5. 提高營(yíng)銷效率。

二、古騰堡原則

1. 什么是古騰堡原則

古騰堡原則是由14世紀(jì)西方活字印刷術(shù)發(fā)明人約翰·古騰堡提出，早在20世紀(jì)50年代在設(shè)計(jì)報(bào)紙的過程中，提出了一項(xiàng)原則，認(rèn)為人的閱讀方式應(yīng)該是遵循某種習(xí)慣進(jìn)行的，像讀書一樣，由左到右，從上到下。

經(jīng)過研究，他最終得出了被后人熟知的「古騰堡原則」，古騰堡你可能覺得既難懂還陌生，它還有另外一個(gè)名字：對(duì)角線平衡法則。

這個(gè)原則的支撐點(diǎn)為「閱讀重心」，由人們一直以來的閱讀習(xí)慣形成。將頁(yè)面的設(shè)計(jì)與閱讀的重心相協(xié)調(diào)，能幫助讀者梳理閱讀的邏輯。據(jù)研究發(fā)現(xiàn)，這么做能提高讀者閱讀的節(jié)奏和理解能力。

古騰堡原則指人的閱讀方式遵循從左到右的眼動(dòng)規(guī)律，且畫面顯示的東西都分成四個(gè)象限：

1）第一視覺區(qū)（Primary Optical Area）：處于左上方，讀者首先注意到的位置。

無論用戶在搜索內(nèi)容、主動(dòng)閱讀或者快速瀏覽，這都是用戶閱讀的第一落點(diǎn)區(qū)域。因此在這個(gè)區(qū)域我們應(yīng)放置一級(jí)內(nèi)容或者核心功能。

2）最終視覺區(qū)（Final Optical Area）：處于右下方，視覺流程的終點(diǎn)。

這個(gè)區(qū)域是用戶瀏覽行為的最終落點(diǎn)區(qū)域，當(dāng)用戶瀏覽到這個(gè)部分時(shí)需要采取措施，我們可以在這里插入按鈕或者行動(dòng)點(diǎn)。這也就能解釋為什么按鈕都會(huì)在右下角出現(xiàn)。當(dāng)用戶的瀏覽行為結(jié)束后，可以進(jìn)行操作反饋。

3）強(qiáng)休息區(qū)（Strong Follow Area）：處于右上方，較少被注意到。

在這個(gè)階段，我們不應(yīng)該去設(shè)置一個(gè)重要的行動(dòng)點(diǎn)，一方面用戶容易忽視，另一方面，當(dāng)用戶瀏覽完中心區(qū)域的內(nèi)容后，再返回到強(qiáng)休息區(qū)操作，視線會(huì)有個(gè)折回過程，用戶體驗(yàn)并不太理想。

4）弱休息區(qū)（Weak Follow Area）：處于左下方，最少被注意到。

用戶對(duì)這塊的注意程度最弱，因此也用來放置最弱的信息提示。

2. 古騰堡原則在設(shè)計(jì)中的應(yīng)用

遵循古騰堡法則，界面中的左上和右下是用戶視覺最為重點(diǎn)關(guān)注的位置，設(shè)計(jì)師應(yīng)該把界面的關(guān)鍵元素放在主視區(qū)，最終視覺區(qū)可以放按鈕，休息區(qū)可以用來放一些相對(duì)次要的內(nèi)容，如輔助圖形、文字信息。

比如我們常用的頁(yè)面彈窗、各種文件和合同文件等等就是采用這種原則進(jìn)行設(shè)計(jì)的。

1）古騰堡原則在web端界面布局設(shè)計(jì)

我們可以根據(jù)一般的用戶視覺習(xí)慣，來放信息權(quán)重不同的內(nèi)容。

第一視覺區(qū)是用戶瀏覽網(wǎng)頁(yè)的起始點(diǎn)，最終視覺區(qū)是結(jié)束離開網(wǎng)頁(yè)的終點(diǎn)。整體是根據(jù)人們從上到下、從左至右有規(guī)律的閱讀習(xí)慣設(shè)計(jì)的。

我們可以看到人人都是產(chǎn)品經(jīng)理網(wǎng)站信息結(jié)構(gòu)的布局

1. 根據(jù)起點(diǎn)第一視覺區(qū)的特性把LOGO和導(dǎo)航放在左上角，推薦的文章也以圖片的形式放在這里進(jìn)行曝光；
2. 弱休息區(qū)則放一些最新推薦的文章，吸引用戶不斷往下翻；
3. 高閑置區(qū)則放文章內(nèi)容之外的驚喜推送內(nèi)容；
4. 最終視覺區(qū)則是提供給用戶相關(guān)推薦課程或者想要加入的社區(qū)入口，也是常見的放置廣告的地方。

2）古騰堡原則在移動(dòng)端頁(yè)面布局設(shè)計(jì)

古騰堡圖表應(yīng)用最典型的例子就是商品詳情頁(yè)，在界面的頂部展示商品圖片、名稱、價(jià)格、快遞和優(yōu)惠等用戶主要關(guān)心的信息；右上和左下通常是分享、客服和收藏等次要信息；右下角則放置最終促成用戶交易的購(gòu)買按鈕。

3）圖文類信息

結(jié)合古騰堡的視線強(qiáng)弱分析，我們可以得知左側(cè)的首要視覺點(diǎn)一定是強(qiáng)視覺區(qū)，但是有時(shí)候簡(jiǎn)單的圖片+文字的排列也會(huì)有很多設(shè)計(jì)思考。

比如：第一個(gè)圖今日頭條的布局，光看它的配圖我們根本猜不出來整體條目所表達(dá)的內(nèi)容，所以頭條的圖片元素傳達(dá)信息的效率遠(yuǎn)不如文字，所以第一視覺區(qū)會(huì)留給文字信息；

而第二圖中美團(tuán)列表也圖片所傳達(dá)的信息效率更直觀，會(huì)一眼告訴用戶我這家是西餐還是中餐，是早點(diǎn)還是正餐，所以在美團(tuán)的條目中圖片會(huì)被放在第一視覺區(qū)。

這兩種布局的目的都是讓用戶可以快速瀏覽，不讓用戶在接收信息時(shí)受阻造成體驗(yàn)打斷。

此處還可以延伸一下，如上圖第三個(gè)圖，頭條的視頻條目也是先文字后視頻，為什么呢？

按理說視頻的傳達(dá)信息效率要遠(yuǎn)大于配圖，猜想一下，頭條的設(shè)計(jì)是想將視頻作為終端休息區(qū)進(jìn)行視覺強(qiáng)化，第一，可以強(qiáng)化信息種類的分類讓用戶更好辨識(shí)，第二，讓視頻條目傳達(dá)信息效率更快且滿足整體使用APP時(shí)一致性的用戶心智，讓用戶能快速上手并且順暢體驗(yàn)瀏覽。

3. 古騰堡原則在按鈕設(shè)計(jì)中的應(yīng)用

我們還可以依據(jù)古騰堡原則來解讀關(guān)于按鈕位置背后所呈現(xiàn)的設(shè)計(jì)思路。

1）標(biāo)題和操作按鈕

我們都知道引導(dǎo)用戶操作的頁(yè)面中，一般頁(yè)面按鈕都在界面底部是因?yàn)殡x手近，方便操作，但不僅僅如此還因?yàn)闉g覽是用戶的第一行為，他們的視線會(huì)根據(jù)頁(yè)面元素進(jìn)行移動(dòng)，最終停留在底部結(jié)尾的地方。

根據(jù)古騰堡原則，將標(biāo)題和內(nèi)容放在頂部即第一視覺區(qū)，引導(dǎo)用戶瀏覽所有內(nèi)容后注意到底部的按鈕作為終端休息區(qū)，這樣的擺放即符合用戶由上到下的閱讀習(xí)慣又達(dá)到了產(chǎn)品預(yù)期的目標(biāo)。

2）底部垂直雙按鈕

按鈕的水平布局和垂直布局：

垂直布局下，用戶瀏覽時(shí)的眼動(dòng)路徑單純向下，這種由上自下的瀏覽效率是最高的。

水平布局時(shí)，用戶由左至右的瀏覽效率要明顯低于垂直布局，但也同時(shí)避免了垂直布局下過快的決策造成風(fēng)險(xiǎn)。

這和表單布局方向類似，那些想要讓用戶快速瀏覽并完成的表單往往采用了垂直布局，而需要用戶仔細(xì)閱讀、認(rèn)真填寫的表單往往使用了水平布局。

如果產(chǎn)品希望用戶對(duì)每個(gè)按鈕都有足夠的關(guān)注度，垂直擺放是最佳選擇，且【重要按鈕應(yīng)該放在頁(yè)面最底部】，雖然垂直雙按鈕在樣式上做了區(qū)分，但用戶同樣會(huì)停留一段時(shí)間將按鈕的內(nèi)容進(jìn)行對(duì)比思考。

那么，按照古騰堡原則，重要的按鈕應(yīng)該放在頁(yè)面最底部，但是現(xiàn)實(shí)我們看到的垂直擺放按鈕的主次反而是相反的，主要的 CTA 按鈕往往被放置在了上方？

觀察上圖，有沒有發(fā)現(xiàn)淺色按鈕很容易被忽略掉，這樣就違背了產(chǎn)品要保證每一個(gè)按鈕都要有足夠關(guān)注度的目的，所以我們要違背古騰堡原則來滿足業(yè)務(wù)需求，正如我們所看到的微信授權(quán)頁(yè)面一樣。

為了保證「允許」與「拒絕」這兩個(gè)獨(dú)立的按鈕能夠被用戶足夠的重視，并且其中的任意一個(gè)按鈕不會(huì)被輕易的忽略掉，這里將「允許」按鈕顏色加重設(shè)定為主按鈕，并且放在「拒絕」按鈕之上，讓眼睛原本垂直向下的運(yùn)動(dòng)軌跡產(chǎn)生回流的變化。

“拒絕”按鈕能讓用戶注意到，這樣便起到了防錯(cuò)性，缺點(diǎn)是會(huì)對(duì)用戶造成流程上較強(qiáng)的打斷性，適用于需要用戶思慮、審核信息的場(chǎng)景。

所以，這也提示我在設(shè)計(jì)中要思考：設(shè)計(jì)原則雖是設(shè)計(jì)的基礎(chǔ)，并非一成不變，要合理權(quán)衡設(shè)計(jì)原則與產(chǎn)品目標(biāo)之間的關(guān)系。

3）水平按鈕主次

水平擺放的按鈕，最典型的就是電商類型的詳情頁(yè)，【加入購(gòu)物車】和【立即購(gòu)買】按鈕。

結(jié)合古騰堡原則的視覺重點(diǎn)說明，右下角視為視覺終端區(qū)域，即視覺最終停留的位置，所以他們將與轉(zhuǎn)化率相關(guān)的【立即購(gòu)買】按鈕放在了界面的右下角，讓用戶更容易關(guān)注到。

再比如：比較常見的「確認(rèn)」和「取消」彈窗樣式，通常是在需要讓用戶確認(rèn)某種操作行為時(shí)出現(xiàn)，有可能是提交表單、確定信息、頁(yè)面操作引導(dǎo)等等，目的是讓用戶最快地看到主要操作內(nèi)容，為用戶提高操作效率。

這些按鈕的差異不僅僅是位置，還包含按鈕的樣式、顏色、尺寸等等維度都存在著明顯差異。比如上圖的，頁(yè)面引導(dǎo)按鈕，支付寶的轉(zhuǎn)入轉(zhuǎn)出按鈕位置，都是一樣的邏輯，也是我們?cè)谠O(shè)計(jì)中的一些設(shè)計(jì)支持業(yè)務(wù)轉(zhuǎn)化的一種方式。

為什么要這樣設(shè)定水平按鈕主次關(guān)系？

平常我們所看到的彈窗，推薦按鈕都是在右側(cè)，那么將推薦按鈕放在左側(cè)會(huì)怎么樣？如下圖所示：

當(dāng)我們?cè)谠O(shè)計(jì)表單中的組合按鈕時(shí)，比如：取消與確認(rèn)、提現(xiàn)與充值。根據(jù)古騰堡法則，用戶使用界面時(shí)從第一視覺落點(diǎn)區(qū)是主視覺區(qū)(Primary Optical Area)，最終停留在結(jié)尾的終點(diǎn)區(qū)(Terminal Area)。

不難看出推薦按鈕放在右側(cè)后，眼睛的運(yùn)動(dòng)軌跡會(huì)在水平方向軸上來回的往復(fù)運(yùn)動(dòng)，無形中增加了用戶選擇時(shí)長(zhǎng)。

水平多按鈕同樣存在著反面應(yīng)用：

當(dāng)業(yè)務(wù)需求需要用戶產(chǎn)生視覺回流，或者想要讓用戶習(xí)慣性的點(diǎn)擊右下角終點(diǎn)位置，比如常見的卸載軟件提示彈窗。

相比橫排按鈕，用戶點(diǎn)擊主操作按鈕時(shí)會(huì)更加順暢，有利于業(yè)務(wù)的轉(zhuǎn)化，對(duì)于用戶體驗(yàn)流程的打斷也會(huì)比豎向按鈕相對(duì)弱些，適用于能幫助用戶快速完成流程的場(chǎng)景，具體使用哪種布局要權(quán)衡體驗(yàn)、用戶與業(yè)務(wù)目標(biāo)之間的統(tǒng)籌關(guān)系。

4）右上角按鈕位置

根據(jù)古騰堡原則，右上角區(qū)域?qū)儆趶?qiáng)休息區(qū)，用戶對(duì)這塊的注意程度最低。

既然如此，為什么頁(yè)面的“發(fā)布”、“編輯”等按鈕都在右上角呢？

頂部按鈕的設(shè)計(jì)，關(guān)鍵還在于可編輯內(nèi)容區(qū)域，而不是按鈕本身，頂部按鈕更適用于「編輯頁(yè)面」，頂部按鈕尺寸較小，它所占空間有限，因此在操作上相對(duì)來說不便于點(diǎn)擊，需要用戶謹(jǐn)慎操作。

而底部按鈕的核心在于按鈕本身，而不是內(nèi)容。底部按鈕更適合全局最終的確定，提交等操作按鈕。

4. 應(yīng)用古騰堡原則需要注意點(diǎn)

1）雖然古騰堡圖所揭示的閱讀規(guī)律是普遍適用的，但是只在信息均勻分布的頁(yè)面證明古騰堡原則的閱讀規(guī)律。

若是為了突破常規(guī)或達(dá)到一種強(qiáng)烈的沖擊，古登堡圖所揭示的視覺規(guī)律經(jīng)常被設(shè)計(jì)師所顛覆。常用的顛覆方法為采用特別醒目的形象，或者大小顏色更為鮮明搶眼的元素置于閑置區(qū)，從而改變玩家的閱讀順序。

上圖banner中，右側(cè)的3D內(nèi)容第一吸引用戶眼球，而后才會(huì)看到左邊的文字，視覺流程如紅色箭頭，這就是突破古騰堡常規(guī)設(shè)計(jì)原則的常見設(shè)計(jì)。

2）語(yǔ)言本身的閱讀順序可能也會(huì)產(chǎn)生一定的影響，例如阿拉伯語(yǔ)從右至左的文字順序可能并不符合古騰堡原則的閱讀規(guī)律。

3）用戶已熟悉，并養(yǎng)成獨(dú)特閱讀習(xí)慣的頁(yè)面也不一定遵循此規(guī)律，比如用戶自動(dòng)跳過輪播廣告的【輪播圖盲視區(qū)】現(xiàn)象。

5. 總結(jié)

古騰堡圖貫穿于界面設(shè)計(jì)的每個(gè)角落，只要謹(jǐn)記閱讀引力的順序：從上到下，從左到右，綜合閱讀流來排布視覺層級(jí)，即能做出合理的設(shè)計(jì)。

但設(shè)計(jì)師也不能局限于古騰堡圖的規(guī)律中，要善用規(guī)律并結(jié)合其他設(shè)計(jì)知識(shí)做出更加完美的設(shè)計(jì)。

聊完了古騰堡原則，接下來我們來聊一聊第二種視覺瀏覽模型。

三、Z型視覺模型

1. 什么是Z型視覺模型

“z”型視覺模式的布局遵循字母Z的形狀，跟蹤人眼掃描頁(yè)面時(shí)的路線——從左到右，從上到下的規(guī)則。

• 首先，人們從左上角到右上角進(jìn)行掃描，形成一條水平線；
• 第二步，向頁(yè)面的左下側(cè)，創(chuàng)建一條對(duì)角線；
• 最后，再次向右轉(zhuǎn)，形成第二條水平線。

當(dāng)觀眾的視角以這種模式移動(dòng)時(shí)，它形成一個(gè)虛構(gòu)的“Z”字形：

“Z”型布局的一個(gè)例子。圖片來源：Tutplus

Z型模型與古騰堡圖一樣，設(shè)計(jì)師將把最重要的信息沿圖案的路徑放置，它與古騰堡圖的主要區(qū)別在于Z模式表明觀眾將穿過兩個(gè)休閑區(qū)域。否則，它們?nèi)詫⒃谙嗤牡胤介_始和結(jié)束，并且仍然穿過中間。

2. 兩個(gè)Z模型的拓展模型

1）鋸齒型

多個(gè)Z模型組合成右曲折模型，如果我們繼續(xù)向圖案中添加更多的鋸齒和曲折，隨著Z的對(duì)角線部分越來越淺，最終我們將產(chǎn)生一系列接近水平的左右移動(dòng)。

鋸齒型是Z型布局方式使用最多的，因?yàn)橛脩粢话銜?huì)繼續(xù)向右移動(dòng)，然后稍微向下然后向左移動(dòng)，然后再次開始向右的另一次水平移動(dòng)，這就形成我們自然閱讀大塊文本的方式。

上圖右圖通過引導(dǎo)用戶通過幾個(gè)關(guān)鍵產(chǎn)品功能，并用“了解功能”的入口完成重復(fù)的Z型布局的功能。在此布局中，“了解XX”按鈕起輔助的作用，可幫助讀者進(jìn)入下一個(gè)相關(guān)頁(yè)面，而無需閱讀完整內(nèi)容。

2）金三角圖案

Z模型還會(huì)導(dǎo)致所謂的金三角形圖案出現(xiàn)。如果先進(jìn)行水平和對(duì)角線的第一次運(yùn)動(dòng)，然后關(guān)閉形狀，則最終得到一個(gè)直角三角形，其直角為上/左角。

頁(yè)面頂部的三角形區(qū)域?qū)⑹亲畛？吹降膮^(qū)域，該模型表明您需要在其中三個(gè)放置最重要的信息，形成封閉的三角形。

3. Z型視覺模型在設(shè)計(jì)中的應(yīng)用

“Z”型模式的掃描發(fā)生在不以文本為中心的頁(yè)面上（對(duì)于文本繁重的頁(yè)面，如文章或搜索結(jié)果，最好使用“F”型模式（ F-Pattern））。

Z型布局的前提其實(shí)很簡(jiǎn)單：在頁(yè)面上加上字母Z。理想情況下，你希望人們首先查看最重要的信息，再次查看第二個(gè)重要的信息。因此，重要的元素應(yīng)該沿著掃描路徑放置。

1）卡片瀑布流布局

移動(dòng)端經(jīng)常會(huì)遇到雙列的信息流卡片設(shè)計(jì)，眼睛從左向右移動(dòng)，在視線移到右上角后沿著斜對(duì)角向下方走，然后視覺再次向右移動(dòng)，視覺移動(dòng)的軌跡就像字母Z形狀，用戶的視線來回切換。

2）列表布局

z形閱讀習(xí)慣適用于大面積的可視區(qū)域，需要根據(jù)瀏覽習(xí)慣，把重要的信息快速呈現(xiàn)給用戶，一般在新聞?lì)惍a(chǎn)品中通常會(huì)出現(xiàn)大面積文字，需要通過圖片引導(dǎo)用戶去關(guān)注該模塊，因此根據(jù)z形瀏覽順序可以在對(duì)應(yīng)的視覺點(diǎn)放置圖片或者內(nèi)容。

如圖知乎的文本編排從左側(cè)標(biāo)題到右側(cè)圖片的閱讀順序

3）web端頁(yè)面布局

web端“z”型模式很好地解決了以主要圍繞一個(gè)或兩個(gè)主要元素為中心的簡(jiǎn)單頁(yè)面，或登錄頁(yè)面的設(shè)計(jì)視覺路徑。

騰訊文檔的登錄頁(yè)面是Z型布局的一個(gè)例子，這樣的布局還有很多，有興趣的小伙伴可以多找?guī)讉€(gè)網(wǎng)頁(yè)看看

4. 總結(jié)

你可以利用Z型模式將重要信息放在視線自然而然能看到的地方，以增加其視覺突出。

四、F型視覺模型

1. 什么是F型視覺模型

美國(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è)閱讀模式看起來有點(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. 接下來，用戶稍微向下移動(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è)高效的視覺層次結(jié)構(gòu)這樣用戶就可以快速瀏覽內(nèi)容并快速找到相應(yīng)問題的解決方案。

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

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

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

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

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

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

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

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

3. F型瀏覽模式的應(yīng)用

F型瀏覽模式適用于以文字為主的網(wǎng)站布局，如果有非常多的內(nèi)容，尤其是大量文本內(nèi)容，用戶會(huì)對(duì)依照自然掃描格式（也就是上邊說的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)的視覺吸引度：使用排版和對(duì)比設(shè)計(jì)來突出文本關(guān)鍵字；

在左側(cè)或右側(cè)放置最重要的內(nèi)容，因?yàn)檫@兩個(gè)位置是用戶橫向視線掃描開始的起點(diǎn)和終點(diǎn)。這兩處用戶會(huì)做短暫停頓，所以能給予用戶額外的時(shí)間來進(jìn)行思考。

3）利用側(cè)邊欄

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

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

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

4）避免千篇一律的布局

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

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

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

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

5. F型模式帶來的弊端，如何解決？

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

怎么解決F型模式帶來的弊端？這就需要發(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)加粗加大，用戶通過掃描標(biāo)題來發(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í)清晰，有效減少用戶界面上的視覺凌亂感，快速抓住重點(diǎn)。

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

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

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

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

通過解決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ù)！

6. 總結(jié)

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

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

五、建立視覺動(dòng)線的技巧

1. 使用可視信息設(shè)計(jì)對(duì)內(nèi)容進(jìn)行優(yōu)先級(jí)排序

使用視覺信息結(jié)構(gòu)設(shè)計(jì)方式在頁(yè)面上排列和組織內(nèi)容的方式，讓用戶了解每個(gè)信息模塊的重要性以及優(yōu)先級(jí)關(guān)系。

比如一篇文章，會(huì)先看標(biāo)題，然后是副標(biāo)題，最后才會(huì)看具體的內(nèi)容信息。

用戶可以掃描標(biāo)題和副標(biāo)題，來了解他們對(duì)這篇文章是否感興趣。如果標(biāo)題明確，副標(biāo)題告知用戶文章的結(jié)構(gòu)和內(nèi)容，這會(huì)吸引用戶閱讀具體的內(nèi)容模塊。但如果用戶看到冗長(zhǎng)的文本信息，他們會(huì)產(chǎn)生恐懼心理，不知道要花多長(zhǎng)時(shí)間來閱讀這些文字以及是否值得投入時(shí)間和精力。

構(gòu)建視覺信息結(jié)構(gòu)設(shè)計(jì)的方式：尺寸、顏色、對(duì)比、接近、負(fù)空間、重復(fù)等等

2. 將核心導(dǎo)航放在網(wǎng)站標(biāo)題位置

不管用戶遵循哪種視覺動(dòng)線，都是從頁(yè)面的頂部水平區(qū)域開始的。因此在頁(yè)面的頂部常常會(huì)展示網(wǎng)站標(biāo)題，導(dǎo)航信息和品牌信息。

我們需要了解目標(biāo)用戶，他們是如何與網(wǎng)站的業(yè)務(wù)目標(biāo)相聯(lián)系 – 哪些信息或?qū)Ш綉?yīng)該作為最重要的展現(xiàn)元素。例如：電子商務(wù)網(wǎng)站，搜索功能應(yīng)立即可見，并且通常是標(biāo)題位置的常駐功能。而小型企業(yè)網(wǎng)站，就無需搜索功能，取而代之的重要元素是各種業(yè)務(wù)鏈接。

注意：標(biāo)題區(qū)域不應(yīng)承載過多信息，太多的信息只會(huì)使用戶無法聚焦。

3. 保持負(fù)空間的平衡

負(fù)空間也稱為是布局的留白，是頁(yè)面或屏幕上所有對(duì)象的一種呼吸空間，它定義了元素的界限。

負(fù)空間不僅存在于元素周圍，也存在于元素和元素之間。

根據(jù)格式塔原則在它們之間創(chuàng)造了必要的聯(lián)系，并建立了有效的視覺表現(xiàn)。在網(wǎng)站和移動(dòng)應(yīng)用的UI設(shè)計(jì)中，負(fù)空間是導(dǎo)航可見的重要因素：沒有足夠的留白，就很難看到布局元素，用戶會(huì)錯(cuò)過他們真正需要的東西。

4. 操作按鈕位置明顯

頁(yè)面設(shè)計(jì)應(yīng)該讓用戶在幾秒鐘內(nèi)看到可操作按鈕，使用戶了解他們?cè)谶@個(gè)頁(yè)面可以進(jìn)行什么操作。并且在黑白和模糊模式下檢查頁(yè)面，看能否看清操作按鈕。如果在這兩種情況下都可以快速識(shí)別操作按鈕，那么這些操作按鈕會(huì)幫你高效的完成它的使命。

比如下圖的頁(yè)面上，用戶就可以快速找到立即購(gòu)買的按鈕。

5. 文字信息的易讀性

易讀性定義了人們閱讀文字，短語(yǔ)和復(fù)制塊的容易程度。尤其是對(duì)于填充了大量文本的界面，應(yīng)著重考慮易讀性，很多因素都會(huì)影響快速掃視文本的效率。

設(shè)計(jì)師應(yīng)檢查自己的頁(yè)面是否遵循排版法則以及所選字體是否具備易讀性。建議設(shè)計(jì)中進(jìn)行可用性測(cè)試，測(cè)試用戶是否能速輕松地感知文本信息。

6. 使用數(shù)字

這個(gè)技巧來源于尼爾森的另一項(xiàng)調(diào)查：眼動(dòng)追蹤研究表明，在掃描網(wǎng)頁(yè)的過程中，數(shù)字通常會(huì)阻止用戶的視線徘徊并吸引注視，即便這些數(shù)字是在大段文字之中，我們潛意識(shí)地將數(shù)字與事實(shí)，統(tǒng)計(jì)數(shù)據(jù)，大小和距離相關(guān)聯(lián)。

因此，數(shù)字可以吸引用戶的注意力，并且在頁(yè)面排版方便數(shù)字比文本數(shù)字更緊湊簡(jiǎn)潔，閱讀起來更快速。

7. 精簡(jiǎn)內(nèi)容，避免大段文字

盡量不要使一段文本的容量太大，簡(jiǎn)短的段落看起來更容易消化，如果這段信息對(duì)讀者沒有價(jià)值，用戶可以選擇跳過。

8. 使用編號(hào)和項(xiàng)目符號(hào)

根據(jù)點(diǎn)線面“點(diǎn)的向心性“，使用帶有數(shù)字或項(xiàng)目符號(hào)的列表，可以清晰地組織數(shù)據(jù)，聚焦引起用戶的注意，突出你想要的信息，使得信息不會(huì)淹沒在普通的文本信息中。

9. 突出文本中的關(guān)鍵信息

通過使用文本加粗，斜體和顏色變化等等設(shè)計(jì)技巧，將用戶的注意力集中在段落中包含的重要部分，或者引用或其他類型的特定數(shù)據(jù)上。

比如我們常見的在視覺上標(biāo)記出文本鏈接：比如加下劃線，字體變色等，讓用戶一眼就可以識(shí)別到文字鏈接，確定是可以點(diǎn)擊操作的。

10. 使用圖像和插圖

在網(wǎng)頁(yè)設(shè)計(jì)中，插圖，圖片比文字更吸引注意力，在構(gòu)建視覺信息層次方面起到很重要的作用。

設(shè)計(jì)中可以采用插入圖片或插圖來提高用戶掃視效率，比如信息列表，文本類別，商品詳情列表等等。

六、最后

設(shè)計(jì)中的三個(gè)視覺動(dòng)線模型包含：古騰堡原則、Z型布局、F型布局，合理運(yùn)用這些視覺動(dòng)線模型，用戶會(huì)跟隨你“設(shè)計(jì)”的視覺動(dòng)線和運(yùn)動(dòng)規(guī)律來瀏覽頁(yè)面，可以有效提高用戶閱讀的節(jié)奏和理解能力。

應(yīng)用這些模型，建議：

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