著陸頁設計的目的在于如何吸引用戶、留住用戶，提升轉(zhuǎn)化率。許多網(wǎng)站的成功，關鍵體現(xiàn)在它們的著陸頁設計。這些成功的案例無一例外都有一個共同點：它們擁有最棒的UI/UX設計師，擁有最吸引人的頁面設計。
優(yōu)秀的登錄頁所展現(xiàn)的內(nèi)容不僅僅是華麗的頁面視覺設計，更是提升用戶體驗，提升轉(zhuǎn)化率的良好契機。優(yōu)秀的設計師應該知道，一個正確的登陸頁面設計應清楚地傳達產(chǎn)品或服務的獨特賣點（USP），并專注于一個行動號召（CTA），例如讓訪問者進行注冊或購買。
優(yōu)秀的著陸頁設計仿佛自身就具有吸引用戶的魔力，潛移默化的指引用戶如何獲取信息，完成注冊和購買。那我如何設計出屬于自己的優(yōu)秀的著陸頁面呢？ 不妨先思考幾個問題：
1. 網(wǎng)站的目標群體是誰？
是對你產(chǎn)品一無所知的新訪客，還是對產(chǎn)品已經(jīng)有所了解的用戶？這兩個想要看到的到達頁內(nèi)容相對也有所不同。
2. 設定轉(zhuǎn)換目標。
你希望訪問者是留下電子郵件，下載App，購買商品，注冊會員或閱讀更多文章？
3. 準確傳遞服務/產(chǎn)品信息。
不同來源和到達頁的信息一定要清楚對等，千萬不要掛羊頭賣狗肉，否則只會讓你的跳出率飆高。用戶到達著陸頁的目的是為了解決疑問，他們只想找到正確的答案！
4. 是否需要響應式網(wǎng)頁設計（RWD）？
不多說，響應式設計是解決著陸頁在手機、平板、電腦等不同設備顯示友好性最好的辦法。
5. 數(shù)據(jù)分析和A / B測試
沒有絕對100%優(yōu)秀的頁面，別人的成功范例也不見得適合你，多觀察數(shù)據(jù)進行優(yōu)化，了解訪客的停留時間，跳出率，轉(zhuǎn)換率，看了什么，點擊了什么...紅色Button和綠色Button誰表現(xiàn)好？A文案還是B文案好？那就A / B Test讓使用者說話。
綜合以上幾點，小編整理了一些個人認為特別優(yōu)秀的著陸頁設計的案例供大家參考學習。
1. Mailchimp
頁面設計亮點：
白底黑字
特色logo
用戶定位清晰
簡潔的白色背景，加粗黑色字體，吸引用戶目光，突出其郵件營銷的品牌定位。
左上角大猩猩形象的網(wǎng)站logo深入人心，清楚地表明這個注冊頁面是由MailChimp創(chuàng)建的。右上角并排的藍底注冊按鈕和白底登陸按鈕顏色反差，提高潛在用戶注冊率。并且，“免費注冊” 一詞也很可能會立即引起游客的興趣。
簡短的描述語句表明了Mailchimp自身的品牌地位，同時客戶定位為中小型企業(yè)，拉近與個體用戶的距離，從心理角度提升用戶體驗。
頁面設計亮點：
產(chǎn)品展示鮮明
業(yè)務流程清晰
這是Ramotion在Dribbble上展示的一幅著陸頁設計作品。主打藍色調(diào)背景，碩大的銀行卡凸顯了該網(wǎng)站的主要產(chǎn)品和服務。橫向展示的業(yè)務流程清晰順暢，用戶點擊各流程點便可跳轉(zhuǎn)至同頁面該流程的具體介紹。展現(xiàn)了該網(wǎng)站的最主要的特征和賣點，用流暢的服務吸引用戶注冊辦卡。
可點擊的流程節(jié)點和跳轉(zhuǎn)流程介紹豐富了產(chǎn)品的展示和呈現(xiàn)，盡可能的在同一頁面為用戶展示足夠的細節(jié)，同時也降低了著陸頁的跳出率。
3.Upwork
頁面設計亮點：
聰明的CTA按鈕設計
誘導性的文案設計
著陸頁設計最好的做法是將最主要的CTA按鈕放在首位。顯然Upwork將這一點利用的很好。從他們的CTA設計，很容易看出他們的目標是吸引企業(yè)和自由職業(yè)者的注冊。
從用戶體驗的角度來說，綠底的“Post a Job”按鈕目標用戶群體是企業(yè)，小字的“What type of work you need?”則是針對自由職業(yè)者群體。
他們的文案設計也十分具有導向性。他們聰明的避開了死板的“雇主：在這里注冊”這樣的CTA，而是使用效益驅(qū)動的語言（“讓自由職業(yè)者更多地完成工作”），然后以一個行動為導向的CTA告訴潛在用戶在這里“發(fā)布你的工作”。
頁面設計亮點：
CTA+動畫展示
扁平化風格
扁平化的頁面設計干凈、簡潔。著陸頁流暢的動畫展示讓用戶對網(wǎng)站的服務特色一目了然，自然平滑的過渡也是一大亮點。左側(cè)的CTA butto與右側(cè)動畫的創(chuàng)意組合使得整個頁面的用戶體驗自然而生動?；顫姷膭赢嬕才c網(wǎng)站響應式的主題相得益彰。
5.Slack
頁面設計亮點：
協(xié)作功能擬人化設計
突出品牌色
簡單易操作的CTA按鈕
固定頭部的滾動風格允許在頁面滾動的時候顯示所有必要的信息，讓訪問者無需在頁面上下移動即可接收信息。
Slack最重要的協(xié)作功能以擬人化的形象展示給客戶，多樣化的協(xié)作文件展示，強化Slack品牌印象。優(yōu)秀的著陸頁設計另一個做法是呼應品牌色。Slack也很好的實現(xiàn)了這一點。明亮的品牌顏色與每個相應的部分互相呼應。
頁面上的CTA按鈕以簡短直接的“Get Started”作為客戶的行動指引。而僅此一個表單區(qū)域讓訪問者也很可能輕松的完成表單填寫，從而增加注冊率。
6. Matchpool
頁面設計亮點：
扁平化
極簡文案
醒目的CTA顏色設計
同樣是扁平化設計風格的網(wǎng)站，Matchpool整個頁面的顏色搭配顯得十分清新活潑?；ハ嗫拷男【`或是自由活動的小精靈都體現(xiàn)出社區(qū)的概念。簡短的文案也告訴用戶可以自由創(chuàng)建屬于自己的社區(qū)。
屏幕正中和右上角的CTA按鈕顏色搭配形成對比，在深色調(diào)的頁面背景對比下非常醒目，抓人眼球?！懊赓M”加入對用戶也在吸引著用戶去注冊，加入社區(qū)。
7.Airbnb
頁面設計亮點：
簡單的圖文背景
個性化展示
口碑及信任感
迎接客人的背景圖與網(wǎng)站主題不謀而合，簡單大方。
為了幫助將訪問者轉(zhuǎn)換成房東，Airbnb提供了一些誘人的個性化展示功能：根據(jù)您的位置估算的每周平均收入預測。 您可以在字段中輸入有關您的潛在住宿條件的其他信息，以獲得更加個性化的估算。如果您訪問的頁面已經(jīng)確信，頁面頂部的明確號召性用語可以輕松地進行現(xiàn)場轉(zhuǎn)換。
如何成為房東獲取收入？如何得到安全保障？一無所知的新用戶必定對這些問題感興趣。循序漸進的頁面指引為用戶提供了明確的網(wǎng)頁瀏覽方向和良好的用戶體驗。這么貼心的服務也不難留住用戶了。
8.Flickr
頁面設計亮點：
圖片輪播
大而顯眼的CTA按鈕
眾所周知，F(xiàn)lickr是一個照片分享或存儲的平臺，無論是業(yè)余的或是職業(yè)的攝影師都可以加入并在其中得到靈感。它的著陸頁設計采取了圖片輪播的方式展示用戶的攝影作品。隨圖片滾動的作品署名和作者姓名讓人對作者及作品產(chǎn)生無限的好奇心，忍不住想了解作者更多的作品。這也是著陸頁的魅力之一。
大而顯眼的CTA按鈕設計吸引著用戶去加入Flickr社區(qū)，從數(shù)百億的相片中獲取自己的靈感。簡短的文案讓游客在無形中便對網(wǎng)站產(chǎn)生了巨大的吸引力。
參考這些案例后，如何為自己的網(wǎng)站做著陸頁設計呢？
利用原型設計工具設計著陸頁是最方便有效的途徑之一。在Mockplus中選擇網(wǎng)頁項目，利用現(xiàn)成的200個組件和3000+圖標，便能簡單快速的實現(xiàn)著陸頁原型設計。
大多數(shù)網(wǎng)站著陸頁的設計元素并沒有很多，基本會用到圖片、文本、按鈕、輸入框等常用組件。例如這款由Mockplus打造的音樂類項目So Stereo。直接拖拽出需要用到的組件，快速交互，快速設計，快速演示。
2.使用模板
除了能借助原型設計工具的便利在項目開始前設計好理想中的著陸頁，也可以直接套用模板。例如Unbounce 和Leadpages，都提供了非常不錯的著陸頁設計模板。
Unbounce- 最知名的著陸頁線上制作工具
Unbounce有許多很棒的登陸頁面模板，大部分的模板都著重在引導使用者轉(zhuǎn)換，Unbounce還有一個一流的所見即所得頁面建置工具，幫助使用者直接建立自己的登陸頁面網(wǎng)頁。
Leadpages - 功能多樣性的著陸頁設計工具
LeadPages提供許多功能，如制作電腦，手機版本的網(wǎng)頁排版版本，也可以使用A / B測試與優(yōu)化SEO，它最大的優(yōu)勢則是與其他的工具整合。比如說LeadDigits可以幫助使用者用簡訊輸入信箱 即可訂閱，只要點選LeadLinks產(chǎn)出的連結，就可以讓使用者填寫名單，LeadBox可以制作出填寫表單。
總結
以上為大家總結的著陸頁設計案例無論在排版還是用戶體驗設計方面都十分出色，希望能在細節(jié)和整體布局方面給大家提供一些思路。另外，個人在設計著陸頁的時候，有許多方方面面的小細節(jié)，比如CTA的布局，顏色搭配，公司LOGO的位置，都可能提升頁面效果，而標題文案、輔助說明的改進，則可能會大大提高你的轉(zhuǎn)化率。
作者：huaer
來源：簡書
簡書著作權歸作者所有，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權并注明出處。
