不得不看的8大經典着陸頁設計案例

着陸頁設計的目的在於如何吸引用戶、留住用戶，提高轉化率。許多網站的成功，關鍵體如今它們的着陸頁設計。這些成功的案例無一例外都有一個共同點：它們擁有最棒的UI/UX設計師，擁有最吸引人的頁面設計。

優秀的登陸頁所展示的內容不只僅是華麗的頁面視覺設計，更是提高用戶體驗，提高轉化率的良好契機。優秀的設計師應該知道，一個正確的登錄頁面設計應清楚地傳達產品或服務的獨特賣點（USP），並專一於一個行動號召（CTA），例如讓訪問者進行註冊或購買。

優秀的着陸頁設計彷彿自身就具備吸引用戶的魔力，潛移默化的指引用戶如何獲取信息，完成註冊和購買。那我如何設計出屬於本身的優秀的着陸頁面呢？ 不妨先思考幾個問題：

1. 網站的目標羣體是誰？

是對你產品一無所知的新訪客，仍是對產品已經有所瞭解的用戶？這兩個想要看到的到達頁內容相對也有所不一樣。

2. 設定轉換目標。

你但願訪問者是留下電子郵件，下載App，購買商品，註冊會員或閱讀更多文章？

3. 準確傳遞服務/產品信息。

不一樣來源和到達頁的信息必定要清楚對等，千萬不要掛羊頭賣狗肉，不然只會讓你的跳出率飆高。用戶到達着陸頁的目的是爲了解決疑問，他們只想找到正確的答案！

4. 是否須要響應式網頁設計（RWD）？

很少說，響應式設計是解決着陸頁在手機、平板、電腦等不一樣設備顯示友好性最好的辦法。

5. 數據分析和A / B測試

沒有絕對100%優秀的頁面，別人的成功範例也不見得適合你，多觀察數據進行優化，瞭解訪客的停留時間，跳出率，轉換率，看了什麼，點擊了什麼...紅色Button和綠色Button誰表現好？A文案仍是B文案好？那就A / B Test讓使用者說話。

綜合以上幾點，小編整理了一些我的認爲特別優秀的着陸頁設計的案例供你們參考學習。

1. Mailchimp

頁面設計亮點：

白底黑字

特點logo

用戶定位清晰

簡潔的白色背景，加粗黑色字體，吸引用戶目光，突出其郵件營銷的品牌定位。

左上角大猩猩形象的網站logo深刻人心，清楚地代表這個註冊頁面是由MailChimp建立的。右上角並排的藍底註冊按鈕和白底登錄按鈕顏色反差，提升潛在用戶註冊率。而且，「免費註冊」 一詞也極可能會當即引發遊客的興趣。

簡短的描述語句代表了Mailchimp自身的品牌地位，同時客戶定位爲中小型企業，拉近與個體用戶的距離，從心理角度提高用戶體驗。

2.Landing Page - Website

頁面設計亮點：

產品展現鮮明

業務流程清晰

這是Ramotion在Dribbble上展現的一幅着陸頁設計做品。主打藍色調背景，碩大的銀行卡凸顯了該網站的主要產品和服務。橫向展現的業務流程清晰順暢，用戶點擊各流程點即可跳轉至同頁面該流程的具體介紹。展示了該網站的最主要的特徵和賣點，用流暢的服務吸引用戶註冊辦卡。

可點擊的流程節點和跳轉流程介紹豐富了產品的展現和呈現，儘量的在同一頁面爲用戶展現足夠的細節，同時也下降了着陸頁的跳出率。

3.Upwork

頁面設計亮點：

聰明的CTA按鈕設計

誘導性的文案設計

着陸頁設計最好的作法是將最主要的CTA按鈕放在首位。顯然Upwork將這一點利用的很好。從他們的CTA設計，很容易看出他們的目標是吸引企業和自由職業者的註冊。

從用戶體驗的角度來講，綠底的「Post a Job」按鈕目標用戶羣體是企業，小字的「What type of work you need?」則是針對自由職業者羣體。

他們的文案設計也十分具備導向性。他們聰明的避開了死板的「僱主：在這裏註冊」這樣的CTA，而是使用效益驅動的語言（「讓自由職業者更多地完成工做」），而後以一個行動爲導向的CTA告訴潛在用戶在這裏「發佈你的工做」。

4. Captico - Animation

頁面設計亮點：

CTA+動畫展現

扁平化風格

扁平化的頁面設計乾淨、簡潔。着陸頁流暢的動畫展現讓用戶對網站的服務特點一目瞭然，天然平滑的過渡也是一大亮點。左側的CTA butto與右側動畫的創意組合使得整個頁面的用戶體驗天然而生動。活潑的動畫也與網站響應式的主題相得益彰。

5.Slack

頁面設計亮點：

協做功能擬人化設計

突出品牌色

簡單易操做的CTA按鈕

固定頭部的滾動風格容許在頁面滾動的時候顯示全部必要的信息，讓訪問者無需在頁面上下移動便可接收信息。

Slack最重要的協做功能以擬人化的形象展現給客戶，多樣化的協做文件展現，強化Slack品牌印象。優秀的着陸頁設計另外一個作法是呼應品牌色。Slack也很好的實現了這一點。明亮的品牌顏色與每一個相應的部分互相呼應。

頁面上的CTA按鈕以簡短直接的「Get Started」做爲客戶的行動指引。而僅此一個表單區域讓訪問者也極可能輕鬆的完成表單填寫，從而增長註冊率。

6. Matchpool

頁面設計亮點：

扁平化

極簡文案

醒目的CTA顏色設計

一樣是扁平化設計風格的網站，Matchpool整個頁面的顏色搭配顯得十分清新活潑。互相靠近的小精靈或是自由活動的小精靈都體現出社區的概念。簡短的文案也告訴用戶能夠自由建立屬於本身的社區。

屏幕正中和右上角的CTA按鈕顏色搭配造成對比，在深色調的頁面背景對比下很是醒目，抓人眼球。「免費」加入對用戶也在吸引着用戶去註冊，加入社區。

7.Airbnb

頁面設計亮點：

簡單的圖文背景

個性化展現

口碑及信任感

迎接客人的背景圖與網站主題不謀而合，簡單大方。

爲了幫助將訪問者轉換成房東，Airbnb提供了一些誘人的個性化展現功能：根據您的位置估算的每週平均收入預測。 您能夠在字段中輸入有關您的潛在住宿條件的其餘信息，以得到更加個性化的估算。若是您訪問的頁面已經確信，頁面頂部的明確號召性用語能夠輕鬆地進行現場轉換。

如何成爲房東獲取收入？如何獲得安全保障？一無所知的新用戶一定對這些問題感興趣。按部就班的頁面指引爲用戶提供了明確的網頁瀏覽方向和良好的用戶體驗。這麼貼心的服務也不難留住用戶了。

8.Flickr

頁面設計亮點：

圖片輪播

大而顯眼的CTA按鈕

衆所周知，Flickr是一個照片分享或存儲的平臺，不管是業餘的或是職業的攝影師均可以加入並在其中獲得靈感。它的着陸頁設計採起了圖片輪播的方式展現用戶的攝影做品。隨圖片滾動的做品署名和做者姓名讓人對做者及做品產生無限的好奇心，忍不住想了解做者更多的做品。這也是着陸頁的魅力之一。

大而顯眼的CTA按鈕設計吸引着用戶去加入Flickr社區，從數百億的相片中獲取本身的靈感。簡短的文案讓遊客在無形中便對網站產生了巨大的吸引力。

參考這些案例後，如何爲本身的網站作着陸頁設計呢？

1.原型設計 - Mockplus

利用原型設計工具設計着陸頁是最方便有效的途徑之一。在Mockplus中選擇網頁項目，利用現成的200個組件和3000+圖標，便能簡單快速的實現着陸頁原型設計。

大多數網站着陸頁的設計元素並無不少，基本會用到圖片、文本、按鈕、輸入框等經常使用組件。例如這款由Mockplus打造的音樂類項目So Stereo。直接拖拽出須要用到的組件，快速交互，快速設計，快速演示。

2.使用模板

除了能借助原型設計工具的便利在項目開始前設計好理想中的着陸頁，也能夠直接套用模板。例如Unbounce 和Leadpages，都提供了很是不錯的着陸頁設計模板。

Unbounce- 最知名的着陸頁線上製做工具

Unbounce有許多很棒的登錄頁面模板，大部分的模板都着重在引導使用者轉換，Unbounce還有一個一流的所見即所得頁面建置工具，幫助使用者直接創建本身的登錄頁面網頁。

Leadpages - 功能多樣性的着陸頁設計工具

LeadPages提供許多功能，如製做電腦，手機版本的網頁排版版本，也可使用A / B測試與優化SEO，它最大的優點則是與其餘的工具整合。好比說LeadDigits能夠幫助使用者用簡訊輸入信箱 便可訂閱，只要點選LeadLinks產出的連結，就可讓使用者填寫名單，LeadBox能夠製做出填寫表單。

總結

以上爲你們總結的着陸頁設計案例不管在排版仍是用戶體驗設計方面都十分出色，但願能在細節和總體佈局方面給你們提供一些思路。另外，我的在設計着陸頁的時候，有許多方方面面的小細節，好比CTA的佈局，顏色搭配，公司LOGO的位置，均可能提高頁面效果，而標題文案、輔助說明的改進，則可能會大大提升你的轉化率。