落地頁的科學設計方式

序

我們常常在產生了一個產品或服務的購買需求後，攜帶關鍵詞進行搜索，在搜索引擎中獲得數個結果，然後逐一進入這些落地頁面。有的 Banner 上放著一句不知所言的 Slogan；有的信息缺失，讓我們猶豫不決；有的頁面排版布局雜亂，給我們不專業的感覺……最後我們或許放棄了購買，又或許在反反覆復中選擇了一個看起來最合適的網站。在這個似曾相識的過程中，我們瀏覽了不同競爭對手之間的落地頁，最後是什麼因素幫助我們完成決策，從而放棄其它的競爭者？

相信很多小夥伴在日常需求中也設計過落地頁——落地頁是什麼？落地頁包含哪些要素？落地頁有哪些設計技巧？——你有在使用科學的方式來設計落地頁嗎？

什麼是落地頁（Landing Page）？

Landing Page 被稱作 「落地頁」，也有譯作 「著陸頁」 或 「到達頁」。廣義來說，任何一個網頁，無論用戶是從哪個流量來源到來，只要進入特定頁面以完成某個我們所設定的目標，那麼這個頁面就是一個落地頁。根據我們網站的不同，這個頁面可能是首頁、產品介紹頁、活動運營頁、關於我們頁等等。通常來說，落地頁是我們的用戶通過搜索引擎、站點頁面點擊、廣告等方式進入網站後的第一個展示頁面。

提到我們為用戶設定的目標，這些目標可能是：

1）引導用戶繼續深入訪問。

2）引導潛在用戶成為註冊用戶。

3）引導用戶提交信息（以供收集）。

4）引導用戶購買產品或服務。

5）引導用戶產生其它人機互動的行為。

也就是說，落地頁的作用就是讓來到這個頁面的用戶對我們的產品或服務產生興趣，從而「轉化」為我們的用戶。

落地頁的重要性

在線營銷可以分為 3 個關鍵的步驟：捕獲、轉化和保持。（via 《Landing Page優化權威指南》 Tim Ash著）。只要我們的產品有商業目標，我們就必須關注這 3 個步驟。每一個步驟都會直接影響下一步，一個轉化率低的網站，會限制訪客轉變為用戶的數量，因此後續也無法從用戶中得到更多的價值。而在 「轉化」 這一步驟中，落地頁起到了最為關鍵的作用。

在線營銷的 3 個關鍵步驟。

為什麼？

在「捕獲」步驟中，我們可以通過 SEO、線上廣告位、線下廣告、聯營項目、品牌影響、客戶推薦等等各種渠道觸達用戶，通過以上各種方式帶來的流量，最終都會點擊到達我們的落地頁。有的訪客會到達首頁，有的則可能會進入網站內更深的地方，落地頁在何處取決於我們當前進行的捕獲策略。

一旦完成 「捕獲」，我們就需要與用戶建立初步的聯繫，這個過程就是在落地頁中發生的 「轉化」 行為。舉個栗子：假設我們產品的客單價為 100 元，單位時間內的訪客數量為 50,000 名。我們通過重新設計落地頁，讓轉化率從 8% 提升到 12%，也就是讓銷售額從 40 萬提升到了 60 萬，中間差（20 萬元）就是這個落地頁的附加價值。可以想像，隨著業務規模的提升，落地頁的價值也會水漲船高。

落地頁的四個要素

在銷售領域有一句話：如果一個人覺得當前的狀態足夠舒適（也就是我們常常提到的舒適區），那麼他不大可能會為一個產品或服務產生消費。成功的落地頁，需要以銷售員的角度，去激發和調動用戶的情緒，讓被捕獲的訪客成功轉化為我們的用戶。在一個成功的落地頁中，需要包含以下 4 個元素：

1）銷售主張；

2）核心內容；

3）風險保障；

4）逼訂轉化。

1）銷售主張

落地頁很可能是用戶所遇見的我們的第一個頁面，通過關鍵詞搜素或廣告跳轉後，他們需要第一時間確認 「這就是我一直在尋找的網站」。因此在網頁的第一屏，我們需要提出一句 USP（Unique Selling Proposition，獨特的銷售主張）或者 Slogan（品牌口號），讓用戶在讀到這句話的一瞬間就至少願意停留下來多看幾眼。

這裡的文案至關重要，需要在簡單的一句話里，擊中用戶的痛點。只有獲得對方的認可，用戶才有可能產生接下來的 「閱讀」、「滾屏」 或 「點擊」 等行為。這句話可以是我們為用戶提供的一種解決方案，可以是針對用戶特殊需求的產品定位，也可以是一條完全超越競爭對手的優勢。總而言之，讓用戶認為我們的產品和服務 「是我要找的」，並且 「跟其他人有點不一樣」。

Bowery（boweryfarming.com）的口號體現了 Bowery 售賣的產品有著現代和健康的特徵。

如果我們的目標足夠精準，在第一屏布置一個 CTA（Call-To-Action，行為呼喚）的按鈕將能夠很有效地轉化用戶，這個按鈕可能是 「免費體驗」，也可能是 「立即註冊」，只要用戶被我們的銷售主張所吸引，便成功了一半。

Gorgias（gorgias.io）的 USP 是 「一站式客戶關係管理」，並緊接了一個色彩對比強烈的 CTA 按鈕。

除外，CTA 也可能是一個搜索欄或輸入框，而不僅限於按鈕樣式。

騰訊雲（dnspod.cloud.tencent.com）的域名建站首頁，副標題展示了 DNSPod 品牌以及客戶數量，提升了用戶的認知度。

2）核心內容

核心內容是落地頁的主幹，是全面展示產品訊息的主戰場，通常來說，我們會在這裡對產品的功能和優勢進行介紹。在編寫內容的時候，需要圍繞 USP 來進行，因為這些內容的都是為了印證 USP 的真實可信。

功能和優勢必須是站在用戶角度，可信而可見的，比如用戶在不同的應用場景/團隊規模下可能會遇到什麼挑戰，我們的產品又如何解決用戶遇到的問題。除外，嘗試在文案中使用 「您/您的/我們為您」 此類的內容，讓用戶對我們的產品所帶來的價值感同身受。（雖然我更喜歡使用 「你」，而非 「您」 這麼有距離感的敬語。）

秀肌肉可以，但是要保持克制。如果盲目展示過多優勢，反而無法突出你想傳達的信息。將優勢控制在數量少而精，會讓用戶更容易記住你——試想一下，經過兩輪相親，一位男士是 「有錢，帥」，而另一位男士是 「衣服乾淨，打字快，俯卧撐一口氣 30 個，喜歡嗑瓜子，摺紙技術高」，哪一位更有優勢？

亞馬遜的 LightSail（amazonlightsail.com）數量少而精，配上有趣的動圖和文案，讓用戶感到親切也容易理解。

3）風險保障

用戶的每一筆消費都意味著風險的提升，對於在風險面前猶豫不決的用戶，我們需要給予他們更多的保障。

3.1）客戶案例保障

客戶案例是風險保障中最常用的方式，主要有 「logo 牆」 和 「客戶寄語」 兩種形式。在寄語中，要用人話來敘事，切不可像電視購物般自賣自誇。而是讓用戶代入案例中的事件，了解事件中我們的產品如何利用優勢來幫助用戶處理問題。如果我們商務團隊有足夠的推力，還可以和客戶一起包裝背後的故事，對雙方的曝光和推廣都有好處。

3drops（3dro.ps）的 logo 牆，如果我們的客戶多且知名度高，展示他們的 logo 就足以說服用戶。

Gorgias（gorgias.io）的客戶寄語，真人頭像讓內容可信度更高，加粗文字可幫助用戶抓住重點 。

3.2）業務數據保障

展示已有的業務數據，可以給用戶增加信心——「他們已經做到了這麼好，看來是一個不錯的公司」。（請注意不要泄露業務的敏感數據。）

騰訊雲（cloud.tencent.com）的安全數據提升了用戶的信賴感，數字滾動效果讓內容更真實。

3.3）資質證書保障

在某些專業領域，例如雲計算、金融等行業，高級別、廣認可的資質證書對用戶來說是一支強心劑。

騰訊雲（cloud.tencent.com）展示了他們的資質證書，展現了騰訊雲安全合規的專業形象。

4）逼訂轉化

當我們已經通過銷售主張、核心內容和風險保障引起用戶足夠興趣後，接下來應當立刻給用戶施壓，逼迫用戶完成轉化。逼訂是一個經典的營銷詞語，指銷售人員為了促使潛在客戶作出明確的購買決定而設計的一套徵詢方法、宣傳方式和行動方案。在落地頁的設計中，也可以應用這些方法。

4.1）讓CTA再出現一次

用戶閱讀完頁面，我們需要提醒用戶 「了解清楚了嗎？要不要嘗試看看呢？」，此時常見手段有跟隨式 header 和底部 CTA。如果用戶被你的產品打動，一下子卻找不到轉化入口，那就尷尬了……

Instapage（instapage.com）採用的跟隨式 header 在落地頁設計中已經非常常見了。

4.2）價格誘惑/提供試用

如果商業策略允許，我們可以在逼訂的時候，提供價格的誘惑。通常來說，toB 業務甚至允許用戶在一定範圍（有限的時間或資源）內免費試用。

京東的 plus 會員頁（plus.jd.com）結合了價格誘惑和免費試用兩種方式，甚至提供了計算器推動用戶決策

4.3）給予時間壓力。

使用 「立即」 「馬上」 給用戶帶來行動暗示，喜歡買買買的同學肯定經常見到 「Buy It Now」。

Wonder（askwonder.com）在首頁底部採用了多個單詞進行暗示—— 「first」 「no fee」 「NOW」

除外常見的還有 「限時 59:59」 「前 300 名」 等，一般使用於運營活動類落地頁。

4.4）羊群效應。

人都會有羊群效應—— 「這麼多人都這麼做了，如果我不做會不會吃虧？」 還記得 「搶鹽」 「搶醋」 事件嗎？不只是普通民眾，哪怕是相對理智的互聯網商務用戶，也會受到羊群效應的影響。

騰訊雲（dnspod.cloud.tencent.com）的域名建站首頁底部，通過域名的搶注數字提升了緊迫度

除此以外……

除了關注落地頁的 4 大元素以外，我們還可以在很多地方讓落地頁做得更好：

1）為頁面的關鍵入口埋點，持續關注轉化數據

在落地頁完成設計進入重構時，和重構同學確認頁面上每一個需要關注數據的入口一一添加 hotrep 標籤。結合公司內部的騰訊點擊流（http://tcss.oa.com），可以從數據中推測用戶在瀏覽落地頁時的點擊習慣，從而制定迭代策略，為日後頁面升級帶來寶貴經驗。至於需要給哪些入口添加 hotrep 標籤，我的建議是能加的全加上，總會有用得上的時候。

騰訊點擊流界面，可統計每一個埋點的 PV、UV 等數據、涉及業務數據所以做了打碼處理

2）資源允許的前提下，嘗試 A/B Test

我們經常會為了一張配圖應當使用 Mac 還是 PC，或是標題該居中還是居左這些事情，和產品經理或是其他設計師展開一場曠日持久的信仰之戰。在資源允許的前提下，可以嘗試進行一次 A/B Test，以解決當前進度阻塞的窘況，還能為以後決策帶來重要的參考數據。

關於 A/B Test 的更多內容，可觀看 Unbounce 的視頻：www.vimeo.com/72876549。

3）讓站點實現 RWD（響應式設計）

隨著智能手機和移動網路的發展，通過手機瀏覽網頁的用戶已經越來越多了。想像一下，我們的潛在用戶可能在餐桌上聽朋友推薦了我們的產品，或是大客戶經理與客戶的會面中需要使用隨身設備進行產品介紹。此時，我們的用戶通常會嘗試使用手機來「窺視」一下我們的業務。

互聯網用戶使用移動設備瀏覽網頁的佔比逐年增加 via Mary Meekers 2017 Internet Trends Report

在移動互聯網開荒年代，一些網站會為他們的網站配備 「3G 版」 / 「Mobile 版」，時至今日，全站支持全設備尺寸響應式，已經成為大趨勢（至少門戶頁面如此）。使用一套代碼進行網頁開發，後續更新內容或迭代無需維護兩套站點，只要投入極少資源校驗不同設備的體驗是否出現 bug 即可。

另外，我們還需要關注頁面寬度變化而隨著改變內容排版布局的斷點，以騰訊雲官網為例，有 1440px、1180px、980px、768px 和 414px 和 320px 這幾個斷點。我們可以根據自己業務中的柵格化規範和用戶設備特徵具體制定斷點位置。

一個優美的 RWD 站點，除了能給用戶帶來無縫的良好體驗外，也能給我們品牌和專業度形象帶來很大的提升。

騰訊雲域名建站頁（dnspod.cloud.tencent.com）的響應式設計保障了全尺寸設備的瀏覽體驗

4）持續地學習

嘗試搜集、觀察和分析國外的優秀案例與設計趨勢，並運用到自己的實際需求中。如果時間充分，甚至可以嘗試做做飛機稿（要是被批評需求不飽和就不關我事了 =D）。

網頁收集：

Lapa Ninja：www.lapa.ninja

Awwwards：www.awwwards.com

MediaQueries：www.mediaqueri.es

落地頁模板：

Unbounce：www.unbounce.com/landing-page-templates/landing-pages/

Leadpages：www.leadpages.net/templates/

Instapage：www.instapage.com/landing-page-templates/

Wix：www.wix.com/website/templates/html/landing-pages/