TOB官方網站搭建指南

“TOB的官網有兩個方面作用

一:業務展示，二:增加外鏈做內容優化獲客”。

不管是PC還是移動端，公司的官網可以說是“一家公司的門店”，有人可能認為，移動互聯網時代誰還使用網站？現在不都是手機體驗么，那你可就理解偏差了，對于TOB的業務，尤其是SCRM，SAAS類，多數的后臺還是設計在PC端。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.風格設計與整體結構

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

設計當中主要包含了2個板塊核心內容：
1.整體風格，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，一篇文章，甚至于一個廣告”,我們可以稱之為“內容獲客載體”。

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

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

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

所以在這樣的場景下，用戶在迫不得已的完成了注冊，然后填寫了“文件下載的申請，甚至于產品體驗的申請”，那么接下來就會面臨兩個方面的核心問題：

1.用戶為什么要填寫這份表單
2.為什么落地頁設計需要用戶填寫試用。

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

再來看第二個維度，為什么落地頁設計需要填寫產品試用，其一公司的銷售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風格的掌握”，“引導注冊版塊的設計”，“后續內容優化的長尾思考”，上線前的測試等。

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

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

本文經授權轉載自微信公眾號：王智遠