超全面！從六個方面幫你迅速提升網站著陸頁的轉化率

原文鏈接

這篇文章要討論的不僅僅是設計問題，而是從設計、市場營銷、用戶分析、心理學等領域切入，來研究用戶心理和行為，從而規劃更有效的著陸頁設計。

歡迎關注點融設計中心DDC微信公眾號（微信ID：DR_DDC）

一句話科普：

「好的著陸頁是綠色通道直達，壞的著陸頁是迷宮」

用戶進入某個網站，第一眼看到的就叫著陸頁。一個好的著陸頁能引導用戶快速完成設計師設定的目標，優秀範例參見谷歌（12306其實也不錯），失敗範例參見大學的正方系統。

好的著陸頁考驗設計師的視覺/文案/心理學/營銷等等多方面的功力，每一項單獨挑出來都能說個3天3夜，而本篇文章的作用是科普概念+基礎流程，你可以從它提到的這六個方面進行橫向擴展學習。比如文案：《年度最佳教程！7招教你寫出互聯網頂尖文案！》、心理學：《超實用的設計心理學！怎麼用隱喻設計引導用戶？》 ← 這篇文章強烈推薦一下，很通俗地用幾個淘寶的案例幫你看懂心理學在引導上的作用。視覺方面，簡單的文字也有超多玩法：《經驗分享！超實用的文本處理技巧》。一句話科普（WTF？）就先到這，來看文章正文。

首先讓我們先看看那些經常被問到的問題：

一、什麼是著陸頁？

廣義來說，著陸頁是用戶進入你的網站的起始或入口頁面，形象地來說，就是用戶在這個頁面「著陸」。

現在著陸頁已經變成了一個更為具體的概念，很多人將它們作為宣傳某個特定產品、服務、賣點或特徵的媒介，以便用戶能更快地留意到、並且更專註地瀏覽這些信息。

正是因為這樣，很多分析者認為著陸頁比普通的網站首頁更有效率，也更能實現一些針對性的營銷目標。和著陸頁的效率相比，網站首頁則常常囊括了過多的信息，讓用戶無法專心，也更容易失去瀏覽的興趣。

二、什麼是轉化？為什麼它很關鍵？

想要去驗證那些以商業和產品、營銷和推廣為最終目標的設計到底效果如何，轉化率是最常用的指標。一般來說，「轉化」意味著某個瀏覽者使用你的網站提供的服務或轉變為產品的用戶，而在實際情況中，轉化會根據不同的網站或其它產品而有不同的定義。

著陸頁起初源自電子商務，也是登陸頁應用最為廣泛的領域。而轉化率就是所有的瀏覽者中，有多少比例的人轉變成了註冊用戶並且最終完成了購買行為。

如今，著陸頁被廣泛地用在了各個領域的網站里，轉化的定義也變得更多。越來越多的線上產品和服務出現，用戶能夠在網上完成各式各樣的任務和操作，「轉化」就可以被定義為任何一個瀏覽者最終完成了網站期望他們去做的任務，比如：

• 開始使用某個產品

• 訂閱網站內容

• 轉移到某個特定頁面

• 下載App或其它文件

• 提供用戶信息

• 回答問卷

• 免費或折扣試用產品

• 瀏覽資源庫

• 去閱讀產品詳情或服務等等

上面的圖片是Knost設計的著陸頁，它是一個搖滾樂隊的網站。網頁中不同的模塊試圖引導用戶去做不同的任務，同時避免讓用戶覺得信息量過大。因此，一個瀏覽者需要花幾秒鐘時間瀏覽整頁，然後找到他們想要進一步瀏覽的區域即可。

轉化意味著你把一個潛在的被動用戶轉變成了活躍的主動用戶，這些用戶不僅僅是瀏覽網頁信息，而是真的去使用了網頁上提供的功能，可以說轉化率的高低至關重要。著陸頁在大多數的商業目的里，都專註於獲取更多的瀏覽者，並提供能夠激勵用戶進行下一步操作的信息。

作為一個成功的商人兼廣告代理公司總監，Jeff Eisenberg有一個關於轉化率至關重要的觀點，十分明智：讓業務成倍增長的秘訣並不在於成倍提高流量，而在於成倍提升轉化率。很多事實都能證明了他的觀點，而且著陸頁通常僅提供有針對性的信息，也大大節省用戶瀏覽的時間。

三、為什麼我們需要著陸頁？

從上文的例子中可以很容易的得到答案，再舉個類比的例子：想像一下，你想去紐約逛一逛曼哈頓，這是你一生的夢想，突然你找到一項又便宜又快的服務能讓你去紐約，是不是很棒？你拿起你的行李、帶上相機，心中覺得夢想就快要實現，或是其他你想去的地方。這時你又覺得如何？在一個如此大的城市中尋找你想去地方，你在完成這段筋疲力盡的旅程後，或許會覺得不太開心吧。而那些人把你送到紐約，卻把你一人丟在市裡，讓你自己去找曼哈頓在哪兒，這時候你才覺得，直達目標才最好，我想探索新鮮的城市，但不想因為找不到目的地而精疲力盡。那麼同樣的，作為一個頁面的訪問者，是不是也希望直達目標，而不是在複雜的網站上瀏覽太久？

這也正是著陸頁承擔的角色。當用戶在外部資源看到特定產品、功能、信息或服務時，然後點擊進入到站點，他並不會期望自己需要花大量的時間在首頁的一堆鏈接和信息中去尋找自己想要的產品內容或頁面。瀏覽者除了想要立馬「著陸」到有用的信息頁面，還希望能快速看到那些能夠進一步幫助他們做出決策的信息內容。所以提供一個考慮周全的著陸頁能夠大大地幫助營銷決策的實施，並且提升轉化率。

上圖是一個特別的案例，這是Ernest Asanov的關於博物館的，它是一個試圖推廣藝術展覽的著陸頁。這個頁面的目標在於提供給用戶美觀和諧又能突顯重要的信息。頁面的樣式、顏色和動效都體現了一種極簡主義的和諧感。

在Tim Ash、Maura Ginty和Rich Page的《著陸頁優化：評估和提升轉化率指南》一書里為設計師和營銷者提供了在設計可交互的電子產品時需要留心的「殘酷現實」：

• 如果訪客沒法很容易地找到某個內容，那這個內容等於不存在；

• 如果你想強調所有內容，那麼所有內容都變得不重要；

• 任何內容出現載入的延遲都令人失望而失去耐心。

以上這些都印證了著陸頁在維持用戶注意力上的重要性，讓你的內容更易被注意到、也更容易被找到。

著陸頁可以說是一種強調某些特定內容的工具，也能讓你的目標用戶更有可能使用你的服務和產品。

在Cameron Chapman的著作《著陸頁設計終極指南》里提到，一個營銷者會犯的最大錯誤可能就是希望通過在網站首頁堆放大量廣告和公關活動以提升用戶流量，卻不在首頁提供那些直達活動或推廣鏈接的入口，讓瀏覽網頁的用戶們摸不著頭腦。

四、著陸頁由哪些內容組成？

著陸頁常常會用各式各樣的創意去展現其內容，以吸引不同的目標群體。可以說著陸頁根本不可能有統一的主題或結構，不過，著陸頁需要提供的內容還是能夠找出一些規律。頁面的大小、包含多少模塊、用了哪些視覺元素，這些都不是著陸頁最重要的考慮因素，最重要的是如何讓著陸頁提供「有價值」的信息。

一般來說一個著陸頁需要包含以下內容：

1）講清楚你所展示的是什麼（產品、服務、活動等），並提供刺激用戶操作的元素。從用戶的角度來說，他們要知道你能給他們提供哪些好處，即使沒有非常具體的細節，至少用戶能清楚地知道這些好處是什麼並且這些好處確實有用。此時頁面就可以同步地提供明顯並且方便進一步查看或操作的按鈕、表格填寫、訂閱服務等頁面元素，吸引用戶去點擊。

2）口碑及信任感。人們總是傾向於相信那些被其他用戶推薦的東西，也認為那些信息更有關注的價值。因此在著陸頁上提供一些用戶評價、社交網路的粉絲規模、獲獎情況和資質證書等信息，可以讓訪問者產生更好的印象，從而更有可能進入下一步。

3）展現產品或服務的最主要的特徵或賣點。這部分信息具有補充說明的作用，來豐富產品的展示和呈現。它能讓用戶得知更多細節，比如產品或服務所能達到的效用和應用的技術、能從哪些方面改善我的生活等。

要注意的是，這些信息會讓著陸頁變得更龐大，所以在提供這些細節信息是要通盤考慮整個網站的信息規劃，而不是僅僅把信息都一股腦兒地堆到著陸頁上去。

上圖的案例來自Sergy Valiukh的著陸頁設計，它提供了上文提到的所有內容元素。首先頁面是一個有機食物商店的推廣網頁，包含了一些基本信息，例如商店名稱、產品、服務的賣點、引導用戶操作的各類按鈕以及顧客評價的展示。設計者讓整個頁面信息很豐富，同時也不會過於複雜和冗長，有吸引力但也不會過於激進。

在滾動頁面瀏覽時設計者還加入了動畫效果，讓整個瀏覽過程的體驗更為豐富，各個視覺元素之間組成了頁面的整體視覺主題，讓重要信息更為突出。

五、從哪些方面著手能讓著陸頁更有效？

1）目標用戶分析

每個著陸頁的設計都離不開對用戶群體的研究和分析。著陸頁不是一個單純的藝術品，而是市場推廣和展示策略的融合。設計者必須將市場營銷的目標和用戶群體的特性牢記在心，把著陸頁當做連接目標消費者和產品之間的橋樑。一個網頁想要有高轉化率，設計必須要事先進行對目標用戶喜好、能力、心態的分析。不過要注意的是，沒有一個著陸頁可以讓所有用戶都喜歡，即便是最成功的商業運營也不會讓每個人都滿意。

2）市場分析和競爭對手分析

在設計著陸頁之前你還需要分析現有競爭對手的策略。此前在文章《如何將廣告策略運用到網頁和App設計》里我們就討論過如何將UX/UI設計和廣告結合起來，其中的一個觀點就是鼓勵設計師去做競品分析。著陸頁是市場營銷中的重要一環，市場分析也能幫助你產出更好的設計成果。更好地了解你的競爭對手，你才能少走彎路並且不讓你的產品淹沒在其它相似的萬千產品中。

3）精簡你的文案

廣告界大咖David Ogilvy說過「每一個字都要斤斤計較」，在你設計著陸頁的時候必須牢記這個簡單的道理。必須經過研究和測試才能決定用多少字的文案去展示信息，因為這些字直接決定了用戶會不會買你的賬。

不過話說回來，並不是每一個著陸頁都要保持極少的文字字數。比如當你要宣傳的是一個著名的公司或產品時，少量的文字就足以說清楚並且吸引用戶進行下一步操作，然而，如果你要推廣的是一個全新的產品或服務，那麼則有必要多花些文字去讓訪問者了解更多。

上圖展示的是Polina設計的一個公益組織的網頁，頁面中謹慎地使用了信息文字，輔以視覺圖片，讓用戶得以了解俱樂部的活動。

4）品牌元素

很明顯，著陸頁應該著重展示logo、主題色、字體、標語和其它身份特徵元素，你必須在你所呈現的產品、服務、活動和公司及其品牌視覺語言之間建立緊密的關係，這就提高了一般營銷策略的效率。

5）視覺設計

在此前的文章里我們討論過在界面中的視覺設計，人們通常對視覺元素更敏感，也更容易識別和認知視覺元素，即使它們是高度抽象的圖片。在大多數情況下，人們認知和處理如圖標和插圖等圖像化的內容比處理文字更快。大部分用戶出於本能，也更容易被視覺元素所吸引。在上文列出的插圖中，頁面都提供了很有吸引力、具有信息量的圖形化設計，它們讓著陸頁更吸引眼球，在訪問者快速瀏覽時，能讓他們產生審美的愉悅，同時減少閱讀大段文字的時間。

6）找到賣點並吸引用戶操作

著陸頁的設計有兩個關鍵因素。USP (Unique Selling Point) 獨特的產品賣點，是顧客最關注的產品特性和優勢。CTA(Call to Action) 是鼓勵用戶進行下一步操作的入口，你通過它們來實現用戶的轉化。有效的著陸頁能夠快速的傳達賣點，並用醒目的、關於CTA的設計解決方案以及技術都值得用另開一篇文章，我們會在TubikBlog的下篇文章進行討論。

7）減少載入時間

載入時間的長短是影響設計效果重要的元素之一。用戶不喜歡浪費時間，同樣也不會在為了看一個著陸頁而等待太久。所以千萬別讓訪問者等待，你要在設計著陸頁的時候就要考慮設計方案是否會導致載入時間的延長。

8）視頻展示

動態效果是一種很好的產品呈現方式，還能夠避免用戶花費精力看文字。視頻能被運用在任何頁面場景里，讓網頁更為動感和有趣。然而必須記住，視頻很容易大大延長頁面的載入時間，所以你得好好設計視頻，讓它們值得用戶等待更多的載入時間。

9）響應式設計

幾年前的《Think with Google》一文中提到了「響應式設計」這個有趣的概念，也從統計學的角度驗證了響應式設計在網頁設計中的重要性：

• 61%的用戶表示，如果他們在手機瀏覽網頁時無法快速找到目標信息，他們就會立刻放棄，去訪問其它站點。

• 79%的用戶遇到不喜歡的頁面，會返回重新搜索其它站點。

• 50%的用戶如果一個服務在手機網頁上很難瀏覽或操作，即便這個服務在功能上再成功，他們也不願意經常使用。

有可能上面這些統計數字在今天會變得更高，因為越來越多的用戶每天都使用移動設備，所以千萬別忽略了著陸頁在手機等移動設備上的顯示效果。

10）減少讓用戶分心的元素

前文已經提過，著陸頁應該讓用戶能夠保持專註力，所以你得去除頁面上那些會讓用戶分心的信息，並加強會影響轉化效率的關鍵信息的展示。越少的額外鏈接越好，應該以最容易被注意到的方式展現引導用戶進行下一步操作的元素，以便用戶能夠找到並完成他們的操作任務。

上圖為Ludmila Shevchenko設計的著陸頁，目標是展現SwifyBeaver開發的MAC應用程序，在頁面上設計元素十分簡潔，用戶的注意力都會集中在標題文字上，而標題下方即為申請免費試用的按鈕，整個頁面沒有任何多餘或無用的鏈接，僅僅提供了必要的點擊入口，讓用戶不會分心從而更有可能被轉化。

六、如何測試你的著陸頁？

可用性測試方面的專家在不斷的實踐中已經證明，任何一個項目都不是完全客觀的，尤其是那些長期的項目。設計師也並不能奇蹟般第讓那些產品的使用者一下子變成對產品了如指掌的專家。因此，僅僅只是創造概念還不夠，你還需要用實踐和數據來改進你的設計。

David Ogilvy還說過一句名言：在廣告里最重要的一個詞是「測試」，只要你堅持去做測試，你的廣告就會變得越來越好。對著陸頁進行測試，能更好的了解用戶行為，並改善著陸頁上那些無效又不友好的設計。

在設計著陸頁的實際過程中，不少研究已經能證明，一點點微小的改進，例如操作按鈕的顏色、公司LOGO的位置，都可能提升頁面效果，而標題文案、輔助說明的改進，則可能會大大提高你的轉化率。收集用戶統計數據並進行分析，是讓設計變得更有效的途徑，同樣也能讓你的用戶轉化和營銷策略更為成功。

閱讀原文 作者：DR_DDC

http://weixin.qq.com/r/VjuLk3DE1C2rrTTw925E (二維碼自動識別)

推薦閱讀：