著陸頁設計的目的在於如何吸引用戶、留住用戶，提升轉化率。許多網站的成功，關鍵體現在它們的著陸頁設計。這些成功的案例無一例外都有一個共同點：它們擁有最棒的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的位置，都可能提升頁面效果，而標題文案、輔助說明的改進，則可能會大大提高你的轉化率。

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