如何使用專家提示創建登陸頁麵線框

已發表: 2018-05-08

點擊後登陸頁面通常是人們對您品牌的第一印象之一，因此讓它與眾不同很重要。點擊後登錄頁麵線框可以幫助您在實際構建頁面之前可視化頁面元素的排列。

什麼是點擊後登陸頁麵線框？

線框是點擊後登錄頁面的基本設計佈局或骨架，讓利益相關者了解頁面的結構以及構建它需要哪些資產。

Instapage 的視覺設計師 Rares Cimpean 解釋說：

在製作點擊後登陸頁麵線框時，您應該關注頁面的流程、可用性和可訪問性，人們獲取所需信息的速度有多快，CTA 的可訪問性和可識別性等。所有這些因素線框圖階段考慮。

以下是一些線框點擊後登錄頁面示例，包括長篇和短篇：

點擊後登錄頁麵線框模板有幾個主要目的：

作為您的紙筆草圖和第一個原型之間的中間地帶
呈現將在頁面上顯示的內容的概述
提供頁面結構的藍圖
傳達用戶界面的整體方向

注意：沒有適合所有活動的單一點擊後登錄頁麵線框設計。一些點擊後登陸頁面可能只需要一個標題、項目符號副本、表單和 CTA 按鈕，而其他人可能需要突出額外的好處並展示社會證明。例如，銷售頁面通常需要更詳細的產品描述，並且可能需要更長的時間。（請記住，您始終可以對短頁面和長頁面進行 A/B 測試，看看哪個會產生更好的結果。）

無論您要繪製哪種類型的頁面，我們的圖形設計經理 Rafal Bogdan 都表示一開始保持線框圖非常簡單的重要性，以免讓相關利益相關者不知所措：

我不想太深入地關注下一階段利益相關者可能拒絕的元素。 線框的主要思想是在點擊後登錄頁面上顯示特定的項目功能，並幫助他們了解這些功能在真實頁面上的表現。

一旦你有了你的線框，是時候讓設計讓它發光了。以下是通常出現在高轉化率點擊後登錄頁面上的元素。

如何線框點擊後登錄頁面

沒有導航

由於點擊後登錄頁面是為轉化而設計的，而且目的單一，因此不應有導航鏈接會分散用戶對轉化目標的注意力。要么轉換，要么離開——別無選擇。

許多公司在移除導航欄後的轉化率發生了重大變化：

在移除頂部導航欄並修改表單佈局後，Career Point College 的轉化率提高了 336%。
通過移除導航欄，Yuppiechef 見證了轉化率提高了 100%（從 3% 到 6%）。
在他們進行 A/B 測試移除頂部導航的那一個月內，SparkPage 的轉化率從 9.2% 增加到 17.6%。

Comporium Media Services 是另一個品牌，它了解移除導航以最大化轉化的必要性。甚至他們的徽標都沒有鏈接，這使訪問者留在頁面上並專注於請求諮詢：

在遵循最佳實踐時，應該使用的唯一鏈接是那些提高可信度的鏈接（例如使用條款和/或隱私政策），以及增強用戶體驗的鏈接（例如錨標籤和點擊通話電話數字）。

標題和副標題

您的標題是最重要的元素之一，因為沒有引人注目的標題，訪問者就不會被說服繼續評估您的報價。由於這是傳遞信息的主要方式，因此它必須引起注意，並在用戶登陸頁面後立即清晰可見，並且位於首屏。

您的副標題用於補充您的主標題，尤其是當主標題很長或需要額外的上下文（例如統計數據）時。

寫一個好的標題的關鍵是確保它傳達您獨特的價值主張 (UVP)，或者是什麼使您的產品或服務與競爭對手區分開來。

這個 Autopilot 點擊後登錄頁面標題讓公司知道，與其他營銷自動化軟件相比，他們可以在 Autopilot 上“增長得更快”。然後副標題通過描述它們如何可以更快地增長來補充這個想法：

除了包括您的 UVP 之外，還有四種主要類型的引人注目的標題：

新聞：向潛在客戶介紹新的解決方案
自利：訴諸潛在客戶固有的自利<
快速簡便的解決方案：滿足潛在客戶對快速修復的渴望
好奇心：激發遊客的興趣和好奇心，吸引他們閱讀更多

您可以使用一個或組合多個以獲得更強大的標題。最引人注目的標題使用兩個或更多。

媒體

由於人們處理視覺效果比處理文本更容易，因此引人入勝的媒體（圖像、GIF 和視頻）有助於傳達報價的價值，甚至比文字更能傳達。但是，視覺效果並不是一刀切的解決方案。您為點擊後登錄頁面選擇的媒體類型取決於您提供的內容。

點擊後登錄頁面圖像的類型包括：

英雄鏡頭：讓訪問者一瞥您的產品或服務將如何改善他們的生活
產品圖片：使訪問者能夠查看您的報價的詳細信息，包括其主要功能
信息圖表：允許訪問者更輕鬆地概念化數據和統計數據（圖表、圖形等）

看看 iContact 用來向潛在客戶展示他們幫助創建的商業電子郵件的幾個示例的圖像：

除了圖像之外，還存在多種類型的點擊後登錄頁面視頻：

解釋視頻：解釋你的產品是如何工作的——特別是如果它是新的或複雜的——重點是它如何使你的潛在客戶受益
介紹視頻：展示新公司、發布新產品或突出新產品功能
視頻推薦和案例研究：通過展示真實、滿意的客戶來解釋他們對您的產品或服務的滿意度和成功，以此作為社會證明

如果使用圖像，請遠離庫存照片，除非它們傳達了您報價的真實情況並且與主題相關。少一點，你就有可能降低你的品牌認知度和價值。

複製

無論您多麼想告訴訪問者有關您的報價的所有信息 - 都不要。注意力持續時間最多只有幾秒鐘，所以你的文案必須簡潔並能立即吸引人們的注意力。

例如，要點（由圖標、複選標記、箭頭等標記）是傳達重要信息的常用方式，允許訪問者快速瀏覽頁面，並確定要約的關鍵要點。

借助粗體部分標題、最少的副本和要點，潛在客戶可以快速了解 Highfive 的視頻會議解決方案：

社會證明

在轉換之前，人們需要相信您的公司提供可靠的服務。這就是社會證明可以通過多種方式說服他們的地方：

客戶推薦：向潛在客戶展示您兌現了您的承諾，因為它是直接從您的客戶那裡得到驗證的（通過引用包含特定信息、統計數據、全名、專業隸屬關係和頭銜以及頭像）。
客戶標誌（和數量）：顯示您已經合作過的知名公司（以及有多少家），讓訪問者知道，“既然我們的產品或服務對他們來說已經足夠好，那麼它也將適合您。”
行業獎項：證明您已得到行業領袖、記者、新聞台、網站等的公開認可。
信任印章：確保潛在客戶的付款信息安全可靠，不受外界影響。
隱私政策：向潛在客戶保證他們的電子郵件地址將被正確使用，不會與任何其他人共享。

回顧之前的同一個 Highfive 點擊後登陸頁面，查看他們用來說服訪問者轉換的所有社會證據——品牌標識、引用的推薦和行業星級：

這是另一個例子，這次來自 Splash Omnimedia，其中包括所有類型的社會證明——客戶數量、品牌標識、案例研究視頻和引用的推薦：

通過結合所有這些證據，您可以通過單擊 CTA 按鈕說服潛在客戶進行轉換。

潛在客戶捕獲表格

創建完美的表格並不容易。沒有足夠的表單字段，您將無法收集所需的所有信息；字段太多，您可能會嚇跑潛在客戶。表格的長度取決於您的報價在營銷漏斗中的位置。一般來說，越高的形式越短，反之亦然。

Justworks 設計了這個點擊後登錄頁面來提供定價信息。由於這是一個頂級的報價，它只包含三個來自字段並請求非常基本的信息是有道理的：

相比之下，Autopilot 的免費試用在漏斗的更深處，因此詢問更多信息是可以接受的：

呼籲採取行動

您的 CTA 按鈕是點擊後著陸頁轉換發生的地方，因此它必須突出並渴望被點擊。以下是優化 CTA 按鈕的主要方面：

顏色：使用色彩理論找到一種色調、色調、色調或陰影，對比良好並從頁面的其餘部分中脫穎而出。
文案： “提交”和“下載”是通用的，沒有靈感。相反，製作特定的、個性化的副本並合併“你”、“你的”、“我的”和“我的”，以產生更多的 CTA 按鈕點擊。
尺寸：不要讓人們搜索按鈕——讓它引人注目。 它還可以提供視覺提示——比如 Volusion 點擊後登錄頁面中的彈跳箭頭
下面 - 引起更多關注：

最小的頁腳

點擊後登陸頁面和網站頁腳不一樣。點擊後著陸頁頁腳不應包含站點地圖、產品頁面鏈接或社交媒體帳戶。您包含的每個鏈接都會造成另一種干擾，並讓他們以另一種方式離開您的頁面而無需轉換。

看看 Infegy 為訪問者提供的所有這些逃生路線：

如果您選擇包含點擊後登錄頁面頁腳，請確保它只顯示最新的版權信息、服務條款和隱私政策，就像 Tapstone 所做的那樣：

留白

留白讓您的頁面呼吸，以便所有元素都吸引註意力，訪問者可以更輕鬆地瀏覽您的頁面。還添加空格：

減少雜亂
增強可讀性
建立視覺層次
讓您的點擊後登陸頁面看起來更專業

比較以下來自 NASM 和 Acquisio 的點擊後登錄頁面：

NASM 的頁面很擁擠，對於某些人來說可能會讓人不知所措，因為很難決定先看哪裡，以及如何瀏覽頁面。 Acquisio 的頁面有足夠的空白空間，因此可以更輕鬆地從上到下導航，並提供更好的整體體驗。

一切都始於點擊後登錄頁麵線框

創建線框可以讓您的團隊確定整個頁面故事，查看需要哪些資產以及需要多少副本。從那裡，您可以使用上述建議設計優化的點擊後登錄頁面。但是要構建個性化的、100% 可定制的點擊後登錄頁面，您需要一個功能強大的解決方案來完成這項工作。

借助 Instapage，營銷人員可以使用我們對設計師友好的構建器、CSS 編輯器、對齊和分組、熱鍵等來創建像素完美的頁面。然後，使用內置熱圖進行 A/B 測試以獲得更高的轉化率，並使用 Instablocks™ 擴展您的生產。沒有其他解決方案可以比較。立即註冊 Instapage Enterprise 演示。