編輯導(dǎo)讀：為登錄頁(yè)面創(chuàng)建視覺(jué)效果就好比為面試搭配著裝，視覺(jué)效果提供了微妙的和潛意識(shí)的指標(biāo)，幫助訪問(wèn)者選擇行動(dòng)。本文作者分享了7個(gè)視覺(jué)技巧，一起來(lái)看一下吧。

用一個(gè)通俗的例子讓你明白，登錄頁(yè)面視覺(jué)效果的重要性：

為登錄頁(yè)面創(chuàng)建視覺(jué)效果就好比為面試搭配著裝。

應(yīng)聘者希望面試官認(rèn)為他們已經(jīng)做好充足準(zhǔn)備，并且非常適合公司的職位。你希望你的登陸頁(yè)面上的視覺(jué)效果可以反映出自己的品牌風(fēng)格，并告訴你的訪問(wèn)者，你所提供的正是他們所需要的。

為求職面試搭配著裝和為登陸頁(yè)面尋找最佳視覺(jué)效果的另一個(gè)相似之處是什么? 那就是不要迅速選擇第一個(gè)選項(xiàng)，多嘗試幾種，再考慮哪一個(gè)效果最好。

視覺(jué)效果提供了微妙的和潛意識(shí)的指標(biāo)，幫助訪問(wèn)者選擇行動(dòng)。

它們可以豐富文字所傳達(dá)的內(nèi)容，使其更有說(shuō)服力，也可以代替文字內(nèi)容，直接產(chǎn)生更快捷的影響力。

如果你的網(wǎng)站還是純純的靠文字妄圖吸引流量……

以下是7種久經(jīng)考驗(yàn)的視覺(jué)效果，通常用于以產(chǎn)品為重點(diǎn)的營(yíng)銷，幫助你用內(nèi)容為重點(diǎn)的登錄頁(yè)面進(jìn)行轉(zhuǎn)換！！

一、滿足訪問(wèn)者的眼睛——抽象內(nèi)容具象化

能夠打開(kāi)一個(gè)包裹，手里拿著一個(gè)東西，這會(huì)產(chǎn)生一種滿足感。但內(nèi)容所提供的通常是數(shù)字化產(chǎn)品。為了制造一個(gè)讓你的訪客可以接觸到的感覺(jué)，你可以把你的數(shù)字內(nèi)容顯示在實(shí)體設(shè)備里(比如智能手機(jī)或其他設(shè)備)。

這一策略與我們?cè)赩enngage進(jìn)行的關(guān)于Facebook廣告轉(zhuǎn)換的研究相一致。表現(xiàn)第二好的變異以物理表征為特征(令我們驚訝的是，表現(xiàn)最好的變異以模因?yàn)樘卣?。

看看這個(gè)電子書登陸頁(yè)面:

這個(gè)登錄頁(yè)面提供了在平板電腦上顯示的內(nèi)容產(chǎn)品的圖像，允許訪問(wèn)者把他們將要獲得的產(chǎn)品可視化。

二、贏得訪問(wèn)者的信任——提供可視化的互動(dòng)演示

贏得訪問(wèn)者信任的一個(gè)方法是讓他們與你的站點(diǎn)進(jìn)行互動(dòng)。以Monotype的登錄頁(yè)面為例:

它的登陸頁(yè)面巧妙地向訪問(wèn)者展示了Monotype的全部功能。訪問(wèn)者可以實(shí)時(shí)更改字體以查看它們的外觀。讓他們對(duì)自己的期望有一個(gè)概念。

畢竟，就算是買件襯衣你也得先試穿不是？

三、給訪問(wèn)者講個(gè)故事——多使用插圖

現(xiàn)在許多企業(yè)變聰明起來(lái)了，他們開(kāi)始使用自定義插圖，而不是庫(kù)存插圖。

我喜歡這種方法，因?yàn)楹玫牟鍒D可以讓訪問(wèn)者置身于你的登陸頁(yè)面。他們?yōu)橛袆?chuàng)意的講故事制造了機(jī)會(huì)。而且，消費(fèi)者愿意為故事買單，所以網(wǎng)站很適合用故事來(lái)展現(xiàn)。

以Intercom的娛樂(lè)登陸頁(yè)面為例:

插圖加強(qiáng)了文本中所暗示的“包袱”。同時(shí)它們也講述了一個(gè)故事。

在第一幅圖中，一群“人”試圖進(jìn)行有效的溝通，但失敗了，表現(xiàn)在令人困惑、交錯(cuò)的箭頭和沮喪的面部表情上。

但第二個(gè)例子更簡(jiǎn)單——只有在你和你的客戶之間有一條清晰的溝通渠道。

四、強(qiáng)調(diào)強(qiáng)調(diào)再?gòu)?qiáng)調(diào)——多使用圖標(biāo)

圖標(biāo)也很有用，因?yàn)樗鼈兛梢栽谝粋€(gè)圖形中表達(dá)一個(gè)想法。觀眾在不需要文本的情況下很快就能理解諸如Twitter標(biāo)志之類的圖像所傳達(dá)的含義。而且，在某些情況下，圖標(biāo)的意義補(bǔ)充或加強(qiáng)了文本內(nèi)容。

看看WordStream是如何為它的電子書登陸頁(yè)面使用圖標(biāo)的。

獎(jiǎng)杯圖標(biāo)強(qiáng)化了這一理念，即本指南將幫助訪客贏得AdWords。它也誘使訪問(wèn)者閱讀文本，以找出他們可以贏得或?qū)崿F(xiàn)什么與此提供。

五、使用流行的CTA按鈕顏色

關(guān)于CTA按鈕的性能更好的顏色，有很多爭(zhēng)論。但有一種觀點(diǎn)似乎有一些證據(jù):

如果CTA按鈕的顏色與頁(yè)面上的其他顏色形成對(duì)比，那么它們的效果會(huì)更好。

Unbounce的登陸頁(yè)面提供了一個(gè)很好的例子:橙色的CTA按鈕與背景顏色形成對(duì)比:

當(dāng)你為你的CTA按鈕選擇顏色時(shí)，務(wù)必看一下色輪，然后選擇與你的登錄頁(yè)面主色相對(duì)的顏色?。?/p>

六、使用提供方向線索的圖像

為訪問(wèn)者指出正確的方向從而推動(dòng)他們行動(dòng)。

視覺(jué)上的暗示，不管是含蓄的還是明確的，都能引導(dǎo)訪問(wèn)者應(yīng)該把目光投向哪里。

一個(gè)隱晦的方向提示可以是一個(gè)人看著你的CTA按鈕的方向的圖片。一個(gè)明確的方向提示可以是一個(gè)直接指向CTA的箭頭。讓我們更詳細(xì)地討論每種類型。

1）使用隱式的暗示

視覺(jué)暗示背后的原理是Malcolm Gladwell所說(shuō)的“微表情”。我們?cè)趧e人身上識(shí)別出的細(xì)微的面部表情或“轉(zhuǎn)瞬即逝的表情”，這些都會(huì)影響我們對(duì)情緒的理解。

眼球追蹤研究發(fā)現(xiàn)，當(dāng)人們看到陌生人時(shí)，他們首先會(huì)看對(duì)方的面部特征。當(dāng)訪問(wèn)者看到某人對(duì)某個(gè)產(chǎn)品或形式表示贊賞的照片時(shí)，他們更有可能做出積極的反應(yīng)。

面部暗示可能很微妙?？纯催@個(gè)登陸頁(yè)面上的復(fù)制黑客:

圖片的位置讓文案專家Joanna Wiebe面對(duì)文字，雙手靠近CTA。沒(méi)有直接指向按鈕，圖像引導(dǎo)訪問(wèn)者的眼睛指向他們需要點(diǎn)擊的地方。

一個(gè)有效的隱式視覺(jué)提示將使點(diǎn)擊看起來(lái)像自然的下一步。

2）使用明確的方向提示

含蓄的視覺(jué)暗示是微妙的，而明確的暗示則不然。箭頭和插圖毫不掩飾地指向CTA。

以Bear CSS的可愛(ài)登陸頁(yè)面為例:

小熊手直接為訪問(wèn)者指向CTA按鈕。

如果一些古怪的東西對(duì)你的品牌不起作用，一個(gè)簡(jiǎn)單的箭頭也是有效的。IMPACT的電子書登陸頁(yè)面就是一個(gè)很好的例子:

箭頭是頁(yè)面加載后動(dòng)畫彈出的另一個(gè)視覺(jué)觸發(fā)器，以吸引游客的注意力，呼吁行動(dòng)。

七、利用真實(shí)的人

真人的照片（不是模型）在著陸頁(yè)上效果不錯(cuò)。營(yíng)銷實(shí)驗(yàn)進(jìn)行了一項(xiàng)研究，將登陸頁(yè)面上的“微笑女士”素材照片與登陸頁(yè)面上的公司創(chuàng)始人照片進(jìn)行對(duì)比。

素材照片頁(yè)面效果：

公司創(chuàng)始人照片頁(yè)面效果：

結(jié)果呢?與訪問(wèn)過(guò)“微笑女士”頁(yè)面的人相比，訪問(wèn)過(guò)創(chuàng)始人登錄頁(yè)面的人填寫CTA表格的可能性要高出35%。

注意:網(wǎng)站不僅使用了創(chuàng)始人的圖片，還加入了文字，讓訪問(wèn)者知道這是創(chuàng)始人。

在你的形象中加入真人，有助于建立信任，有助于提高你的品牌認(rèn)知度。

讓視覺(jué)發(fā)揮其能！

登陸頁(yè)是你留下好印象的一次機(jī)會(huì)。選擇視覺(jué)效果的目的是吸引訪客并促使他們采取行動(dòng)。要找到合適的視覺(jué)效果，可能需要一些精心設(shè)計(jì)的測(cè)試。

雖然使用視覺(jué)效果僅僅因?yàn)樗每从形鸵呀?jīng)很誘人了，但仍要有策略。視覺(jué)是激發(fā)人們反應(yīng)的強(qiáng)大工具。注意使用視覺(jué)效果，讓你的公司呈現(xiàn)出最好的面貌。

翻譯：傳聲營(yíng)銷

本文由@傳聲營(yíng)銷 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議。