1、F模式
2006年，尼爾森-諾曼集團(tuán)關(guān)于視線追蹤的研究被認(rèn)為是當(dāng)今最有用和引用最多次研究之一。
在研究過程中，他們觀察了232名用戶如何瀏覽數(shù)千個不同的網(wǎng)頁。研究結(jié)果顯示，用戶的主要閱讀習(xí)慣在不同的網(wǎng)站和測試中是相對一致的。
更確切地說，用戶的閱讀方式是F-模式。
F模式是訪問者首先以水平方向閱讀頁面，主要是沿著內(nèi)容區(qū)的上部閱讀，然后向下移動頁面，閱讀到第二條水平線之上。最后，訪問者以垂直方向?yàn)g覽左側(cè)頁面。
上圖中的三張熱量圖來自于對三個不同網(wǎng)站的用戶視線追蹤研究。值得一提的是，F(xiàn)模式不一定要遵循嚴(yán)格的雙維度水平模式（見上面右邊的熱圖）。
這是典型的運(yùn)動軌跡（顏色鍵如下）：
紅色=瀏覽量最大、固定率最高的區(qū)域
黃色=有一些觀看，但固定率較少
藍(lán)色=觀看次數(shù)最少，固定次數(shù)極少
灰色=瀏覽量非常少，沒有固定率
這里需要記住的關(guān)鍵一點(diǎn)，用戶的視線移動從左上角開始，在整個頁面上移動，然后向下掃描頁面，尋找他們認(rèn)為有吸引力的元件。
對于你希望訪問者在文字密集的頁面上注意到的元件（如圖片），將它們放在F模式中可以確保這些元素被看到。在他們的登陸頁面上使用F模式來引爆這些元素（在折疊上方）
首先，訪問者的眼睛首先會看到標(biāo)題和副標(biāo)題。接下來，他們將掃描原點(diǎn)的好處（圖標(biāo)）。
之后，訪客會看到兩個CTA按鈕
如下圖所示的落地頁上使用了F模式（在折疊上方）
標(biāo)題是頁面上最大的字體，所以很可能首先被看到。然后是對應(yīng)的副標(biāo)題。接下來是要點(diǎn)中的副本。安排你的落地頁組件，使它們落入這個特定的視覺順序，以確保訪客通過你的頁面并點(diǎn)擊CTA按鈕。
F模式通常適用于內(nèi)容較多的頁面，但當(dāng)然也可以應(yīng)用于內(nèi)容較少的頁面。
2、Z模式
Z型布局通常用于內(nèi)容不多的頁面。它的設(shè)計(jì)模仿了人眼在閱讀時的路線--從左到右，從上到下的模式。
訪客首先從左上角掃描到右上角，形成一條假想的水平線
接下來，他們向下和向左掃描，形成一條假象中的對角線
最后，他們再次向右看去，形成第二條水平線
這就是由這些眼球運(yùn)動產(chǎn)生的觀看模式。
就像F型圖案一樣，Z型圖案的布局不一定是一個精確的Z型圖案。水平線不必完全是水平的，它們也可以是有角度的。此外，整個頁面可以有多個Z字。
只是要確保以下方面：
頂部的水平線包括你希望訪問者首先關(guān)注的主要組成部分
對角線應(yīng)該突出任何能導(dǎo)致你的按下CTA按鈕的信息
底部的水平線應(yīng)該突出CTA在這條線上的任何一點(diǎn)
Lyft（Uber最大的競爭對手）落地頁的特點(diǎn)是Z型模式的一個很好的例子：
訪客首先看到的是頂部橫線上的標(biāo)志和 "報名騎行 "CTA按鈕。接下來，他們沿著對角線前進(jìn)，掃描表格的標(biāo)題。
最后，他們看底部的橫線，那里有Lyft與Uber的標(biāo)題和通往CTA按鈕的副標(biāo)題。
我們的最后一個例子是領(lǐng)英使用Z型模式：
第一條橫線包括 "開始招聘 "的標(biāo)題和女人的臉。
向左下方掃描，訪問者就會看到兩個藍(lán)色CTA按鈕上方的副本。
在第二條對角線上，目光移到40%的統(tǒng)計(jì)數(shù)字上，并從左到右橫跨整個頁面，看到其他兩個統(tǒng)計(jì)數(shù)字。
最后，你可以使用Z型模式來讓訪客關(guān)注那些說服他們向轉(zhuǎn)化目標(biāo)靠近的元素。
3、視覺層次
視覺層次決定了哪些頁面元素會首先吸引訪客，以及訪客在頁面上會與哪些元素互動（以及以何種順序）。通過建立一個視覺層次，你可以確保訪客和登陸頁面之間的交流是無縫銜接的。
視覺層次可以通過以下技術(shù)來實(shí)現(xiàn)：
格式：不同大小的元素將引導(dǎo)用戶的注意力。與較小的元件相比，較大的元件能吸引更多的注意力。
顏色：人們總是會被黑體的、對比強(qiáng)烈的顏色所吸引。
對比：顏色的轉(zhuǎn)變可以用來抓人眼球。一個元素的顏色與另一個元素的顏色形成對比，很容易吸引人們的注意力。
對齊：柱形圖和網(wǎng)格使元素對齊更易吸引注意。
接近：用其來將某些著頁面的元素分開或組合在一起，以幫助區(qū)分它們的位置。
頁面掃描模式：視線追蹤研究顯示，一旦訪客到達(dá)一個網(wǎng)頁，他們的視線會集中整個頁面中的進(jìn)展的位置。
上述所有的設(shè)計(jì)元素都很重要，但這篇文章將重點(diǎn)關(guān)注于經(jīng)由研究所證明的視線追蹤的頁面瀏覽模式的相關(guān)性--特別是F和Z模式。
