由於工作關係最近筆者接觸了某位“資深”行銷工作者，她拿來一個設計好的頁面向我徵求意見。讓我詫異的不是她沒有先自己進行縝密思考並把關就隨隨便便把設計扔給我，而是這位朋友對CRO（Conversion Rate Optimization）一竅不通。
事實上早在2013年，筆者介紹了Landing Page的最佳實踐。這些年也多次分享相關內容（見文末），CRO知識是產品經理、設計師、行銷人員必須了解的，它的基礎是CCD（Conversion Centered Design）。這些年互聯網不斷發展，不單外部環境發生了變化，用戶的瀏覽行為也發生了微妙的變化。為了與時俱進，Stay current，本篇我們就面向2020，再次總結一下LP設計的十多個要點。
充分利用首屏空間
首屏，行話叫作“Fold”是指在無需滾動的情況下訪客能夠看到的頁面內容區域。對該區域的浪費約等於對流量的浪費。我們的最佳實踐是將最最最最重要的訊息放入Fold中，這包括了標題、核心行銷訊息、CTA等。如果我們有頭圖（Hero Image）也會放入Fold中。
首屏區域會根據不同設備而變化，你不妨看看GA中的訪客分辨率分佈來獲得更多設計上的偏好。
別作死，別碰幻燈片
這大概是浪費首屏寶貴資源的最好方式，也是初學者和煤老闆的最愛。如果你看到哪個公司的首頁還在使用幻燈片輪播，那高概率主管的市場經理手臂上紋了條青龍。事實上，這些“豪華高清美圖”的點擊率不到1% 。是被用戶當作辣雞直接略過的部分。
HERO IMAGE規範
選擇Hero Image是行銷者和設計師共同的工作，在追求美的同時我們要把握好使用上的科學性。優秀Hero Image的共性是：
- 有衝擊力，在第一時刻抓住訪客注意力
- 傳達“一個”概念、觀點
- 正確的配色，符合品牌形象和人群對品牌熟知的認同感
- 正確的對比度，與“CTA”元素相區別，襯托而不喧賓奪主
- 匹配頁面主題，幫助標題直達瀏覽者最關注的問題
這個照片選取非常好。兩人的視線指向左邊的表單，教科書版的實例。
避免將表單等重要元素“框住”
你知道什麼叫Ad Blindness嗎？ Ad Blindness也叫Banner Blindness，顧名思義就是網民經過常年的被動“訓練”，看網頁的時候已經可以自動過濾掉廣告了。現在右側的廣告已經非常容易被人自動忽略，因此谷歌和Google也都取消了右側的廣告。這並沒有很多收入上的負面影響。左側增加一兩個廣告影響會更大。我們上面說幻燈片的效果非常非常糟糕的原因就是Ad Blindness的又一表現，人們已經習慣忽略頁面頭部的幻燈片了。
上圖NN/G的研究結果證明了用戶對右側橫幅的關注非常小。而將重要元素（如表單）框住會增加表單被忽略的風險，我們需要避免這樣做。
專注CTA的優化
CTA即Call To Action，大多數情況下它是一個按鈕。 CTA雖然是一個小小的元素但卻是表單中乃至整個落地頁最關鍵的也是最值得去優化的部分。
就拿按鈕來說形狀、大小、顏色、對比度、文字標籤、位置、按鈕周圍的留白，這些都值得我們去用心設計測試。
按鈕設計的好壞會直接影響點擊率，而按鈕設計必須遵循一些基本的設計原則。
隱私保護，合規很重要
GDPR生效了一年多，對數字行銷產生了深遠的影響。不單是歐洲，美國也不斷出現了互聯網保護隱私的法律。國內用戶的隱私保護意識也逐漸增強，這讓我們不得不將表單的合規性考慮進來。
過去那種“點擊按鈕代表你同意我們的隱私政策”已經不再適用。
僅收集必要的訊息
表單轉化另一個影響因素是所要求填寫的訊息的數量和內容。筆者有一個客戶在表單中要求訪客填寫許多具體的內容。這些內容很難想像有訪客會對“素未平生”的公司提供，於此帶來的轉化率也毫不意外低得可憐。
我們在表單設計的時候需要把握的一個度是“剛好收集到必要的聯繫訊息”便於銷售跟進。這是B2B企業獲得銷售線索的關鍵。
在UI設計上，我們也要讓用戶更方便地填寫表單，比如應用Chrome瀏覽器支持的自動填寫表單特性，以及優化表單選項，如下面的例子。
去除無關的元素
落地頁也好，促銷電郵也好，它們的目的都非常明確，那就是讓對象轉化。因此大多數情況下這些頁面都不會包含與完成任務無關的訊息，甚至網站的導航也會去掉來減少Distraction。
優化頁面加載速度
頁面加載速度和SEO的最佳實踐是一致的。網上有太多的研究可以證實糟糕的頁面加載速度對頁面的轉化率是致命的。
你可能要問，看了上圖是不是太快也不行？是這樣的，那些小於兩秒的大多數緩存讀取不計入統計，比如瀏覽器前進後退按鈕的應用。
優化頁面內容
頁面內容優化聽上去是非常寬泛的工作實際上有明確的方法論。簡單來說就是發現目標訪客的Objection並通過頁面內容來減輕、消除、反駁這種擔心。它是通過內容來說服目標訪客的過程。
這也是《Make Websites Win》的中心思想，難怪Smart Insights的Dave Chaffey也如此推崇。
你需要細心地安排內容，添加許多有利於轉化消除潛在消費者顧慮的內容。比如其他用戶的評價、專業評級機構的評價、數據和事實證明、免費試用、退款保證等。
為移動設備進行優化
互聯網發展到今天，網民在手機為主的移動設備上所花費的時間已經遠超桌面設備。這讓我們行銷者必須樹立Mobile-First的理念來設計優化我們的頁面。
由於移動設備的屏幕更小能展示的內容也更有限，合理地安排頁面的內容越發重要，對頁面載入速度也更加苛刻。一些追求酷炫的效果常常只能滿足老闆們自嗨而為用戶造成了許多困擾，比如全屏影片背景，嚴重拖慢了頁面讀取。
我們前面提到了CTA的設計，手機上更加能體現不一樣。你可以通過tel:XXXXXXXX的方式讓用戶觸擊屏幕後直接撥打電話。這個例子為的是說明我們在落地頁設計上還要考慮用戶的瀏覽場景。
這些區別同時會出現在電子郵件中，因為在手機上打開郵件已經成為商務人士習以為常的事了。
使用箭頭控制訪客的視線移動
這是筆者私藏多年的小技巧。合理使用箭頭可以很好地控制用戶眼球的移動。
上面的例子中讓人們很難漏掉註冊按鈕，並清晰地告訴訪客該從哪裡開始互動。
電商產品頁的優化
電商產品頁面可以看作是一種特殊的落地頁。如果你在使用第三方平台的話那麼平台基本上已經為你搭好了較優的框架，你只要遵循一些基本的規則即可。比如產品圖片盡量高清，體現細節，像亞馬遜這樣的平台會要求白色背景。
如果是你自己設計自有官方商城的話可以按照用戶熟悉的第三方平台的頁面略作修改，這樣用戶在體驗上不會有太大落差。關於電商產品頁面的優化，HubSpot One將在今後的內容中補充。
寫在最後
本篇我們介紹了十多個優化落地頁的要點和技巧，其實它們對應了許多市面上落地頁常見的問題，值得我們數字行銷者關注。希望你也能練就火眼金睛發現那些沙雕的設計，更重要的是對這些頁面進行改進。
衍生閱讀：
- 《完美的著陸頁Landing Page的終極攻略》- HubSpot One
- 《有效提高表單轉化率的八種方法》- HubSpot One
- 《一個合格的互聯網美工必須了解的入門知識》- HubSpot One
- 《選對Hero Image，增強轉化率並吸引受眾》- HubSpot One