點擊後著陸頁設計靈感的 12 種技巧

已發表: 2017-07-14

您的點擊後登錄頁面設計很重要，因為這些頁面是您的數字店面——對於推廣和銷售您的產品和服務至關重要。正確優化後，頁面可以顯著提高轉化率。由於它們對您的業務的整體成功至關重要，因此創建專業、高轉化率的點擊後登錄頁面是您營銷策略不可或缺的一部分。

無論您是在為應用點擊後登陸頁面、產品點擊後登陸頁面、移動點擊後登陸頁面還是其他內容尋找靈感。有大量的各種點擊後登錄頁面設計靈感可供使用。

在 Instapage，我們有一個完整的博客類別，專門用於點擊後登錄頁面示例。我們經常就這個主題進行研究和寫作，以從世界上一些最大的品牌中為我們的觀眾提供靈感。包括 Microsoft、Lyft、Marketo、Constant Contact、Oracle、Facebook、MailChimp 和 HubSpot。

在本文中，我們將展示一些點擊後登錄頁面，重點介紹幾種不同的設計技術，為您在創建頁面時提供靈感。對於每個示例，我們將討論頁面的哪些方面做得好，以及可以進行哪些 A/B 測試以產生更好的結果。

點擊後登陸頁面是您的數字店面——對於推廣您的產品和服務至關重要。

點擊推文

點擊後登陸頁面設計靈感

引人注目的英雄形象

人類處理圖像的速度通常比文本快 60,000 倍。如果在您的頁面上正確使用，圖像可以迫使訪問者與您的頁面互動足夠長的時間以轉換您的報價。是時候停止告訴您的訪問者他們兌換您的優惠後會得到什麼，而是開始向他們展示。英雄鏡頭可以幫助潛在客戶想像體驗您的報價的好處會是什麼樣子。

TaskEasy 明白這一點，他們充分利用了頁面上的英雄形象。訪問者一登陸頁面，他們就會看到如果他們僱用 TaskEasy，他們的草坪會是什麼樣子：

什麼頁面做得好。

CTA 按鈕顏色很突出，因為它沒有在頁面上的任何其他地方使用，除了“聯繫我們”按鈕。
CTA 按鈕文案使用第一人稱，這讓潛在客戶感覺自己與報價有聯繫。
方向提示（CTA 按鈕上的箭頭和指向頁面下方的箭頭）向訪問者顯示他們接下來應該將注意力集中在哪裡。
圖標有助於引起人們對僱傭 TaskEasy 的特點和好處的關注。
信任信號和社會證明（安全徽章、獎章和類似 Facebook 的櫃檯）可能會讓潛在客戶感到舒適、安全，甚至被迫僱用 TaskEasy。
聯繫我們滑出表格允許訪問者輕鬆聯繫公司以詢問他們的服務。

A/B 測試的內容：

TaskEasy 徽標是超鏈接的，這意味著訪問者可以輕鬆離開頁面。
頁面頂部的 Property Manager CTA 按鈕將訪問者帶離此頁面。儘管它確實打開了另一個潛在客戶捕獲頁面，但它應該有自己的活動，與此活動完全分開。
添加副本將幫助潛在客戶更好地了解使用 TaskEasy 的好處。目前，頁面上沒有副本，這可能會使訪問者難以對公司和報價有良好的感覺。
頁腳導航為訪問者提供了太多無需轉換即可退出頁面的方法。
電話號碼可以啟用點擊通話功能，使訪問者更容易聯繫 TaskEasy，特別是因為該公司鼓勵他們撥打“想給我們打電話？我們到了！”

要點

人們通常不想通讀無休止的文字來找到他們想要的東西。他們寧願快速掃描頁面以查找特定信息——項目符號副本使這成為可能。項目符號副本（利用複選標記、箭頭、圖標等）是有效的，因為它允許訪問者快速瀏覽頁面並找到他們正在尋找的內容。

這個 Yodle 示例使用項目符號副本（複選標記）來突出其軟件的優勢。它也從頁面上帶有空白的副本的其餘部分中脫穎而出：

什麼頁面做得好。

Yodle 的標誌沒有鏈接到他們的主頁，讓訪問者可以看到他們在誰的網頁上，而不會冒著點擊離開頁面的風險。
點擊通話的電話號碼使訪問者可以輕鬆地與公司聯繫。
標題和副標題告知訪問者該優惠是什麼，以及它將如何使他們受益。
斜體副本從副本的其餘部分中脫穎而出，吸引訪問者閱讀。
封裝的表單引人注目，向訪問者顯示他們需要去哪裡請求演示。
“個性化演示”讓潛在客戶覺得這個優惠是專門為他們準備的。
橙色的 CTA 按鈕顏色r 在頁面上“彈出”，引起人們的注意並增加人們點擊的機會。
CTA 按鈕上的箭頭充當方向提示，激發人們對錶單背後內容的興趣。
信任信號（客戶推薦、公司徽標和獎勵印章）提高了潛在客戶對 Yodle 的信任程度，這有助於說服訪問者填寫他們的個人信息。

A/B 測試的內容：

CTA 按鈕副本不是個性化的，可能無法說服許多訪問者點擊。將其更改為“我想要演示”或“安排我的演示”可能會產生更好的結果。
包括與客戶的爆頭，推薦會讓它看起來更風度翩翩，灌輸對潛在客戶的更多信任。
在頁腳中的小字可以壓倒前景和轉換阻止他們。

F型

在設計頁面時，請考慮訪問者最有可能查看頁面的方式。這樣，您可以相應地放置最重要的元素。由於人們傾向於從上到下從左到右閱讀，因此將頁面設計為遵循 F 模式是明智的。

下面的 Oracle 演示點擊後登錄頁面遵循獨特的 F 模式佈局。每個重要元素都位於訪問者在查看頁面時自然會看到的 F-Pattern 路徑上。

觀看者首先會在左上角看到計算機圖像。
然後他們的眼睛會跟隨水平的莖，然後看到人們在微笑。
將頁面左側向下移動到下一個水平詞幹，訪問者會將注意力集中在標題上，然後轉到單個表單字段。
接下來，他們將沿著垂直主幹繼續 F-Pattern，在那裡他們將掃描文本段落和項目符號點。
最後，他們的重點將放在鮮紅色的 CTA 按鈕上。

什麼頁面做得好。

微笑的人讓頁面更加人性化，這很可能讓訪問者感覺更舒服。
要點和粗體文字提請注意優惠的主要功能。
1-field 表單可以快速輕鬆地完成。
訪問者的眼睛注視著表單和 CTA 按鈕，這意味著他們應該專注於那裡並進行轉換。

A/B 測試的內容：

產品圖片可以更大。目前，很難在屏幕上看到任何內容。
標題沒有說服力，因為它沒有向訪問者提供有關該優惠如何使他們受益的任何信息。
CTA 按鈕文案很弱。 “繼續”沒有說明任何有關優惠的內容，也沒有誘人的點擊。
包括社會證明，如客戶推薦，可以提高公司及其報價的可信度。
頁腳導航鏈接可能會分散訪問者的注意力，使他們離開頁面，並可能降低轉化率。

Z-模式

與 F-Pattern 一樣，Z-Pattern 還可以幫助查看者瀏覽您的頁面，使其成為您頁面設計的另一個不錯的佈局選項。

這是 Business-Software.com 中遵循清晰 Z 模式的示例。

訪問者首先會看到左上角的粗體標題。
沿著頂部的水平 Z 軸移動，它們會到達紅色的“註冊下載”圖章。
沿對角線向下和左下角移動，查看者會將注意力集中在報告的圖像上。
最後，他們將使用另一個水平詞幹來完成 Z-Pattern，在那裡他們最終會出現在頁面上最重要的元素 - CTA 按鈕上。

什麼頁面做得好。

左上角的徽標沒有鏈接，因此訪問者不會立即分心並離開頁面。
標題和副標題可以有效地告訴訪問者該報告提供了前 10 名營銷自動化供應商，並讓他們知道他們可以如何從下載報告中受益。
具有最少副本的項目符號允許查看者快速瀏覽頁面並了解關鍵要點，而無需通讀大量文本。
“免費”一詞用在兩個地方。在被空白包圍並且非常引人注目的紅色圖章上，以及在圖像正上方採用粗體格式的副本中。
報告預覽允許潛在客戶了解報告的外觀，如果他們選擇下載報告。
黃色的 CTA 按鈕與頁面的其餘部分形成鮮明對比，可能會吸引更多訪問者點擊它。

A/B 測試的內容：

右下角的公司徽標超鏈接到他們的主頁，這為訪問者提供了一種在轉換報價之前離開頁面的方法。
13 個表單字段對於營銷漏斗的認知階段的報價來說是很多的。在買家旅程的早期詢問如此多的信息很容易阻止人們進行轉換。
增加最重要元素周圍的空白。例如圖像和 CTA 按鈕會吸引更多的注意力並吸引訪問者下載報告。
添加社會證明可能會說服更多潛在客戶進行轉換。因為這會讓他們對與 Business-Software.com 合作的想法感到更加舒適和興奮。
頁腳可以被刪除。小字體似乎沒有必要，公司徽標充當退出鏈接，使訪問者遠離此頁面。

留白

說服訪客集中註意力的另一種方法是添加空白。通過在某些元素周圍包含足夠的空白，這些元素在頁面上更加突出。

除了增加對特定元素的關注之外，留白也有幫助。

減少雜亂
使您的頁面美觀
提高可讀性和理解力
提升用戶體驗

在下面的 MarcomCentral 示例中查看潛在客戶捕獲表單周圍的所有空白區域。請注意，表單周圍的空間實際上並不是白色的。空白可以是任何顏色，只要它有助於分隔不同的頁面元素並與它突出顯示的元素形成對比。在這種情況下，表格：

什麼頁面做得好。

點擊呼叫電話號碼為訪問者提供了一種聯繫客戶服務的便捷方式。
50 秒的視頻讓潛在客戶無需通讀副本即可快速輕鬆地獲取信息。
表單標題和第一個 CTA 按鈕中的“免費”是極具說服力的副本，因為每個人都喜歡免費。添加個性化副本可以使此頁面更具說服力。
錨標記將訪問者在單擊時直接返回到表單，使他們更容易找到並完成它。
社會證明向遊客灌輸信任和信心。包括帶有客戶推薦的頭像會增加更多價值。
在“如何運作”一節中的影像讓前景更好地理解和預想一下每一步的描述。

A/B 測試的內容：

超鏈接的公司徽標有可能使訪問者在看到整個報價之前離開頁面。
標題應該改變，因為即使它很大而且很突出，但它並不引人注目。因為它不會給潛在客戶帶來任何好處。
橙色的 CTA 按鈕並不突出，因為橙色在整個頁面中被多次使用。
頁面底部的社交媒體按鈕可能會分散訪問者的注意力並阻止他們進行轉換。

錨定標籤

錨標記鏈接到同一頁面上的另一個位置，使訪問者無需滾動即可跳轉到頁面的特定部分。由於錨鏈接可以毫不費力地將訪問者帶到他們想去的地方，因此它們有助於改善整體用戶體驗，這有助於轉換過程。

PRWeb 在他們的頁面上包含了兩個錨標籤——都是“立即開始！” 折疊下方的 CTA 按鈕。單擊後，將訪問者發送回首屏上方的潛在客戶捕獲表單：

頁面做得好的地方：

標題是具體的，並使用第二人稱副本——這兩種品質非常適合說服訪問者進一步閱讀報價並最終轉換。
封裝表單使其更引人注目，這可能會吸引潛在客戶來完成它。
不選中表單上的選擇加入框會讓潛在客戶覺得他們可以自由地做出自己的決定，而不是 PRWeb 為他們做決定。
“如何”和“為什麼”部分中的圖像和格式化副本提請注意有關 PRWeb 如何工作以及潛在客戶為什麼應該選擇 PRWeb 的最重要細節。

A/B 測試的內容：

退出鏈接（公司徽標、社交媒體按鈕和頁腳導航）都可以使人們離開頁面而無需轉換。
項目符號副本可以更加突出。縮進它或放大箭頭會引起更多的注意。
指南的圖像被切斷，這使它看起來像設計錯誤。它也是可點擊的，但是當圖像打開時，它仍然不是完整的圖像或更大的圖像。
7 表單域可能會嚇到訪問者並阻止他們完成表單。特別是因為他們可能仍處於買家旅程的考慮階段。
CTA 按鈕顏色（所有三個按鈕）並不突出，因為整個頁面都使用紅色和藍色。
CTA 按鈕副本（同樣，在所有三個按鈕上）是模糊的。類似於，“我想要營銷指南！” 更具吸引力，可能會帶來更多點擊。
客戶評價未優化。沒有 Craig Kasnoff 的頭像，沒有公司名稱（媒體顧問後面不應該有逗號），而且推薦書本身也沒有說任何具體的內容來鼓勵潛在客戶與公司合作。

動圖

將媒體納入您的點擊後登錄頁面（以圖像、視頻或 GIF 的形式）有助於提高轉化率，因為它們解釋了您的產品或服務，同時還使您的頁面更具視覺吸引力。

GIF 是動畫圖像，有助於以交互方式解釋您的優惠。因此，與其向您的頁面添加靜態圖像（例如軟件儀表板外觀的屏幕截圖），不如添加 GIF 以直觀地展示潛在客戶如何執行不同的操作。

ActiveCampaign 在他們的頁面上這樣做：

什麼頁面做得好。

標題和副標題很吸引人。標題使用第二人稱文案，副標題很好地補充了標題，讓潛在客戶知道超過 150,000 名其他營銷人員使用 ActiveCampaign。
“無需信用卡”向訪客保證此優惠是完全免費的。
只有兩個表單字段使得更多潛在客戶可能會填寫表單。
客戶推薦非常適合添加社交證明，但 Twitter 句柄可能會將訪問者從頁面上帶走，而無需先進行轉換。
滾動表單和 CTA 按鈕增加了訪問者採取行動的機會，因為無論他們在頁面上的哪個位置，它都是可見的。

A/B 測試的內容：

CTA 按鈕並不突出。顏色與頁面上的其他藍色混合在一起，副本並不令人印象深刻。
CTA 按鈕下方的副本顯示“通過單擊“創建”...”，但 CTA 按鈕未顯示“創建”。
頁腳中的導航鏈接很容易分散訪問者對頁面目標的注意力。

視覺提示

視覺提示在點擊後登陸頁面設計中發揮著巨大的作用。因為它們有助於保持視覺層次結構，讓訪問者保持參與，並將他們指向基本元素的方向。三個常用的視覺提示包括箭頭、眼睛注視和戰略性放置的對象，所有這些都指向與您的轉換目標不可或缺的元素的方向。

箭頭

箭頭經常用於點擊後登錄頁面，因為它們簡單、直接且易於理解。它們可以是動畫的或靜止的，最常用於將訪問者指向潛在客戶捕獲表單和 CTA 按鈕，就像 Bridgeline Digital 在此示例中所做的那樣：

什麼頁面做得好。

包括有關提高轉化率的統計數據可能會激起訪問者對營銷自動化的興趣。此外，粗體格式有助於引起人們的注意。
“免費”在兩個不同的地方被提及，強調潛在客戶不需要為此白皮書付費。
項目符號副本使潛在客戶可以輕鬆找出他們的白皮書將包含的內容，而無需通讀文本塊。
橙色的 CTA 按鈕突出並與表單標題和箭頭很好地協調。
公司徽標為頁面增加了信任價值，讓訪問者認為，“如果這些知名公司與 Bridgeline Digital 合作，那麼我也應該這樣做。”

A/B 測試的內容：

超鏈接的公司徽標和頁腳鍊接為訪問者提供了離開頁面的途徑，可能會增加跳出率。
增加產品圖片周圍的空白區域會使其更加突出。
CTA 按鈕文案需要改進，因為“下載白皮書”沒有任何說服力。添加面向利益和/或第一人稱的副本可能會鼓勵更多潛在客戶點擊。

視線

由於人們傾向於看其他人在看什麼，因此使用人眼凝視作為方向提示在點擊後登錄頁面上特別有效。例如，如果您頁面上的人物圖片正在查看標題，那麼您的訪問者的注意力也可能會被吸引到標題上。因此，這種技術對於讓訪問者看到您希望他們看到的地方很有用。

在下面的頁面上，Vistage 包含了一張女性的圖像，該圖像正朝著潛在客戶捕獲表單的方向看。當參觀者看著她時，他們下意識地覺得有必要看一下表格：

頁面做得好的地方：

沒有退出鏈接（隱私政策除外）使訪問者無法在不單擊瀏覽器中的“X”或填寫表格的情況下離開頁面。
對比色作為視覺提示，將注意力吸引到頁面上最重要的元素：標題、女性和 CTA 按鈕。由於頁面的其餘部分是灰色調，這三個組件比其他所有組件都突出。
包括隱私政策有助於向訪問者灌輸信任，讓他們知道他們的信息對公司來說是安全的。

A/B 測試的內容：

添加社會證明，例如客戶推薦或公司徽章，可能會吸引更多訪問者了解他們是否有資格獲得優惠。
有關優惠的最少信息可能會阻止人們進行轉換。添加項目符號或小塊文本以突出優惠優勢可能會產生更好的結果。

對象

第三種常用的視覺提示技術是定位對象，使它們直接指向頁面的特定區域。這樣做會將潛在客戶的注意力集中在某些重要的頁面元素上。

在下面的示例中，Lyft 通過將車輛直接朝向並幾乎接觸到他們的潛在客戶捕獲形式來實現此目的：

頁面做得好的地方：

只有一個表單字段非常適合說服人們交出他們的信息。
不選中協議複選框會使潛在客戶在轉換過程中感覺更加可控和舒適。
“查看您能賺多少錢”部分很有用，因為它允許潛在客戶輸入他們的信息並單擊“計算”CTA 按鈕而無需離開頁面。在計算出他們的每週工資金額後，該按鈕會變成另一個“立即申請”按鈕，有助於轉換過程。
“Lyft 駕駛的工作原理”部分使公司能夠提供有關 Lyft 工作原理的分步信息 - 由於它是水平滾動的，因此不會使頁面混亂。

A/B 測試的內容：

幾個退出鏈接使訪問者很容易分心並離開頁面而無需轉換報價。
由於背景繁忙，標題和副標題難以閱讀。在更明顯的不同位置測試它們可能會吸引更多注意力並產生更好的結果。
CTA 按鈕副本非常模糊。 “下一個”根本沒有說明要約的任何內容，並且可能不會強迫很多人點擊。

視覺層次

每個點擊後登錄頁面都應遵循特定的視覺層次結構 - 從最重要到最不重要的內容。旨在首先吸引訪問者註意力的元素（通常是標題）應放置在頁面頂部，因為這是層次結構的頂部，其餘內容然後從最高優先級到最低優先級傳遞。

許多特徵在創建視覺層次結構中發揮作用，包括但不限於：

尺寸
顏色/對比度
密度/接近度
留白
質地/風格

SendGrid 在其頁面上使用了其中的幾個組件。讓我們看看他們使用了哪些，以及他們應該考慮改進哪些：

什麼頁面做得好。

大小變化和粗體格式有助於將注意力吸引到副本中最重要的部分，形成強大的視覺層次。
標題通過提及三個也在使用 SendGrid 的知名公司來迫使訪問者使用 SendGrid。
多個合作 CTA 按鈕為潛在客戶提供了在整個頁面的不同位置兌換優惠的多種機會。
產品圖片顯示了交付內容的預覽。
具有最少副本的項目符號使潛在客戶不必通讀文本段落即可找到他們正在尋找的內容。
客戶推薦和公司徽章可作為社會證明，可能會說服更多潛在客戶與 SendGrid 合作，因為其他人正在通過他們取得成功。將 Dave Tomback 的頭像添加到他的推薦信中會使其更加有效。

A/B 測試的內容：

圖像中的女性可以低頭看標題/CTA 按鈕以添加視覺提示並鼓勵訪問者也這樣看。
CTA 按鈕可以放大並以不同的顏色進行測試，以吸引更多的注意力。頁面上的其他地方有藍色，所以它們不會盡可能地“彈出”。
增加一些元素周圍的空白，比如 CTA 按鈕和標題，將有助於它們更加突出。
應該刪除“查看計劃和定價”CTA 按鈕，因為它將訪問者帶到另一個頁面，分散他們對這個頁面的注意力。

引人注目的 CTA 按鈕

一個完美優化、引人注目的 CTA 按鈕是包含在您的點擊後登錄頁面框架中的最重要元素。它應該在所有其他元素之上脫穎而出，因此對於潛在客戶需要點擊哪裡來兌換您的報價不會感到困惑。

WalkMe 創建了他們的兩步選擇加入頁面，其中有一個巨大的、對比鮮明的 CTA 按鈕，該按鈕在頁面上肯定會脫穎而出，吸引訪問者的注意力：

什麼頁面做得好。

背景圖像為訪問者提供了他們的軟件外觀的真實預覽。
CTA 按鈕真的會在頁面上彈出。除了大且對比鮮明之外，當用戶開始滾動時，它還會重新出現在頁面頂部。
兩步選擇加入表單減少了混亂並讓用戶感覺不那麼害怕，因為他們不必在此處輸入他們的信息。
項目符號副本使潛在客戶無需閱讀太多文本即可輕鬆了解有關報價的信息。
社會證明（客戶推薦和滾動的公司徽標）可能會讓潛在客戶覺得有必要與這家公司合作。

A/B 測試什麼。

將 CTA 按鈕副本更改為更個性化（使用第一人稱格式）和以利益為導向的內容可能會提高轉化率。
用 GIF （折疊下方）替換圖像將為用戶提供更具交互性的頁面體驗，並有助於更好地解釋產品。
在客戶推薦信中添加頭像會使其更值得信賴，從而提高其有效性。

哪些點擊後著陸頁設計技術激發了您的靈感？

使用點擊後登錄頁面來推廣和銷售您的產品和服務是您營銷策略不可或缺的一部分。這是因為當正確優化時——使用上述技術以及我們的設計最佳實踐指南和點擊後登錄頁面優化指南，它們可以顯著提高您的轉化率。

將廣告點擊轉化為轉化，為每個優惠創建專用的、快速加載的點擊後頁面。立即註冊 Instapage Enterprise 演示，了解如何為所有受眾提供獨特的點擊後登錄頁面。