Landing Page 製作指南

captray發表於2021-05-13

這是 《增長 101》 的第二章(點此閱讀第一章),《增長 101》(Growth 101)是萬維廣告推出的致力於幫助創業公司和獨立開發者實現業務增長的 Playbook (小冊),我們將在這裡系統性地講解 Growth Marketing 的道法術,歡迎持續關注更新閱讀~(可訂閱我們的 微信公眾號RSS

落地頁(Landing Page)一般為網站首頁,也有因為特殊需求(如針對不同的廣告受眾或不同功能特性製作的個性化頁面)單獨做的廣告著陸頁。

為什麼要做好落地頁?

一個好的落地頁是業務成功的一半。在這個看臉的時代 —— 80% 的訪客都會在看過你的網站首頁後離開。做好落地頁是提升產品和廣告轉化率的必經之路。

資訊傳遞比頁面設計更為重要

在落地頁設計中,準確傳達資訊比絢麗的設計更為重要,你應該首先致力於提煉你的產品資訊,總結核心賣點和尋找準確的文案描述,一般流程為:

1,確定你的產品的核心賣點

2,透過準確的文字和圖片宣告這些賣點

3,Keep It Simple, Stupid

價值主張 - 為什麼使用者要選你不選其他供應商?

價值主張是你的產品對消費者的實用意義,在產品同質化非常嚴重的今天,價值主張的關鍵是尋找你的產品優越於同類產品的特點。借用俞軍老師(滴滴出行顧問、百度原產品副總裁)的一個公式:

產品價值主張 = 新體驗 - (舊體驗 + 替換成本)

如何尋找你的價值主張?

1,首先列出你的產品可以給使用者帶來的全部價值

2,其次在 1 中找出你的產品和市場上同類產品相比較的優勢價值所在

3,在 1 和 2 的結果中尋找與使用者的核心需求共鳴的價值所在

表達你的價值主張

  • 刪除不必要的詞彙,編寫具有高資訊密度的價值主張:留在你的著陸頁面上的每個字都必須是必需的。如果刪除一個詞彙或句子後不影響整體表達的吸引性和實用性,請刪除之。
  • 反覆嘗試/測試,直到尋找到最合適的價值主張。
  • 不要貪多:文字或者價值主張點越多,終端使用者的有效閱讀和記憶的點就越少,儘量採取 2/8 原則,找出你的一兩個核心價值點。

一些好的價值主張例項

  • 微信,是一個生活方式(Source
  • Slack:你的新總部,共同工作的場所。(Source)
  • 知乎:有問題,就會有答案(Source

落地頁模版

通常一個落地頁包括了以下幾個元素:

  • 導航欄:頁面頂部的導航欄包括了你的網站的頂級目錄等重要連結
  • Hero:首屏(開啟你的網站的第一個螢幕看到的內容)的主要內容,包括主標題,副標題,CTA 和展示圖片等元素。
  • CTA:你最想要使用者在頁面完成的動作:通常是註冊/聯絡銷售按鈕。
  • Social Proof:你的產品的公眾證明。這可以是你的成功客戶的 Logo/案例,也可以是媒體或第三方評價站點的 Review/報導。
  • 功能/痛點:你的產品特色功能或需求痛點描述等。
  • 重複 CTA:再次展示 CTA。
  • Footer:底部導航,包括重要的產品連結,隱私/使用條款宣告,備案號等其他連結。

導航欄

這是頁面最頂部的元素,一般包括:產品 Logo,頂級目錄(可選),CTA(一般為註冊/登陸)

請注意:導航欄的連結越少,CTA 就越突出,你可以刪除不必要的連結以避免訪客被帶到無助於帶來轉化的頁面。

Hero

Hero 一般由主標題,副標題,圖片和 CTA 組成,讓我們先看幾個例子:

下圖是 Slack 的 Hero:

下圖是 萬維廣告 的 Hero:

Hero 文字部分包括兩個元素:主標題和副標題

標題部分(包括主標題和副標題)必須描述清楚你要銷售的產品/服務,如果訪客看完你的 Hero 標題仍然得不到要點,就會導致頁面跳出率變高。請問自己一個問題:如果訪客僅閱讀了 Hero 標題,Ta 是否可以確切的知道你要銷售的產品/服務?另外更重要的是,如果訪客僅閱讀了 Hero 標題,Ta 是否可以知道為什麼 Ta 需要你的產品/服務?“為什麼需要”更重要,這也是你需要找到自己獨特的價值主張的原因所在。落地頁最關鍵要素之一就是要有與眾不同產品價值——如果買方處於考慮階段(比如在對比各個同類的解決方案),那麼你的產品特色將使他們在後期回想到你。

一般情況下你可以將產品的功用放到主標題,價值主張放到副標題;也可以將價值主張放到主標題,產品功用放到副標題(如上圖中的萬維廣告和 Slack 的 Hero 標題);對於有些產品,功用及價值主張也可以用同一句話表達,副標題可以用來解釋如何運作,例如:

  • 網站建設工具:從0到1設計併發布你的網站,無需編碼
  • 配送服務:全城 1 小時送達你的貨品,告別堵車/排隊
  • 聊天軟體:傳送語音簡訊、影片、圖片和文字,認識新朋友

第一句話描述你的產品功用,第二句話表達目的,指出使第一句話有價值的原因。

通常情況下,如果你的產品已經家喻戶曉了,可以在主標題使用泛泛的價值主張描述語言如“歡迎來到你的新總部”“增強您的協作能力”等語句,但如果你的產品知名度不夠,請在主標題更直白地描述你的產品功用,你提供了什麼;在副標題描述你為什麼獨特/為什麼訪客需要使用你的產品(價值主張)。如果能以幾句話清晰地描述出來,Hero 文字可以有效增加訪客的慾望並減少了勞動(訪客無需下拉頁面尋找你的產品真實功用/特性)。如果你可以在一句話內描述完整產品功用和價值主張,那麼還可以在副標題描述你如何實現該產品功用,以幫助訪客更清楚的瞭解到你的解決方案,例如:“我們的設計工具可以實時將你的設計轉化為網頁”

Hero 圖片一般為 Hero 標題的視覺化表達,通常為產品的 demo 展示/截圖,Hero 圖片需要優先傳遞資訊(而不是優先展示你的精妙的設計),大量的實驗表明,當訪問者對你所出售的產品有直接的視覺瞭解時,轉化率會提高。

總而言之,Hero 的文字和圖片都必須清晰,明確,快速的讓訪客瞭解你的產品功用,價值主張。

Social Proof

一般的社會證明包括你的產品的成功客戶(通常展示其 Logo 即可),或科技媒體,第三方產品 Review 網站等來自第三方的證明。也可以說明你服務過的客戶總數等。這將大大提升你的產品/服務的可信度。

我們還可以使用成功客戶的評價作為 Social Proof,例如:

研究顯示關於收益/好處的文案具有更高的轉化率,所以你還可以使用展示價值的文案,例如“提升了X%的生產效率/銷售額”來作為你的成功案例的 Social Proof。

你還可以將 Social Proof 與 Hero 放在一起,例如下圖是 Stripe 的 Hero:

CTA

CTA(Call To Action)號召性用語是用來號召訪客進行行動的關鍵元素,一般為按鈕。你可以透過動詞短語來撰寫 CTA 文案,如:

  • 開始試用
  • 聯絡銷售
  • 瀏覽列表

通常你需要在落地頁放置多個 CTA,比如放到 Hero 中:

以及將重複 CTA 放到頁中:

在設計 CTA 時,請透過使用擴大或者增強顏色對比等方式,突出你的重要的 CTA,並使其與頁面其他元素形成鮮明對比(以便讓訪客可以輕鬆找到)。

如果你的落地頁主要用於透過表單收集銷售線索,請確保將其巧妙地放置在頁面上並保持簡潔,僅詢問與你的業務最相關和最重要的資訊,這可以大大增加訪客填寫表單的可能性。

最好將你的 CTA 集中在一個轉化目標上,例如註冊/下載。如果目標/CTA 過多,會讓訪客分心造成轉化率下降。此外,請將上下文路標新增到你的 CTA 中,例如這要花多長時間?需要多少費用?以便訪客知道會發生什麼。

另外請注意沒有人會在不瞭解清楚問題和你的解決方案/價格的情況下進行註冊,而且很少有人在不先和客戶經理溝通的情況下就直接為企業級 SaaS 產品付款。請寫下訪客在註冊/購買前需要知道的事情的清單,確保這些關鍵資訊在你的第一個 CTA 之前。

功能/痛點/用例

如果你的 Hero 描述不足以吸引轉化,那麼就需要增加痛點/功能和用例描述元素。

功能性描述一般包括:

  • 表明產品功能價值所在的標題
  • 解釋價值所在和描述痛點的段落
  • 解釋性圖片展示/用例等

功能標題需要直言不諱地描述你的價值主張,以便訪客可以快速確定該價值主張是否與他們相關,以及他們是否應該繼續閱讀該功能段落。

功能段落應簡明扼要地描述該功能,並解決客戶的常見疑惑。你還可以連結重要的解釋性文字到單獨的頁面,讓訪客單擊按鈕來了解更多資訊。

Before-After-Bridge —— 根據行為心理學家的觀點,人類採取行動的動力來源於兩個目標:追求快樂和規避/減少痛苦。首先描述你潛在客戶正在面對的問題/痛點(即 Before),然後描述如果該問題/痛點不存在,狀況將會如何地不同(即 After),最後透過你的產品/解決方案來解答如何幫助他們實現目標(即從 Before 到達 After 的 Bridge)。

Problem-Agitate-Solve —— 找出一個痛點,攪動/煽動那個痛點,提供解決方案是一套很有效的文案套路,可以大大提升轉化率。使用情感語言,故事或視覺效果生動地描寫你的潛在使用者痛點,從而激發訪客的共鳴和轉化。

一圖勝千言,如果可以的話,最好使用 Gif 或動畫來展示你的產品特性和用例。(請儘量避免使用長影片來傳達資訊,精心設計的 Gif 圖片或動畫可以在幾秒鐘內表達資訊,而訪客在觀看影片時會更少地閱讀頁面)

例如:

Footer 和其他常見元素

如果 Hero 和功能描述依然無法完全解答訪客的常見疑問,你可以專門設計一個 FAQ 來說明常見問題解答,例如:

大多數 SaaS 產品還需要價格元素向訪客展示多個價位的套餐,例如:

Footer 底部導航在頁面最底部,包括了重要的產品連結,社交媒體,隱私/使用條款宣告,備案號等其他重要連結,例如:

設計原則

落地頁設計的要點一般包括:

  • 令人愉悅的視覺效果
  • 頁面要有明確的結構
  • 簡介,明確的文案
  • 鮮明的品牌個性
  • 移動優先(大部分訪客透過手機訪問你的網站)

總而言之,落地頁需要圍繞訪客的注意力進行設計,目的是吸引/保持/並集中訪客的注意力。永遠不要以為訪客會花幾分鐘閱讀頁面上的所有文字,你應該儘可能簡化文案。故請勿使用過多 CTA 按鈕和連結轉移訪客注意力;請在文案中儘量使用非官方語言;如果你需要在落地頁收集訪客表單,請儘量減少表單需要填寫的欄目或分階段提交表單,使頁面更加人性化,創造令人愉悅的體驗。

此外,如果你製作的是廣告落地頁,請儘量保持廣告和落地頁文案的相關性,廣告文案與落地頁文案之間的耦合性越強,訪客的停留時間就越長。

你還可以訪問 Good Web Design 學習更多落地頁元素的例子。

收集反饋意見和落地頁指標並改進

在你設計好落地頁後,可以邀請兩種型別的訪客來給你反饋:1)非潛在受眾的訪客 2)你的產品的潛在買家/受眾。

請重點評估以下幾個要點:

  • 轉化意願:Ta 們是否願意立即註冊並付款?如果沒有,為什麼?
  • 興趣程度:在閱讀完 Hero 後,Ta 們對你的頁面下文是否感興趣?如果不,如何改進?
  • 清晰度:在閱讀完整個頁面後,Ta 們還有哪些未解決的疑問?
  • 簡潔性:如果需要刪除頁面一半的元素,刪掉什麼?

此外,你還可以透過 Google Analytics,Posthog 等工具來統計分析你的訪客來源及轉化率等落地頁指標,從而改進你的頁面和廣告等。

常見的落地頁指標有:

1.頁面訪問量(Page Visits)

顧名思義,頁面訪問量指的是在一定時期內訪問頁面的人數。訪客越高,轉化的可能性就越高。如果此數字低於你的預期,請嘗試最佳化你的付費廣告策略,或最佳化關鍵字以推動訪客訪問你的網頁。

2.跳出率

跳出率是指在不訪問其他頁面的情況下從你的落地頁退出的人數所佔全部訪客的百分比。訪問者跳出頁面的原因有很多,例如:

  • 你的內容可能與廣告宣傳的不符
  • 你的 Hero 標題可能不夠醒目,無法吸引訪問者的注意
  • 頁面的整體視覺層次結構可能不具吸引力
  • 訪客找到了他們想要的東西並離開了頁面

良好的落地頁跳出率通常分為三類:

  • 優秀:26% ~ 40%
  • 平均:41% ~ 55%
  • 馬馬虎虎:56% ~ 70%

跳出率高於 70% 就比較差了。可以使用第三方統計功能如熱圖,會話記錄,繪製訪問者的行為,並找出問題根源所在。

3.流量來源

瞭解哪些流量來源帶來了高轉化率的訪客,可以幫助你更好地製作落地頁並促進更多轉化。

這些事需要密切注意的流量來源型別:

  • 直接訪問量:透過直接在瀏覽器中鍵入 URL 或透過瀏覽器書籤來訪問頁面的訪客。
  • 引薦點選量:透過點選第三方網站的連結而進入頁面的訪客。
  • 社交媒體流量:透過單擊社交媒體帖子的連結進入頁面的訪客。
  • 自然流量:透過在 Google,百度等搜尋引擎上搜尋關鍵字找到你的網站的訪客。
  • 電子郵件訪問量:點選了營銷電子郵件中的連結或 CTA 按鈕訪問頁面的訪客。
  • 點選付費廣告流量:透過點選 CPC 廣告進入頁面的訪客。

4.表單提交率

填寫並提交表單所佔的百分比。提交數量越多,說明落地頁質量越好。如果轉換率較低,最好對頁面元素進行調整並進行 A/B 測試以檢查問題所在。

5.表單放棄率

與表單進行互動(開始於表單提交過程)但沒有提交就離開的訪問者的百分比。訪客放棄填寫表單可能有很多原因:也許是表單需要填寫的內容太多引發了資料安全擔憂,或存在訪客可能不願回答的問題。

提高表單提交率的最好方法是在製作表單之前進行自我評估,問問自己:“我必須要提供電話號碼嗎?” 如果答案是否,請考慮從表單中刪除此類欄位。

6.潛在客戶百分比

除了上述指標之外,衡量潛在客戶的百分比也很關鍵,計算透過落地頁轉化為付費客戶的潛在客戶的百分比(如註冊,留下電話號碼等),將有助於你製作更精準的廣告和選擇更好的推廣渠道。

請注意,轉化率取決於產品型別,價格和行業。通常,平均落地頁轉化率為 2% ~ 3%,也有比較好的落地頁轉化率介於 5% ~ 10% 之間。

其他要點

  • 在今天的網際網路環境下,開啟全站 HTTPS 非常重要。
  • 如果你的落地頁載入時間超過 3 秒,那麼你的訪問者很可能會感到厭煩並離開,請考慮透過 Google 的網頁效能最佳化工具 進行頁面效能分析/最佳化等。
  • 如果你不懂這些術語,請聯絡你的技術人員。

本章完,關注後續更新請訂閱我們的 微信公眾號RSS

感覺有幫助?請在 知乎 給我們點個贊吧;)

本作品採用《CC 協議》,轉載必須註明作者和本文連結

相關文章