著陸(lu)頁設(she)計(ji)的(de)目的(de)在于如何吸(xi)引(yin)用戶、留住用戶，提升轉化率。許多網站的(de)成(cheng)功(gong)，關鍵體(ti)現在它們的(de)著陸(lu)頁設(she)計(ji)。這些成(cheng)功(gong)的(de)案例無一(yi)例外都(dou)有(you)一(yi)個共(gong)同點：它們擁有(you)最棒的(de)UI/UX設(she)計(ji)師，擁有(you)最吸(xi)引(yin)人的(de)頁面設(she)計(ji)。
優(you)秀的(de)(de)登錄頁所展現的(de)(de)內容不僅僅是華麗的(de)(de)頁面視覺設計，更是提(ti)升用戶體驗，提(ti)升轉化率的(de)(de)良好契(qi)機(ji)。優(you)秀的(de)(de)設計師應該知道，一個正確的(de)(de)登陸頁面設計應清楚地傳達產(chan)品或服務(wu)的(de)(de)獨(du)特賣點（USP），并專(zhuan)注于(yu)一個行動號(hao)召（CTA），例如(ru)讓訪問者進行注冊或購買。
優(you)秀的(de)著(zhu)陸頁設計(ji)仿佛(fo)自(zi)身就具有吸(xi)引(yin)(yin)用戶(hu)的(de)魔(mo)力，潛移默化的(de)指引(yin)(yin)用戶(hu)如何獲取信(xin)息，完成注冊(ce)和購買。那我如何設計(ji)出屬于(yu)自(zi)己的(de)優(you)秀的(de)著(zhu)陸頁面呢？ 不妨先思考幾(ji)個問題：
1. 網站的(de)目標(biao)群體是誰？
是對(dui)你產(chan)品(pin)一(yi)無(wu)所(suo)知的(de)新(xin)訪客，還是對(dui)產(chan)品(pin)已經有所(suo)了解(jie)的(de)用戶？這兩個(ge)想要看到(dao)的(de)到(dao)達(da)頁內容相(xiang)對(dui)也有所(suo)不同。
2. 設定轉(zhuan)換目(mu)標。
你希望訪問者是留下電子郵件，下載App，購買商品(pin)，注冊(ce)會(hui)員(yuan)或閱讀更多文(wen)章？
3. 準確(que)傳(chuan)遞服務/產品(pin)信息。
不同來(lai)源和到達頁的信息(xi)一(yi)定要(yao)清(qing)楚對等，千(qian)萬(wan)不要(yao)掛羊頭賣狗肉(rou)，否則只會讓你的跳出率飆高。用戶到達著陸頁的目(mu)的是(shi)為(wei)了解決疑問，他們只想找到正確(que)的答案！
4. 是(shi)否需要響應(ying)式網頁設(she)計（RWD）？
不多說(shuo)，響應式設(she)(she)計是解決著陸頁在(zai)手機(ji)、平板(ban)、電腦等不同設(she)(she)備顯(xian)示友好(hao)性較好(hao)的(de)辦法。
5. 數據(ju)分析(xi)和A / B測試(shi)
沒有(you)絕對(dui)100%優秀(xiu)的(de)頁面，別(bie)人的(de)成功(gong)范例也(ye)不見得適合(he)你，多(duo)觀(guan)察數據進行優化，了(le)解訪客的(de)停(ting)留時間，跳出(chu)率，轉換率，看了(le)什么，點(dian)擊了(le)什么...紅(hong)色Button和(he)綠色Button誰表現(xian)好？A文案還是(shi)B文案好？那就A / B Test讓使(shi)用者(zhe)說話。
綜合(he)以上幾點，小(xiao)編整(zheng)理了一些個人認為特別優秀的著陸(lu)頁設計的案(an)例供(gong)大家參(can)考學習。
1. Mailchimp
頁(ye)面設計(ji)亮點：
白底黑字
特(te)色logo
用(yong)戶定位清晰
簡潔(jie)的(de)白色背景，加粗(cu)黑(hei)色字(zi)體，吸引(yin)用戶目光，突出其(qi)郵(you)件營銷(xiao)的(de)品牌定位。
左上(shang)角大(da)猩(xing)猩(xing)形(xing)象的(de)網站(zhan)logo深入人(ren)心(xin)，清楚(chu)地表(biao)明這個注(zhu)冊(ce)(ce)頁面是由(you)MailChimp創建的(de)。右上(shang)角并排的(de)藍底注(zhu)冊(ce)(ce)按(an)鈕和白底登陸按(an)鈕顏色(se)反差，提高潛在用戶注(zhu)冊(ce)(ce)率(lv)。并且，“免費注(zhu)冊(ce)(ce)” 一(yi)詞也很可能會(hui)立(li)即引(yin)起游客的(de)興趣。
簡短的描述(shu)語(yu)句表(biao)明了Mailchimp自(zi)身的品牌地位(wei)，同時客戶定位(wei)為中小型企業，拉(la)近與個體用(yong)戶的距離，從心理(li)角度提升用(yong)戶體驗(yan)。
2.Landing Page - Website
頁面設計亮點：
產品展示鮮明
業務流(liu)程清(qing)晰
這是Ramotion在Dribbble上展示的(de)(de)(de)一幅著陸(lu)頁(ye)設計(ji)作品(pin)。主打藍色(se)調(diao)背景，碩大的(de)(de)(de)銀行卡(ka)凸(tu)顯(xian)了(le)該網站的(de)(de)(de)主要產品(pin)和(he)服務(wu)(wu)。橫向展示的(de)(de)(de)業務(wu)(wu)流(liu)程(cheng)清晰順暢，用戶點(dian)擊(ji)各流(liu)程(cheng)點(dian)便可跳轉至(zhi)同(tong)頁(ye)面(mian)該流(liu)程(cheng)的(de)(de)(de)具體介紹。展現了(le)該網站的(de)(de)(de)最主要的(de)(de)(de)特征和(he)賣點(dian)，用流(liu)暢的(de)(de)(de)服務(wu)(wu)吸(xi)引用戶注冊辦卡(ka)。
可點(dian)擊的(de)流(liu)程(cheng)節點(dian)和跳轉流(liu)程(cheng)介紹豐富了(le)產品的(de)展示和呈現(xian)，盡可能的(de)在同(tong)一頁面為用戶展示足夠的(de)細(xi)節，同(tong)時也(ye)降低了(le)著陸頁的(de)跳出(chu)率。
3. Upwork
頁(ye)面設計亮點：
聰明(ming)的(de)CTA按鈕設計
誘導性(xing)的文案設計
著(zhu)陸頁設(she)計較好的(de)(de)做法(fa)是(shi)將(jiang)最主要的(de)(de)CTA按鈕放(fang)在首位。顯然(ran)Upwork將(jiang)這一點(dian)利用的(de)(de)很(hen)好。從他們的(de)(de)CTA設(she)計，很(hen)容(rong)易(yi)看出(chu)他們的(de)(de)目標是(shi)吸引企業(ye)和(he)自由職業(ye)者的(de)(de)注冊。
從用戶體(ti)驗的(de)角(jiao)度來(lai)說，綠(lv)底的(de)“Post a Job”按鈕目(mu)標用戶群體(ti)是企業，小字的(de)“What type of work you need?”則(ze)是針對自(zi)由職業者群體(ti)。
他(ta)(ta)們的(de)文案設計也十分具有導向(xiang)性。他(ta)(ta)們聰明的(de)避開了死板的(de)“雇主(zhu)：在(zai)這(zhe)里注(zhu)冊”這(zhe)樣的(de)CTA，而是使用效(xiao)益(yi)驅動的(de)語言(yan)（“讓(rang)自由職(zhi)業者(zhe)更多地完成工作(zuo)”），然后以(yi)一個行動為導向(xiang)的(de)CTA告訴潛在(zai)用戶在(zai)這(zhe)里“發布你(ni)的(de)工作(zuo)”。
4. Captico - Animation
頁(ye)面設計亮點(dian)：
CTA+動畫(hua)展示
扁(bian)平化風格(ge)
扁(bian)平(ping)(ping)化(hua)的(de)頁(ye)(ye)(ye)面設計干凈、簡潔。著陸頁(ye)(ye)(ye)流暢的(de)動(dong)(dong)畫展示讓(rang)用戶對網站的(de)服務特色一目了(le)然(ran)(ran)，自然(ran)(ran)平(ping)(ping)滑(hua)的(de)過渡也是(shi)一大亮點。左側(ce)的(de)CTA butto與(yu)右(you)側(ce)動(dong)(dong)畫的(de)創意組合使(shi)得(de)(de)整個頁(ye)(ye)(ye)面的(de)用戶體驗(yan)自然(ran)(ran)而(er)生動(dong)(dong)。活(huo)潑的(de)動(dong)(dong)畫也與(yu)網站響(xiang)應(ying)式的(de)主題(ti)相(xiang)得(de)(de)益彰。
5. Slack
頁面設(she)計亮點：
協作功能擬人化設計(ji)
突出(chu)品(pin)牌色
簡單(dan)易操作的CTA按鈕
固定頭部的滾動風格允許在頁面滾動的時候顯示所有必要的信息，讓訪問者無需在頁面上下移動即可接收信息。
頁(ye)面上的(de)CTA按鈕以簡短直接的(de)“Get Started”作(zuo)(zuo)為客戶(hu)的(de)行動指引。而僅此一(yi)個表(biao)(biao)單區域讓(rang)訪問者(zhe)也很可能(neng)(neng)輕松的(de)完成表(biao)(biao)單填寫(xie)，從而增加注冊率(lv)。Slack最重要的(de)協作(zuo)(zuo)功能(neng)(neng)以擬人化(hua)(hua)的(de)形(xing)象展示(shi)給客戶(hu)，多樣(yang)化(hua)(hua)的(de)協作(zuo)(zuo)文(wen)件展示(shi)，強(qiang)化(hua)(hua)Slack品牌印象。優秀的(de)著陸頁(ye)設計另一(yi)個做法(fa)是呼應品牌色。Slack也很好的(de)實現了這(zhe)一(yi)點。明亮的(de)品牌顏色與(yu)每個相應的(de)部(bu)分互相呼應。
