百都網(wǎng)絡(luò)小編 發(fā)布于 年月日 評論() 閱讀()
打開一個網(wǎng)站的網(wǎng)址，眼花繚亂的頁面元素，隨機插入的廣告，讓我們無從下手？。這時候我們大腦的第一反應(yīng)可能就是點擊右上角。
全屏聚焦=無聚焦
當(dāng)然，事實也是如此:
我們打開一個登陸頁面，一個簡單明了的登陸頁面會誘導(dǎo)我們一步步點擊頁面元素，最終完成我們的瀏覽。
上圖就是一個例子。用戶通過搜索引擎廣告點擊登陸頁面，首先看到的是自己比較關(guān)注的“課程和課程特色”。下面的畫面都是關(guān)于能給用戶帶來的價值，用戶需要完成的動作都非常集中在“獲得試聽類”上。
當(dāng)然，這個網(wǎng)站的設(shè)計也存在一些問題。例如，當(dāng)課程的價值沒有被完全引入時，用戶的閱讀行為被中斷，并且在第二個屏幕中添加“測試”表單:
登陸頁面的設(shè)計是你和訪問者之間清晰直接的交互方式。
溝通過程的一部分是確保訪問者受到你的積極引導(dǎo)，并能注意到你希望他們注意到的東西。關(guān)于上面的例子，有些讀者肯定會感到困惑。市場上不是有表頭加表嗎？測試表格也是轉(zhuǎn)化率比較高的一種表格。為什么是這個登陸頁的扣費項？？
我們研究了一個頂級的登錄頁面，總結(jié)了兩個原則，可以幫助快速優(yōu)化登錄頁面的布局設(shè)計。只要掌握了這兩個基本原則，以后無論任務(wù)有多緊急，都可以提高登陸頁的轉(zhuǎn)化。
什么是視覺層次？視覺層次決定了哪些頁面元素會先吸引訪問者，訪問者會在頁面上與哪些元素進(jìn)行交互(以及交互的順序)。通過建立一個視覺層次，你可以確保訪問者和登錄頁面之間的溝通是無縫的。視覺層次可以通過以下技巧實現(xiàn):格式:不同大小的元素會引導(dǎo)用戶的注意力。與較小的組件相比，較大的組件更能吸引注意力。顏色:人們總是被大膽的對比色所吸引。對比:顏色的變化可以用來抓住人們的眼睛。一種元素的顏色與另一種元素的顏色形成對比，很容易引起人們的注意。對齊:柱形圖和網(wǎng)格使元素對齊更有吸引力。鄰近:使用它來分離或合并頁面的一些元素，以幫助區(qū)分它們的位置。頁面掃描模式:眼球追蹤研究表明，一旦訪問者到達(dá)一個網(wǎng)頁，他們的眼睛就會聚焦在整個頁面中的進(jìn)度位置。以上所有的設(shè)計元素都很重要，但本文將重點關(guān)注研究證明的眼球追蹤頁面瀏覽模式的相關(guān)性& #；尤其是f和z模式。
在《模型年》中，尼爾森-諾曼集團關(guān)于眼球追蹤的研究被認(rèn)為是當(dāng)今比較有用和被引用的研究之一。在研究過程中，他們觀察了200名用戶如何瀏覽數(shù)千個不同的網(wǎng)頁。結(jié)果顯示，在不同的網(wǎng)站和測試中，用戶的主要閱讀習(xí)慣相對一致。更具體的說，用戶的閱讀風(fēng)格是F模式。f模式是訪問者先橫向閱讀頁面，主要是沿著內(nèi)容區(qū)的上半部分，然后向下移動頁面到第二條水平線以上閱讀。之后，訪問者以垂直方向瀏覽左側(cè)頁面。上圖中的三張熱圖來自對三個不同網(wǎng)站用戶的眼球追蹤研究。值得一提的是，F(xiàn)模式并不一定要遵循嚴(yán)格的二維水平模式(見上右圖熱圖)。這是一個典型的軌跡(色鍵如下):紅色=瀏覽量大，固定率高的區(qū)域黃色=有部分瀏覽量，但固定率少藍(lán)色=瀏覽量少，固定次數(shù)很少灰色=瀏覽量很少，無固定率。這里要記住的重點是，用戶的眼睛從左上角開始移動，遍布頁面，然后向下掃描頁面，找到他們認(rèn)為有吸引力的元素。對于文本密集的頁面上你希望訪問者注意到的元素(比如圖片)，把它們放在F模式下可以保證這些元素被看到。在他們的登陸頁面使用F模式引爆這些元素(折疊上方)。首先，訪問者的眼睛首先會看到標(biāo)題和副標(biāo)題。接下來，他們將掃描起源的好處(圖標(biāo))。之后，訪客會看到下圖所示的兩個CTA按鈕在登陸頁面(折疊上方)使用了F模式。標(biāo)題是頁面上較大的字體，所以很可能先看到。然后就是相應(yīng)的字幕。接下來是要點的復(fù)印件。安排您的登錄頁面組件，使它們符合特定的視覺順序，以確保訪問者通過您的頁面并單擊CTA按鈕。f模式通常適用于內(nèi)容較多的頁面，但也適用于內(nèi)容較少的頁面。
Z模式Z型布局通常用于內(nèi)容不多的頁面。它的設(shè)計模仿了人眼在閱讀時的路線&#;從左到右，從上到下的模式。訪客首先從左上角掃描到右上角，形成一條假想的水平線接下來，他們向下和向左掃描，形成一條假象中的對角線較后，他們再次向右看去，形成第二條水平線這就是由這些眼球運動產(chǎn)生的觀看模式。就像F型圖案一樣，Z型圖案的布局不一定是一個精確的Z型圖案。水平線不必完全是水平的，它們也可以是有角度的。此外，整個頁面可以有多個Z字。只是要確保以下方面：頂部的水平線包括你希望訪問者首先關(guān)注的主要組成部分對角線應(yīng)該突出任何能導(dǎo)致你的按下CTA按鈕的信息底部的水平線應(yīng)該突出CTA在這條線上的任何一點
Lyft（Uber較大的競爭對手）落地頁的特點是Z型模式的一個很好的例子：訪客首先看到的是頂部橫線上的標(biāo)志和 &#;報名騎行 &#;CTA按鈕。接下來，他們沿著對角線前進(jìn)，掃描表格的標(biāo)題。較后，他們看底部的橫線，那里有Lyft與Uber的標(biāo)題和通往CTA按鈕的副標(biāo)題。
我們的較后一個例子是領(lǐng)英使用Z型模式：第一條橫線包括 &#;開始招聘 &#;的標(biāo)題和女人的臉。向左下方掃描，訪問者就會看到兩個藍(lán)色CTA按鈕上方的副本。在第二條對角線上，目光移到%的統(tǒng)計數(shù)字上，并從左到右橫跨整個頁面，看到其他兩個統(tǒng)計數(shù)字。較后，你可以使用Z型模式來讓訪客關(guān)注那些說服他們向轉(zhuǎn)化目標(biāo)靠近的元素。來源于靈蹊?，作者?堃堃微海報
免責(zé)聲明：本網(wǎng)站內(nèi)容來源網(wǎng)絡(luò)，轉(zhuǎn)載是出于傳遞更多信息之目的，并不意味贊成其觀點或證實其內(nèi)容真實性。轉(zhuǎn)載稿涉及版權(quán)等問題，請立即聯(lián)系網(wǎng)站編輯，我們會予以更改或刪除相關(guān)文章，保證您的權(quán)利。
作者：徐州百都網(wǎng)絡(luò) | 來源： | 發(fā)布于：2022-04-08 00:30:54