著陸頁與主頁：有什麼區別？
已發表: 2017-02-20以今天的設計標準來看，90 年代中期的網站主頁設計完全是一場噩夢，但在網絡初期，這就是我們所知道的。 漂浮在外太空的明亮的綠松石超鏈接在當時似乎是個好主意。
二十年後，情況發生了變化。 今天的主頁更側重於將訪問者吸引到營銷漏斗中，而不是用跨越可見光譜的超凡脫俗的圖形和顏色使他們眼花繚亂。 由於著陸頁構建器，現在可以在幾分鐘內構建高轉化率的體驗。
在這方面，主頁變得很像點擊後登錄頁面。 但它們之間仍然存在一些重大差異。 牢記這些設計差異以構建高效的頁面。
網站主頁設計與點擊後登陸頁面設計：您需要知道的
1. 為不同的用戶建立點擊後登陸頁面和網站首頁
好的，所以您遇到看起來像微軟 1995 年一團糟的主頁的可能性很小。 但為什麼？
BOP Design 的創意原則 Kara Jensen 解釋說：
“很容易陷入網站的概念而忘記最終用戶。一個成功的網站不僅僅是一個可愛的視覺作品；它是一個吸引目標受眾並為他們提供所需信息的門戶決定他們是否想成為新客戶。”
在像網頁設計這樣的創意職業中，設計師（甚至客戶）對最終產品如此依戀以至於忘記了他們為誰而做的情況並不少見：訪問者。
二十年前，那個滿是超鏈接的太空景觀在微軟的設計師看來可能很酷，但這是用戶關心的嗎？ 可能不是。
第二個主頁上的橫向“常見問題解答”按鈕怎麼樣？ 這是為用戶設計的嗎？ 不。
在設計任何頁面之前，有必要問自己，“這個頁面的目標是什麼？” — 或者，甚至更好，“訪問此頁面的用戶的目標是什麼？”
頁面的目標是什麼
在您的主頁上，不可能為每個訪問者預測該目標。 新的潛在客戶或回頭客可能想知道您的業務背後的故事，而其他人則會直接前往獲取計劃和定價信息。 這就是主頁包含導航欄和多個出站鏈接的原因，這些鏈接使訪問者可以輕鬆訪問他們可能想要的任何內容。
以 Zoho CRM 產品主頁為例，其導航允許客戶、開發人員和潛在客戶了解有關該工具的每一個小細節：
但是，點擊後登錄頁面只有一個目標：將訪問者轉化為要約。 當用戶從促銷鏈接導航到您的點擊後登錄頁面時，這是因為他們正在考慮申領您宣傳的優惠。 這就是為什麼在您的點擊後登錄頁面上，您的工作是只包含訪問者需要的信息，以確定該優惠是否值得聲明。
這是由同一家公司構建的點擊後登錄頁面：
即使一目了然，也可以在折疊上方看到主要的設計差異。 此頁面上缺乏導航使訪問者專注於他們單擊以進行評估的報價。 點擊後登陸頁面上的標題遠比主頁上的標題更注重利益。
在首屏下方，主頁展示了應用程序的屏幕截圖，其中包含指向其他頁面的鏈接，而點擊後登錄頁面則展示了特定數字以證明該工具的有效性。
主頁：
點擊後登陸頁面：
向下滾動，您會看到 Zoho 主頁使用小段文字，將訪問者引導至網站的特色頁面，而點擊後登錄頁面則替代了社交證明：
主頁：
點擊後登陸頁面：
在主頁上，我們統計了 80 多個指向其他非 CTA 頁面的鏈接。 在點擊後登錄頁面上，有兩個。 儘管如此，兩個還是太多了。 點擊後著陸頁上的鏈接與 CTA 按鈕的比率（也就是您的“轉化率”）應始終為 1:1。
讓我們看另一個例子，這次來自 FreshBooks。 首先是他們的主頁，首屏：
現在，該公司的點擊後登錄頁面之一，首屏：
他們看起來幾乎一模一樣，對吧？ 差不多，但請注意點擊後登錄頁面上的標題和 CTA 已更改。 最值得注意的是，導航菜單已被刪除，以使訪問者專注於評估報價。
主頁的折疊下方的幾個部分是相同的。 兩者都具有社會證明、相同的以利益為導向的文本段落以及許多相同的圖形。 但是仔細觀察，您會注意到，在點擊後登錄頁面上，所有輔助 CTA 都已被“免費試用”按鈕取代。
這是主頁的屏幕截圖：
這是來自點擊後登錄頁面的一個：
不要讓選擇的悖論開始
記住選擇悖論：你擁有的選擇越多，做出決定就越困難。 這就是為什麼在菜單更豐富的餐廳點菜總是需要更長的時間。
在作為您點擊後登錄頁面的餐廳中，CTA 是您的菜單項。 只為您的訪問者提供一個供您選擇。 FreshBooks 通過整個頁面的“免費試用”號召性用語來做到這一點。
在他們的主頁上，FreshBooks 為訪問者提供了多個 CTA，這沒關係。 這些像“了解更多”這樣的“次要 CTA”可以幫助潛在客戶找到他們問題的答案，如果設計得當，他們甚至不會從主要 CTA 上轉移太多注意力。
您能在此頁面上找到主要的號召性用語和次要的號召性用語嗎？
看看“免費試用”如何比下面無色的“了解更多”按鈕更受歡迎？ 此頁面的設計者希望將訪問者吸引到“免費試用”按鈕，但如果潛在客戶尚未準備好嘗試，他們仍會為他們提供學習的機會。 這是網站主頁和點擊後登錄頁面之間最顯著的區別。
主頁更側重於通知和授權訪問者，而點擊後登錄頁面側重於說服訪問者。
我們無法確定每個主頁訪問者的目標。 但是，點擊後登錄頁面訪問者的目標是什麼？ 是要做出決定。 構建一個解剖學上正確的點擊後登錄頁面來幫助他們做到這一點。
2.主頁遵循點擊後登陸頁面的簡約引領
雖然他們的具體目標可能不同，但在一種基本方式中，點擊後登錄頁面訪問者和主頁訪問者想要相同的東西。 Webflow 的首席網頁設計官 Sergie Magdalin 解釋說：
“世界各地的設計師已經意識到，人們訪問網站是為了他們的內容——無論是激烈的推特風暴、深思熟慮的長篇閱讀，還是最新的“用戶生成”模因——而這種設計的最終作用是以直觀、高效和“令人愉快”的方式。
這就是從擬物化設計轉向“更扁平化”、更簡約的設計方法的原因之一……”
早在 1995 年，設計最佳實踐和標準化的網絡啟發式方法尚未開發。 網站創建者幾乎沒有研究可作為其設計的基礎。 這就是互聯網最終在外太空漂浮超鏈接的原因。
點擊推文
頁面設計開始改變
隨著越來越多的企業和消費者轉向網絡，重點變成了從現實世界到網絡空間的平穩過渡。 例如，擬物化設計（例如垃圾桶圖標）使識別元素及其在網絡上的功能變得容易。
不過，他們有一個大問題。 他們傾向於使網頁混亂。 這干擾了他們的訪問者想要的東西：內容。 今天，“扁平化”、極簡主義的設計元素——例如陰影、基本類型和明亮的顏色——以簡單直接的方式呈現給遊客。
這些元素也是一種特定頁面的主要內容：點擊後登錄頁面。 作為企業在網絡上的電梯宣傳，點擊後登錄頁麵包含訪問者快速評估報價所需的一切，僅此而已。
這就是使他們在轉換方面如此有效的原因。 他們以簡單的佈局強調內容。 現在主頁開始做同樣的事情。 看看這個 Autopilot 點擊後登錄頁面：
現在看看他們的主頁：
很像吧？ 單擊並向下滾動以查看它們的設計即使在折疊下方也相似。
如果您需要另一個示例，請查看上面的 FreshBooks 主頁和點擊後登錄頁面。 今天，無論網頁如何，它的重點是提供內容而不是分散注意力。
3.點擊後登陸頁面和網站首頁都必須以視覺層次結構引導訪問者
甚至在互聯網出現之前，人們就一直以同樣的方式查看頁面。 早期的眼動追踪研究表明，讀者首先通過書面頁面上的圖像或標題進入頁面，然後向下掃視左側以查找項目符號或斜體文本。 最後閱讀正文。
在網絡上，這被稱為 F 形模式：
為了讓讀者查看您最重要的內容，您需要根據人們喜歡的閱讀方式創建所謂的“視覺層次結構”。 它應該是這樣的：
- 使用引人注目的圖片和大標題來吸引讀者。
- 用副標題劃分頁面內容。
- 使用項目符號來引起對列表中元素的注意，例如功能和優點。
- 在這些副標題和項目符號中使用正文來簡要闡述。
層次結構還應該基於熟悉的網頁設計原則。 例如，徽標始終位於網頁的左上角。 鏈接要么帶有下劃線，要么與文本的其餘部分使用不同的顏色。 不要試圖重塑人們在網絡上閱讀的方式。 麻省理工學院的一項研究曾經表明，人們更喜歡那些試圖偏離長期最佳實踐的人所熟悉的頁面佈局。
例子
這是一個良好的視覺層次結構的示例：
圖像和標題吸引了讀者的眼球。 他們向下移動到副標題，“全球有超過 40,000 個組織和子公司……而且還在增長。” 在此之下，要點傳達了有關該軟件的重要信息。 在右側，一個表單收集了潛在客戶信息，一個顏色鮮豔的按鈕完成了轉換。
糟糕的視覺層次結構示例
這是一個糟糕的視覺層次結構的例子：
該頁面有標題、副標題、要點，甚至是信息圖 - 那麼有什麼問題呢？
好吧，人們從左到右閱讀，因為表格打破了左邊距，文本從表格開始。 這意味著就讀者而言，該頁面從該表單的右邊緣開始。 這意味著這個頁面最關鍵的部分——表單和號召性用語——完全丟失了。
訪問者將閱讀副標題、要點，並瀏覽右側的信息圖，因為它在他們的視線範圍內。 然而，即使借助視覺輔助，當其餘內容在右側時，讀者仍會向左看表格，這是不自然的。
這是一個創建良好視覺層次結構的主頁（單擊此處查看完整主頁）：
一張圖片和一個標題吸引了讀者的注意力，然後幾個帶有項目符號內容的副標題簡要描述了該服務的好處。 然後，一段視頻見證講述了 Upwork 的力量。 在此之下，號召性用語邀請訪問者加入平台。
這是一個糟糕的主頁視覺層次結構的例子（點擊這裡查看完整的主頁）：
乍一看，這個主頁看起來遵循良好的層次結構規則。 帶有標題的圖像會吸引訪問者的注意力； 然後，一個副標題介紹了一些項目符號圖標。 在此之下，該公司展示了獎項和知名客戶。 但是，在那之下呢？
沒有。 用戶必須向上滾動或瀏覽網站頁腳才能進行下一步。 頁面上的每個元素都應引導訪問者進入營銷渠道的入口。 本頁末尾應該有一個 CTA。
網站主頁和登錄頁面的共同點比您想像的要多
所有關於網站主頁與點擊後登錄頁面的討論可能會讓您認為它們是兩種完全不同的動物。 在某些方面，它們確實是。 但本質上，它們是相同的。
創建點擊後登錄頁面從未如此簡單 - 直到現在。 所以，今天就註冊一個 Instapage Enterprise 演示。