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