創(chuàng)意個性的網(wǎng)站著陸頁設(shè)計案例分享

集合各種各樣的網(wǎng)站著陸頁設(shè)計案例,同時頁面也包含了Hero頁面,優(yōu)雅的字體排版和清晰的CTA設(shè)計

著陸頁(Landing page)是檢驗網(wǎng)站銷售轉(zhuǎn)化的工具之一,它幫助用戶了解產(chǎn)品的優(yōu)惠活動,產(chǎn)品特點等等。今天,我們?yōu)槟鸭艘幌盗械木W(wǎng)站著陸頁設(shè)計案例,幫助您更好的設(shè)計此類頁面。同時也可以下載網(wǎng)站網(wǎng)頁頁模板,更快速的設(shè)計著陸頁。


欣賞著陸頁設(shè)計案例前,我們先了解一下為什么以及什么時候會使用著陸頁(Landing page)?

最常使用著陸頁的網(wǎng)站是電子商務(wù)和在線服務(wù)的網(wǎng)站。這類網(wǎng)站需要吸引用戶購買產(chǎn)品或者購買特定服務(wù),所以,為某次的活動創(chuàng)建專門的著陸頁可以給用戶提供指導(dǎo)。如果將所有的流量導(dǎo)到網(wǎng)站的首頁,可能會導(dǎo)致用戶體驗非常糟糕,轉(zhuǎn)化也不好。如果用戶是從外部廣告頁過來的,用戶被廣告內(nèi)容吸引過來,不能直接引導(dǎo)用戶付費購買,在銷售上是非常失敗的。


但著陸頁不僅僅是關(guān)于銷售和購買:還有許多其他案例。它們被廣泛用于展示和宣傳,比如:

  • 移動應(yīng)用

  • 教育資源

  • 慈善平臺和活動

  • 社區(qū)

  • 活動和會議

  • 特別公告和信息。


無論如何,任何著陸頁的設(shè)計過程都是從設(shè)定清晰簡潔的目標(biāo)開始的,并且是能夠?qū)崿F(xiàn)的目標(biāo)。讓我們回顧一下不同目標(biāo)的例子。大多數(shù)設(shè)計概念都基于經(jīng)過充分檢驗的方法,因此它們具有以下特點:

  • 清晰的視覺層次

  • 吸引用戶注意的圖片

  • 大膽且識別度高的排版

  • 簡潔的標(biāo)語

  • 可讀性強(qiáng)且簡潔的描述

  • 容易識別的CTA按鈕


了解完著陸頁,讓我們開始欣賞這些創(chuàng)意個性的著陸頁吧!


1. 照片服務(wù)的著陸頁

這是一個為攝影愛好者提供照片共享服務(wù)的網(wǎng)站,著陸頁使用了自定義設(shè)計的插畫作為吸引用戶的主圖。


Landing page design 2.png



2. 潛水課程報名的著陸頁

非常有吸引力的頁面排版,清新大氣的背景圖一下能夠抓住用戶的注意力,畫面的切割成多個區(qū)域?qū)哟畏置?,用戶能夠很快找到需要的?nèi)容。


Landing page design 3.png



3.提供創(chuàng)新的汽車清潔服務(wù)的著陸頁

這是一個提供O2O汽車清潔服務(wù)的網(wǎng)站,這個頁面主要針對那些想被招聘為清潔工并加入當(dāng)?shù)貓F(tuán)隊的用戶。


Landing page design 4.png



4.郵件管理服務(wù)的著陸頁

藝術(shù)化的插畫與產(chǎn)品名稱和解決方案融合在一起,幫助用戶解決郵件推廣問題。CTA按鈕與花朵顏色一致,可以快速識別。


Landing page design 5.png



5. 語音識別技術(shù)的著陸頁

這是一個帶有情感的著陸頁,通過超級可愛的插畫,一下就能明白網(wǎng)站提供技術(shù)是幫助大人理解小孩子嘀哩咕嚕說的話。


Landing page design 6.png



6. 銷售兒童書籍的書店的訂閱著陸頁

這邊使用了深色背景和超級大的字體,鼓勵用戶訂閱網(wǎng)站內(nèi)容。


Landing page design 7.png



7,行李托運服務(wù)的著陸頁

協(xié)調(diào)的顏色和簡潔的標(biāo)語,插畫所描繪的場景,很顯然,這是幫助旅行者托運行李的平臺。


Landing page design 8.png



8. 汽車維護(hù)app的著陸頁

大部分app宣傳的網(wǎng)頁是在背景展示一個app的截圖和appstore的下載鏈接。而這個網(wǎng)站卻另辟蹊徑,使用特別設(shè)計的插畫告訴用戶提供的服務(wù)。


Landing page design 9.png



9. 藝術(shù)展品的著陸頁

Landing page design 10.png



10. 招聘平臺的著陸頁

Landing page design 11.png



11.新型的送餐服務(wù)網(wǎng)站著陸頁


Landing page design 12.png


12. 購物送貨的網(wǎng)站著陸頁

提供本地送貨服務(wù)的著陸頁,時尚的配色及誘人的圖片讓人耳目一新。由于提供本地服務(wù),所以CTA按鈕直接讓用戶填手機(jī)號。


Landing page design 13.png



13.交互式地圖應(yīng)用的著陸頁

Landing page design 14.png



14. 提高工作效率的服務(wù)平臺著陸頁

Landing page design 16.png


Landing page design 17.png



15. 發(fā)飾在線電商著陸頁

Landing page design 18.png



16. 安全服務(wù)的著陸頁

Landing page design 19.png




17. 環(huán)保社區(qū)的著陸頁

Landing page design 20.png




18. 包豪斯活動策劃的著陸頁

這個頁面很包豪斯。極簡設(shè)計,極少的用色,強(qiáng)烈的對比。


Landing page design 21.png



19. 社交管理app的著陸頁

使用一個app管理多個設(shè)計賬號,插畫非常生動形象。


Landing page design 22.png



20. 歐冠決賽宣傳的著陸頁

友誼第一,比賽第二。


Landing page design 24.png


Landing page design 23.png






每天更新,
全站高品質(zhì)素材免費下載!