ToB官方網站搭建指南

“ToB的官網有兩個方面作用：業務展示、增加外鏈做內容優化獲客”。

不管是PC還是移動端，公司的官網可以説是“一家公司的門店”。

有人可能認為，移動互聯網時代誰還使用網站？現在不都是手機體驗麼，那你可就理解偏差了，對於ToB的業務，尤其是SCRM、SAAS類，多數的後台還是設計在PC端。

因為PC的開發成本相對較低，並且對於SAAS或者SCRM類產品而言，迭代週期比較快；如果像TOC一樣做一款APP來控制，相對費力又增加成本。

在用户對公司以及品牌沒有任何瞭解的時候，官網、自媒體是向用户傳達信息的重要途徑之一；在某種角度上可以説，自媒體和官網內容的傳播影響着用户對這家公司和產品的認知與信任度。

如果一個公司的官網結構不清晰、圖面陳舊、佈局雜亂、配色俗氣；那麼用户很容易就會懷疑這家公司的“正規性”和“實力”。

當然也有的人會認為，現在信息大爆炸，做網站又不能帶來客户，做了也沒有什麼用。

對ToB而言，官網不僅僅是一個展示面板；因為涉及到登錄後台，他對內容搜索引擎的優化，外鏈的佈局也起到了非常大的作用。

一、目的、定位與風格

官網的定位，展示風格與功能介紹，決定了對客户心智的影響，從ToB角度，網站的設計也不一定是和同行相同一成不變的；但主要傳遞的價值、核心文化理念、情感以及底層的東西應該是一致的。

風格與設計層面，呈現的內容主要還是要有“用户思維”；我們面臨的客户是誰，可以解決為什麼樣的問題，提供什麼樣的客户價值。

邏輯要有“業務思維”，網站本身脱離不了業務，我們要關注行業趨勢、市場格局、業務模式等三個板塊，最核心還是想着“如何通過網站如何獲客”。

1. 明確主要目的，找好定位

不同的業務模型，面臨的客户羣體也是不同，那麼呈現的內容也是不一樣；因此我們一定要明確好定位，做出呈現什麼形態的網站。

比如一家SCRM企業微信客户管理的官網，那麼核心肯定是想讓“客户使用這個軟件，告訴客户軟件的好處與核心賣點”，通常這類軟件強調的是“增長”“用户畫像、數據分析”等問題。

做好基礎定位，從目標用户的角度來分析，那麼就可以直接在打造的時候把“賣點提煉出來”。

對於ToB成長型的企業，重要的事情一定是“獲客”，如果能夠通過每一個網頁把“品牌也宣傳了”、“內容被搜索引擎收錄了”，也是一件更好的事情。

所以，網站設計的前期目的決定了“風格與展示內容”，我們都要以目標用户為中心進行規劃，最終讓用户信任“這家企業”，成為意向客户。

即便我們在實際業務中，會有多種獲客的方式，但到最後“用户”始終繞不開“官網後台註冊使用，甚至於免費體驗”的環節；從本質層面，網站的UI、後台體驗，也對轉化起到了影響作用”。

雖然現在的客户通過各種渠道搜索可以找到相關軟件的“自媒體”，其實到最後用户更願意去官網瞭解；因為客户一般訪問了企業的官網，基本上都是有了一定的需求，或者是想通過官網找到解決方案。

經過大量的調查認為，當用户進入官網後，部分用户更願意留下聯繫方式，還有部分用户直接會“註冊體驗”，這也意味着我們在做官網的時候要考慮到“引導路徑問題”。

由此分析得知，不管哪個渠道到來，最後聚焦到官網帶來的線索，對於產品的使用，主動性會更強一些，轉化率也會更高一些；在前期搭建時候一定要明確核心目的，找好業務定位也顯得頗為重要。

2. 風格設計與整體結構

在做一個ToB網站的時候，不建議您百分百進行原創；從UI層面或者結構上，您可以參考下自己的競爭對手，甚至於頭部品牌的一些做法，然後加以創新，融入自己的交互等。

設計當中主要包含了2個板塊核心內容：整體風格、網站的結構。

我以SCRM、SAAS為例，在某一個垂直品類中，通過大量的競品觀察可以看到；雖然多數的展示風格不同，但是網站的結構基本上是相同的。

比如一款SCRM企業微信管理軟件，頂部導航欄常規屬性為：首頁+產品服務+定價+案例+學院+渠道合作+關於我們+後台入口為主，而首頁最為常見的也都是大屏+核心功能。

那麼產品或者品牌部自己在做原型的時候，主要架構就可以進行參考，核心就在於如何根據業務的具體發展階段來“調整形態、產品的解決方案”中展示的“內容”了。

當主要框架有了，那麼下一步我們就可以“尋找每一個網頁的框架”。

以SCRM首頁為例，多數是分為大屏banner輪播位加幾個不同的豆腐塊，核心是表達“幫助客户解決什麼問題”，加上交互動作展示業務，最後把合作客户、案例見證加上，底部欄作為固定；其實你細心觀察，多數的官網都是相似的方法論。

風格層面的設計，需要遵循自己的品牌調性、價值主張，有的企業是有專門的VI設計師，一套完善的品牌設計體系。

可能對於初創甚至於發展中的“品牌”，則沒有時間去規劃VI資產方面。

那麼這時建議以“LOGO”為主，或者公司喜歡的主題風格為主，把主要色調定好；如果有條件，也可以做一些二維視頻，甚至於交互。

由於ToB面向的多數是小微，甚至於大企業，所以從行業整體上看，藍色、紅色、商務高端黑居多，這樣給用户的感覺也比較大氣些。

所以在進行網頁的設計時，除了常規的交互，還要融入一些“情感化的元素”——簡單而言就是活潑帶嚴肅，簡單不雜亂；讓用户在獲取信息的同時，也能體驗到“品牌帶來的情感關懷”。

二、內容的設計

對於ToB類網站，除了架構、交互、視覺這些方面之外，還有一個非常重要的點就是“內容的設計”；內容直接決定了“用户是否理解該產品”，產品能夠解決我什麼痛點。

用户使用網站，本質就好比用户在和你對話一樣，當一段對話變得驢頭不對馬嘴的時候，用户就會抓狂；然後可能會生氣的離開，我見過很多網站都説自己“非常厲害”，但沒有把具體的核心展示出來。

1. 用户角度撰寫內容

品牌或者產品部門在做網站的時候，不要閉門造車，一定要有“用户思維”；要幻想着對面就是你的客户，我要和他説什麼，這樣有了情景感，才能打磨出來基礎的內容。

我以首頁為例，當用户一進門，那麼我們是否需要介紹下“自己是做什麼的”，從而自身的“使命、願景、價值觀”是不是要告訴客户；其次我能給用户提供説什麼樣的“服務”，什麼樣的幫助（功能）。

我如何展示我的優勢，要站在用户角度去體會，在體會網站的角度要理解用户；因為用户非常的忙，短時間找不到自己想要的東西，可能就會離開，這樣就會白白流失。

其次有些東西不必“説太多”，網站本身就是“自吹自擂”，當好話説多了，用户就會覺得有壓力；所以一定要提煉功能甚至於服務的關鍵詞，簡單直白即可。

在記錄用户想法的時候儘可能使用原話，理解用户在描述他們的需求時使用的語言；這樣一來，在編寫內容的時候就能知道用户通常喜歡聽是什麼樣的詞彙了，當然也可以適當的加一些“專業化語”，尤其是描述“技術類產品的時候”。

用户來到網站一般都是帶着“疑問”或者為了完成某個任務而來，極少是因為“網站看起來好看而來的”；當然也不排除這種情況（部分設計師為了學習，帶着視覺維度參觀而已）。

用户最想要的是在“官網”搜尋到自己想要的答案，所以最好的形式是跟用户對話，或者讓用户直接註冊體驗；所以本質內容一部分是為了解決用户的問題而生，另一部分是“介紹自身業務”。

多數的B端用户很少是為了“認真閲讀產品內容”而來的，客户在網頁上採用瀏覽信息的方式來快速的“過濾掉無關的內容”；所以首頁甚至於子頁面內容規劃的時候，減少文字的堆砌。

網站的文字大段整段的出現，會讓用户看起來很傷神而不聚焦，當一段描述寫好之後，一定要仔細的“站在用户角度”閲讀、刪減，儘可能呈現重點，避免廢話連篇的佔用網頁空間。

2. 小標題與留白

在編寫不同頁面內容時候，尤其是產品介紹，能用圖片展示儘可能用圖片展示”；如果需要圖片加文字的形式，最好將大篇幅的內容寫成幾個部分，並標上不同的小標題。

這樣用户在閲讀的時候，就會先看“主要標題”，再去了解細節，用户就不用浪費很多時間閲讀自己不需要的“章節了”；章節小標題的意義是為了“概述一段文字”，因此標題需要詳細斟酌，切不可隨意安放一句話就當做主題。

小標題與內容要比其他的信息接近，當標題和上下的文字間距相同的時候，標題就會飄在兩端文字之間，容易讓用户茫然。

標題與文字應當使用“緊湊原則”來佈局，這樣用户就能準確的知道標題要概述的是哪個部分的核心內容。

留白也是相當重要的一個部分，從網站原型到“內容設計”，網頁分為“無心留白和有意留白”；有的人可能認為內容一定要多，這樣才能展示官網業務的飽和，其實這是一種“錯誤的理解方式”。

無心留白加上交互能讓界面有“呼吸的空間”，段落中的留白讓網頁更加通透，來訪的客户也不會被大量的“文字信息”壓的喘不過來氣。

原型中，有些內容也可以用“圖標進行代替”，但是基礎PRD原型上要和設計師告知。

如果使用到圖文搭配，圖片的大小需要仔細考慮，可以根據網頁設計的大小來按品牌圖片的排版和佈局，圖片使用盡可能不要佔據整個屏幕；因為用户看到滿屏的一個大圖很可能就不會關注其他了，也可能因為一張圖片忘記往下滾動而錯失其他方面的核心內容。

3. 內容撰寫的“差異化”

要知道，在一個行業我們有很多的競爭對手，每個競爭對手所“切”的用户羣體也是不同的；但產品的主要方向定位做好後，從內容的差異化上，我們也要區別於“其他競爭對手”，避免產生直線競爭。

內容差異化主要表現在“產品”、“服務”、“形象”三個版塊。

官網內容起草的同事要了解業務，要和產品、運營去對接打磨，提煉自己產品與去其他產品哪個方面更有優勢；我們是不是有競爭對手沒有的功能，我們的產品核心賣點是什麼？這樣提煉的內容就有差異化了。

服務角度的差異化主要體現在“自身和競爭對手而比”，我們哪些是競爭對手不具備的，或者更好的，甚至於自身已經為哪些企業提供了哪些服務，都可以進行展示。

在某些層面上來説，已經選擇我們的種子用户，在某些方面就代表了“認可我們的服務”。

比如自身幫助客户提供運營方案，陪同客户一起策劃活動，這些都能成為“細節的背書”；目前主流市場，多數都只是提供“SOP”，不提供深度。

形象的具體差異主要在“UI”表現層面，如果產品和服務都和競爭對手很相似；那麼就可以從形象維度拉開差距，這方面直接可以影響用户的視覺體驗，具有強化的作用。

不管是標題、架構、內容、留白，這些不同的差異本質都是在為“用户傳遞價值信息”；信息都是獲取用户認同，增加情感、信任的一種手法，最終為用户的“決策”來服務，所以驅動這一切的還是“付費”。

三、引導註冊版塊設計

ToB的網站不僅僅是為了展示，核心是為了獲客；那麼在ToB的網頁中，肯定少不了網頁註冊，免費體驗流程的設計；所以基於這樣的特性，我們要針對性的做出內容和路徑的優化。

註冊可以單獨放在一個“版塊”，甚至於做一個icon。

當然一般的SAAS、SCRM會放在“產品解決方案”下面或者定價版塊，甚至於穿插在任何一個可視化的角落，來引導用户，當用户註冊了也就意味着自身獲得了“一個銷售線索”。

1. 為什麼要做引導註冊行為

ToB產品的銷售鏈路和TOC不同，並且對註冊體驗有很大的影響，ToB獲客一般是內容營銷、案例營銷、搜索引擎投放等策略，那也就意味着“有兩次跳轉的邏輯”。

用户第一次的接收信息本質是“一個落地頁，一份PDF，一篇文章，甚至於一個廣告”，我們可以稱之為“內容獲客載體”。

載體肯定不是正式的官網，相對來説是“內容較多、有誘惑力，甚至於名氣大、流量大的地方。

而自身官網網站呢，通常沒什麼名氣，也沒什麼大流量，流量主要來源於“內容獲客的載體引流，甚至於投放”。

從用户的使用場景來分析，註冊肯定不是用户的第一需求，他肯定是為了一個利益點，甚至於“一個操作手冊”、“一份解決方案”的獲取而填寫的信息後才能得到。

所以在這樣的場景下，用户在迫不得已的完成了註冊，然後填寫了“文件下載的申請，甚至於產品體驗的申請”。

那麼接下來就會面臨兩個方面的核心問題：

• 用户為什麼要填寫這份表單；
• 為什麼落地頁設計需要用户填寫試用。

我們先從第一個問題在來進行設定，用户填寫這份表單，通常是基於兩個前提：其一是對“產品真正感興趣，希望可以使用”，其二是對落地頁上面的內容所吸引；希望通過填寫，等到官方審核後，得到想要的資料。

再來看第二個維度，為什麼落地頁設計需要填寫產品試用，其一公司的銷售KA，商務希望獲取這些信息，通過信息聯繫到潛在客户，注意的是希望用户填寫試用申請是為了“獲取線索”。

在填寫試用後，如果後台設定人工審核機制，那對用户來説，可能就會等的不耐煩而放棄；上述是多數ToB網站的產品路徑設計，這種路徑本質並沒有滿足用户的“所見即所得”。

所以為了用户能夠體驗，商務獲取銷售線索，這裏可以優化步驟為——用户自助申請、填寫信息通過、跳到學院、下載文件（3-7天產品部分功能體驗權限）、若想體驗更多，添加商務的聯繫方式。

產品的每一步設計，都有它的意義所在，並不是為了設計而設計；我們需要了解用户背後的邏輯，人性顯得格外的重要。

2. 引導行為“背後”最優路徑

我們要從“用户行為的全鏈路角度思考”，看到一篇筆記，方法論過來；想領取資料，用户註冊、登錄、填寫信息、申請試用、下載文件。

那麼對於ToB來説，最優的流程應該為：

路徑一：內容載體落地頁——點擊產品——跳到描述頁——判斷是否登錄——已經登錄——產品試用頁面——註冊登錄——跳轉學院——下載資料。

路徑二：內容落地頁——點擊產品——描述頁——官網——註冊——是否有賬號——否註冊登錄——有直接登錄——跳轉下載文件的鏈接（學院）——下載。

在註冊的過程中，默認直接填寫表單，甚至於把“添加好友”這個環節設定在“註冊之後”；並且不做強制性加好友，商務審核的機制，反而會使用户體驗更加的流暢。

不過現在的多數ToB網站設計對於新用户都是賬號+密碼或者手機號+驗證碼的形式，兩者從單純的登錄場景來分析，密碼可能會因為與其他網站撞庫而被破解，這也源於“用户密碼設定的簡單複雜難度”。

而驗證碼的登錄，能夠讓用户有更好的體驗，但是驗證碼可能會涉及到一些額外的維護成本，不過對於ToB產品而言，量一般不會太大。

引導註冊是ToB網站設計非常重要的一步，當然這肯定是基於“網站成型後更深一步；它雖然是一個登陸入口，但入口也需要大量的“被設計和融入”，這也是我為什麼強調官網上要做一個學院的核心原因。

因為內容是載體，載體上有很多關鍵詞會被搜索引擎抓取，而抓取後，客户通過自然搜索外鏈會找到“你的官網”，從而註冊你的產品，給你帶來線索。

四、網站上線與獲客

當網站的整體框架、UI、內容、解決方案設計以後，我們也要考慮如何使用網站來“進行獲客”的一些策略。

網站和SEO是相配的，如果單純只有網頁，那本質沒有太大作用；我們需要將內容與網站融合為一起，讓技術團隊做網站的時候，產品也要梳理好相關的“數據埋點”，尤其是內容學院路徑下的埋點。

1. 網站的開發與上線注意

當我們把“PRD”和UI都做的非常成功，下一步可能就涉及到技術的開發與上線的問題；首先作為官網項目小組，其一確認的是跟進整體項目進度，其二避免的是上線之後“BUG”的問題。

技術在開發的時候，儘可能溝通“PC+移動”的適配功能，其次網站的色調和調配也需要注意整體和諧。

色調在頁面裏能夠起到多種效果，利用強烈的對照可以凸顯頁面的核心；或者是利用色調的調配，也能夠讓網頁達到十分好的效果，通常情況下，底部欄的色調是比較重的。

這樣可以壓制住頁面上面的色調，倘若不適用這種方法論，整個網頁可能會顯得頭重腳輕，頁面底部的文字和圖片會有種“飄出去”的感覺。

再者做好“網站總體的分塊”，有的用的全白，就可以避免這種問題，有的黑白相間是最難掌握的。

分塊其實是一項很重要又很難掌握的工作，頁面分塊不同於雜誌分塊，雜誌的分塊是有邊界的，雜誌的設計師可以經過邊界來形成立體感；但頁面分塊弱化了邊界問題，因為電腦屏幕可以上下左右移動。

所以ToB網站的頁面分塊更加的重要，可以經過不同顏色、框、線來進行分塊；但分塊的素材不該過於“奪目”，避免影響客户對內容的整體瀏覽。

還有便是“字體配置樣式的問題”，做ToB網站字體配置不要有過度的樣式，在進行網頁策略化格調上的操作時；總是感覺過多的字體能夠讓官網看起來不是特別死板，其實不是這樣的。

ToB網站講究的是策劃，而不是顏色的堆砌和款式的堆積，要講究內容的各種字體款式的顏色運用，這樣才能看得出來策劃人員技術實力和策劃功底。

一般來説，網站上線前檢查下，運用的字體不要超出3種款式，這樣才不會看起來特別的亂；而且用户一打眼，就可以看到想要的資訊，而不是刷出來的“濃妝豔抹”，沒有核心。

2. 常規網站獲客的方法有哪些

目前很多的ToB網站標配的是“內容版塊”，即內容學院，學院裏面規劃了很多的版塊，比如：行業的白皮書、活動的解決方案、客户的成功案例、TOC的增長裂變方法、PPT、PDF參考資料等等。

這些都是為了後續內容在搜索引擎優化來獲取銷售線索的主要方式，市場頭部的案例有：釘釘、飛書，他們把很多活動的線下案例都做到了“線上”，通過內容的形式輸出方法論。

實際上，每個公司的獲客策略都不是單一的，有的通過優惠活動去引導用户註冊，有的在不同專題頁面引導客户”留下線索等，比如阿里雲前期的使用雲服務器低至幾十塊/年的橫幅。

那麼對於網站最好的形式，還是“內容的優化”，圍繞長尾關鍵詞、品牌關鍵詞，甚至於痛點方案的關鍵詞去“鋪設內容”。

比如公司做的產品是SCRM，核心聚焦於增長，長尾進行鋪設；待用户通過搜索引擎搜索，可能就抓取到了“網站的內容”，從而也就被官網的某個方案所吸引註冊。

用户的需求等於關鍵詞，無論是信息流（信息找人）還是人找信息，這個的IR的邏輯從來都沒有變過，內容關鍵詞的挖掘；其一是搜索引擎的下拉框，其二是行業詞、小詞、品牌詞、功能詞，循環漸進。

一個完善的官網搭建，大概需要這幾個核心值得我們注意，即“內容的策劃”、“整體架構的設定”、“UI風格的掌握”、“引導註冊版塊的設計”、“後續內容優化的長尾思考”、“上線前的測試”等。

五、寫在最後

網站的設計並不是一個人可以完成的，大部分的時候需要產品經理出原型、定好佈局、品牌策劃做內容，然後交互，最後設計師設計頁面。

官網不僅僅考驗審美水平，也考驗產品經理對用户，公司品牌業務的認知熟悉度；只有真正瞭解品牌和業務，瞭解目標客户，才能將產品推銷出去。

作者：王智遠， 公眾號：王智遠（Z201440）

本文由 @王智遠 原創發佈於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議