當(dāng)前著陸頁觸達(dá)用戶的方式，符合你的預(yù)期嗎？

無論產(chǎn)品規(guī)模大小或者熱度高低，每一個(gè)網(wǎng)站都會(huì)著重考量著陸頁的跳出率，這直接關(guān)系到用戶的使用時(shí)長(zhǎng)和使用深度。

大多數(shù)企業(yè)花大量時(shí)間和精力制作主頁，卻沒有意識(shí)到用戶不必通過主頁進(jìn)入網(wǎng)站。著陸頁是為一些特別場(chǎng)景創(chuàng)造的，包括：點(diǎn)擊廣告的后置頁面、電子郵件中的鏈接，社交網(wǎng)絡(luò)上的行為召喚按鈕，等等。

研究表明：建設(shè)和測(cè)試著陸頁是運(yùn)營同學(xué)的五大挑戰(zhàn)之一。

為什么很多網(wǎng)站的跳出率高、轉(zhuǎn)化率低呢？也許是因?yàn)橛脩粢馔膺M(jìn)入了這個(gè)網(wǎng)站，也許是因?yàn)樾『⒆訜o意間觸碰到，還可能是因?yàn)橹戫摏]有準(zhǔn)確地傳遞信息，在這種情況下，就要開始思考重新設(shè)計(jì)著陸頁了。

著陸頁的布局

以下是著陸頁布局方式的常見類型。

固定布局

固定布局是傳統(tǒng)網(wǎng)站的構(gòu)建方式，直到2010年左右，媒介查詢和響應(yīng)式網(wǎng)頁設(shè)計(jì)興起，才有新的網(wǎng)站布局類型。

正如聽上去的那樣，固定布局是靈活度最低的布局方式。固定布局的寬度需要由設(shè)計(jì)師確定（一般是800*600或1024*768），頁面大小是預(yù)設(shè)的，不會(huì)隨著瀏覽器寬度的改變而自適應(yīng)。這種情況下，需要為移動(dòng)端創(chuàng)建單獨(dú)的M站。

如果目標(biāo)只是設(shè)計(jì)簡(jiǎn)單的網(wǎng)頁，不需要自適應(yīng)或者響應(yīng)式布局，那么固定布局是一個(gè)可選方案。固定式布局的案例如下：

流式布局

流式布局是與固定布局完全不同的布局方式，流式布局的頁面內(nèi)容可以根據(jù)任何寬度的瀏覽器進(jìn)行調(diào)整，就像“流體”一樣。

流式布局的缺點(diǎn)是，如果瀏覽器很寬，那么有些內(nèi)容可能會(huì)被拉伸得太遠(yuǎn)，同時(shí)，在小屏幕上，內(nèi)容多列排布時(shí)，會(huì)顯得過于擁擠。

自適應(yīng)布局

自適應(yīng)布局方式使用CSS媒介查詢來識(shí)別瀏覽器的寬度，從而相應(yīng)地改變頁面寬度。如果您的靜態(tài)布局需要支持移動(dòng)設(shè)備，那么自適應(yīng)布局是一個(gè)很好的快速解決方案，相比于響應(yīng)式布局，自適應(yīng)布局的開發(fā)量較少。

響應(yīng)式布局

響應(yīng)式布局使用相對(duì)單元和媒介查詢，它結(jié)合了自適應(yīng)和流體布局的思想，從而幫助用戶根據(jù)屏幕分辨率改變布局，這常常會(huì)產(chǎn)生更好的整體體驗(yàn)。

Designmodo以干凈、清晰的方式設(shè)計(jì)了一個(gè)極好的響應(yīng)式布局界面，圖像和文本可以在不同的屏幕尺寸上完美縮放。

有效的行為召喚及其著陸頁位置

行為召喚（CTA）元素是著陸頁最重要、最突出的部分。

CTA按鈕必須是個(gè)按鈕，而不是超鏈接、圖片、或者文字；簡(jiǎn)化的CTA按鈕是提高著陸頁轉(zhuǎn)化率的最佳選擇。期望用戶進(jìn)行的操作無非是：注冊(cè)，填寫表單，立即購買，免費(fèi)試用。

在決定使用CTA按鈕之前，你會(huì)問自己這些問題嗎？

（1）CTA按鈕應(yīng)該放在首屏、無需下拉屏幕就能看到的位置？還是應(yīng)根據(jù)按鈕邏輯放在其他位置？

（2）CTA按鈕與頁面背景的對(duì)比清晰合適嗎？

【要點(diǎn)】一般來說，綠色和橙色按鈕效果最好，當(dāng)然這也取決于頁面整體的色調(diào)和配色方案。

（3）CTA按鈕的大小合適嗎？是否會(huì)分散用戶注意力？

（4）CTA按鈕清楚地傳達(dá)了目標(biāo)信息嗎？是否讓用戶產(chǎn)生了緊迫感？

傳統(tǒng)上最好的做法是把CTA按鈕放在首屏，但實(shí)際設(shè)計(jì)中，把它放在頁面的上部或者下部取決于產(chǎn)品實(shí)際需要。

以下是可能會(huì)用到的CTA類型。

用戶引導(dǎo)

CTA是提升用戶轉(zhuǎn)化的最佳方法。對(duì)于成功的用戶引導(dǎo)，重要的是有一個(gè)吸引人的CTA，并能夠準(zhǔn)確地傳達(dá)點(diǎn)擊按鈕的價(jià)值。此外，通過用戶引導(dǎo)，我們可以獲知用戶群和用戶的瀏覽細(xì)節(jié)，這有助于提升用戶體驗(yàn)和后續(xù)的電子郵件召回，這甚至能幫助增加60%的銷售額。在例子中能看到，Netflix的說服性文本，能吸引用戶立即試用。

郵箱注冊(cè)

注冊(cè)的CTA按鈕，不一定要寫著大大的“注冊(cè)”?？梢哉{(diào)整一些個(gè)性化元素，諸如按鈕大小、顏色、語音、語調(diào)等。NerdFitness采用提問的方式，吸引用戶點(diǎn)擊。

圖片和文字互為補(bǔ)充，相得益彰，此外，上圖中的顏色對(duì)比也很考究。68957這個(gè)個(gè)數(shù)字增加了產(chǎn)品社會(huì)信譽(yù)，讓用戶產(chǎn)生社區(qū)感，好像找到了組織一樣。

表單提交

從用戶訪問到轉(zhuǎn)化只有一步之遙，表單就是確保產(chǎn)生轉(zhuǎn)化、提高留存的那個(gè)要點(diǎn)。設(shè)計(jì)優(yōu)秀的表單是有難度的，如果沒放棄一張表單，就能得到1分錢，那我現(xiàn)在肯定是富豪了。

在表單填寫處，簡(jiǎn)單是最重要的，可操作的CTA比普通“提交”按鈕的效果更好。詢問用戶太多信息，可能會(huì)讓用戶望而生畏，甚至失去興趣。

成交

一旦建立了用戶基礎(chǔ)，并且用戶有繼續(xù)使用的意愿，那么只需要讓用戶進(jìn)入產(chǎn)品的業(yè)務(wù)流程、完成轉(zhuǎn)化。這種類型的CTA主要是以銷售為導(dǎo)向的，無需太多廢話，唯一目標(biāo)就是把潛在用戶轉(zhuǎn)變成長(zhǎng)期用戶。Ugmonk將它的退出CTA改為更傾向于銷售，提高了轉(zhuǎn)化率。

明確告知用戶收益是提高留存的好方法。這里的“Yes”按鈕明顯比“No”更亮、更吸引注意力，從而增加了轉(zhuǎn)化的可能性。

著陸頁的個(gè)性化推薦

2017年見證了個(gè)性化推薦的大規(guī)模興起，當(dāng)然也包括著陸頁的個(gè)性化推薦。提高著陸頁的穩(wěn)定性和個(gè)性化會(huì)提升用戶的參與感，也會(huì)有更好的轉(zhuǎn)化。研究表明，個(gè)性化推薦的著陸頁的轉(zhuǎn)化率，比普通著陸頁高出了375%。但是，如何將個(gè)性化推薦引入著陸頁的設(shè)計(jì)中呢？

地理定位

根據(jù)地理位置對(duì)用戶的著陸頁內(nèi)容進(jìn)行個(gè)性化配置，一旦識(shí)別出用戶IP，就根據(jù)其所在位置進(jìn)行個(gè)性化推薦。城市、周圍鄰居、甚至貨幣都可以利用起來，進(jìn)行個(gè)性化配置。根據(jù)這些信息，可以為你推薦倫敦某個(gè)街區(qū)的美食，或者幫助你在大洋彼岸找到知己。以下是英國電商網(wǎng)站“Very”的例子，它根據(jù)地理位置和當(dāng)前的天氣，在著陸頁給不同的用戶推薦不同的衣服。

對(duì)用戶組別劃分

將用戶或者訂閱者根據(jù)相同的興趣劃分成特定的組，然后再進(jìn)行個(gè)性化推薦。如果用戶的興趣相同，那么他們的需求和期望也會(huì)相似。舉例來說，工作類型、年齡段、養(yǎng)狗、生日都可以作為分組標(biāo)準(zhǔn)，還可以根據(jù)經(jīng)常訪問的站點(diǎn)或者旅行目的地對(duì)用戶分類。

相比于隨機(jī)的或者所有用戶都相同的著陸頁，讓用戶形成使用習(xí)慣的著陸頁更有利于用戶留存。個(gè)性化的重點(diǎn)不是內(nèi)容推薦，而是每一位用戶的分析，以為目標(biāo)是向獨(dú)特的用戶推薦獨(dú)特的內(nèi)容。在下面的例子中，著陸頁根據(jù)對(duì)用戶的分組結(jié)果，個(gè)性化推薦編劇或者制片人。

收集用戶信息

眾所周知，我們可以從谷歌分析中收集到大量有用的用戶信息，比如搜索記錄、用戶路徑、參考站點(diǎn)等。廣告點(diǎn)擊、個(gè)人賬戶和任何第三方數(shù)據(jù)，都是用戶信息的重要來源。

在個(gè)性化推薦的里程碑式的研究中，Scott Brave博士寫道：

“如果沒有深入了解用戶心理，就無法進(jìn)行個(gè)性化推薦?！?/p>

不同于通用的問卷調(diào)研，個(gè)性化的提問會(huì)給用戶更好的用戶體驗(yàn)，也能幫助您收集到用戶的有效信息。在下面的例子中，用戶被劃分到狗狗主人的分組后，會(huì)根據(jù)狗狗主人的身份對(duì)用戶提問。

優(yōu)化著陸頁的建議

優(yōu)化著陸頁可從以下幾點(diǎn)入手：

強(qiáng)有力的標(biāo)題

標(biāo)題用于準(zhǔn)確傳達(dá)著陸頁的核心信息；通常，一個(gè)作為補(bǔ)充內(nèi)容的小標(biāo)題，能提升信息傳遞的效果；

有效的CTA按鈕

要求顏色對(duì)比鮮明，吸引眼球；

用戶推薦語

用戶好評(píng)和優(yōu)質(zhì)用戶的評(píng)價(jià)語能提升產(chǎn)品的可信度；

價(jià)格

一個(gè)完備的定價(jià)方案，回答關(guān)于價(jià)格的各種問題，此外，要凸出展示價(jià)格優(yōu)勢(shì)；

用戶數(shù)量

用戶數(shù)量能凸出用戶的尊貴感，讓用戶感受到產(chǎn)品尊重每一個(gè)用戶，會(huì)讓新用戶感到“為什么我不是五萬分之一呢？”

結(jié)論

卡爾頓大學(xué)的研究表明，在著陸頁，用戶的耐心只有五秒甚至更少。毫無疑問，構(gòu)建有效的著陸頁應(yīng)該是任何運(yùn)營活動(dòng)的首要任務(wù)。

網(wǎng)上有大量的優(yōu)秀案例和優(yōu)質(zhì)模板作為參考，此外，著陸頁的設(shè)計(jì)一定要和A/B測(cè)試同步進(jìn)行，通過用戶數(shù)據(jù)判斷哪種設(shè)計(jì)方案對(duì)用戶最有價(jià)值，能少走很多彎路。

如果你已經(jīng)認(rèn)識(shí)到當(dāng)前的著陸頁需要改善，那就馬上著手設(shè)計(jì)吧。

譯者：李小新

原文作者：CanvasFlip, Prototyping tool with User Testing & design hand-off. Get your Free account now http://canvasflip.com

原文地址：https://uxplanet.org/how-to-build-super-effective-landing-pages-7fe9a3bab8f1

本文系人人都是產(chǎn)品經(jīng)理翻譯團(tuán)隊(duì) @李小新? 翻譯發(fā)布，未經(jīng)本站許可，禁止轉(zhuǎn)載。

題圖來自u(píng)nsplash，基于CC0協(xié)議