我們來看看如何設(shè)計(jì)“影響用戶購買行為”的目標(biāo)網(wǎng)頁。

大多數(shù)SEM在設(shè)計(jì)登陸頁面時(shí)只考慮“用戶需求”，但從未考慮過“用戶自購行為”。

也就是說，它會(huì)影響用戶的購買因素。這也是我們?cè)O(shè)計(jì)登陸頁面中最重要的部分。

然后關(guān)注兔子，看看如何設(shè)計(jì)影響用戶購買行為的登陸頁面！

首屏內(nèi)容=美女臉

第一個(gè)屏幕是用戶在打開網(wǎng)站時(shí)看到的第一個(gè)屏幕，其重要性不言而喻。

一方面，它可以使內(nèi)容100％被用戶吸收，另一方面它極大地決定了用戶的進(jìn)入和停留。

如果你將網(wǎng)站與一個(gè)美麗的女人進(jìn)行比較，那么第一個(gè)屏幕就是這個(gè)國家的面孔。

并且通過熱圖工具分析了大量的登陸頁面，兔子發(fā)現(xiàn)80％的訪問者的瀏覽時(shí)間花在了第一個(gè)屏幕上，只有20％花在了頁面的其余部分上。

因此，對(duì)于第一個(gè)屏幕的內(nèi)容要求，它必須滿足以下兩點(diǎn)：

大大刺激用戶形成轉(zhuǎn)型

內(nèi)容應(yīng)該易于理解，內(nèi)容應(yīng)盡可能小，以滿足用戶的需求

近似效應(yīng)

指當(dāng)人們記住一系列事物時(shí)，對(duì)項(xiàng)目最后部分的記憶效應(yīng)優(yōu)于項(xiàng)目中間部分的現(xiàn)象。

流行的解釋是最新的印象將占主導(dǎo)地位。

這是什么意思？當(dāng)用戶導(dǎo)航到著陸頁的底部時(shí)，他們的注意力再次上升。所以我們必須掌握頁面末尾的內(nèi)容設(shè)計(jì)。

通常建議SEMer在最后設(shè)置更引人注目的轉(zhuǎn)換按鈕或相關(guān)鏈接，以提高目標(biāo)轉(zhuǎn)換率。

F模式設(shè)計(jì)網(wǎng)頁

NNGroup對(duì)眼動(dòng)項(xiàng)目進(jìn)行了研究。通過跟蹤瀏覽網(wǎng)頁的200多個(gè)用戶的眼球運(yùn)動(dòng)軌跡，發(fā)現(xiàn)當(dāng)用戶快速瀏覽網(wǎng)頁時(shí)，眼球的移動(dòng)類似于字母F.整個(gè)過程可歸結(jié)為如下：/p >

用戶將首先在水平方向上瀏覽，并優(yōu)先瀏覽內(nèi)容塊的上部。此時(shí)，眼球運(yùn)動(dòng)構(gòu)成了字母F的頂部。

然后視線斜視屏幕的左側(cè)，找到可能引起段落興趣的內(nèi)容。當(dāng)他們找到他們感興趣的內(nèi)容時(shí)，他們會(huì)繼續(xù)水平瀏覽，通常內(nèi)容的視線越多，第一次水平瀏覽的范圍就越小，這條視線就構(gòu)成了水平的中間位置。信F.

然后，用戶將視線移動(dòng)到屏幕的左側(cè)并繼續(xù)向下導(dǎo)航。

整個(gè)過程如下圖所示。

有了上述信息，我們可以得出兩個(gè)結(jié)論:

當(dāng)用戶瀏覽網(wǎng)頁時(shí)，他們會(huì)更加關(guān)注左側(cè)的信息

用戶在瀏覽網(wǎng)頁時(shí)更具選擇性

因此，建議SEMer根據(jù)F模式設(shè)計(jì)網(wǎng)頁。但也要遵循以下幾點(diǎn)：

關(guān)鍵信息位于頁面左側(cè)

在目標(biāo)網(wǎng)頁中，內(nèi)容是分層的，重要信息標(biāo)有不同的字體大小和顏色（用戶在閱讀時(shí)更容易注意跳過）

內(nèi)容需要生化

從以前的離線廣告，到后續(xù)的招標(biāo)，到當(dāng)前的信息流廣告，廣告的形式在不斷變化，用戶對(duì)廣告的認(rèn)知和免疫力也在不斷提高。

例如，用戶會(huì)習(xí)慣性地忽略網(wǎng)頁標(biāo)題的大橫幅，因?yàn)樗雌饋硐駨V告，沒有人喜歡廣告。

下圖為網(wǎng)頁熱點(diǎn)檢測圖。我們可以看到用戶的眼睛集中在中間，大多數(shù)人傾向于忽略底部。

因此，在設(shè)計(jì)轉(zhuǎn)換點(diǎn)時(shí)，我們不僅處于顯眼位置，更重要的是，我們應(yīng)該注意轉(zhuǎn)換點(diǎn)的內(nèi)容。

例如，在下面的圖片中，您會(huì)點(diǎn)擊哪兩張圖片？ （最低限度，您必須找到第二個(gè)轉(zhuǎn)換點(diǎn)半天，這正是我們上面所說的。）

圖1

圖2

因此，在設(shè)計(jì)網(wǎng)頁時(shí)，要注意轉(zhuǎn)換點(diǎn)的原始生物化學(xué)，并盡量避免固有的思維。

注意眼睛的設(shè)置

也許你看到主標(biāo)題有點(diǎn)尷尬。

眼睛，指的是一個(gè)人的眼睛在圖片中的具體內(nèi)容，它往往有一個(gè)明確的方向。

在生活中，我們將與某人的視線一起移動(dòng)，并且焦點(diǎn)將相應(yīng)調(diào)整。著陸頁設(shè)計(jì)中的眼睛方向也是如此。

事實(shí)上，當(dāng)你用不同的眼睛看事物時(shí)，你的眼睛就有指向目的的作用。人們會(huì)跟隨你的眼睛，朝著你眼睛所示的方向看。

圖片中的字符將提示用戶的眼睛，遵循模型或元素的方向，并注意指定的信息。

給栗子

左圖1：角色的向上眼睛引導(dǎo)用戶聚焦在角色的上半身，然后向上移動(dòng)角色的眼睛，并注意角色頂部的四條信息。

左圖2：人的眼睛，正面和右眼引導(dǎo)用戶的眼睛看到相應(yīng)的信息。

因此，在設(shè)計(jì)時(shí)，必須注意圖像的設(shè)置和圖像方向的內(nèi)容設(shè)置。這通?？梢愿鶕?jù)以下幾點(diǎn)來完成：

按照人物的臉部和眼睛的方向，并將重要和次要信息安排到相應(yīng)的位置。這意味著用戶的眼睛會(huì)朝著顯示的方向看

注意圖片中字符的表達(dá)。情緒是影響用戶轉(zhuǎn)化的重要因素，表達(dá)是影響情緒的重要因素。即：用眼睛指導(dǎo)用戶看到的內(nèi)容的方向，同時(shí)使用情感豐富的角色對(duì)用戶產(chǎn)生積極影響

使用視覺點(diǎn)來引導(dǎo)用戶可見性

當(dāng)頁面上出現(xiàn)一個(gè)點(diǎn)時(shí)，它可以迅速吸引用戶的眼球;當(dāng)有更多時(shí)，用戶的注意力在觀看圖片時(shí)會(huì)更加分散;當(dāng)用戶遇到不同大小的點(diǎn)時(shí)，用戶通常會(huì)首先關(guān)注較大的點(diǎn)，依此類推。 （點(diǎn)有時(shí)是相對(duì)的，我們可以將所有元素視為一個(gè)點(diǎn)）

例如，在下圖中，視線將首先聚焦在右側(cè)的鮮紅色草莓上，因?yàn)椋?/p>

聚焦（第一個(gè)引人注目的元素）：圖片中的大小，眼睛顏色和形狀之間有明顯的對(duì)比

亮點(diǎn)（用戶的主要愿景）：圖片中某個(gè)點(diǎn)的形狀或細(xì)節(jié)與其他元素不同

因此，基于以上結(jié)論，著陸頁的歸納設(shè)計(jì)可以遵循以下幾點(diǎn)：

根據(jù)設(shè)計(jì)需求和活動(dòng)，調(diào)整設(shè)計(jì)元素的大小或顏色，使要突出的點(diǎn)更加突出

處理主副本的字形，顏色等，以便用戶的視線具有焦點(diǎn)。或者調(diào)整文本的高低，使突出的亮點(diǎn)，弱化的弱化

使用視覺點(diǎn)來關(guān)注用戶的視線

上面，您首先注意到哪些信息？ “只有2680”袁權(quán)。

由此我們可以簡單地得出結(jié)論，同一區(qū)域內(nèi)的不同顏色總能得到更高的關(guān)注并立即掌握用戶的視野。

例如，下面的圖片，兩張圖片，通過眼睛的鮮明對(duì)比，我們可以快速注意到圖片的內(nèi)容。

從上面提到的栗子中，我們可以看到，當(dāng)圖片中有兩種顏色時(shí)，用戶的眼睛將首先關(guān)注對(duì)比度，大面積，突出的顏色，然后找到另一種顏色，然后瀏覽所有顏色。

通常，面對(duì)大格式文本，元素，圖像信息，人眼需要被引導(dǎo)，顏色是最直接的形式之一。

通過合理使用顏色來關(guān)注最重要的信息，顏色的對(duì)比度最大化。如果顏色由元素的方向和動(dòng)作的方向引導(dǎo)，則色點(diǎn)將更有影響力。

在著陸頁中，使用顏色的設(shè)計(jì)可以遵循以下幾點(diǎn)：

當(dāng)使用對(duì)比強(qiáng)的互補(bǔ)色突出主要內(nèi)容時(shí)，這種焦點(diǎn)處理方法更有效

如果圖片中有更多顏色，您可以使用顏色大小對(duì)頁面上顯示的所有信息進(jìn)行分類。

結(jié)合A/B測試并點(diǎn)擊熱圖以提高效率

當(dāng)我們根據(jù)以上幾點(diǎn)糾正頁面時(shí)，您認(rèn)為轉(zhuǎn)換是否已大幅增加？

著陸頁的設(shè)計(jì)不僅僅是這樣。我們必須學(xué)習(xí)并擅長A/B測試并不斷優(yōu)化頁面。

例如，下圖是日本旅游公司。通過熱圖，網(wǎng)站主頁上的流量分布非常集中，并在導(dǎo)航欄和下面的模塊中收集了大量的點(diǎn)擊。為了更好地引導(dǎo)流量，他們決定根據(jù)用戶的顧慮在主頁上顯示用戶感興趣的更多內(nèi)容。

如果您不分析網(wǎng)站，則無法以有針對(duì)性的方式優(yōu)化目標(biāo)網(wǎng)頁。通過將A/B測試與點(diǎn)擊熱圖相結(jié)合，我們可以顯著提高頁面的設(shè)計(jì)和轉(zhuǎn)換效率。

這些是兔子對(duì)著陸頁設(shè)計(jì)的一些看法。實(shí)際上，登陸頁面可以說是招標(biāo)過程中最重要的部分，不僅負(fù)責(zé)承載流量，還負(fù)責(zé)流量的轉(zhuǎn)換。因此，我們應(yīng)該善于多維思考并觀察頁面中的每個(gè)元素。

這說“多維思維”總是容易說出來并且很難做到。例如，有多少人考慮用眼睛來引導(dǎo)用戶的視線？

作者：兔子

資料來源：SEM聯(lián)盟（ID：semlianmeng）

« 市場調(diào)查問卷的總體設(shè)計(jì)及其控制方法 | 如何使用'邀請(qǐng)企業(yè)促進(jìn)推廣'每日介紹1000+精準(zhǔn)流程 »