著陸頁(yè)設(shè)計(jì)的目的在于如何吸引用戶竹捉、留住用戶，提升轉(zhuǎn)化率律杠。許多網(wǎng)站的成功竞惋，關(guān)鍵體現(xiàn)在它們的著陸頁(yè)設(shè)計(jì)柜去。這些成功的案例無(wú)一例外都有一個(gè)共同點(diǎn)：它們擁有最棒的UI/UX設(shè)計(jì)師，擁有最吸引人的頁(yè)面設(shè)計(jì)拆宛。
優(yōu)秀的登錄頁(yè)所展現(xiàn)的內(nèi)容不僅僅是華麗的頁(yè)面視覺(jué)設(shè)計(jì)嗓奢，更是提升用戶體驗(yàn)，提升轉(zhuǎn)化率的良好契機(jī)浑厚。優(yōu)秀的設(shè)計(jì)師應(yīng)該知道股耽，一個(gè)正確的登陸頁(yè)面設(shè)計(jì)應(yīng)清楚地傳達(dá)產(chǎn)品或服務(wù)的獨(dú)特賣點(diǎn)（USP），并專注于一個(gè)行動(dòng)號(hào)召（CTA）钳幅，例如讓訪問(wèn)者進(jìn)行注冊(cè)或購(gòu)買物蝙。
優(yōu)秀的著陸頁(yè)設(shè)計(jì)仿佛自身就具有吸引用戶的魔力，潛移默化的指引用戶如何獲取信息敢艰，完成注冊(cè)和購(gòu)買诬乞。那我如何設(shè)計(jì)出屬于自己的優(yōu)秀的著陸頁(yè)面呢？?不妨先思考幾個(gè)問(wèn)題：
1.?網(wǎng)站的目標(biāo)群體是誰(shuí)钠导？
是對(duì)你產(chǎn)品一無(wú)所知的新訪客震嫉，還是對(duì)產(chǎn)品已經(jīng)有所了解的用戶？這兩個(gè)想要看到的到達(dá)頁(yè)內(nèi)容相對(duì)也有所不同牡属。
2.?設(shè)定轉(zhuǎn)換目標(biāo)票堵。
你希望訪問(wèn)者是留下電子郵件，下載App逮栅，購(gòu)買商品悴势，注冊(cè)會(huì)員或閱讀更多文章？
3.?準(zhǔn)確傳遞服務(wù)/產(chǎn)品信息证芭。
不同來(lái)源和到達(dá)頁(yè)的信息一定要清楚對(duì)等瞳浦，千萬(wàn)不要掛羊頭賣狗肉，否則只會(huì)讓你的跳出率飆高废士。用戶到達(dá)著陸頁(yè)的目的是為了解決疑問(wèn)叫潦，他們只想找到正確的答案！
4.?是否需要響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)（RWD）官硝？
不多說(shuō)矗蕊，響應(yīng)式設(shè)計(jì)是解決著陸頁(yè)在手機(jī)短蜕、平板、電腦等不同設(shè)備顯示友好性最好的辦法傻咖。
5.?數(shù)據(jù)分析和A / B測(cè)試
沒(méi)有絕對(duì)100%優(yōu)秀的頁(yè)面朋魔，別人的成功范例也不見(jiàn)得適合你，多觀察數(shù)據(jù)進(jìn)行優(yōu)化卿操，了解訪客的停留時(shí)間警检，跳出率，轉(zhuǎn)換率害淤，看了什么扇雕，點(diǎn)擊了什么...紅色Button和綠色Button誰(shuí)表現(xiàn)好？A文案還是B文案好窥摄？那就A / B Test讓使用者說(shuō)話镶奉。
綜合以上幾點(diǎn)，小編整理了一些個(gè)人認(rèn)為特別優(yōu)秀的著陸頁(yè)設(shè)計(jì)的案例供大家參考學(xué)習(xí)崭放。
1.?Mailchimp
頁(yè)面設(shè)計(jì)亮點(diǎn)：
白底黑字
特色logo
用戶定位清晰
簡(jiǎn)潔的白色背景哨苛，加粗黑色字體，吸引用戶目光币砂，突出其郵件營(yíng)銷的品牌定位建峭。
左上角大猩猩形象的網(wǎng)站logo深入人心，清楚地表明這個(gè)注冊(cè)頁(yè)面是由MailChimp創(chuàng)建的道伟。右上角并排的藍(lán)底注冊(cè)按鈕和白底登陸按鈕顏色反差迹缀，提高潛在用戶注冊(cè)率使碾。并且蜜徽，“免費(fèi)注冊(cè)” 一詞也很可能會(huì)立即引起游客的興趣。
簡(jiǎn)短的描述語(yǔ)句表明了Mailchimp自身的品牌地位票摇，同時(shí)客戶定位為中小型企業(yè)拘鞋，拉近與個(gè)體用戶的距離，從心理角度提升用戶體驗(yàn)矢门。
頁(yè)面設(shè)計(jì)亮點(diǎn)：
產(chǎn)品展示鮮明
業(yè)務(wù)流程清晰
這是Ramotion在Dribbble上展示的一幅著陸頁(yè)設(shè)計(jì)作品盆色。主打藍(lán)色調(diào)背景，碩大的銀行卡凸顯了該網(wǎng)站的主要產(chǎn)品和服務(wù)祟剔。橫向展示的業(yè)務(wù)流程清晰順暢隔躲，用戶點(diǎn)擊各流程點(diǎn)便可跳轉(zhuǎn)至同頁(yè)面該流程的具體介紹。展現(xiàn)了該網(wǎng)站的最主要的特征和賣點(diǎn)物延，用流暢的服務(wù)吸引用戶注冊(cè)辦卡宣旱。
可點(diǎn)擊的流程節(jié)點(diǎn)和跳轉(zhuǎn)流程介紹豐富了產(chǎn)品的展示和呈現(xiàn)，盡可能的在同一頁(yè)面為用戶展示足夠的細(xì)節(jié)叛薯，同時(shí)也降低了著陸頁(yè)的跳出率浑吟。
3.Upwork
頁(yè)面設(shè)計(jì)亮點(diǎn)：
聰明的CTA按鈕設(shè)計(jì)
誘導(dǎo)性的文案設(shè)計(jì)
著陸頁(yè)設(shè)計(jì)最好的做法是將最主要的CTA按鈕放在首位笙纤。顯然Upwork將這一點(diǎn)利用的很好。從他們的CTA設(shè)計(jì)组力，很容易看出他們的目標(biāo)是吸引企業(yè)和自由職業(yè)者的注冊(cè)省容。
從用戶體驗(yàn)的角度來(lái)說(shuō)，綠底的“Post a Job”按鈕目標(biāo)用戶群體是企業(yè)燎字，小字的“What type of work you need?”則是針對(duì)自由職業(yè)者群體腥椒。
他們的文案設(shè)計(jì)也十分具有導(dǎo)向性。他們聰明的避開(kāi)了死板的“雇主：在這里注冊(cè)”這樣的CTA候衍，而是使用效益驅(qū)動(dòng)的語(yǔ)言（“讓自由職業(yè)者更多地完成工作”）寞酿，然后以一個(gè)行動(dòng)為導(dǎo)向的CTA告訴潛在用戶在這里“發(fā)布你的工作”。
頁(yè)面設(shè)計(jì)亮點(diǎn)：
CTA+動(dòng)畫展示
扁平化風(fēng)格
扁平化的頁(yè)面設(shè)計(jì)干凈脱柱、簡(jiǎn)潔伐弹。著陸頁(yè)流暢的動(dòng)畫展示讓用戶對(duì)網(wǎng)站的服務(wù)特色一目了然，自然平滑的過(guò)渡也是一大亮點(diǎn)榨为。左側(cè)的CTA butto與右側(cè)動(dòng)畫的創(chuàng)意組合使得整個(gè)頁(yè)面的用戶體驗(yàn)自然而生動(dòng)惨好。活潑的動(dòng)畫也與網(wǎng)站響應(yīng)式的主題相得益彰随闺。
5.Slack
頁(yè)面設(shè)計(jì)亮點(diǎn)：
協(xié)作功能擬人化設(shè)計(jì)
突出品牌色
簡(jiǎn)單易操作的CTA按鈕
固定頭部的滾動(dòng)風(fēng)格允許在頁(yè)面滾動(dòng)的時(shí)候顯示所有必要的信息日川，讓訪問(wèn)者無(wú)需在頁(yè)面上下移動(dòng)即可接收信息。
Slack最重要的協(xié)作功能以擬人化的形象展示給客戶矩乐，多樣化的協(xié)作文件展示龄句，強(qiáng)化Slack品牌印象。優(yōu)秀的著陸頁(yè)設(shè)計(jì)另一個(gè)做法是呼應(yīng)品牌色散罕。Slack也很好的實(shí)現(xiàn)了這一點(diǎn)分歇。明亮的品牌顏色與每個(gè)相應(yīng)的部分互相呼應(yīng)。
頁(yè)面上的CTA按鈕以簡(jiǎn)短直接的“Get Started”作為客戶的行動(dòng)指引欧漱。而僅此一個(gè)表單區(qū)域讓訪問(wèn)者也很可能輕松的完成表單填寫职抡，從而增加注冊(cè)率。
6.?Matchpool
頁(yè)面設(shè)計(jì)亮點(diǎn)：
扁平化
極簡(jiǎn)文案
醒目的CTA顏色設(shè)計(jì)
同樣是扁平化設(shè)計(jì)風(fēng)格的網(wǎng)站误甚，Matchpool整個(gè)頁(yè)面的顏色搭配顯得十分清新活潑缚甩。互相靠近的小精靈或是自由活動(dòng)的小精靈都體現(xiàn)出社區(qū)的概念窑邦。簡(jiǎn)短的文案也告訴用戶可以自由創(chuàng)建屬于自己的社區(qū)擅威。
屏幕正中和右上角的CTA按鈕顏色搭配形成對(duì)比，在深色調(diào)的頁(yè)面背景對(duì)比下非常醒目冈钦，抓人眼球郊丛。“免費(fèi)”加入對(duì)用戶也在吸引著用戶去注冊(cè)，加入社區(qū)宾袜。
7.Airbnb
頁(yè)面設(shè)計(jì)亮點(diǎn)：
簡(jiǎn)單的圖文背景
個(gè)性化展示
口碑及信任感
迎接客人的背景圖與網(wǎng)站主題不謀而合捻艳，簡(jiǎn)單大方。
為了幫助將訪問(wèn)者轉(zhuǎn)換成房東庆猫，Airbnb提供了一些誘人的個(gè)性化展示功能：根據(jù)您的位置估算的每周平均收入預(yù)測(cè)认轨。 您可以在字段中輸入有關(guān)您的潛在住宿條件的其他信息，以獲得更加個(gè)性化的估算月培。如果您訪問(wèn)的頁(yè)面已經(jīng)確信嘁字，頁(yè)面頂部的明確號(hào)召性用語(yǔ)可以輕松地進(jìn)行現(xiàn)場(chǎng)轉(zhuǎn)換。
如何成為房東獲取收入杉畜？如何得到安全保障纪蜒？一無(wú)所知的新用戶必定對(duì)這些問(wèn)題感興趣。循序漸進(jìn)的頁(yè)面指引為用戶提供了明確的網(wǎng)頁(yè)瀏覽方向和良好的用戶體驗(yàn)此叠。這么貼心的服務(wù)也不難留住用戶了纯续。
8.Flickr
頁(yè)面設(shè)計(jì)亮點(diǎn)：
圖片輪播
大而顯眼的CTA按鈕
眾所周知，F(xiàn)lickr是一個(gè)照片分享或存儲(chǔ)的平臺(tái)灭袁，無(wú)論是業(yè)余的或是職業(yè)的攝影師都可以加入并在其中得到靈感猬错。它的著陸頁(yè)設(shè)計(jì)采取了圖片輪播的方式展示用戶的攝影作品。隨圖片滾動(dòng)的作品署名和作者姓名讓人對(duì)作者及作品產(chǎn)生無(wú)限的好奇心茸歧，忍不住想了解作者更多的作品倦炒。這也是著陸頁(yè)的魅力之一。
大而顯眼的CTA按鈕設(shè)計(jì)吸引著用戶去加入Flickr社區(qū)软瞎，從數(shù)百億的相片中獲取自己的靈感逢唤。簡(jiǎn)短的文案讓游客在無(wú)形中便對(duì)網(wǎng)站產(chǎn)生了巨大的吸引力。
參考這些案例后涤浇，如何為自己的網(wǎng)站做著陸頁(yè)設(shè)計(jì)呢鳖藕？
利用原型設(shè)計(jì)工具設(shè)計(jì)著陸頁(yè)是最方便有效的途徑之一。在Mockplus中選擇網(wǎng)頁(yè)項(xiàng)目芙代，利用現(xiàn)成的200個(gè)組件和3000+圖標(biāo)吊奢，便能簡(jiǎn)單快速的實(shí)現(xiàn)著陸頁(yè)原型設(shè)計(jì)盖彭。
大多數(shù)網(wǎng)站著陸頁(yè)的設(shè)計(jì)元素并沒(méi)有很多纹烹，基本會(huì)用到圖片、文本召边、按鈕铺呵、輸入框等常用組件。例如這款由Mockplus打造的音樂(lè)類項(xiàng)目So Stereo隧熙。直接拖拽出需要用到的組件片挂，快速交互，快速設(shè)計(jì)，快速演示音念。
2.使用模板
除了能借助原型設(shè)計(jì)工具的便利在項(xiàng)目開(kāi)始前設(shè)計(jì)好理想中的著陸頁(yè)沪饺，也可以直接套用模板。例如Unbounce?和Leadpages闷愤，都提供了非常不錯(cuò)的著陸頁(yè)設(shè)計(jì)模板整葡。
Unbounce-?最知名的著陸頁(yè)線上制作工具
Unbounce有許多很棒的登陸頁(yè)面模板，大部分的模板都著重在引導(dǎo)使用者轉(zhuǎn)換讥脐，Unbounce還有一個(gè)一流的所見(jiàn)即所得頁(yè)面建置工具遭居，幫助使用者直接建立自己的登陸頁(yè)面網(wǎng)頁(yè)。
Leadpages?-?功能多樣性的著陸頁(yè)設(shè)計(jì)工具
LeadPages提供許多功能旬渠，如制作電腦俱萍，手機(jī)版本的網(wǎng)頁(yè)排版版本，也可以使用A / B測(cè)試與優(yōu)化SEO告丢，它最大的優(yōu)勢(shì)則是與其他的工具整合枪蘑。比如說(shuō)LeadDigits可以幫助使用者用簡(jiǎn)訊輸入信箱 即可訂閱，只要點(diǎn)選LeadLinks產(chǎn)出的連結(jié)岖免，就可以讓使用者填寫名單腥寇，LeadBox可以制作出填寫表單。
總結(jié)
以上為大家總結(jié)的著陸頁(yè)設(shè)計(jì)案例無(wú)論在排版還是用戶體驗(yàn)設(shè)計(jì)方面都十分出色觅捆，希望能在細(xì)節(jié)和整體布局方面給大家提供一些思路赦役。另外，個(gè)人在設(shè)計(jì)著陸頁(yè)的時(shí)候栅炒，有許多方方面面的小細(xì)節(jié)掂摔，比如CTA的布局，顏色搭配赢赊，公司LOGO的位置乙漓，都可能提升頁(yè)面效果，而標(biāo)題文案释移、輔助說(shuō)明的改進(jìn)叭披，則可能會(huì)大大提高你的轉(zhuǎn)化率。
