如何构建 SaaS 网站的高转化？
本文為PMCAFF專欄作者Wiiii出品
背景
通過研究和總結 SaaS 網站的優(yōu)秀案例，給自己在產品設計的過程中攢經驗，是我進行這樣工作的原因和動力。
在 SaaS 領域扎根 3 年半已來，一直在做軟件和后臺，產品在很牛 X 的路上一路狂奔，如何表達出來，并產生更加有效的客戶“轉化”，是我目前工作需要思考的。
本文以“優(yōu)秀的表達呈現”和“有效的轉化策略”為標準，總結一些不錯的案例，共四個方面：
1、著陸頁-首屏
2、產品說明
3、社會證明
4、CTA
著陸頁-首屏
著陸頁，訪問者到達的第一個頁面，點擊廣告或者搜索引擎結果后顯示給訪問者的網頁。
有些將網站首頁作為著陸頁，有些根據廣告采用有針對性的特定頁面，當然，具體情況需要根據公司的業(yè)務而定。
著陸頁的首屏，100%（基本）觸達，直接映入訪問者眼簾，所以重要性不言而喻，如何在第一印象中快速的解答訪問者產生的疑問非常重要。
我翻遍了很多網站，雖各有巧妙的亮點，但有其結構性的東西，主要有四個部分：
●? 介紹（標題+說明）：是什么？解決了什么？優(yōu)勢？
●? 配圖：產品外觀、產品介紹、呈現效果等等
●? 客戶 logo：建立初期的信用
●? CTA：注冊、演示、在線溝通等等，提供行動的入口
是的，以上四個部分就是為了回答，訪問者首次進入后產生的疑問：
●? 干啥的，效果如何
●? 是我需要嗎
●? 為什么相信你
●? 不錯，哪里可以試試看
當然，這不是萬能鑰匙。但，在此思路上發(fā)揮你的創(chuàng)意或許會更棒！
sleeknote
絕佳模范案列，充分利用首屏，來回答訪問者的疑問
●? 介紹：碩大的文字，簡短而又無法忽略，澄清產品解決的問題，解答了訪問者的第一反應，這是什么，能干嘛？
●? CAT：行動的號召，提供兩個 CTA，一個高成本（七天免費使用），一個低成本（查看演示），讓訪問者選擇而不是拒絕
●? 社會證明：列舉客戶，證明產品的價值，通過第三方背書建立初步可信度
●? 圖片：一圖勝千言，就算訪問者不看右側的介紹文案，也能理解產品是什么
●? 引導：動態(tài)圖形結合文本，引導訪問者繼續(xù)瀏覽
稿定摳圖
通過 gif 動畫，可謂一圖勝千言
●? 圖片：采用左圖右文的布局方式，圖片作為主角，通過 gif 一目了然其功能和效果
●? 介紹：通過數據（3 秒）加上左圖動態(tài)演示，讓人立即 get 到“快速”這個核心點
addthis
反問句的標題，引起好奇心
●? 介紹：反問句的方式，看到的時候，內心不自然的就給出肯定的回答，并引起強烈的好奇
●? 社會證明：通過數據，1500萬，哇，這么厲害，看來我可能也需要
●? CTA：免費 + 快捷注冊，打消訪問者兩大難題：成本 + 麻煩
●? 網站高度：窗口即使縮到很矮，“免費網站工具”也會在一屏內，精心的小設計，讓訪問者止不住滑下去一探究竟
useproof
通過量化的數據和左側實時的產品展示效果，簡單明了
●? 介紹：能做什么，效果如何，并以結果為導向
●? 社會證明：客戶量 + 評分，沒有大客戶，我有不錯的數據呀
●? 預覽：實時呈現產品的各種功能效果，一秒即懂
產品說明
放心，訪問者通常沒什么耐心，也沒那么熟悉你的產品，“簡單粗暴，傻子都懂”是設計師作為“翻譯者”最應該追求的目標。
你沒法很好的解釋，就別過多的指望訪問者會注冊嘗試。
產品說明，最好用第三方的視角，多問問你的同事，如新入職同事、客服、財務或其他非技術人員，他們怎么理解，不要過于在意設計的“高大上、權威性、不可撼動、其他人都是傻 X”。
永遠記住，你服務的是用戶，手握一票否決權的上帝。
不過，有以下方法，可以參考：
●? 文案介紹采用結構化的方式。可采用大標題、小標題、分點說明等方式，提高訪問者獲取和理解的速度
●? 在配圖效果上，GIF > 靜態(tài)圖片。同時，與產品相關、相近程度越高的圖片越好
●? 提供在線演示或視頻解說
benchmark
標題解釋了功能（郵件營銷）+ 優(yōu)勢（15 分鐘）+ 客戶群體（中小企業(yè)），并通過強大的 gif 快速的讓訪問者知道如何使用，而無需過多的解釋
batch
通過步驟和分點，簡短而又明確，高效而又易于理解
507a66e6c2ffc6b508470f38bc22c110-picture
sleeknote
在線演示，預覽效果，直觀明了
viral-loops
大標題 + 小標題 + 更多解釋，從大概到具體，訪問者可根據情況，是否深入了解
社會證明
黃婆賣瓜自賣自夸，瓜好不好，最終還得看吃過瓜的人怎么說。
社會證明，就是為了消除潛在客戶內心的不確定性，不安全感。通過背書，來增加產品可信度，給人靠譜、成熟、牛 X 的印象。
但是，如何增加背書的有效性，可以從以下角度考慮：
●? 增加相關性。每個人都會更加關注自己和自己領域內的，按照行業(yè)分類，呈現出服務過的各個行業(yè)領頭品牌，增加其與潛在客戶的關聯性。臥槽，牛逼，XXX 也在用，注冊試試
●? 增強誠信背書。視頻 > 評價人的頭像+文字評價 > 文字評價 > 單純的企業(yè) logo，同樣文字評價中，可量化的結果（數據） > 模糊的好評
那又有哪些社會證明的素材呢？
總結如下：
●? 服務的客戶
●? 第三方權威認證
●? 可量化的產品數據
●? 集成（對接第三方應用）
●? 還有一個經常被忽略的，真人圖像，這比滿屏的插畫和 C4D 給人更多的親近感和信任
53KF
通過詳細的量化數據和列舉各行業(yè)代表客戶，證明其領域內的地位
zoom
通過視頻，增加產品其可信度
華為云
通過第三方的權威認證，樹立其安全穩(wěn)定的特性
batch
通過量化的數據，體現其技術和服務能力
smartlook
通過集成，向訪問者證明其成熟、方便、可擴展
bizmates
使用大量的真人和場景素材，不是網上的無版權和一眼假的商務圖，當然，用心程度并不會浪費，都會呈現在給人的專業(yè)和信任感上
CTA
CTA 是 Call to action 的縮寫，中文通常稱之為行為召喚。
CTA，簡單來理解就是你希望用戶執(zhí)行的行為。整個網站中有不同程度的 CTA ，高成本的（如注冊、電話咨詢）、低成本的（在線演示、在線咨詢），甚至引導訪問者瀏覽網站的路徑指示。
不管怎樣，CTA 要讓訪問者“覺得”是需要的，他們才會有點擊的沖動。
Crazyegg
整個頁面的最大的 CTA 是“展示我的熱圖”，而非注冊，以為輸入了網址，就能夠查看到熱圖，還是太年輕，跳轉到的既然是注冊頁面，沉沒成本嗎？不得而知，具體的轉化只有官方知道了。
第二個 CTA 是下方的藍色字體，默認這個網站是單屏，點擊該鏈接，單屏變成了多屏，下方顯示產品的具體功能。
指的啟發(fā)的是：CTA 按鈕的文案，使用“my”，以我的口吻（本文第一次提到），每個人都更關心自己并且不愿付出太多或承擔太大責任。
對了，我來到這個網站，當然最關心的就是網站分析，切中我的想法，不假思索就輸入了網址。
perspective
首屏提供兩個 CTA ：注冊 + 免費課程。在用戶沒有決定好是否注冊時，進行引導
點擊后彈出邀請框，肯定回答的 CTA 按鈕及我的口吻文案（本文第二次提到）
引導至新的頁面，近在眼前的視頻內容，不注冊是不是就前功盡棄了？
Helpscout
通過提供內容，獲取郵箱，以便向潛在客戶發(fā)送郵件廣告和相關內容，促使后期的轉化
●? 從眾心理和害怕失去，促使訪問者添加郵箱
●? 閱讀文章，結束或者后半段的時候，提示訪問者可以獲取 pdf 版本，從而獲得訪問者的郵箱
neilpatel
首屏碩大的問題，你需要更多流量嗎？當然（我的內心直接回答），輸入你的網址進行分析吧！
第二屏，通過各種頭銜和個人照片，建立權威和信任，CTA 文案使用我的口吻（本文第三次提到）
第三屏，想學習營銷嗎，簡單就 4 步，然后開始點擊按鈕，詳細查看
有沒有發(fā)現，你被“設計”了，你跟著網站的引導，一步步的深入 > 投入 >? 獲得 > 想要更多，這大概就是內容營銷的魅力，先給予的互惠原則。
最后
SaaS 網站設計，應該以“轉化率”作為最終好壞的評判標準。從而，以更有策略性的角度去看待、去深入、去量化。同時，采用其他工具輔助決策和優(yōu)化，而非僅僅停留在頁面風格，甚至只是局限在好看的層面。
當然，這只是開始，因為我還在研究的路上，感謝你的閱讀。
總結
以上是生活随笔為你收集整理的如何构建 SaaS 网站的高转化？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前滴滴出行产品经理刘飞：写给产品经理的说
- 下一篇： 前滴滴出行产品经理刘飞：写给产品经理的说