11 步登陸頁面佈局流程，實現更多轉化 [2022]

平均著陸頁轉化率徘徊在 10% 左右。

不錯，考慮到平均網站轉化率徘徊在 3% 左右。

還是……10%？

我們可以做得更好。

這一切都始於更好的登陸頁面佈局。

真相？ 雖然設計一個高轉化率的著陸頁佈局可能需要一點科學知識，但這絕對不是火箭科學。 在本文中，我們將證明這一點。

如何？

通過一勞​​永逸地揭開登陸頁面設計的神秘面紗，並將登陸頁面佈局簡化為 11 個簡單的步驟。

我們還將分享 15 個我們最喜歡的完整著陸頁佈局，以供您獲取靈感（和滑動文件）。

讓我們開始吧。

經過多年的實踐，10000多次轉化率優化實驗，無數的勝負，我們發現每一個高轉化的落地頁佈局至少包含以下11個步驟：

1. 從創意簡介開始
2. 收集副本
3. 定義您的信息架構（結構）
4. 建立視覺層次
5. 注意比例盡量接近1:1
6. 留下不可磨滅的第一印象（首屏）
7. 將獨特的資產融入您的設計
8. 使用視覺輔助工具添加上下文
9. 支持功能的好處
10. 使用社會證明驗證索賠
11. 再說一遍，但不同（頁面底部）

根據著陸頁類型，佈局會有所不同（下一節將詳細介紹）。 但是請考慮這 11 個步驟，以創建高質量的著陸頁用戶體驗，無論是哪種類型。

與任何具有設計元素的東西一樣，您的目標網頁設計也需要一個盒子來發揮創意。

輸入：創意簡介。

大多數機構和企業都會破壞創意簡報或完全排除它。

大錯。

將創意簡報想像成藍圖。 它復活了護欄，照亮了前進的道路，定義了目標，並作為設計師、文案和項目經理的單一事實來源發揮作用。

你的創意簡介應該包括什麼？

Get/Who/To/By（Julian Cole 的讚美）：

大多數使用 Get/Who/To/By 廣告創意簡要模板。 但它也非常適用於網頁或著陸頁廣告素材。

• 獲取：描述將遇到您的目標網頁的目標受眾
• 誰：描述您的目標受眾面臨的核心問題（不是猜測或直覺，而是在研究過程中發現的真實消費者問題）
• To：描述您希望目標受眾在遇到您的目標網頁時如何反應（即，這會讓他們有什麼感覺？您的轉化目標是什麼？免費試用？潛在客戶生成？立即銷售？更多下載？）
• 作者：描述您想要傳達的信息以及將激發行動的價值主張

就是這樣。

例如，我們想要……

• 獲得年度營銷預算不超過 30 萬美元的中小型 SaaS 企業……
• 由於預算限制和人才獲取而未能擴大績效營銷的...
• 報名參加免費諮詢……
• 通過向他們展示我們的代理機構可以將轉化率提高 25%，將每次轉化成本 (CPA) 降低 25%，並將人員配備減少 18%

轟隆隆。

只有在您清楚地闡明了受眾、問題、目標和價值主張之後，參與其中的每個人才能協同工作，以實現有意義的目標網頁設計。

現在是時候開始設計了。 嗯，幾乎……

我不會詳細說明這一點，因為這篇文章是關於設計一個高轉換的著陸頁佈局，而不是一個高轉換的標題或正文段落。 （您可以在我們的登錄頁面標題博客中閱讀如何做到這一點。）

但我把這一步放在第二位是為了提醒你，文字幾乎總是應該在設計之前出現（對不起，平面設計師）。

為什麼？

好吧，還記得我們如何談論創建一個在其中發揮創造力的盒子嗎？

如果您的創意簡介（目標受眾、問題陳述、目標、信息）充當盒子的框架，那麼您的副本充當將其固定在一起的釘子和螺釘。

文案決定了大小、結構、空間和藝術方向。

設計師操縱文本的大小或位置比文案作者操縱您的信息以適應設計要容易（且明智）得多。 這就是為什麼來自 Unbounce 或 LeadPages 等登陸頁面構建器的免費登陸頁面模板更容易表現不佳的原因。

言歸正傳，現在是時候選擇佈局的整體結構了，也就是你的信息架構。

在組織頁面上的信息時，您有兩個主要選擇：

• F形
• Z形

F 形圖案是網上最流行的信息層次結構。

並且有充分的理由。

根據一項使用眼動追踪軟件的研究，大多數人會自然而然地從上到下閱讀 F 形的頁面。

對文本豐富的登錄頁面使用 F 形層次結構。

Z 形圖案因其易於遵循的自上而下的鋸齒形圖案而位居第二。 為了使 Z 形圖案起作用，它使用空白作為黃磚路，引導訪問者的視線向下瀏覽頁面。

為視覺豐富的登陸頁面使用 Z 形層次結構。

您的視覺層次結構通過幫助訪問者輕鬆瀏覽您的登錄頁面並強調某些部分而不是其他部分來支持您的信息架構。

如何？

• 對比度：使用對比色或陰影和色調可以微妙地提醒某些對像比其他對象更重要
• 比例：大、粗體標題與中等、半粗體副標題與輕段落文本
• 平衡：平衡的部分錶示各部分之間的平等； 不平衡的部分錶明一個部分（佔用更多空間的部分）比另一部分更重要
• 重複：保持一致（無論您選擇什麼，通過在整個頁面中重複您的視覺層次結構來使您的目標網頁佈局易於學習）

如果沒有明確定義的視覺層次結構，任何著陸頁設計都是不完整的。

為著陸頁佈局開發視覺層次結構的最佳方法是採用您的網站或品牌已經使用的相同視覺層次結構。

關注率是指頁面上的鏈接數量與轉化目標數量的比較。

例如，如果您的目標網頁只有一個轉化目標（例如免費試用）和一個鏈接（CTA 按鈕），則關注比率為 1:1。

為什麼 1:1 是最佳的？

沒有分心。

每個向您的目標網頁發送流量的廣告系列都應該有一個目標，就像您的目標網頁應該有一個目標一樣。 就是這樣。

添加不必要的導航鏈接、頁腳鍊接或社交媒體圖標會造成漏水管道。

設計著陸頁時，請保持頁眉和頁腳乾淨； 不包括導航鏈接或頁腳鍊接（條款和隱私政策除外）。

讓訪問者的注意力集中在一個目標上。

例如，請注意這個 Spotify 登陸器只有一個主要鏈接：在其 CTA 上轉換的鏈接。 就是這樣。

高質量的登陸頁面設計堅持介紹：首屏。

首屏是指訪問者在向下滾動之前首次登陸您的頁面時看到的登陸頁面的一部分。

例如，查看我們主頁的首屏部分：

儘管許多訪問者不會單獨在折疊部分上方進行轉換（他們需要向下滾動以收集更多信息），但通過包含所有基本元素來設計它，就好像他們可以：

• 標題：您的目標網頁標題應該解釋您的報價、定義您的利基並吸引您的訪問者。
• 副標題：您的著陸頁副標題應為您的標題添加上下文和詳細信息。 如果你的標題描述了你打算創造什麼價值，你的副標題應該解釋你打算如何創造它。
• 英雄鏡頭：您的著陸頁英雄鏡頭（主要視覺效果）應該為您的報價添加上下文。 不要使用抽象的形狀或設計來填充空間； 相反，在現實生活中向訪問者展示您的產品或服務（我們的服務就是我們的員工，這就是為什麼我們在首屏展示米切爾醜陋的杯子）
• CTA：您的著陸頁 CTA 副本應通過調侃承諾的土地和處理任何最後一刻的反對來吸引點擊。
• 表單（如果適用）：您的登錄頁面表單需要做很多事情（因此請單擊超鏈接並閱讀全文）。 只需知道每個可靠的潛在客戶捕獲頁面都需要將表單放在首屏的前面和中間，每個人都可以輕鬆地填寫它。

獨特資產是指您品牌的獨特代碼：徽標、顏色、吉祥物、風格、聲音、字體等。

為什麼它們如此重要？

來玩個遊戲…

下面這個是哪個牌子的？

現在，下面是哪個品牌？

品牌 1： Mailchimp。

品牌2：團隊合作。

即使沒有徽標，你們中的大多數人也會因為其獨特的黃色背景、視覺風格和字體二重奏而認出 Mailchimp。

關於第二個可能無法說同樣的話。 事實上，你們中的大多數人可能會在 Teamwork 中摸不著頭腦，因為它們的外觀、聲音和感覺都與其他所有項目管理軟件一樣。

總之，獨特的資產很重要，因為它們創造了熟悉度。

很有可能登陸您的設計的人可能不會記得您的品牌名稱，但一旦他們看到您的獨特資產就會想起它們。 因此，將它們烘焙到您的目標網頁設計佈局中。

這顯然意味著您首先需要擁有不同的資產，而你們中的許多人可能沒有。 在這種情況下，請諮詢您的品牌經理並開始編寫您的品牌。

太多的登陸頁面佈局使用視覺​​效果作為空間填充物。

無論是原始圖形、屏幕截圖還是插圖，都不要為了填補空白而花費時間和資源來製作視覺效果。 相反，使用它們為您的單詞添加上下文和含義。

更好的是，使用視覺效果向訪問者展示您在現實生活中的產品或服務。 讓不可見的可見。

例如，請注意 Webflow 如何使用動畫 GIF 來說明他們在副本中提出的觀點？

或者註意 Buffer 如何做同樣的事情，但使用半動畫截屏：

您沒看錯：支持功能帶來的好處。 不是反過來。

每個著陸頁佈局都需要一個專門用於說明客戶通過使用您的服務或產品可以獲得的具體利益的部分。 這些好處應該與核心功能相關聯。

您不需要一個功能部分來解釋您的產品或服務的作用，而不解釋這些功能提供的好處。

例如，請注意 Jasper（前身為 Jarvis）從未提及 AI 或機器學習之類的功能，儘管它們是支持其各項優勢的核心功能：

或者 ClickUp，他們通過使用標題為它們的功能的標籤巧妙地探索了它們的好處：

您應該在著陸頁佈局的任何地方都添加社交證明或對您的產品或服務進行第三方驗證。

什麼被認為是社會證明？

• 推薦信
• 評論
• 星級
• 客戶標誌
• 信任徽章
• 獎項
• 客戶數據或用戶統計
• 客戶數量
• 經商多年
• 用戶生成內容
• 代言（名人或影響者）

還有更多。

你應該把社會證明放在哪裡？

哎呀，將它放在首屏、CTA 按鈕附近、福利副本旁邊和註冊表單上。 從字面上看，無處不在。

但無論你把它放在哪裡，總是試著在你的設計中建立一個專門的社會證明部分。 許多網站訪問者會尋找它。

例如，Jasper 從上到下對著陸頁進行社交證明，但他們也在佈局中設計了自己的部分：

精心設計的登錄頁面佈局將在整個頁面中包含多個 CTA 實例。

但是，正如您的首屏部分應該留下不可磨滅的第一印像一樣，您的最終 CTA 部分也應該留下令人難忘的最後印象。

這一次，重申你打算提供的價值以及你打算如何提供它，只是用不同的詞。

例如，使用上面相同的 Jasper 示例，請注意它們的首屏 CTA 和首屏 CTA 如何傳達相同的號召性用語，但方式不同：

就是這樣——11 個簡單的步驟來製作一個高轉化率的登陸頁面佈局。

現在讓我們探索真實世界的示例和正確的設計。

現在有趣的部分：例子。

正如我們已經提到的，您的目標網頁佈局將根據您使用的目標網頁類型而有所不同。

例如，潛在客戶捕獲頁麵包含表單，但點擊頁面不包含。

因此，在本節中，我們將通過展示以下著陸頁類別中的一些最佳著陸頁來嘗試捕捉著陸頁佈局之間的細微差別：

• 鉛捕獲
• 通過點擊
• 軟件即服務
• B2C（電子商務/DTC）
• 移動應用

好消息是，我們針對上述每種著陸頁類型都撰寫了深入探討的文章。 所以我們不會在這裡潛水太深。

但我們將展示我們最喜歡的三個示例（帶有完整著陸器的鏈接），以及使每個示例如此特別的原因。

讓我們探索一下。

1. 管道
2. 客戶提升
3. 奧斯卡

管道

我們喜歡什麼：社會證明部分

就像我們之前提到的，每個高質量的登陸頁面佈局都需要一個社交證明部分。 Pipe 不僅包括一個充滿推薦的干淨滑塊，而且這些推薦來自創業界的一些知名人士。 雙贏。

客戶提升

我們喜歡什麼：麵包屑技術（多步驟形式）

對於潛在客戶捕獲表單，沒有比使用多步驟表單更好的方法來提高轉化率了。

我們將此稱為麵包屑技術，或將較長的表格拆分為多個步驟，並首先提出威脅最小的問題，最後提出最具威脅性的問題（電子郵件、電話號碼、姓名）。

為什麼要多步驟佈局？

麵包屑技術利用行為心理學（是的階梯）讓潛在客戶承諾一個小請求（你首先問的壘球問題）。 一旦他們承諾，他們更有可能完成。

奧斯卡

我們喜歡什麼：視覺輔助+形式

Oscar 的潛在客戶捕獲表單會自動填充健康福利卡的圖形。 輝煌。

為什麼？ 它以視覺和具體的方式提醒潛在客戶他們正在註冊的內容 - 不僅是福利，而且當你需要時知道你的錢包裡有那張小卡片，讓你高枕無憂。

深入研究：要復制的最佳潛在客戶捕獲頁面示例

1. 賈斯珀（原賈維斯）
2. 賽姆拉什
3. 編輯 X

碧玉

我們喜歡什麼：獨特的品牌代碼

我們已經在本文前面提到了 Jasper 的社交證明部分，但這次，讓我們關注他們獨特的品牌資產：

• 深色背景
• 不同的品牌顏色（藍色/紫色/粉紅色）
• 機器人賈斯珀（吉祥物）

毫無疑問。 當有人訪問過這個頁面並且之前遇到過 Jasper 的創意時，他們會記住它。

賽姆拉什

我們喜歡什麼：功能支持的好處

與前面的 ClickUp 示例一樣，Semrush 也將其產品功能和優勢置於選項卡式部分中。 再一次，像 ClickUp 一樣，他們重視利益（訪問者真正關心的內容）而重視功能。

編輯 X

我們喜歡什麼：極簡主義

您的目標網頁佈局不需要太多就能產生巨大的影響。 編輯 X 證明了這一點。

簡單的。 複雜的。 簡潔的。 有效的。

最小到什麼程度？ 只有三個部分：

• 英雄部分（首屏）
• 福利部分
• 第二個 CTA

*儘管我們也建議添加社交證明部分。

查看更多佈局：點擊頁面：定義、示例、最佳實踐

1. 比茲
2. 現金應用
3. 奈良寶貝

比茲

我們喜歡什麼：最終的 CTA 部分

老實說，有什麼比使用包含 JK Rowling 的推薦和CTA 按鈕的最終 CTA 更好的方法來關閉您的著陸頁設計？ 美麗的。

現金應用

我們喜歡什麼：CTA 部分

大多數應用登陸頁面都有一個 CTA 按鈕，可以打開應用商店下載應用。

這對於移動設備用戶來說非常棒，但對於桌面用戶來說，它創建了一個不必要的步驟。 首先，您需要點擊鏈接，然後您需要從應用商店複製 URL，然後您需要在手機上向自己發送消息，以便下載。

CashApp 使用二維碼代替了所有這些步驟。 您只需拿出手機，拍張照片，應用商店就會在您的手機上打開（就在您需要的地方）。

奈良寶貝

我們喜歡什麼：不可磨滅的第一印象（首屏）

Nara Baby 的折疊部分上方檢查所有框：

• 標題
• 副標題
• 英雄射擊
• 號召性用語

深入研究：最佳應用登陸頁面示例

1. 保持
2. 美元剃須俱樂部
3. 她的

保持

我們喜歡什麼：視覺教具

這個很容易。 Keeps展示了真實的人在現實生活中使用他們的產品。 讓不可見的可見，記得嗎？

美元剃須俱樂部

我們喜歡什麼：Z 形信息層次結構

Dollar Shave Club 對文字輕描淡寫，使 Z 形信息佈局最佳。

她的

我們喜歡什麼：視覺層次

Hers 通過利用顏色對比、標題和正文段落之間的比例、項目符號點圖標、平衡和重複，使他們的著陸頁佈局易於學習。

一目了然，您知道以下部分的哪些部分最重要以及它們之間的關係。

探索更多佈局：增加銷售額的電子商務登陸頁面創意

1. 點擊向上
2. 熱罐
3. 帆布

點擊向上

我們喜歡什麼：社會證明部分

像許多 SaaS 佈局一樣，通常會找到第三方評論徽章作為社交證明。 ClickUp 也不例外。

但是，我們喜歡 ClickUp 頒發獎項的方式是，他們獲得了 20 多個徽章並連續流式傳輸它們，因此實際上看起來更多。 微妙，但有效。

熱罐

我們喜歡什麼：視覺輔助

誰說視覺輔助必須是圖形或照片？

Hotjar 將實際的熱圖（帶有數據）嵌入到他們的登錄頁面中。 您可以試一試，在視圖之間切換，並下載示例數據。

談論讓不可見的可見。 做得好。

帆布

我們喜歡什麼：關注率

Canva 知道如何讓他們的潛在客戶專注於單一的轉化目標。

沒有導航欄。

沒有頁腳鍊接。

除了“註冊”之外，沒有其他 CTA。

探索更多佈局：高轉化 SaaS 登陸頁面示例

很容易過度思考著陸頁設計和 A/B 測試不同的佈局。

但事實仍然存在 - 一個引人注目的目標網頁設計轉化並不需要太多。 堅持最重要的：

• 創意簡介
• 信息層次
• 視覺層次
• 關注率
• 優於功能的好處
• 標題、副標題、英雄形象、CTA
• 不同資產
• 視覺輔助
• 社會證明

創建出色的登錄頁面佈局可能是一門科學。 但這不是火箭科學。

既然您已經了解了良好登錄頁面佈局的所有元素，請記住首先將其構建在出色的副本之上。 您可以在我們的下一篇關於編寫登錄頁面副本的文章中了解如何做到這一點。

快樂轉換！