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

01 產(chǎn)品五個層級簡單分析

1.1 戰(zhàn)略層

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

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

1.2 范圍層

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

1.3 結構層+框架層+表現(xiàn)層

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

（2）框架層：界面設計應注重簡潔、美觀，同時保證功能的易用性。合理布局頁面元素，避免信息過載，提高用戶的閱讀和操作效率

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

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

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

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

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

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

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

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

2.1 積木式配置平臺

2.1.1 組件類型

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

2.1.2 頁面配置

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

• 基本信息：URL、菜單導航、創(chuàng)建人、創(chuàng)建時間等
• 頁面配置：基本的頁面配置簡化如圖

2.1.3 留資組件設計

詳細的介紹可見文檔：http://theventurebank.com/pd/6130841.html。常見組件包括：

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

03 SEO基礎能力

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

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

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

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

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

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

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

4.1 指標體系梳理

按照以下公式逐步進行拆解：

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

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

UV分別來源于哪些渠道、哪些設備、哪些頁面，一級一級進行拆解，具體如下：

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

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

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

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

（2）其他的渠道有不同的識別方式

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

4.2.3 按鈕埋點

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

以表單的留資組件為例：

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

4.2.3 線索管理

AQL提交之后，屬于CRM-線索管理功能。一般在記錄的時候除了線索的基本信息會記錄，線索來源、landingpageurl、currentpageurl等信息也會進行記錄。

05 增長的A/B測試

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

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

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

（1）A/B測試簡單示例

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

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

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

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

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

在試驗設置上，有以下幾個主要事項：

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