當(dāng)前位置： 首頁(yè) > 常見(jiàn)問(wèn)題

百都網(wǎng)絡(luò)小編 發(fā)布于 年月日 評(píng)論() 閱讀()

打開(kāi)一個(gè)網(wǎng)站的網(wǎng)址，眼花繚亂的頁(yè)面元素，隨機(jī)插入的廣告，讓我們無(wú)從下手？。這時(shí)候我們大腦的第一反應(yīng)可能就是點(diǎn)擊右上角。

全屏聚焦=無(wú)聚焦

當(dāng)然，事實(shí)也是如此:

我們打開(kāi)一個(gè)登陸頁(yè)面，一個(gè)簡(jiǎn)單明了的登陸頁(yè)面會(huì)誘導(dǎo)我們一步步點(diǎn)擊頁(yè)面元素，最終完成我們的瀏覽。

上圖就是一個(gè)例子。用戶(hù)通過(guò)搜索引擎廣告點(diǎn)擊登陸頁(yè)面，首先看到的是自己比較關(guān)注的“課程和課程特色”。下面的畫(huà)面都是關(guān)于能給用戶(hù)帶來(lái)的價(jià)值，用戶(hù)需要完成的動(dòng)作都非常集中在“獲得試聽(tīng)類(lèi)”上。

當(dāng)然，這個(gè)網(wǎng)站的設(shè)計(jì)也存在一些問(wèn)題。例如，當(dāng)課程的價(jià)值沒(méi)有被完全引入時(shí)，用戶(hù)的閱讀行為被中斷，并且在第二個(gè)屏幕中添加“測(cè)試”表單:

登陸頁(yè)面的設(shè)計(jì)是你和訪問(wèn)者之間清晰直接的交互方式。

溝通過(guò)程的一部分是確保訪問(wèn)者受到你的積極引導(dǎo)，并能注意到你希望他們注意到的東西。關(guān)于上面的例子，有些讀者肯定會(huì)感到困惑。市場(chǎng)上不是有表頭加表嗎？測(cè)試表格也是轉(zhuǎn)化率比較高的一種表格。為什么是這個(gè)登陸頁(yè)的扣費(fèi)項(xiàng)？？

我們研究了一個(gè)頂級(jí)的登錄頁(yè)面，總結(jié)了兩個(gè)原則，可以幫助快速優(yōu)化登錄頁(yè)面的布局設(shè)計(jì)。只要掌握了這兩個(gè)基本原則，以后無(wú)論任務(wù)有多緊急，都可以提高登陸頁(yè)的轉(zhuǎn)化。

什么是視覺(jué)層次？視覺(jué)層次決定了哪些頁(yè)面元素會(huì)先吸引訪問(wèn)者，訪問(wèn)者會(huì)在頁(yè)面上與哪些元素進(jìn)行交互(以及交互的順序)。通過(guò)建立一個(gè)視覺(jué)層次，你可以確保訪問(wèn)者和登錄頁(yè)面之間的溝通是無(wú)縫的。視覺(jué)層次可以通過(guò)以下技巧實(shí)現(xiàn):格式:不同大小的元素會(huì)引導(dǎo)用戶(hù)的注意力。與較小的組件相比，較大的組件更能吸引注意力。顏色:人們總是被大膽的對(duì)比色所吸引。對(duì)比:顏色的變化可以用來(lái)抓住人們的眼睛。一種元素的顏色與另一種元素的顏色形成對(duì)比，很容易引起人們的注意。對(duì)齊:柱形圖和網(wǎng)格使元素對(duì)齊更有吸引力。鄰近:使用它來(lái)分離或合并頁(yè)面的一些元素，以幫助區(qū)分它們的位置。頁(yè)面掃描模式:眼球追蹤研究表明，一旦訪問(wèn)者到達(dá)一個(gè)網(wǎng)頁(yè)，他們的眼睛就會(huì)聚焦在整個(gè)頁(yè)面中的進(jìn)度位置。以上所有的設(shè)計(jì)元素都很重要，但本文將重點(diǎn)關(guān)注研究證明的眼球追蹤頁(yè)面瀏覽模式的相關(guān)性& #；尤其是f和z模式。

在《模型年》中，尼爾森-諾曼集團(tuán)關(guān)于眼球追蹤的研究被認(rèn)為是當(dāng)今比較有用和被引用的研究之一。在研究過(guò)程中，他們觀察了200名用戶(hù)如何瀏覽數(shù)千個(gè)不同的網(wǎng)頁(yè)。結(jié)果顯示，在不同的網(wǎng)站和測(cè)試中，用戶(hù)的主要閱讀習(xí)慣相對(duì)一致。更具體的說(shuō)，用戶(hù)的閱讀風(fēng)格是F模式。f模式是訪問(wèn)者先橫向閱讀頁(yè)面，主要是沿著內(nèi)容區(qū)的上半部分，然后向下移動(dòng)頁(yè)面到第二條水平線以上閱讀。之后，訪問(wèn)者以垂直方向?yàn)g覽左側(cè)頁(yè)面。上圖中的三張熱圖來(lái)自對(duì)三個(gè)不同網(wǎng)站用戶(hù)的眼球追蹤研究。值得一提的是，F(xiàn)模式并不一定要遵循嚴(yán)格的二維水平模式(見(jiàn)上右圖熱圖)。這是一個(gè)典型的軌跡(色鍵如下):紅色=瀏覽量大，固定率高的區(qū)域黃色=有部分瀏覽量，但固定率少藍(lán)色=瀏覽量少，固定次數(shù)很少灰色=瀏覽量很少，無(wú)固定率。這里要記住的重點(diǎn)是，用戶(hù)的眼睛從左上角開(kāi)始移動(dòng)，遍布頁(yè)面，然后向下掃描頁(yè)面，找到他們認(rèn)為有吸引力的元素。對(duì)于文本密集的頁(yè)面上你希望訪問(wèn)者注意到的元素(比如圖片)，把它們放在F模式下可以保證這些元素被看到。在他們的登陸頁(yè)面使用F模式引爆這些元素(折疊上方)。首先，訪問(wèn)者的眼睛首先會(huì)看到標(biāo)題和副標(biāo)題。接下來(lái)，他們將掃描起源的好處(圖標(biāo))。之后，訪客會(huì)看到下圖所示的兩個(gè)CTA按鈕在登陸頁(yè)面(折疊上方)使用了F模式。標(biāo)題是頁(yè)面上較大的字體，所以很可能先看到。然后就是相應(yīng)的字幕。接下來(lái)是要點(diǎn)的復(fù)印件。安排您的登錄頁(yè)面組件，使它們符合特定的視覺(jué)順序，以確保訪問(wèn)者通過(guò)您的頁(yè)面并單擊CTA按鈕。f模式通常適用于內(nèi)容較多的頁(yè)面，但也適用于內(nèi)容較少的頁(yè)面。

Z模式Z型布局通常用于內(nèi)容不多的頁(yè)面。它的設(shè)計(jì)模仿了人眼在閱讀時(shí)的路線&#;從左到右，從上到下的模式。訪客首先從左上角掃描到右上角，形成一條假想的水平線接下來(lái)，他們向下和向左掃描，形成一條假象中的對(duì)角線較后，他們?cè)俅蜗蛴铱慈?，形成第二條水平線這就是由這些眼球運(yùn)動(dòng)產(chǎn)生的觀看模式。就像F型圖案一樣，Z型圖案的布局不一定是一個(gè)精確的Z型圖案。水平線不必完全是水平的，它們也可以是有角度的。此外，整個(gè)頁(yè)面可以有多個(gè)Z字。只是要確保以下方面：頂部的水平線包括你希望訪問(wèn)者首先關(guān)注的主要組成部分對(duì)角線應(yīng)該突出任何能導(dǎo)致你的按下CTA按鈕的信息底部的水平線應(yīng)該突出CTA在這條線上的任何一點(diǎn)

Lyft（Uber較大的競(jìng)爭(zhēng)對(duì)手）落地頁(yè)的特點(diǎn)是Z型模式的一個(gè)很好的例子：訪客首先看到的是頂部橫線上的標(biāo)志和 &#;報(bào)名騎行 &#;CTA按鈕。接下來(lái)，他們沿著對(duì)角線前進(jìn)，掃描表格的標(biāo)題。較后，他們看底部的橫線，那里有Lyft與Uber的標(biāo)題和通往CTA按鈕的副標(biāo)題。

我們的較后一個(gè)例子是領(lǐng)英使用Z型模式：第一條橫線包括 &#;開(kāi)始招聘 &#;的標(biāo)題和女人的臉。向左下方掃描，訪問(wèn)者就會(huì)看到兩個(gè)藍(lán)色CTA按鈕上方的副本。在第二條對(duì)角線上，目光移到%的統(tǒng)計(jì)數(shù)字上，并從左到右橫跨整個(gè)頁(yè)面，看到其他兩個(gè)統(tǒng)計(jì)數(shù)字。較后，你可以使用Z型模式來(lái)讓訪客關(guān)注那些說(shuō)服他們向轉(zhuǎn)化目標(biāo)靠近的元素。來(lái)源于靈蹊?，作者?堃堃微海報(bào)
免責(zé)聲明：本網(wǎng)站內(nèi)容來(lái)源網(wǎng)絡(luò)，轉(zhuǎn)載是出于傳遞更多信息之目的，并不意味贊成其觀點(diǎn)或證實(shí)其內(nèi)容真實(shí)性。轉(zhuǎn)載稿涉及版權(quán)等問(wèn)題，請(qǐng)立即聯(lián)系網(wǎng)站編輯，我們會(huì)予以更改或刪除相關(guān)文章，保證您的權(quán)利。

作者：徐州百都網(wǎng)絡(luò) | 來(lái)源： | 發(fā)布于：2022-04-08 00:30:54