著陸頁設(shè)計的目的在于如何吸引用戶、留住用戶，提升轉(zhuǎn)化率。許多網(wǎng)站的成功，關(guān)鍵體現(xiàn)在它們的著陸頁設(shè)計。這些成功的案例無一例外都有一個共同點：它們擁有最棒的UI/UX設(shè)計師，擁有最吸引人的頁面設(shè)計。

優(yōu)秀的登錄頁所展現(xiàn)的內(nèi)容不僅僅是華麗的頁面視覺設(shè)計，更是提升用戶體驗，提升轉(zhuǎn)化率的良好契機。優(yōu)秀的設(shè)計師應(yīng)該知道，一個正確的登陸頁面設(shè)計應(yīng)清楚地傳達(dá)產(chǎn)品或服務(wù)的獨特賣點（USP），并專注于一個行動號召（CTA），例如讓訪問者進(jìn)行注冊或購買。

優(yōu)秀的著陸頁設(shè)計仿佛自身就具有吸引用戶的魔力，潛移默化的指引用戶如何獲取信息，完成注冊和購買。那我如何設(shè)計出屬于自己的優(yōu)秀的著陸頁面呢？ 不妨先思考幾個問題：

1. 網(wǎng)站的目標(biāo)群體是誰？

是對你產(chǎn)品一無所知的新訪客，還是對產(chǎn)品已經(jīng)有所了解的用戶？這兩個想要看到的到達(dá)頁內(nèi)容相對也有所不同。

2. 設(shè)定轉(zhuǎn)換目標(biāo)。

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

3. 準(zhǔn)確傳遞服務(wù)/產(chǎn)品信息。

不同來源和到達(dá)頁的信息一定要清楚對等，千萬不要掛羊頭賣狗肉，否則只會讓你的跳出率飆高。用戶到達(dá)著陸頁的目的是為了解決疑問，他們只想找到正確的答案！

4. 是否需要響應(yīng)式網(wǎng)頁設(shè)計（RWD）？

不多說，響應(yīng)式設(shè)計是解決著陸頁在手機、平板、電腦等不同設(shè)備顯示友好性最好的辦法。

5. 數(shù)據(jù)分析和A / B測試

沒有絕對100%優(yōu)秀的頁面，別人的成功范例也不見得適合你，多觀察數(shù)據(jù)進(jìn)行優(yōu)化，了解訪客的停留時間，跳出率，轉(zhuǎn)換率，看了什么，點擊了什么...紅色Button和綠色Button誰表現(xiàn)好？A文案還是B文案好？那就A / B Test讓使用者說話。

綜合以上幾點，小編整理了一些個人認(rèn)為特別優(yōu)秀的著陸頁設(shè)計的案例供大家參考學(xué)習(xí)。

1. Mailchimp

頁面設(shè)計亮點：

• 白底黑字

• 特色logo

• 用戶定位清晰

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

左上角大猩猩形象的網(wǎng)站logo深入人心，清楚地表明這個注冊頁面是由MailChimp創(chuàng)建的。右上角并排的藍(lán)底注冊按鈕和白底登陸按鈕顏色反差，提高潛在用戶注冊率。并且，“免費注冊” 一詞也很可能會立即引起游客的興趣。

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

2.Landing Page - Website

頁面設(shè)計亮點：

• 產(chǎn)品展示鮮明

• 業(yè)務(wù)流程清晰

這是Ramotion在Dribbble上展示的一幅著陸頁設(shè)計作品。主打藍(lán)色調(diào)背景，碩大的銀行卡凸顯了該網(wǎng)站的主要產(chǎn)品和服務(wù)。橫向展示的業(yè)務(wù)流程清晰順暢，用戶點擊各流程點便可跳轉(zhuǎn)至同頁面該流程的具體介紹。展現(xiàn)了該網(wǎng)站的最主要的特征和賣點，用流暢的服務(wù)吸引用戶注冊辦卡。

可點擊的流程節(jié)點和跳轉(zhuǎn)流程介紹豐富了產(chǎn)品的展示和呈現(xiàn)，盡可能的在同一頁面為用戶展示足夠的細(xì)節(jié)，同時也降低了著陸頁的跳出率。

3. Upwork

頁面設(shè)計亮點：

• 聰明的CTA按鈕設(shè)計

• 誘導(dǎo)性的文案設(shè)計

著陸頁設(shè)計最好的做法是將最主要的CTA按鈕放在首位。顯然Upwork將這一點利用的很好。從他們的CTA設(shè)計，很容易看出他們的目標(biāo)是吸引企業(yè)和自由職業(yè)者的注冊。

從用戶體驗的角度來說，綠底的“Post a Job”按鈕目標(biāo)用戶群體是企業(yè)，小字的“What type of work you need?”則是針對自由職業(yè)者群體。

他們的文案設(shè)計也十分具有導(dǎo)向性。他們聰明的避開了死板的“雇主：在這里注冊”這樣的CTA，而是使用效益驅(qū)動的語言（“讓自由職業(yè)者更多地完成工作”），然后以一個行動為導(dǎo)向的CTA告訴潛在用戶在這里“發(fā)布你的工作”。

4. Captico - Animation

頁面設(shè)計亮點：

• CTA+動畫展示

• 扁平化風(fēng)格

扁平化的頁面設(shè)計干凈、簡潔。著陸頁流暢的動畫展示讓用戶對網(wǎng)站的服務(wù)特色一目了然，自然平滑的過渡也是一大亮點。左側(cè)的CTA butto與右側(cè)動畫的創(chuàng)意組合使得整個頁面的用戶體驗自然而生動�；顫姷膭赢嬕才c網(wǎng)站響應(yīng)式的主題相得益彰。

5. Slack

頁面設(shè)計亮點：

• 協(xié)作功能擬人化設(shè)計

• 突出品牌色

• 簡單易操作的CTA按鈕

固定頭部的滾動風(fēng)格允許在頁面滾動的時候顯示所有必要的信息，讓訪問者無需在頁面上下移動即可接收信息。

Slack最重要的協(xié)作功能以擬人化的形象展示給客戶，多樣化的協(xié)作文件展示，強化Slack品牌印象。優(yōu)秀的著陸頁設(shè)計另一個做法是呼應(yīng)品牌色。Slack也很好的實現(xiàn)了這一點。明亮的品牌顏色與每個相應(yīng)的部分互相呼應(yīng)。

頁面上的CTA按鈕以簡短直接的“Get Started”作為客戶的行動指引。而僅此一個表單區(qū)域讓訪問者也很可能輕松的完成表單填寫，從而增加注冊率。

標(biāo)簽： 著陸頁設(shè)計 著陸頁優(yōu)化 網(wǎng)站優(yōu)化 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。