12個偉大的登陸頁面示例您需要復制

12個偉大的登陸頁面示例您需要復制

著陸頁的存在是為了達到一個目的:讓網站訪問者轉換到購買行程的下一個階段。 儘管理論上他們的目的很簡單,但實際設計一個成功的著陸頁需要一些詳細的計劃和 創意測試

無論您的業務正在銷售什麼或者您希望煽動的轉化操作,通過查看其他優秀的目標網頁的外觀,都會有所幫助。 而且由於沒有一個“正確”的登陸頁面方式,您需要查看來自許多不同行業的示例,了解購買流程的不同階段。

想獲得靈感? 查看下面的著名頁面示例。

借助此免費優化指南,構建和宣傳可產生更多潛在客戶的目標網頁。

免責聲明:我無法訪問每個著陸頁的分析數據,因此我無法具體告訴您他們轉換訪問者,聯繫人,潛在客戶和客戶的能力。 但是他們中的很多人都遵循最佳實踐,同時還實施了一些新的實驗,可以為您提供自己的著陸頁的想法。

12個著陸頁設計的絕佳例子

1) Lyft

我們喜歡Lyft的登陸頁面,他們忽略了駕駛員的主要動機:輕鬆賺錢。

我們也非常喜歡這一點,除了“立即申請”表格之外,駕駛者還可以在一周內輸入他們的城市以及他們可能開車到Lyft的小時數,從而計算出他們的生產量。 當訪問者填寫這些信息並按下“計算”時,他們不會被帶到新頁面。 相反,他們看到一個美元金額後面跟著一個新的號召性用語按鈕到“立即申請”(一旦點擊後,驅動程序就會到達表單)。

通過提供這兩種轉換路徑,他們可以解決轉換路徑中兩種不同類型的人員:即準備立即作出決定的人員 那些在轉換之前需要更多信息的人。

lyft進登陸page.png

2) 專業的僚人

好吧,所以有一個專業的僚機幫助你找到日期和有意義的關係的想法已經很酷了。 但是,當你面臨招聘人選的前景時,這也引發了問題。 它是如何工作的? 它要多少錢? 這真的會幫助我嗎?

這就是為什麼我們喜歡托馬斯愛德華茲這位原來的職業摔角人本人的著陸頁,它概述了一個免費的教練課程將實現的目標。 此外,很明顯,它是免費的,這要歸功於折疊上方的大膽顏色的號召性用語按鈕。

一旦你點擊那個按鈕,你就不會被帶到新的頁面。 相反,插頁式表單就會出現在那裡。 雖然它確實需要大量的信息 – 其中一些信息有些私人化 – 但它也傳達了這樣的信息,即專業僚機將嚴肅對待,但只有在你這樣做的時候。

專業wingman.gif

3) Muck Rack

該著陸頁設計具有這一切。 它具有視覺上的吸引力和互動性,提供有關Muck Rack服務的可掃描但描述性的標題,並使用行業專業人士的引用作為社交證據。 另外,該頁面直觀且易於導航。

關於這個登陸頁面很酷的部分是它可以吸引Muck Rack的觀眾。 頁面頂部分為兩部分,並排顯示兩種不同的服務。 一旦訪問者將鼠標移到“查找記者”或“構建免費組合”CTA上,就會出現一個非常簡單的表單 – 這很重要,以免讓用戶轉移手頭的任務。

muckrack.gif

4) Cigital的

有幾件事情可以讓Cigital登陸頁面發揮作用。 它具有簡單和相關的圖像。 標題很簡單,電子書的描述告訴觀眾他們將通過下載獲得的具體價值。 只有一個號召性用語 – “閱讀電子書” – 由於帶有明亮的黃色CTA按鈕,在頁面上突出顯示。

我們在這個著陸頁上改變的唯一的事情就是我們要移除頂部的導航欄。 他們傾向於分散遊客並引導他們遠離預期的行動。 這不僅是一個著陸頁設計的最佳實踐,但是 我們還進行了A / B測試 這顯示從登陸頁面移除導航鏈接可提高轉化率。

Cigital.gif

5) 可汗學院

關於將您的主頁用作登錄頁面的難點在於您必須滿足幾種不同類型的受眾群體。 但可汗學院的主頁非常好。 這個頁面顯然是為三種不同類型的訪問者設計的:那些想要學習東西,想要教書的人,以及有興趣為孩子使用可汗學院的家長。 另外,在頂部印有“你可以學到任何東西”的文字有多動機?

本頁面的其餘部分專為不完全熟悉可汗學院的觀眾而設計。 它豐富多彩,主要闡述了使用學習平台的關鍵好處 – 所有這些都很容易掃描和理解。 還有一個反復出現的CTA:“立即開始學習。” 只要觀眾覺得他們有足夠的信息,他們就可以點擊CTA,無需滾動即可回到頁面頂部的表單。

可汗學院

6) 俱樂部W

一點兒 愉快的複制可以走很長的路 在您的著陸頁上。 我們喜歡這個有趣的小玩意 – “(提示:這是葡萄酒)” – 這個俱樂部W包含在他們的企業饋贈登陸頁面的標題下。 它將品牌人性化,並使它們可愛,這可能對其轉化率產生積極影響。

該標題下方的圖片很好地利用了負面空間,向用戶顯示了他或她的禮物接收者可能實際接收的內容,他們是否應該選擇與Club W一起贈送禮物。當然,還有那種大膽的號召性用語 – “ 給我們發郵件“。

我們會改變的一件事? CTA提示用戶打開電子郵件軟件,從而完全驅動網站和瀏覽器的流量。 這裡的表格可能更有效 – 俱樂部W不僅可以指定想要捕獲的信息,還可以讓用戶在現場觀看。

俱樂部w.gif

7) Codecademy網站

我喜歡這個頁面,因為它在復制和設計中都很簡單。 折疊上方的圖像是一個電腦屏幕,顯示一個帶有閃爍光標的HTML支架 – 一種異想天開,清晰的視覺效果,伴隨著右邊的表單。

該表格本身很簡單,只需要一個電子郵件地址,用戶名,密碼和一個驗證信息,證明您不是創建帳戶的機器人。 或者,您可以使用您的Facebook或Google Plus登錄,進一步縮短轉換路徑。

對於在創建帳戶之前需要更多信息的訪問者,登錄頁面還提供了一個低於視頻的視頻,通過真實的成功故事解釋了他們的概念和價值。 再一次,這有助於使潛在的令人恐懼的編碼世界變得對初學者更加平易近人。

那些需要更有說服力的人可以繼續滾動查看更多的推薦信和其他形式的社交證明。

codecademy.gif

8) 水煮的

我認為我們從來沒有過這樣的時代,在文化上,我們一直如此痴迷於食物。 Poached已經將其轉變為B2B模式,並建立了一個連接業主和烹飪人才的平台。

當你訪問主頁時,你不知道你在那裡做什麼 – 巨人“發布工作”和“選擇一個城市”呼籲行動幫助。 一旦你點擊其中一個,你就會被帶到一個沒有裝飾的表格成為會員或登錄,或在每個城市的工作清單。 這是豐富多彩和全面 – 它,讓我們餓了。

poached.gif

9) 喘息

這是另一個著陸頁上巧妙,令人愉快設計的例子。 只要您訪問Breather.com,就立即採取行動:指明您想在哪裡找到空間。 此外,它還使用定位服務來確定您的位置,並在附近提供即時選項。

我們喜歡Breather如何使用簡單的點對點副本讓訪問者知道公司的行為,然後立即由CTA選擇一個城市。 如果您需要向下滾動以獲取更多信息,則可以看到呼吸器 與顯微鏡一起玩 與個性(“沒有承諾,永遠”),提醒我們有設計背後的真人。 這讓我們更接近品牌。 消極的空間和舒緩的配色方案也與產品保持一致 – 實質上是呼吸的空間。

breather.gif

10) 啟動研究所

訪問您的網站不會在不知道他們將獲得什麼回報的情況下交出他們的個人信息。 在其著陸頁上,Startup Institute非常清楚在申請之後通過在表格旁邊列出問答的情況下會發生什麼。 它可能會促使一些人說:“他們讀我的思想!”

為了避免猶豫填寫表單,請使用著陸頁預先設定期望值。 這清除了空氣,也可以清除那些不認真對待內容,產品或服務的人。

Startup Institute.gif

11) Edupath

你的目標網頁的目標受眾是誰? 雖然Edupath的大部分網站內容都針對學生,但有些部門專門為父母提供有關幫助青少年完成大學申請和SAT準備的建議。 下面的著陸頁面位於其中一個部分。

當父母填寫青少年的姓名,電子郵件地址和手機號碼時,下載Edupath應用程序的鏈接將直接發送給他們。 Edupath的人們都知道,如果父母要求他們的話,學生可能會做些什麼 – 特別是如果這意味著他們不必交出手機。

另外,這是一個簡單的一鍵式過程。 這整個轉換路徑是一種巧妙而有用的方式,通過父母的方式將應用程序發佈到更多學生的手機上。

edupath.gif

12) 品酒師俱樂部

如果我們享受的不僅僅是一種優質的威士忌,而且還是一個威士忌俱樂部的主頁,它可以讓您輕鬆加入或了解更多會員資格。 舉個例子:Taster’s Club立即在其著陸頁上提供這兩個CTA–這也恰好是它的主頁。

對於希望了解更多信息的用戶,點擊該CTA將立即將用戶滾動到色彩豐富,圖像豐富的Taster俱樂部會員資格包含的細節。 繼續滾動,並獲得用戶評價。

但點擊“立即加入”按鈕是真正的樂趣開始的地方。 做完之後,你可以選擇你的毒藥 – 也就是你最喜歡的威士忌類型 – 並查看可用的會員資格或贈送選項。 一旦你做出選擇,你就會進入一個易於瀏覽的結賬頁面來輸入你的付款信息。 良好的設計和易​​用性? 我們會為此喝酒。

品酒師club.gif

想要更多的登陸頁面設計靈感? 看看我們最喜歡的一些 HubSpot登陸頁面示例

編者按:本文最初發佈於2014年7月,並已更新為新鮮,準確和全面。

如何設計轉換的著陸頁

發表迴響

Close Menu