2018年需要查看的最佳著陸頁設計示例中的16個

2018年需要查看的最佳著陸頁設計示例中的16個

你如何說服你的訪客在你的網站上冒險?

一流的著陸頁需要這麼多元素,並且使這些元素成為他們可能經常使用的“最佳”元素,這取決於您的著陸頁目標是什麼。

例如,以表格長度為例。 它只是您需要優化的許多組件之一,但最佳做法會告訴您,短和長格式表現都很好 – 這取決於您是否想要生成大量(可能)較低質量的表單提交,或者 較少數量的較高質量的提交。

點擊此處了解優化目標網頁並創建更多潛在客戶的最佳做法。

所以,如果你正在尋找你的著陸頁遊戲,那麼知道這很有幫助 什麼進入一個偉大的登陸頁面 看到這些微妙元素在行動中的幾個例子。 令人驚訝的是,當我開始對後者進行研究時,我意識到幾乎沒有任何網站可以使用現代,令人印象深刻的登陸頁面,而不僅僅是一個主頁上的註冊表單。 所以我們決定編寫一個我們自己喜歡的著陸頁的列表。

這裡有個大警告: 我無法訪問這些網頁的任何統計信息,因此我無法告訴您他們轉換訪問者,潛在客戶和客戶的效果如何。 儘管如此,這些例子還是我見過的那些微妙的著陸頁元素的一些最佳組合。 很明顯,如果你覺得受到啟發,想在你自己的網站上嘗試這些策略,唯一知道他們是否會為你工作的方法就是自己測試一下。

設計及優化,LPs.png

16 偉大的登陸頁面設計的例子

1) Wistia

首先是Wistia的免費Wistia賬戶登陸頁面。 就在蝙蝠旁邊,您注意到了創建您的帳戶的單場表單 – 藍色,最低限度圖案化的背景與明亮的白色表單區域形成鮮明對比。

表單字段的長度與突出顯示的位置相結合,幾乎消除了創建帳戶時的所有摩擦……但是如果您有疑問,可以隨時滾動以閱讀最常見問題解答的答案。 通過將這兩部分以鮮明的色彩對比分開,Wistia使您更加輕鬆地轉換。

wisita進登陸頁面example.png

2) Unbounce

Unbounce接近這個列表的頂部並不令人驚訝 – 他們實際上是 撰寫了關於創建高轉換目標網頁的書 。 儘管關於這個著陸頁有很多令人驚嘆的事情,但我絕對喜歡的是: 1) 聊天窗口的使用,而不是一個經典的形式,和 2) 詳細信息 – 但是很好的包裝 – 表格下方的信息。

第一個有助於將注意力集中到頁面的目標 – 讓你填寫表格 – 以一種不引人注目的方式,並且感覺不像是一件雜事。 第二個頁面提供了一個SEO推動(搜索引擎將有更多的內容來抓取),並消除人們在交出信息之前需要更多地了解內容的任何擔憂,同時不會讓人們從聊天窗口分散注意力。

Screen Shot 2017-07-20 at 11.21.12 AM.png

3) IMPACT 品牌與設計

充分披露:IMPACT是HubSpot的合作夥伴 – 但這不是為什麼他們包括在這裡。 IMPACT的著陸頁一直是設計靈感的源泉。 我喜歡頁面的簡單佈局,從大型標題副本和詳細的特色圖像到表單周圍的輪廓,以及非常令人滿意的顏色和字體。

請注意,他們已經包含一個複選框以訂閱他們的博客,該博客將自動進行檢查。 注意 w ^ 嗨! 將復選框字段添加到您的 登陸頁面表單 是增加用戶的好方法,更好 請不要選中它,並讓用戶選擇加入。否則,您將冒著為聯繫人群添加大量低質量訂閱者的風險

衝擊著陸頁例如-2.png

4) 槍口

著陸頁幫助用戶決定您的產品或服務是否真的值得他們寶貴的時間和精力。 清楚和直接地傳達您的價值主張的方法要比面對訪問者解決您應用程序解決的問題更好?

槍口,沉默屏幕通知的Mac應用程序,完全支持這一點 顯示不要告訴 在他們最小的著陸頁上的心態。 屏幕上方的訪客在屏幕左上方迅速發出尷尬的突發事件。 這個動畫不僅非常有趣,而且還可以在沒有長時間描述的情況下強制傳達應用程序的用處。

槍口1.gif

5) Bills.com

通常,人們認為著陸頁是您網站上的靜態頁面。 但是使用正確的工具,您可以使它們互動和個性化。

從Bills.com下面的例子。 為了看看你是否從他們的諮詢中受益,你在看到一個表格之前回答三個問題。 它從這一開始:

票據 - 達康進登陸頁面example.png

然後,你回答兩個問題,如下面的問題:

票據 - 達康進登陸頁面2.png

以下是填寫信息的最終著陸頁表單:

票據 - 達康進登陸頁面3.png

我不確定算法是如何工作的(或者如果有的話),但是當我填滿它時,我有一些擔憂 排位賽。 一旦我發現我做了,我很高興填寫表格,我相信大多數有負債和使用這個工具的人都是。 通過在著陸頁上顯示表單之前讓此優惠顯得更加獨特,我敢打賭Bills.com的轉化次數顯著增加。

6) Trulia的

Trulia用他們的著陸頁做了和Bills.com非常相似的事情。 它以一個簡單的形式開始,詢問“一個地址”(這聽起來不像“你的地址”那樣令人毛骨悚然,儘管這就是他們的意思)。 在這個簡單的表單下面是一個明亮的橙色按鈕,與表單背後的英雄形象形成鮮明對比,並強調估算將針對您的家庭進行個性化設置。

Trulia的登陸頁面,example.png

當然,地址本身不足以估計房屋的價值。 它只是表示家的鄰里。 這就是為什麼接下來的頁面會有更多關於酒店本身的問題,比如床和浴缸的數量。 在下面,您會看到“告訴我們在哪裡發送報告”這一副本 – 並聲明,通過輸入此信息,您同意與房地產經紀人聯繫。 這是一個公司從一開始就為遊客提供價值的好例子,同時也為遊客設定了預期結果。

Trulia的著陸頁-2.png

7) Teambit

怪誕的 當你想到人力資源軟件時,通常並不是第一個想到的詞,但是Teambit的插圖式的著陸頁就是這樣。 一個簡單的,一個領域的形式伴隨著一個充滿動物角色的高尚辦公室 – 所有人都是 非常 對Teambit感到滿意,萬一你想知道。 一個動物卡通出現在著陸頁的每個信息部分旁邊,讓參觀者向下滾動以了解更多信息。

Teambit的著陸頁是完美的證明,您無需擁有傳統的“有趣”產品或服務來創建有趣的著陸頁。

teambit-1.png

[ 點擊這裡 查看整個著陸頁。]

8) Landbot

創建基於chatbot的登陸頁面的服務Landbot將他們自己的產品放在他們的聊天網站上。 訪客受到一個友好的機器人的歡迎 – 完整的emojis和GIFs – 鼓勵他們以對話形式提供信息,而不是通過傳統形式。

landbot.gif

9 Webprofits

有一點對比…長期登陸頁面呢? 只需一些技巧,即使是最長的著陸頁也可以縮短。 Webprofits的著陸頁向我們展示瞭如何。

在頂部,有一個突出的CTA按鈕可以了解更多信息 – 與背景形成鮮明對比,因此突出顯示效果,以及向下箭頭以鼓勵滾動。 通過不預先安排表單,它們有助於減少摩擦,並為訪問者提供了一個機會,讓他們在呈現轉換選項之前了解更多信息。

他們還可以讓您輕鬆找出實際的Webprofits 確實。 網頁的其餘部分提供了關於您在提供信息時獲得的詳細信息。 此外,它還包含戰略性CTA,可讓您回到頂部填寫表單,例如“Let’s Talk”。

Screen Shot 2017-07-20 at 1.36.52 PM-1.png

10) 入站情感

即使您不會說西班牙語,您仍然可以欣賞此HubSpot合作夥伴網站的轉換功能。 我最喜歡的兩個頁面功能? 當您滾動瀏覽網站時,表單保持固定,顯著的位置。 我也非常喜歡這些提供填充表單和與他人共享頁面的方向線索。

入站情感-1

11) H.BLOOM

有時候,你只需停下來欣賞登陸頁面即可欣賞美景。 使用高分辨率攝影和大量的空白空間,H.BLOOM的著陸頁很高興看到。

除了它的美麗外,頁面還有一些非常棒的轉換元素:一種折疊式的形式,對填寫表單後會發生什麼的清晰簡潔的描述,甚至是明亮的橙色“提交”按鈕。 我們唯一會改變的是? “提交”按鈕上的副本 – 可能更適合於手頭的報價。

hbloom-1

12) Velaro在線聊天

有時最小的細節會造成最大的差異。 例如,它使Velaro Live Chat的著陸頁真棒。

功能圖像上的小型PDF符號有助於設置下載格式的期望值。子標題前面的箭頭有助於進一步引導您注意他們希望訪問者閱讀的重要副本。 像IMPACT一樣,他們也有一個自動複選框,可以在他們的表格上訂閱他們的通訊 – 如果變成選擇加入複選框 是增加用戶的好方法 。 所有這些看似微不足道的小細節都有助於匯集一個可靠,令人欽佩的著陸頁設計。

Velaro的登陸頁面,例如-1.png

13) 製作的Airbnb

為了幫助將訪問者轉化為主持人,Airbnb提供了一些誘人的個性化服務:根據您的位置估算的每周平均收入預測。 您可以在字段中輸入有關您的潛在住宿條件的其他信息,以獲得更加定制的估算。

如果您訪問已經確信的頁面,頁面頂部的明確號召性用語可以輕鬆地在現場進行轉換。

製作的Airbnb-5.png

14) 轉換實驗室

雖然我通常不會在關於登錄頁面的帖子中包含帶有表單的主頁的示例,但該網站很特別。 主頁是整個網站 – 導航鏈接只是帶你到下面的信息。

當您點擊“獲取登陸頁面幫助”時,整個網站移動到為表單騰出空間。 以下是您點擊前的樣子:

轉換實驗室進登陸頁面1.png

而且,當您點擊該CTA時,請查看窗體如何顯示:

轉換實驗室進登陸頁面2.png

我喜歡你如何不必離開頁面來填寫表格,但表單對於偶然的網站訪問者來說不會感覺侵入。

15) 工業實力營銷

就在蝙蝠身邊,這個登陸頁面引來了一個引人注目,頭腦強健的標題:“別讓我變焦”。 它直接反映了我們大多數人在瀏覽我們的手機或平板電腦時所擁有的共同體驗 – 而且它也有點時髦。

但這並不是讓我對這個著陸頁感興趣的唯一因素。 請注意紅色的戰略位置:它正好位於表單的頂部和底部,使您更接近轉換事件。

工業強度的營銷著陸頁,example.png

另外,這種設計可以啟動:它看起來很棒,在手機上也很棒。 請記住,很多訪問者會在他們的智能手機或平板電腦上訪問您的著陸頁,如果您的網站設計對他們不適用,他們可能會放棄並離開您的頁面。

例如,Industrial Strength Marketing的工作人員使字體和表單字段足夠大,以便訪問者不必捏縮縮放來閱讀和與內容交互。

工業強度的營銷移動登陸頁面,1.JPG

工業強度的營銷移動登陸頁面,2.JPG

16) Shopify

與本文中的許多其他著陸頁面一樣,Shopify的試用著陸頁使其簡單易行。 例如,面向用戶的標題只是幾個字,而頁面依賴於簡單的項目符號,而不是段落來傳達試驗的細節和優點。 在開始之前,只需填寫幾個字段。 所有這些使得您更容易了解到這一點:使用他們的工具在線銷售。

shopify  - 博客 -  1.png

編者按:本文最初發佈於2014年3月,並已更新,以確保准確性和全面性。

免費指南優化登陸頁面

發表迴響

Close Menu