設(shè)計(jì)出優(yōu)秀的網(wǎng)站著陸頁(yè),這10個(gè)技巧能幫到你

2022-06-25    分類(lèi): 網(wǎng)站建設(shè)

網(wǎng)站的著陸頁(yè)承載了太多的東西。當(dāng)用戶(hù)打開(kāi)著陸頁(yè)的時(shí)候,你得讓他們感知到你的品牌調(diào)性,通過(guò)行為召喚元素促使用戶(hù)執(zhí)行特定的操作,通過(guò)視覺(jué)化的手法,給用戶(hù)留下深刻的印象等等。想要做好,真的很難。今天的文章將會(huì)和你分享10個(gè)提升著陸頁(yè)設(shè)計(jì)效果的小技巧。


正如同你所知道的,著陸頁(yè)的設(shè)計(jì)并不簡(jiǎn)單。單純的將你的LOGO替換到著陸頁(yè)模板上,并不能夠帶來(lái)足夠優(yōu)秀的設(shè)計(jì)效果,導(dǎo)航是否好使,可讀性是否優(yōu)秀,整體的設(shè)計(jì)是否一致,都會(huì)影響著著陸頁(yè)的效果,而這些都需要你進(jìn)行貼切而細(xì)致的設(shè)計(jì),才能做好。而這也使得這些提升頁(yè)面效果的技巧非常有用。


1. 為頁(yè)面設(shè)置一個(gè)明確的目標(biāo)

著陸頁(yè)通常不是大而全的,它需要有足夠的針對(duì)性:你希望用戶(hù)在進(jìn)入著陸頁(yè)之后執(zhí)行什么操作?達(dá)成什么目標(biāo)?


點(diǎn)擊一個(gè)特定的鏈接

查看視頻

玩一個(gè)小游戲

填寫(xiě)表單

購(gòu)買(mǎi)產(chǎn)品

分享內(nèi)容到社交媒體

閱讀,或者和內(nèi)容進(jìn)行互動(dòng)

你在著落頁(yè)上所放置的內(nèi)容,都應(yīng)該盡量讓用戶(hù)盡可能接近實(shí)際的目標(biāo)。BarkBox 的著陸頁(yè)上,設(shè)計(jì)師的目標(biāo)是讓用戶(hù)購(gòu)買(mǎi)狗玩具,或者提交郵箱訂閱信息。上面是他們的情人節(jié)促銷(xiāo)頁(yè)面,主題貼切,目標(biāo)明確。(注意頁(yè)面的核心是CTA按鈕“Get Start”)


2. 為訪客而設(shè)計(jì)

著陸頁(yè)的設(shè)計(jì),一定是要考慮到網(wǎng)站的訪客,你的用戶(hù)。這聽(tīng)起來(lái)挺理所當(dāng)然,但是實(shí)際上很少有網(wǎng)站能夠真正做到。整個(gè)頁(yè)面中,所運(yùn)用到的圖片和元素應(yīng)該和用戶(hù)相關(guān),文本和文案也應(yīng)該以貼合用戶(hù)甚至讓用戶(hù)喜愛(ài)和欣賞的方式來(lái)呈現(xiàn)。


你可以深入分析你的關(guān)鍵性的受眾。


他們是男人還是女人?

他們年輕還是年長(zhǎng)?

他們是否分布在特定的區(qū)域?

創(chuàng)建吸引用戶(hù)的設(shè)計(jì),能夠提升參與度和用戶(hù)轉(zhuǎn)化率。


3. 使用風(fēng)格強(qiáng)烈視覺(jué)有力的圖片


風(fēng)格強(qiáng)烈,視覺(jué)上有力,又或者是足夠有趣的圖片,往往會(huì)給用戶(hù)留下深刻的第一印象,并且能夠讓用戶(hù)參與進(jìn)來(lái)。


Coulee Creative 的頁(yè)面采用了一種有趣的設(shè)計(jì)策略。頁(yè)面的整體設(shè)計(jì)確實(shí)沒(méi)有改變,但是標(biāo)題文案和圖片中的男人表情會(huì)逐步變化。


這樣的設(shè)計(jì)很有趣,很走心,也很讓人期待。


4. 設(shè)計(jì)層次清晰的文本

絕大多數(shù)的網(wǎng)站中都會(huì)包含不同層級(jí)的文本內(nèi)容,而每個(gè)層級(jí)的文本內(nèi)容的重要性、功能都會(huì)有差異,有的需要抓人眼球,有的則需要用戶(hù)專(zhuān)注地仔細(xì)閱讀。所以,你的設(shè)計(jì)需要圍繞著文本的功能來(lái)設(shè)計(jì)。


標(biāo)題:使用精煉而吸引人的文本讓用戶(hù)注意到。

正文:主要的信息,簡(jiǎn)潔,直接,清晰。

行為召喚文本:通常以按鈕和鏈接的形式存在,告訴用戶(hù)要做什么,下一步執(zhí)行什么,如何抵達(dá)目標(biāo)等等。提供明確的、可操作的指引。

頁(yè)腳:提供相關(guān)的鏈接和信息,諸如品牌、聯(lián)系方式和社交媒體鏈接等,建立信任,提供周邊信息。

5. 導(dǎo)航和關(guān)鍵詞的結(jié)合

著陸頁(yè)上的導(dǎo)航元素有助于告訴用戶(hù)網(wǎng)站的內(nèi)容,將導(dǎo)航元素視為整個(gè)網(wǎng)站的關(guān)鍵詞系統(tǒng)的一個(gè)組成部分是非常有意義的。


Baublebar 在 Puppy Bowl 的著陸頁(yè)上就做的很好,網(wǎng)站主要銷(xiāo)售女性珠寶,設(shè)計(jì)師在網(wǎng)站的導(dǎo)航欄上標(biāo)識(shí)出關(guān)鍵詞“Baubles”,也讓用戶(hù)明白這個(gè)頁(yè)面是針對(duì)寵物的。


6. 清晰的行為召喚

每個(gè)用戶(hù)都應(yīng)該知道他們所打開(kāi)的網(wǎng)站是做什么的,清晰的行為召喚指引是至關(guān)重要的。不要以為用戶(hù)是你肚子中的蛔蟲(chóng),你往往需要通過(guò)指引來(lái)引導(dǎo)他們做你希望他們做的事情。


比較常見(jiàn)的行為召喚方式是按鈕,填寫(xiě)表單,引導(dǎo)說(shuō)明(比如“滾動(dòng)以查看更多”),甚至動(dòng)畫(huà)。


Jonathan Patterson 的著陸頁(yè)中,每個(gè)明亮的色塊都會(huì)在光標(biāo)懸停的時(shí)候變暗,并且予以說(shuō)明,引導(dǎo)用戶(hù)去點(diǎn)擊獲取更多信息。


7. 盡可能定制內(nèi)容

著陸頁(yè)本身就是為了特定功能而存在的,而且這個(gè)目標(biāo)和功能通常是比較單一的,而這樣的頁(yè)面自然也需要足夠的自定義設(shè)計(jì)來(lái)盡量達(dá)成目標(biāo)。


Trulia 這個(gè)網(wǎng)站的首頁(yè)/著陸頁(yè)就是盡量引導(dǎo)用戶(hù)并且讓用戶(hù)提供他們的地理位置信息。通過(guò)自定義設(shè)計(jì),用戶(hù)才有可能深度地參與到交互當(dāng)中來(lái)。


8. 清晰而高關(guān)聯(lián)性的品牌設(shè)計(jì)


著陸頁(yè)最常見(jiàn)的問(wèn)題就是容易讓人感到厭倦,或者和主站的信息、設(shè)計(jì)上有所割裂。


在品牌設(shè)計(jì)上,著陸頁(yè)和首頁(yè)以及品牌本身應(yīng)該有清晰的關(guān)聯(lián),確保用戶(hù)不會(huì)有跳出感,讓他們能夠自然的參與到內(nèi)容當(dāng)中來(lái)。


Nike 的運(yùn)動(dòng)鞋定制頁(yè)面就做的非常好。它和整個(gè)網(wǎng)站的品牌化設(shè)計(jì)保持著高度的一致,從LOGO到圖標(biāo),從字體到圖片風(fēng)格,用戶(hù)知道這個(gè)頁(yè)面的特殊性,同時(shí)也能夠輕松明白它和整個(gè)網(wǎng)站之間的關(guān)系。用戶(hù)永遠(yuǎn)不會(huì)懷疑這一點(diǎn)。


9. 符合用戶(hù)預(yù)期

當(dāng)用戶(hù)在其他的網(wǎng)站上點(diǎn)擊鏈接跳轉(zhuǎn)到這個(gè)著陸頁(yè)上來(lái)的時(shí)候,他們會(huì)對(duì)這個(gè)頁(yè)面或者網(wǎng)站有所期待,換句話來(lái)說(shuō),著陸頁(yè)的設(shè)計(jì)應(yīng)該具備特定的功能,迎合特定的需求,并且要貼合跳轉(zhuǎn)的來(lái)源用戶(hù)的預(yù)期。


Bills.com 這個(gè)網(wǎng)站的著陸頁(yè)采用了相對(duì)簡(jiǎn)單的設(shè)計(jì),它可以幫助用戶(hù)管理財(cái)務(wù)。從網(wǎng)站的名稱(chēng)到功能,用戶(hù)能夠形成一個(gè)相對(duì)明晰的概念和預(yù)期,而完成整個(gè)流程之前,用戶(hù)不會(huì)看到其他的無(wú)關(guān)內(nèi)容。


這樣的設(shè)計(jì)和網(wǎng)站的跳轉(zhuǎn)來(lái)源(比如社交網(wǎng)絡(luò))有著緊密的關(guān)聯(lián),用戶(hù)知道接下來(lái)會(huì)發(fā)生什么。


10. 構(gòu)建層次結(jié)構(gòu)和流程

設(shè)計(jì)良好的著陸頁(yè)有著良好的可用性,這也意味著它有著清晰的層次結(jié)構(gòu)。用戶(hù)應(yīng)該先看什么再看什么?他們將會(huì)在頁(yè)面上執(zhí)行什么任務(wù),實(shí)現(xiàn)什么目標(biāo)?合理的層次結(jié)構(gòu)和貼合用戶(hù)模式的流程很大程度上能夠讓用戶(hù)和頁(yè)面進(jìn)行正確的互動(dòng),幫助用戶(hù)達(dá)成目標(biāo)。


在上面的 LS Productions 網(wǎng)站中,設(shè)計(jì)師讓網(wǎng)站在視覺(jué)上呈現(xiàn)出清晰的行動(dòng)流程,超大的視頻背景,分別置于頂端兩邊的 LOGO 和菜單,以及向下滾動(dòng)的 CTA 引導(dǎo)說(shuō)明「Scroll for more」。用戶(hù)可以在幾秒鐘內(nèi)快速獲取這些信息,并且開(kāi)始操作。


結(jié)語(yǔ)

著陸頁(yè)和首頁(yè)其實(shí)是兩個(gè)東西,兩者在功能上有差異。有的網(wǎng)站可能是兩者合而為一的,但是很多網(wǎng)站不是。著陸頁(yè)是用戶(hù)最常訪問(wèn)的頁(yè)面,但并不一定是首頁(yè)。


頂級(jí)的著陸頁(yè)設(shè)計(jì)通常是需要營(yíng)銷(xiāo)人員參與進(jìn)來(lái),并且盡可能充分利用著陸頁(yè)的流量。了解用戶(hù),有針對(duì)性的設(shè)計(jì),是著陸頁(yè)設(shè)計(jì)的關(guān)鍵。

分享文章:設(shè)計(jì)出優(yōu)秀的網(wǎng)站著陸頁(yè),這10個(gè)技巧能幫到你
本文來(lái)源:http://bm7419.com/news/171499.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)公司定制開(kāi)發(fā)、做網(wǎng)站品牌網(wǎng)站設(shè)計(jì)、關(guān)鍵詞優(yōu)化

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)