設(shè)計(jì)一個(gè) SaaS 公司官網(wǎng)，首先會(huì)從戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層和表現(xiàn)層五個(gè)產(chǎn)品層級(jí)進(jìn)行全面考慮，而作為一個(gè)產(chǎn)品經(jīng)理，在產(chǎn)品設(shè)計(jì)的時(shí)候不僅僅是考慮的這幾個(gè)層級(jí)。本文將從以線索量獲取作為重點(diǎn)目標(biāo)的官網(wǎng)設(shè)計(jì)，來(lái)你介紹官網(wǎng)設(shè)計(jì)那些事。

01 產(chǎn)品五個(gè)層級(jí)簡(jiǎn)單分析

1.1 戰(zhàn)略層

（1）目標(biāo)設(shè)定：明確官網(wǎng)的主要目標(biāo)及量化指標(biāo)，官網(wǎng)涉及是為了品牌宣傳、還是獲得線索，不同的目標(biāo)將決定整個(gè)官網(wǎng)的設(shè)計(jì)方向。此次官網(wǎng)設(shè)計(jì)假定以獲得線索量為核心目標(biāo)，品牌宣貫次之。如月新增AQL達(dá)到X條

（2）用戶分析：深入了解目標(biāo)用戶群體是打造成功官網(wǎng)的基礎(chǔ)。包括行業(yè)、崗位、痛點(diǎn)等。從崗位來(lái)說(shuō)，對(duì)于 SaaS 公司官網(wǎng)而言，其用戶群體不僅包括產(chǎn)品的使用者，還有采購(gòu)人員、負(fù)責(zé)人等。在官網(wǎng)內(nèi)容呈現(xiàn)時(shí)，需要重點(diǎn)特定用戶的核心痛點(diǎn)和解決方案。還有競(jìng)爭(zhēng)分析，對(duì)競(jìng)品官網(wǎng)的分析

1.2 范圍層

（1）功能范圍：梳理并確定官網(wǎng)所需具備的主要功能是關(guān)鍵環(huán)節(jié)。一般而言，SaaS 公司官網(wǎng)應(yīng)包括公司介紹、產(chǎn)品介紹、解決方案、客戶案例、在線客服等功能模塊。在功能梳理過(guò)程中，可以參考眾多優(yōu)秀的 SaaS 官網(wǎng)案例，但不能簡(jiǎn)單復(fù)制。需結(jié)合自身產(chǎn)品特點(diǎn)和目標(biāo)用戶需求，進(jìn)行個(gè)性化的功能設(shè)計(jì)

1.3 結(jié)構(gòu)層+框架層+表現(xiàn)層

（1）結(jié)構(gòu)層：后續(xù)信息架構(gòu)，構(gòu)建合理的架構(gòu)能確保用戶能夠快速找到所需信息的重要保障。重點(diǎn)關(guān)注導(dǎo)航菜單、頁(yè)面結(jié)構(gòu)和內(nèi)容分類的設(shè)計(jì)。例如，將導(dǎo)航菜單分為首頁(yè)、產(chǎn)品、解決方案、客戶案例、資源中心、關(guān)于我們等主要板塊，每個(gè)板塊下再進(jìn)行細(xì)分。

（2）框架層：界面設(shè)計(jì)應(yīng)注重簡(jiǎn)潔、美觀，同時(shí)保證功能的易用性。合理布局頁(yè)面元素，避免信息過(guò)載，提高用戶的閱讀和操作效率

（3）表現(xiàn)層：包括視覺設(shè)計(jì)和文案設(shè)計(jì)。視覺設(shè)計(jì)包括色彩、字體、圖標(biāo)、圖片等方面，應(yīng)注重一致性和協(xié)調(diào)性；文案風(fēng)格應(yīng)與品牌形象和目標(biāo)用戶群體相契合，確保信息傳達(dá)準(zhǔn)確、清晰。

以上是作為一個(gè)官網(wǎng)設(shè)計(jì)之初的思考，思考清楚了目標(biāo)、用戶群體才能更好的產(chǎn)出方案。

02 官網(wǎng)頁(yè)面配置能力搭建

先來(lái)看為什么要有官網(wǎng)的配置化：

• 從首頁(yè)、解決方案、產(chǎn)品介紹頁(yè)面來(lái)看，隨著公司的發(fā)展，會(huì)有產(chǎn)品的上下架，也會(huì)有核心賣點(diǎn)的變更，這些都會(huì)涉及到頁(yè)面的調(diào)整
• 從案例、企業(yè)新聞來(lái)看，更新頻率也會(huì)比較高，會(huì)需要有專屬的運(yùn)營(yíng)管理頁(yè)面可以供運(yùn)營(yíng)進(jìn)行使用
• 除官網(wǎng)本身外，也會(huì)有需要參加一些線下展會(huì)，或線上活動(dòng)來(lái)作為線索獲取，而這部分也會(huì)需要頁(yè)面配置

所以作為一家發(fā)展型的SaaS公司，在官網(wǎng)產(chǎn)品設(shè)計(jì)上考慮頁(yè)面的配置化。而頁(yè)面配置化，會(huì)有以下幾種實(shí)現(xiàn)方式

• 外采，類似官網(wǎng)的頁(yè)面搭建的由非常多的公司有成熟的產(chǎn)品，所以外采是一個(gè)常用的方式之一，特別是中小型公司，或以品牌宣傳作為核心目標(biāo)的官網(wǎng)設(shè)計(jì)的公司
• 自建，具體的實(shí)現(xiàn)也會(huì)有很多種形式，包括純自建或以開源的代碼上進(jìn)行自建。自建需要評(píng)估項(xiàng)目ROI，包括首次搭建和持續(xù)維護(hù)的產(chǎn)研成本

外采即是選擇不同的供應(yīng)商，對(duì)比功能與價(jià)格最終選擇。而本文以自建的其中一種方案進(jìn)行說(shuō)明—積木式配置平臺(tái)：以簡(jiǎn)單組件+自定義業(yè)務(wù)組件作為積木的原子來(lái)搭建不同的頁(yè)面。再通過(guò)官網(wǎng)導(dǎo)航配置來(lái)實(shí)現(xiàn)整個(gè)官網(wǎng)的配置化

2.1 積木式配置平臺(tái)

2.1.1 組件類型

• 基礎(chǔ)組件：如一級(jí)標(biāo)題、二級(jí)標(biāo)題、文本、圖片、視頻、富文本等作為基礎(chǔ)組件
• 業(yè)務(wù)組件：基于官網(wǎng)頁(yè)面需要提前預(yù)設(shè)的組件，是由基礎(chǔ)組件+預(yù)設(shè)交互來(lái)實(shí)現(xiàn)的，比如官網(wǎng)常見的業(yè)務(wù)組件，如不同類型產(chǎn)品介紹頁(yè)；不同交互的輪播圖等
• 留資組件：依據(jù)公司實(shí)際需求預(yù)設(shè)留資組件，留資組件的類型參考文章

2.1.2 頁(yè)面配置

包括以下幾個(gè)模塊內(nèi)容：

• 基本信息：URL、菜單導(dǎo)航、創(chuàng)建人、創(chuàng)建時(shí)間等
• 頁(yè)面配置：基本的頁(yè)面配置簡(jiǎn)化如圖

2.1.3 留資組件設(shè)計(jì)

詳細(xì)的介紹可見文檔：http://m.codemsi.com/pd/6130841.html。常見組件包括：

1. 表單：最常見的留資方式，用戶通過(guò)留手機(jī)號(hào)、公司名稱、行業(yè)類型等信息?？梢酝ㄟ^(guò)表單字段的數(shù)量、必填或選填，來(lái)實(shí)現(xiàn)用戶的初篩。
2. 試用注冊(cè)：通過(guò)注冊(cè)申請(qǐng)?jiān)囉觅~號(hào)，注冊(cè)用戶作為一條留資進(jìn)入售前環(huán)節(jié)進(jìn)行跟進(jìn)，也是一種留資方式。
3. 在線客服：也是很常見的溝通方式，用戶有即時(shí)的問(wèn)題需要解答或快速了解時(shí)，在線聊天可以實(shí)現(xiàn)及時(shí)的互動(dòng)，實(shí)時(shí)互動(dòng)強(qiáng)
4. 電話：針對(duì)產(chǎn)品比較復(fù)雜的公司，或者比較傳統(tǒng)的行業(yè)，或客戶購(gòu)買意愿度比較高的場(chǎng)景下，用戶更傾向于通過(guò)電話進(jìn)行深入溝通
5. 二維碼：微信和企信二維碼，通過(guò)用戶掃碼加微便于后續(xù)建立持續(xù)的聯(lián)系，可以通過(guò)批量運(yùn)營(yíng)或群運(yùn)營(yíng)方式促進(jìn)交易。

03 SEO基礎(chǔ)能力

為更好的獲得免費(fèi)的流量和線索，在官網(wǎng)的設(shè)立之初還會(huì)考慮一部分SEO相關(guān)的基礎(chǔ)能力建設(shè)（本文僅基礎(chǔ)部分，高階單開文章說(shuō)明）。SEO設(shè)立之初會(huì)考慮以下幾個(gè)方面內(nèi)容：

• 清晰直接的導(dǎo)航結(jié)構(gòu)：創(chuàng)建簡(jiǎn)介、有意義的URL，盡可能是靜態(tài)的。假設(shè)以www.tiantian.com來(lái)說(shuō)。解決方案頁(yè)即https://www.tiantian.com/solution/***；產(chǎn)品頁(yè)即：https://www.tiantian.com/product/***
• TDK設(shè)置：標(biāo)題（Title）、描述（Description）和關(guān)鍵詞（Keywords），合理設(shè)置 TDK 對(duì)于提高網(wǎng)頁(yè)在搜索引擎中的排名和吸引用戶點(diǎn)擊至關(guān)重要。這部分產(chǎn)品更多提供配置能力，這個(gè)可以在【積木配置平臺(tái)】的基本信息處增加字段配置化，TDK本身可以由專業(yè)SEO運(yùn)營(yíng)負(fù)責(zé)
• 內(nèi)容呈現(xiàn)方式：多以文字H1、H2、Span標(biāo)簽區(qū)分明確；即使是圖片或視頻，也需要添加描述性的文件名和 alt 屬性，包含關(guān)鍵詞，以便搜索引擎能夠理解圖片的內(nèi)容

在具體實(shí)現(xiàn)上，還包括頁(yè)面渲染、自動(dòng)源碼更新、sitemap自動(dòng)更新、網(wǎng)站響應(yīng)速度、內(nèi)鏈與外鏈等相關(guān)能力建設(shè)。這個(gè)部分需要提前與SEO運(yùn)營(yíng)溝通和了解，在設(shè)計(jì)之初做好系統(tǒng)基建工作。

04 官網(wǎng)數(shù)據(jù)指標(biāo)體系

在提到產(chǎn)品五個(gè)層級(jí)的時(shí)候，有提到在戰(zhàn)略層需要考慮目標(biāo)。如以線索量作為目標(biāo)而言，其轉(zhuǎn)化的路徑為：UV→點(diǎn)擊留資按鈕→AQL→SQL

為什么要建立官網(wǎng)的數(shù)據(jù)指標(biāo)體系：

1. 流量轉(zhuǎn)化效果分析：通過(guò)對(duì)流量關(guān)鍵轉(zhuǎn)化行為轉(zhuǎn)化漏斗的跟蹤，深入了解不同渠道流量的轉(zhuǎn)化效果。有助于精準(zhǔn)把握用戶在各個(gè)環(huán)節(jié)的行為，為優(yōu)化營(yíng)銷策略提供有力依據(jù)
2. 成本控制與資源優(yōu)化：縮減低產(chǎn)出的流量投放，避免營(yíng)銷費(fèi)用的浪費(fèi)。通過(guò)對(duì)流量渠道的評(píng)估，找出低效益的投放區(qū)域，將資源集中在更有潛力的渠道上，實(shí)現(xiàn)營(yíng)銷成本的有效控制和資源的合理配置
3. 高價(jià)值流量挖掘：積極挖掘高杠桿的流量，增加高產(chǎn)出渠道的投入。通過(guò)數(shù)據(jù)分析和市場(chǎng)洞察，發(fā)現(xiàn)那些具有較高轉(zhuǎn)化率和潛在價(jià)值的流量來(lái)源，加大對(duì)這些渠道的拓展力度，提升整體營(yíng)銷效果
4. 廣告投資回報(bào)率提升：準(zhǔn)確跟蹤轉(zhuǎn)化，依據(jù)數(shù)據(jù)做投放決策優(yōu)化，提升廣告的投資回報(bào)率（ROI）。在公司有限的預(yù)算內(nèi)，通過(guò)精準(zhǔn)的數(shù)據(jù)分析和決策，提高廣告投放的效益，實(shí)現(xiàn)營(yíng)收業(yè)績(jī)的提升。

4.1 指標(biāo)體系梳理

按照以下公式逐步進(jìn)行拆解：

SQL=AQL * A→S轉(zhuǎn)化率

SQL=（UV*留資率） * A→S轉(zhuǎn)化率

UV分別來(lái)源于哪些渠道、哪些設(shè)備、哪些頁(yè)面，一級(jí)一級(jí)進(jìn)行拆解，具體如下：

4.2 數(shù)據(jù)獲取

4.2.1 渠道數(shù)據(jù)獲取

（1）設(shè)置關(guān)鍵詞追蹤 URL：百度、360等SEM渠道，在如百度推廣助手在URL后增加追蹤參數(shù)，常規(guī)配置的參數(shù)：utm_source（廣告投放的來(lái)源）、utm_medium（廣告投放的媒介類型）、utm_term（關(guān)鍵詞信息）、utm_content（同一廣告來(lái)源、媒介和活動(dòng)下的不同內(nèi)容或創(chuàng)意版本）、utm_campaign（標(biāo)識(shí)特定的廣告活動(dòng)名稱）?？蓞⒖糋oolge Analytics的渠道處理邏輯https://support.google.com/analytics/answer/6205762

重要網(wǎng)址記錄：用戶發(fā)生轉(zhuǎn)化行為，官網(wǎng)在技術(shù)實(shí)現(xiàn)上需要記錄以下網(wǎng)址數(shù)據(jù)：來(lái)源頁(yè)網(wǎng)址、著陸頁(yè)網(wǎng)址、前頁(yè)網(wǎng)址、當(dāng)前頁(yè)網(wǎng)址。

（2）其他的渠道有不同的識(shí)別方式

• 比如微信小程序，【微信應(yīng)用平臺(tái)】-【小程序 AppID】用以作為來(lái)源的識(shí)別
• 比如內(nèi)部網(wǎng)站跳轉(zhuǎn)，可以在URL上新增【位置參數(shù)（如utm_position）】作為來(lái)源的位置識(shí)別

4.2.3 按鈕埋點(diǎn)

針對(duì)網(wǎng)站內(nèi)按鈕的埋點(diǎn)信息，一般公司有提供埋點(diǎn)管理的能力，需要前端對(duì)操作按鈕進(jìn)行手動(dòng)埋點(diǎn)

以表單的留資組件為例：

1. 記錄節(jié)點(diǎn)：點(diǎn)擊（喚起表單）即記錄
2. 記錄信息：一級(jí)導(dǎo)航、頁(yè)面url、留資類型、位置、按鈕文案、操作開始時(shí)間、操作結(jié)束時(shí)間、操作人、landingpageurl、currentpageurl等

4.2.3 線索管理

AQL提交之后，屬于CRM-線索管理功能。一般在記錄的時(shí)候除了線索的基本信息會(huì)記錄，線索來(lái)源、landingpageurl、currentpageurl等信息也會(huì)進(jìn)行記錄。

05 增長(zhǎng)的A/B測(cè)試

以線索量作為官網(wǎng)建設(shè)目標(biāo)之一，A/B測(cè)試就非常重要了，大家可能遇到過(guò)以下幾種情況：

• 運(yùn)營(yíng)框框提需求，說(shuō)是能促進(jìn)增長(zhǎng)，但是沒法評(píng)估哪些運(yùn)營(yíng)動(dòng)作是有效的，除了運(yùn)營(yíng)動(dòng)作本身會(huì)存在季節(jié)、市場(chǎng)環(huán)境，或人為干預(yù)的環(huán)節(jié)
• 產(chǎn)品優(yōu)化了很多官網(wǎng)功能，到半年度匯報(bào)時(shí)，無(wú)法說(shuō)明哪些產(chǎn)品功能優(yōu)化是有效的。以此對(duì)未來(lái)應(yīng)該進(jìn)行哪些功能優(yōu)化沒有依據(jù)支持

驗(yàn)證因果關(guān)系，確保方向正確；量化策略效果，實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)，精細(xì)成本收益，是A/B測(cè)試最核心的價(jià)值。

（1）A/B測(cè)試簡(jiǎn)單示例

（2）A/B測(cè)試的內(nèi)容

可供測(cè)試的內(nèi)容一般包括：

• 用戶體驗(yàn)（顏色、字體和交互等）
• 算法優(yōu)化（搜索、廣告、個(gè)性化、推薦等）
• 產(chǎn)品性能（響應(yīng)速度、吞吐量、穩(wěn)定性、延遲）
• 內(nèi)容（商品、資訊、服務(wù)）
• 留資組件（留資類型、組件配置內(nèi)容）等

（3）A/B測(cè)試具體實(shí)現(xiàn)的方式

一種是對(duì)接到如goole分析的A/B測(cè)試；另外一種是自建的A/B測(cè)試系統(tǒng)，這部分單獨(dú)出文說(shuō)明。

在試驗(yàn)設(shè)置上，有以下幾個(gè)主要事項(xiàng)：

• 對(duì)照組和實(shí)驗(yàn)組的比例：針對(duì)較大改版可按20%、50%、80%、100%逐步推進(jìn)；針對(duì)小的優(yōu)化可按50%、100%快速推進(jìn)
• 試驗(yàn)周期：SaaS官網(wǎng)的試驗(yàn)周期一般要以一周或兩周的節(jié)奏推進(jìn)，是由公司具體的業(yè)務(wù)情況，從SaaS公司來(lái)看，所有的留資組件需要在3個(gè)工作日會(huì)完成回復(fù)和轉(zhuǎn)化，那測(cè)試周期就至少大于3個(gè)工作日
• 對(duì)比數(shù)據(jù)獲?。?/strong>如果獲取不到AB的對(duì)比數(shù)據(jù)，按試驗(yàn)就是沒有意義的，所以在試驗(yàn)之初，每一個(gè)環(huán)節(jié)的埋點(diǎn)要求、數(shù)據(jù)獲取要求都需要整理清楚