本文將以“優(yōu)秀的表達(dá)呈現(xiàn)”和“有效的轉(zhuǎn)化策略”為標(biāo)準(zhǔn)，以著陸頁(yè)-首屏、產(chǎn)品說(shuō)明、社會(huì)證明、CTA四個(gè)方面展開講述：如何提高 SaaS 網(wǎng)站轉(zhuǎn)化率？

背景

通過(guò)研究和總結(jié) SaaS 網(wǎng)站的優(yōu)秀案例，給自己在產(chǎn)品設(shè)計(jì)的過(guò)程中攢經(jīng)驗(yàn)，是我進(jìn)行這樣工作的原因和動(dòng)力。

在 SaaS 領(lǐng)域扎根 3 年半已來(lái)，一直在做軟件和后臺(tái)，產(chǎn)品在很牛 X 的路上一路狂奔，如何表達(dá)出來(lái)，并產(chǎn)生更加有效的客戶“轉(zhuǎn)化”，是我目前工作需要思考的。

本文以“優(yōu)秀的表達(dá)呈現(xiàn)”和“有效的轉(zhuǎn)化策略”為標(biāo)準(zhǔn)，總結(jié)一些不錯(cuò)的案列，共四個(gè)方面：

1. 著陸頁(yè)-首屏
2. 產(chǎn)品說(shuō)明
3. 社會(huì)證明
4. CTA

一、著陸頁(yè)-首屏

著陸頁(yè)，訪問(wèn)者到達(dá)的第一個(gè)頁(yè)面，點(diǎn)擊廣告或者搜索引擎結(jié)果后顯示給訪問(wèn)者的網(wǎng)頁(yè)。

有些將網(wǎng)站首頁(yè)作為著陸頁(yè)，有些根據(jù)廣告采用有針對(duì)性的特定頁(yè)面。當(dāng)然，具體情況需要根據(jù)公司的業(yè)務(wù)而定。

著陸頁(yè)的首屏，100%（基本）觸達(dá)，直接映入訪問(wèn)者眼簾，所以重要性不言而喻，如何在第一印象中快速的解答訪問(wèn)者產(chǎn)生的疑問(wèn)非常重要。

我翻遍了很多網(wǎng)站，雖各有巧妙的亮點(diǎn)，但有其結(jié)構(gòu)性的東西，主要有四個(gè)部分：

1. 介紹（標(biāo)題+說(shuō)明）：是什么？解決了什么？?jī)?yōu)勢(shì)？
2. 配圖：產(chǎn)品外觀、產(chǎn)品介紹、呈現(xiàn)效果等等。
3. 客戶 logo：建立初期的信用。
4. CTA：注冊(cè)、演示、在線溝通等等，提供行動(dòng)的入口。

是的，以上四個(gè)部分就是為了回答，訪問(wèn)者首次進(jìn)入后產(chǎn)生的疑問(wèn)：

• 干啥的，效果如何？
• 是我需要嗎？
• 為什么相信你？
• 不錯(cuò)，哪里可以試試看？

當(dāng)然，這不是萬(wàn)能鑰匙。但，在此思路上發(fā)揮你的創(chuàng)意或許會(huì)更棒！

sleeknote

絕佳模范案列，充分利用首屏，來(lái)回答訪問(wèn)者的疑問(wèn)。

• 介紹：碩大的文字，簡(jiǎn)短而又無(wú)法忽略，澄清產(chǎn)品解決的問(wèn)題，解答了訪問(wèn)者的第一反應(yīng)，這是什么，能干嘛？
• CAT：行動(dòng)的號(hào)召，提供兩個(gè) CTA，一個(gè)高成本（七天免費(fèi)使用），一個(gè)低成本（查看演示），讓訪問(wèn)者選擇而不是拒絕。
• 社會(huì)證明：列舉客戶，證明產(chǎn)品的價(jià)值，通過(guò)第三方背書建立初步可信度。
• 圖片：一圖勝千言，就算訪問(wèn)者不看右側(cè)的介紹文案，也能理解產(chǎn)品是什么。
• 引導(dǎo)：動(dòng)態(tài)圖形結(jié)合文本，引導(dǎo)訪問(wèn)者繼續(xù)瀏覽。

稿定摳圖

通過(guò) gif 動(dòng)畫，可謂一圖勝千言。

• 圖片：采用左圖右文的布局方式，圖片作為主角，通過(guò) gif 一目了然其功能和效果。
• 介紹：通過(guò)數(shù)據(jù)（3 秒）加上左圖動(dòng)態(tài)演示，讓人立即 get 到“快速”這個(gè)核心點(diǎn)。

addthis

反問(wèn)句的標(biāo)題，引起好奇心。

• 介紹：反問(wèn)句的方式，看到的時(shí)候，內(nèi)心不自然的就給出肯定的回答，并引起強(qiáng)烈的好奇。
• 社會(huì)證明：通過(guò)數(shù)據(jù)，1500萬(wàn)，哇，這么厲害，看來(lái)我可能也需要。
• CTA：免費(fèi) + 快捷注冊(cè)，打消訪問(wèn)者兩大難題：成本 + 麻煩。
• 網(wǎng)站高度：窗口即使縮到很矮，“免費(fèi)網(wǎng)站工具”也會(huì)在一屏內(nèi)，精心的小設(shè)計(jì)，讓訪問(wèn)者止不住滑下去一探究竟。

useproof

通過(guò)量化的數(shù)據(jù)和左側(cè)實(shí)時(shí)的產(chǎn)品展示效果，簡(jiǎn)單明了。

• 介紹：能做什么，效果如何，并以結(jié)果為導(dǎo)向。
• 社會(huì)證明：客戶量 + 評(píng)分，沒(méi)有大客戶，我有不錯(cuò)的數(shù)據(jù)呀。
• 預(yù)覽：實(shí)時(shí)呈現(xiàn)產(chǎn)品的各種功能效果，一秒即懂。

二、產(chǎn)品說(shuō)明

放心，訪問(wèn)者通常沒(méi)什么耐心，也沒(méi)那么熟悉你的產(chǎn)品，“簡(jiǎn)單粗暴，傻子都懂”是設(shè)計(jì)師作為“翻譯者”最應(yīng)該追求的目標(biāo)。

你沒(méi)法很好的解釋，就別過(guò)多的指望訪問(wèn)者會(huì)注冊(cè)嘗試。

產(chǎn)品說(shuō)明，最好用第三方的視角，多問(wèn)問(wèn)你的同事，如新入職同事、客服、財(cái)務(wù)或其他非技術(shù)人員，他們?cè)趺蠢斫猓灰^(guò)于在意設(shè)計(jì)的“高大上、權(quán)威性、不可撼動(dòng)、其他人都是傻 X”。

永遠(yuǎn)記住，你服務(wù)的是用戶，手握一票否決權(quán)的上帝。

不過(guò)，有以下方法，可以參考：

• 文案介紹采用結(jié)構(gòu)化的方式?？刹捎么髽?biāo)題、小標(biāo)題、分點(diǎn)說(shuō)明等方式，提高訪問(wèn)者獲取和理解的速度。
• 在配圖效果上，GIF > 靜態(tài)圖片。同時(shí)，與產(chǎn)品相關(guān)、相近程度越高的圖片越好。
• 提供在線演示或視頻解說(shuō)。

benchmark

標(biāo)題解釋了功能（郵件營(yíng)銷）+ 優(yōu)勢(shì)（15 分鐘）+ 客戶群體（中小企業(yè)），并通過(guò)強(qiáng)大的 gif 快速的讓訪問(wèn)者知道如何使用，而無(wú)需過(guò)多的解釋。

batch

通過(guò)步驟和分點(diǎn)，簡(jiǎn)短而又明確，高效而又易于理解。

sleeknote

在線演示，預(yù)覽效果，直觀明了。

viral-loops

大標(biāo)題 + 小標(biāo)題 + 更多解釋，從大概到具體，訪問(wèn)者可根據(jù)情況，是否深入了解。

三、社會(huì)證明

黃婆賣瓜自賣自夸，瓜好不好，最終還得看吃過(guò)瓜的人怎么說(shuō)。

社會(huì)證明，就是為了消除潛在客戶內(nèi)心的不確定性，不安全感。通過(guò)背書，來(lái)增加產(chǎn)品可信度，給人靠譜、成熟、牛 X 的印象。

但是，如何增加背書的有效性，可以從以下角度考慮：

• 增加相關(guān)性。每個(gè)人都會(huì)更加關(guān)注自己和自己領(lǐng)域內(nèi)的，按照行業(yè)分類，呈現(xiàn)出服務(wù)過(guò)的各個(gè)行業(yè)領(lǐng)頭品牌，增加其與潛在客戶的關(guān)聯(lián)性。“臥槽，好牛，XXX 也在用，注冊(cè)試試。”
• 增強(qiáng)誠(chéng)信背書。視頻 > 評(píng)價(jià)人的頭像+文字評(píng)價(jià) > 文字評(píng)價(jià) > 單純的企業(yè) logo，同樣文字評(píng)價(jià)中，可量化的結(jié)果（數(shù)據(jù)） > 模糊的好評(píng)

那又有哪些社會(huì)證明的素材呢？

總結(jié)如下：

• 服務(wù)的客戶
• 第三方權(quán)威認(rèn)證
• 可量化的產(chǎn)品數(shù)據(jù)
• 集成（對(duì)接第三方應(yīng)用）
• 還有一個(gè)經(jīng)常被忽略的，真人圖像，這比滿屏的插畫和 C4D 給人更多的親近感和信任

53KF

通過(guò)詳細(xì)的量化數(shù)據(jù)和列舉各行業(yè)代表客戶，證明其領(lǐng)域內(nèi)的地位。

zoom

通過(guò)視頻，增加產(chǎn)品其可信度：

華為云

通過(guò)第三方的權(quán)威認(rèn)證，樹立其安全穩(wěn)定的特性。

batch

通過(guò)量化的數(shù)據(jù)，體現(xiàn)其技術(shù)和服務(wù)能力。

smartlook

通過(guò)集成，向訪問(wèn)者證明其成熟、方便、可擴(kuò)展。

bizmates

使用大量的真人和場(chǎng)景素材，不是網(wǎng)上的無(wú)版權(quán)和一眼假的商務(wù)圖。當(dāng)然，用心程度并不會(huì)浪費(fèi)，都會(huì)呈現(xiàn)在給人的專業(yè)和信任感上。

四、CTA

CTA 是 Call to action 的縮寫，中文通常稱之為行為召喚。

CTA，簡(jiǎn)單來(lái)理解就是你希望用戶執(zhí)行的行為。整個(gè)網(wǎng)站中有不同程度的 CTA ，高成本的（如注冊(cè)、電話咨詢）、低成本的（在線演示、在線咨詢），甚至引導(dǎo)訪問(wèn)者瀏覽網(wǎng)站的路徑指示。

不管怎樣，CTA 要讓訪問(wèn)者“覺(jué)得”是需要的，他們才會(huì)有點(diǎn)擊的沖動(dòng)。

Crazyegg

整個(gè)頁(yè)面的最大的 CTA 是“展示我的熱圖”，而非注冊(cè)，以為輸入了網(wǎng)址，就能夠查看到熱圖，還是太年輕，跳轉(zhuǎn)到的既然是注冊(cè)頁(yè)面，沉沒(méi)成本嗎？不得而知，具體的轉(zhuǎn)化只有官方知道了。

第二個(gè) CTA 是下方的藍(lán)色字體，默認(rèn)這個(gè)網(wǎng)站是單屏，點(diǎn)擊該鏈接，單屏變成了多屏，下方顯示產(chǎn)品的具體功能。

指的啟發(fā)的是：CTA 按鈕的文案，使用“my”，以我的口吻（本文第一次提到），每個(gè)人都更關(guān)心自己并且不愿付出太多或承擔(dān)太大責(zé)任。

對(duì)了，我來(lái)到這個(gè)網(wǎng)站，當(dāng)然最關(guān)心的就是網(wǎng)站分析，切中我的想法，不假思索就輸入了網(wǎng)址。

perspective

首屏提供兩個(gè) CTA ：注冊(cè) + 免費(fèi)課程。在用戶沒(méi)有決定好是否注冊(cè)時(shí)，進(jìn)行引導(dǎo)。

點(diǎn)擊后彈出邀請(qǐng)框，肯定回答的 CTA 按鈕及我的口吻文案（本文第二次提到）。

引導(dǎo)至新的頁(yè)面，近在眼前的視頻內(nèi)容，不注冊(cè)是不是就前功盡棄了？

Helpscout

通過(guò)提供內(nèi)容，獲取郵箱，以便向潛在客戶發(fā)送郵件廣告和相關(guān)內(nèi)容，促使后期的轉(zhuǎn)化。

• 從眾心理和害怕失去，促使訪問(wèn)者添加郵箱。
• 閱讀文章，結(jié)束或者后半段的時(shí)候，提示訪問(wèn)者可以獲取 pdf 版本，從而獲得訪問(wèn)者的郵箱。

neilpatel

首屏碩大的問(wèn)題，你需要更多流量嗎？當(dāng)然（我的內(nèi)心直接回答），輸入你的網(wǎng)址進(jìn)行分析吧！

第二屏，通過(guò)各種頭銜和個(gè)人照片，建立權(quán)威和信任，CTA 文案使用我的口吻（本文第三次提到）。

第三屏，想學(xué)習(xí)營(yíng)銷嗎，簡(jiǎn)單就 4 步，然后開始點(diǎn)擊按鈕，詳細(xì)查看。

有沒(méi)有發(fā)現(xiàn)，你被“設(shè)計(jì)”了，你跟著網(wǎng)站的引導(dǎo)，一步步的深入 > 投入 > ?獲得 > 想要更多，這大概就是內(nèi)容營(yíng)銷的魅力，先給予的互惠原則。

最后

SaaS 網(wǎng)站設(shè)計(jì)，應(yīng)該以“轉(zhuǎn)化率”作為最終好壞的評(píng)判標(biāo)準(zhǔn)。

從而，以更有策略性的角度去看待、去深入、去量化。同時(shí)，采用其他工具輔助決策和優(yōu)化，而非僅僅停留在頁(yè)面風(fēng)格，甚至只是局限在好看的層面。

當(dāng)然，這只是開始，因?yàn)槲疫€在研究的路上，感謝你的閱讀。

本文由 @Wing Hu 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash, 基于CC0協(xié)議。