1、F模式

2006年，尼爾森-諾曼集團關于視線追蹤的研究被認為是當今最有用和引用最多次研究之一。

在研究過程中，他們觀察了232名用戶如何瀏覽數千個不同的網頁。研究結果顯示，用戶的主要閱讀習慣在不同的網站和測試中是相對一致的。

更確切地說，用戶的閱讀方式是F-模式。

F模式是訪問者首先以水平方向閱讀頁面，主要是沿著內容區的上部閱讀，然后向下移動頁面，閱讀到第二條水平線之上。最后，訪問者以垂直方向瀏覽左側頁面。

上圖中的三張熱量圖來自于對三個不同網站的用戶視線追蹤研究。值得一提的是，F模式不一定要遵循嚴格的雙維度水平模式（見上面右邊的熱圖）。

這是典型的運動軌跡（顏色鍵如下）：

紅色=瀏覽量最大、固定率最高的區域

黃色=有一些觀看，但固定率較少

藍色=觀看次數最少，固定次數極少

灰色=瀏覽量非常少，沒有固定率

這里需要記住的關鍵一點，用戶的視線移動從左上角開始，在整個頁面上移動，然后向下掃描頁面，尋找他們認為有吸引力的元件。

對于你希望訪問者在文字密集的頁面上注意到的元件（如圖片），將它們放在F模式中可以確保這些元素被看到。在他們的登陸頁面上使用F模式來引爆這些元素（在折疊上方）

首先，訪問者的眼睛首先會看到標題和副標題。接下來，他們將掃描原點的好處（圖標）。 

之后，訪客會看到兩個CTA按鈕

如下圖所示的落地頁上使用了F模式（在折疊上方）

標題是頁面上最大的字體，所以很可能首先被看到。然后是對應的副標題。接下來是要點中的副本。安排你的落地頁組件，使它們落入這個特定的視覺順序，以確保訪客通過你的頁面并點擊CTA按鈕。

F模式通常適用于內容較多的頁面，但當然也可以應用于內容較少的頁面。

2、Z模式

Z型布局通常用于內容不多的頁面。它的設計模仿了人眼在閱讀時的路線--從左到右，從上到下的模式。

訪客首先從左上角掃描到右上角，形成一條假想的水平線

接下來，他們向下和向左掃描，形成一條假象中的對角線

最后，他們再次向右看去，形成第二條水平線

這就是由這些眼球運動產生的觀看模式。

就像F型圖案一樣，Z型圖案的布局不一定是一個精確的Z型圖案。水平線不必完全是水平的，它們也可以是有角度的。此外，整個頁面可以有多個Z字。

只是要確保以下方面：

頂部的水平線包括你希望訪問者首先關注的主要組成部分

對角線應該突出任何能導致你的按下CTA按鈕的信息

底部的水平線應該突出CTA在這條線上的任何一點

Lyft（Uber最大的競爭對手）落地頁的特點是Z型模式的一個很好的例子：

訪客首先看到的是頂部橫線上的標志和 "報名騎行 "CTA按鈕。接下來，他們沿著對角線前進，掃描表格的標題。

最后，他們看底部的橫線，那里有Lyft與Uber的標題和通往CTA按鈕的副標題。

我們的最后一個例子是領英使用Z型模式：

第一條橫線包括 "開始招聘 "的標題和女人的臉。

向左下方掃描，訪問者就會看到兩個藍色CTA按鈕上方的副本。

在第二條對角線上，目光移到40%的統計數字上，并從左到右橫跨整個頁面，看到其他兩個統計數字。

最后，你可以使用Z型模式來讓訪客關注那些說服他們向轉化目標靠近的元素。

3、視覺層次

視覺層次決定了哪些頁面元素會首先吸引訪客，以及訪客在頁面上會與哪些元素互動（以及以何種順序）。通過建立一個視覺層次，你可以確保訪客和登陸頁面之間的交流是無縫銜接的。

視覺層次可以通過以下技術來實現：

格式：不同大小的元素將引導用戶的注意力。與較小的元件相比，較大的元件能吸引更多的注意力。

顏色：人們總是會被黑體的、對比強烈的顏色所吸引。

對比：顏色的轉變可以用來抓人眼球。一個元素的顏色與另一個元素的顏色形成對比，很容易吸引人們的注意力。

對齊：柱形圖和網格使元素對齊更易吸引注意。

接近：用其來將某些著頁面的元素分開或組合在一起，以幫助區分它們的位置。

頁面掃描模式：視線追蹤研究顯示，一旦訪客到達一個網頁，他們的視線會集中整個頁面中的進展的位置。

上述所有的設計元素都很重要，但這篇文章將重點關注于經由研究所證明的視線追蹤的頁面瀏覽模式的相關性--特別是F和Z模式。