如何實現訪客到顧客的有效轉化？這里有9個優秀的著陸頁設計實例

+ 查看更多

 

著陸頁是用戶進入網站第一眼看見的元素，它對網站建設十分重要。如果網站的著陸頁設計很糟糕，用戶根本不會在網站上停留；相反，如果網站的著陸頁設計十分有效，用戶將在網頁上進行持續的瀏覽。那么，什么樣的著陸頁設計才是有效的呢？一個優秀的著陸頁需要能夠清楚地傳遞出產品或服務的獨特銷售賣點（UPS），專注于一種行為號召（CTA），比如用戶注冊、了解更多、立刻購買等，引導用戶與網站產生互動。留白、對比色等元素就常用在著陸頁中幫助構建視覺線索。簡明扼要的標題、副標題、詳盡的要點梳理也是著陸頁設計的關鍵要點。對了，著陸頁中通常還需要使用大圖以在短時間內與用戶完成溝通與交流。說了這么多，著陸頁究竟應該如何設計呢？今天小飛特地整理了9個優秀的設計范例，快來一起看看吧！

 

 

 

Interface Lover網站是UI設計愛好者們的集結地，常會更新一些UI設計方面的技巧和建議，或是分享不同設計背后的創作體驗。由于這個網站是以內容為重的，其著陸頁的布局與報紙布局很是相似，頁面被縱向劃分為3個簡單的區塊，很是簡潔大方。不同區塊都以設計師的照片為視覺焦點，這不僅能夠吸引用戶前來瀏覽，還突出了網站對于UI設計愛好者個人故事的關注。

 

 

 

Google Fonts于2010年發布上線，現在每天幾乎可以收到來自全球超過150億次的訪問量。這很大程度上要歸功于網站的著陸頁設計。Goolgle Fonts在網站界面使用了Material Design風格，扁平化十足；整個網站還是響應式的，用戶在不同設備都能享受到良好的體驗。最重要的是你還不需要花費很多時間去獲得自己想要的字體，你甚至還可以直接在頁面上輸入文字來測試不同字體的顯示效果。如果你覺得字體選擇實在是太多了，頁面的右側還設置了字體類別勾選的記號欄，以及字體厚度、傾斜度、寬度的滑動塊，你可以在這快速篩選出自己想要的字體。

 

 

 

 

現在有很多網站都想著如何在著陸頁中利用某種特殊的技巧讓自己脫穎而出。相比這些網站來說，MIT Techonology Review實在是一個”異類”。MIT Technology Review，發布于18世紀末，一直以頁面的簡潔性和內容上的高可讀性為設計核心。盡管它已經歷過多次改版，但卻始終不忘初心。當你打開MIT Technology Review的著陸頁時，你可以看見一個醒目的封面資訊，3個二級咨詢，以及"The Download"區域（當日熱門資訊的摘要列表），層次結構十分清晰。在頁面的右上角，這還有一個顯眼的訂閱按鈕，它可以在不影響用戶愉悅體驗的同時，引導用戶進行網站訂閱。

 

 

 

 

Present&Correct的著陸頁設計十分精巧。坐標網格式的背景圖片、淺灰配色、經典字體，不僅簡潔大方，文藝氣息十足，還會讓人不知不覺地聯想到學校練習冊，這與網站的主題（文具用品銷售）不謀而合。除了整潔的頁面布局外，這個網站在各種細節元素的處理上也很仔細：網站的導航菜單一目了然；產品展示頁面充分結合了留白設計；搜索按鈕清晰可見；菜單欄的右上角還放置了購物車按鈕，讓用戶的結算行為更易發生。

 

 

 

 

LS Productions位于蘇格蘭，是一家提供圖片、視頻拍攝等服務的制作公司。它在網站的著陸頁設計上充分發揮了自己的優勢，比如在首頁上使用滿屏的循環背景視頻來展現企業的業務能力。當你點擊向下滾動時，你可以看見LS Productions公司的3種業務分類：圖片拍攝、視頻拍攝、以及拍攝地點租賃。其實，到這為止，網站著陸頁的作用已經基本發揮完了，剩下的拍攝地點集錦、團隊介紹等區域都只是起到錦上添花的作用。如果你想與LS Productions進行合作，你可以進入服務頁面。

 

 

 

 

O'Neil是一家銷售運動服裝和運動裝備的美國公司。不過它的核心業務只涉及兩個項目：沖浪和滑雪，因此它的著陸頁設計中采用了大量的海浪、雪山圖片。一打開O'Neil的首頁，你可以看到主頁面的上方有一欄導航菜單，每個主菜單欄下都細分了多個子菜單，這種分門別類、將網站所有欄目都一一呈現出來的方式可以讓用戶快速到達自己想去的頁面。主頁之下的各個區域（男裝、女裝、潛水服等）都是圍繞大圖展開的。這還有類似Ins的圖片畫廊，旨在激起用戶開始沖浪和攀登雪山的興趣。

 

 

 

 

對于Hipstamatic這個網站來說，它主要是通過著陸頁對Hipstamatic這個攝影App進行全方位的展示，包括軟件特點、界面、用戶使用感受等，以達到吸引用戶瀏覽、點擊下載的目的。一打開Hipstamatic的著陸頁，鮮亮的背景顏色很容易抓住用戶的視線。網站導航欄的下方設置了一個可滾動點擊的圖片畫廊，這些圖片都是其他用戶真實的攝影作品。中間區域圍繞著一個IPhone的動態圖展開，呈現了App的最新版本、多種拍攝模式等；頁面底部還有一個顯眼的CTA按鈕號召用戶去App store進行軟件下載。

 

 

 

 

Apple的著陸頁畫面十分之簡潔，它還因此獲得了D&AD的"黑鉛筆"獎（很難贏得的一類獎項）。在著陸頁上，Apple簡要地介紹了企業的產品范圍（導航菜單欄），除此以外，頁面上就只剩下漂亮的產品圖片以及產品名稱和標語了，這甚至都沒有我們十分推崇的CTA按鈕。其實這是因為著陸頁上的產品圖片和名稱都是設置了鏈接的，用戶可以點擊它們查看更多信息。你也可以在網站中使用類似的設計手法，但一定要確保用戶知道點擊這些元素可以獲取更多信息。

 

 

 

 

Pinterest的著陸頁設計有著十分明確的目標。一打開它的網頁，這就會彈出注冊/登錄按鈕，如果你不想注冊，就可以直接退出了。這個流行的線上圖庫對自己的品牌和口碑很有信心，不像其他網站一樣會讓用戶先瀏覽一些其他界面，再決定是否進行注冊。在注冊/登錄界面的背后，這有很多大量緩慢向上移動的圖片，就像是一面照片墻。這也沒有多余的描述、廣告或其他元素，能讓用戶集中于信息本身。

 

 

 

快來起飛頁自助建站平臺搭建一個響應式網站吧！