您在其他任何地方都找不到的最佳移動登陸頁面設計技巧

網上有很多關於移動點擊後登陸頁面設計的資源，但沒有很多具體的設計說明如何實際構建高轉換頁面。

手機觀看推薦什麼結構佈局？ 按鈕應該是多少像素？ 應該用多少像素來分隔元素？ 你應該使用“懸停”效果嗎？ 表單標籤應該在裡面還是外面？

我叫 Cosmin Serban，Instapage 設計服務總監。 你可能會問，是什麼讓 Cosmin 有資格在移動點擊後登陸頁面設計上寫作？

我一直在向客戶介紹設計和構建點擊後登錄頁面的最佳實踐，以提高他們的轉化率。 另外，我有：

• 審查了 1,000 多個點擊後登錄頁面
• 與客戶合作以確保他們的信息得到傳達，並且他們的訪問者有良好的體驗，最終導致轉化

此外，我所在的團隊開發了 200 多個優化模板，用於創建和啟動超過 200,000 個點擊後登錄頁面，您可以在此處找到模板。

移動點擊後登陸頁面設計：開始之前需要了解的內容

本文中的一些概念是在創建我們的模板庫時內部開發的。 這並不一定意味著所有這些提示都應該適用於您創建的每個點擊後登錄頁面。 每個點擊後登錄頁面都有其獨特的挑戰，但了解這些基本概念肯定會幫助您為從移動設備訪問的任何人提供更好的體驗。

讓我們從桌面和移動體驗之間最重要的區別開始。

結構

儘管在您的項目開始時看起來並不像，但擁有一個在正確的時間交付正確的元素組的結構比您想像的更重要。

首先想到的是我們的訪問者掃描移動頁面上的內容的方式完全不同。 我們都聽說過桌麵點擊後登錄頁面上的 F 模式或 Z 模式，但移動設備的模式稱為什麼？ 我們不一定會給它一個名字，但很可能它是非常線性的。 上下滾動是了解點擊後登錄頁面提供的內容的唯一方法：

由於這是訪問者與點擊後登錄頁面交互的最重要的限制之一，我們建議堅持一欄佈局，而不是試圖橫向塞入大量內容。 （沒有人喜歡捏合和縮放。）

在桌面上，大多數時候數字營銷人員會考慮每個單獨元素的位置及其影響。 在移動設備上，最好進行轉變並考慮元素組以及如何將它們堆疊在一起以獲得最大影響。

這個並排比較顯示了桌面頁面與移動頁面的結構：

我們建議從左到右將每組元素放在一起。 讓我們以標題區域（折疊上方）為例。 我們將在頂部放置徽標，然後是由主標題和輔助標題組成的組，然後在下方放置整個表單框組。

對元素進行分組的能力創建了一組原生的移動響應對象。 或者，可以將組配置為鎖定複雜排列的縱橫比，以在將它們轉換為頁面的移動版本時保持它們的精確比例。

移動縱橫比鎖定將您的分層分組保持在一起並鎖定縱橫比，無論它們是在桌面還是移動佈局上。

任何兩個或多個彼此密切相關或互補的元素都應始終結合在一起。 在這種情況下，將表單框放在頁面頂部是沒有意義的，因此將表單放在折疊上方區域的概念並不理想。 向訪問者提供他們首先註冊的內容比僅僅為他們提供一種盡快採取行動的方式更重要。

加載時間

無論您的訪問者使用何種設備，頁面加載速度都非常重要。 請注意，您的大多數訪問者將使用他們的移動數據限制並產生費用來查看您的頁面，因此請注意您向頁面添加的圖形或元素類型。 想像一下訪問頁面並自動播放視頻。

如果您需要大量動畫來支持內容，我們建議您堅持使用簡單的移動圖像。 簡單來說，我的意思是您需要為特定部分創建自定義背景圖像。 使用照片編輯軟件調整照片的大小或佈局可能值得花費額外的時間，因為這意味著您可以加快頁面速度。

背景圖像也是如此，因為您不需要 2,000 像素寬、300kb 的圖像來加載您的部分，我建議讓設計師創建一個定制的定製圖像，您可以將其設置為您的部分背景：

大多數情況下，保持移動頁面盡可能簡單總是一個好主意。 例如，如果您有多個傳達相同信息的圖形元素，只需在移動設備上顯示一個。

由於大多數手機會適應移動構建器中提供的內容區域的大小，一個好的經驗法則是擁有至少 400 像素寬的圖像，以確保兩側沒有任何空白區域。

構建 AMP 點擊後著陸頁

在移動設備上創建一個積極的點擊後登陸頁面是必不可少的，因為點擊後登陸頁面是發生轉化的地方。 如果您的頁面加載速度過慢或造成從廣告到點擊後的脫節體驗，訪問者將會反彈。

然後，考慮到 Google 將點擊後著陸頁體驗視為確定廣告排名的一個因素，這最終會影響您的點擊率。 將所有這些加起來，品牌就會面臨一個重大問題。 幸運的是，AMP 框架存在。

AMP 頁面對廣告商尤其有吸引力，因為它們通過近乎即時的加載時間和平滑滾動提供更引人注目的移動用戶體驗，同時仍支持一些樣式和品牌可定制性。 由於 AMP 限制 HTML/CSS 和 JavaScript，因此它可以加快點擊後著陸頁的呈現速度。 與傳統的移動頁面不同，AMP 頁面由 Google AMP Cache 自動緩存，以加快在 Google 中的加載速度。

AMP 框架的好處確實超過了它的局限性：

• 在移動設備上更快的頁面加載速度
• 更好的移動瀏覽用戶體驗
• 使用 AMP 頁面有助於提高質量得分
• Google 會偏愛使用 AMP 的網頁

截至 2018 年 6 月，Instapage 提供 AMP 點擊後登錄頁面，數字營銷人員可以在其中在應用程序中構建符合 AMP 標準的頁面，而無需開發人員。 因為，歸根結底，如果頁面加載不是即時的，那就是不夠快。

觸摸設計

移動點擊後登錄頁面設計面臨的最大挑戰之一是確保訪問者盡可能輕鬆地採取行動。 該操作可以是表單提交或簡單點擊按鈕。 您會期望大多數人會做出一些調整，但情況並非總是如此。

我們都經歷過難以點擊某些內容或體驗不是為移動用戶量身定制的頁面。 尤其是文本鏈接——調整任何超鏈接的文本元素的大小非常有用。 您的訪問者不必放大即可執行您想要的操作。

鈕扣

但我們注意到的最大問題是點擊後登錄頁面上按鈕的大小。 我們的團隊建議設計高度至少為 70 像素的按鈕，不要害怕使它們盡可能寬，但不要將它們拉伸到整個寬度（400 像素），因為它們可能會與一小部分混淆。

懸停效果對桌面頁面來說是一種很好的觸感，因為它向訪問者發出信號，他們可以對特定元素採取行動。 在移動設備上，通過，懸停效果是多餘的。

邊距

對於邊距，我們建議在每一側垂直留出至少 20 像素的安全區域，並避免因元素太靠近手機屏幕兩側而可能出現的任何視覺張力。

留白對於移動頁面和桌面頁面一樣重要。 基本概念仍然適用，只是嘗試將所有東西隔開，不要讓元素彼此真正靠近。 這樣做將幫助您避免視覺緊張。

擁有一致的利潤率肯定會帶來更好的用戶體驗。 我們的團隊通常確保每個元素之間至少有 20 到 40 個像素。 您決定多少取決於您，因為每個塊可能具有獨特的元素結構。

這是非常主觀的，但是一旦您建立了規則，請嘗試在整個頁面中復制它，這將使其具有更現代的外觀：

可讀性

您可能會認為能夠清楚地閱讀內容是理所當然的，但我們已經看到太多次點擊後登錄頁面的文本太小或太大。 找到一個好的平衡很容易，用於特定元素的字體大小的一個很好的經驗法則是：

• 主標題： 28 像素
• 副標題： 22 像素
• 段數： 17 像素
• 其他細節： 15像素

當然，您可以調整這些尺寸，因為沒有一種尺寸可以滿足所有需求。 但是，它應該作為設計移動點擊後登錄頁面的良好基準。

另一個值得一提的項目是文本元素的行高。

在桌面上的某些情況下，使用 1.0 甚至 1.2 是有意義的，當您構建移動點擊後登錄頁面時，請確保文本元素的行高至少為 1.4。

底線：字體越小，行高應該越大。

形式

由於表單是大多數點擊後登錄頁面中最重要的部分，因此讓人們輕鬆提交信息至關重要。

在我們的移動頁面中，我們通常盡可能多地水平拉伸表單域，並避免表單域和按鈕在同一行的情況。 這只是一個糟糕的經歷：

經常出現的另一件事是處理具有很多字段的表單。

我們團隊發現的最佳實踐是，當頁面有2 個以上的表單字段時，將標籤位置設置為外部，使訪問者更容易知道需要什麼信息，而不是試圖記住要輸入的內容：

從今天開始增加您的移動轉化次數

就像桌面頁面一樣，移動點擊後登陸頁面設計首先是關於用戶體驗，以及什麼會說服人們參與和轉換。 如果不考慮上述建議，您的移動轉化率可能會受到影響，人們會反彈。

考慮實施這些建議，看看您的點擊後登錄頁面如何轉變為高度優化的轉化資產。 立即獲取 Instapage AMP 演示。