騰訊用這個實戰案例，教你學會設計To B類網站

編者按：本文騰訊設計師用「防水墻」的實戰項目，展示專業的設計流程和設計思考過程，如何突破以往的To B 網站設計套路，如何用「經典銷售法則」介紹產品賣點，如何提供更強的品牌認知，打開這篇好文，一一為你揭曉。

一、項目背景

1. 「騰訊防水墻」是什么？

在互聯網如火如荼發展的背后，黑灰產大軍暗流涌動，無處不在，各類業務活動面臨被刷的風險，業務安全問題不容小覷。「騰訊防水墻」是由安全平臺部沉淀十幾年黑產對抗經驗，推出的業務安全解決方案，為公司內外數百業務、上千個活動提供安全護航服務。防水墻專注業務安全服務，運用 AI 及大數據分析等技術解決業務欺詐，薅羊毛，刷單，爬蟲等自動機攻擊問題。

2. 為什么設計官網

防水墻除了覆蓋公司7大 BG，為1000+業務活動服務，還通過騰訊云對外業務安全能力開放，為電商、新零售、出行、金融、文娛等各行業的公司提供服務，解決互聯網+業務安全問題。設計品牌官網，目的提供客戶了解防水墻的渠道，希望通過產品及服務介紹，和品牌價值傳遞，讓客戶對防水墻品牌、產品、服務產生認知和認可，進而完成購買。

二、設計發現

如今全球網絡安全產業快速發展，市場規模逐年攀升，越來越多品牌對于自身品牌和實力的展示也越來越重視。在 toB 能力開放的初期，為了最快速地了解外部企業客戶的需求和喜好，我們對比分析了跟防水墻同類的技術型 B類產品企業官網。

1. toB 企業官網有設計公式？

提到當下最熱的B類服務產品，最先聯想到云計算產品。以大牌公有云產品：亞馬遜AWS、微軟Azure、IBM、Google Cloud、阿里云、騰訊云為例，我們想看下 to B 企業官網有什么設計特征與原則，應該學習或注意的。

結果很意外發現它們好像是由一套公式生成的。這使我們很困惑，「千篇一律」的視覺傳達、「固定模式」的信息架構和內容組織，如果我們也套用「這個公式」，很快就可以完成這個項目。但是這樣怎么能夠體現出防水墻的品牌差異？怎么刺激客戶對防水墻產品的產生進一步的了解和使用意愿？

帶著這兩個疑問，我們再去看了垂直競爭市場——其他業務安全產品情況是怎么樣的，有兩方面的發現：

「垂直B類產品」品牌展示的花樣多了好多，有插畫、概念圖、實景照片，或生動、或酷炫或接地氣。什么樣方式適合防水墻，而又不同質化，是我們需要再思考的。

網站信息架構雖然還是基本一致，但篩選哪些內容和信息（賣點）最先 push 給客戶，有了明顯的差別。

極驗作為較早發展起來的行為驗證品牌，「服務于全球20萬家客戶」，這是它們技術和口碑最好的證明。而猛犸反欺詐兩次入選 Gartner（全球最具權威的IT研究與顧問咨詢公司）發布的「Gartner Cool Vendors」榜單，這對展示它們對「欺詐者的識別準確度」非常有說服力。

這讓我們想到「B類客戶的商務決策」本質也是屬于「消費者購買決策」的一種。所以就像 B2C 的電商網站，信息架構也是高度相似度的，這映射了目標用戶群體的購買決策路徑是相同的。所以 toB 企業官網，我們的設計重點在于提供影響客戶價值評估的信息，并做好「信息加工」，從而影響客戶決策。當然這里的信息加工絕不是指弄虛作假，誤導客戶，而是針對信息渠道特點，不同客戶的信息量和信息種類偏好，以最為恰當的方式呈現出來，給到客戶一個充足的選擇防水墻的理由。

三、設計目標及策略

1. 防水墻的官網如何設計？

結合項目目標和我們前期的設計分析發現，我們的設計目標和設計思路如下：

• 組織對客戶有效的內容信息和呈現方式：技術型 B類客戶在做判斷時通常是偏理性的，需要我們了解潛在客戶特征，梳理他們需要多少信息和需要什么形式的信息。
• 建立鮮明的品牌認知：品牌的曝光，能夠幫助防水墻的脫穎而出，記憶深刻；打造適合但不一樣的創新元素，傳達品牌概念與內容，用戶更好的理解和接收。
• 保持設計的統一和復用：隨著產品發展和 toB 市場情況變化，我們可能會持續&快速更新子產品、子業務；模塊布局的統一不僅減少用戶閱讀成本，還能保持體驗的一致性；復用設計也可以有效的節約設計和研發成本。

四、組織對客戶決策有效的內容信息和呈現方式

我們知道 toB 類客戶的決策可能很復雜，決不僅是訪問官網介紹的一個人可以決定的。而且 toB 市場中的大客戶，決策鏈條更為復雜，涉及到人員可能很多。在官網的設計過程中，我們先簡化復雜性，每個訪問到官網的人都是在客戶群體中了解和傳達防水墻品牌信息和實力的關鍵人物。從項目目標出發，將客戶路徑進行拆分，得出我們的網站首層信息架構。

1. 依據客戶決策路徑組織信息架構

2. 應用「經典銷售法則」組織介紹內容

FABE法則是非常典型的利益銷售法，它通過四個關鍵關節，將一個商品分別從四個層次加以分析、記錄，并整理成商品銷售的訴求點。

如：活動反作弊、帳號安全防護子產品介紹頁

3. 設計多種樣式展示產品賣點

驗證碼作為防水墻最成熟和重要的子產品，它的賣點提煉需要更為用心。首先對試用&選購驗證碼的商戶進行了訪談，發現客戶決策因素最重要的是用戶體驗和安全。

我們在驗證碼的子產品頁進行介紹時整合了特性、優勢、解決效果、技術佐證等多項內容，突出賣點「安全和體驗兼得」。

主要的「佐證」 — 客戶案例展示樣式有三種，「LOGO墻」可以展示最多，「語錄卡」能承載大客戶的使用效果，更有說服力；「企業卡」主要展現客戶行業屬性。

五、提供更強的品牌認知

1. 品牌的「顯現」

如何去敘述品牌是目前不得不面對的問題，設計側根據問題羅列下列解決方案：

官網的色彩主要提取標志當中的焦點色，首頁大面積的藍色、圖標的藍色和點擊態的藍色遍布整個網站，目的在于沖擊用戶的眼球，給用戶帶來色彩上對品牌的認知。

首頁 Banner 采用了標志中的輔助圖形，強化用戶對防水墻品牌的認知。

「醒目」的標語是很好的解決方案。

2. 品牌的價值觀

強大的品牌是獨一無二的，需要做的是與別人不一樣的事情。防水墻對應的競品是「極驗」「谷歌驗證碼」「網易驗證碼」等網站，但防水墻官網是一個聚合產品型的網站，安全產品是防水墻的特色，這樣與一般的云類別網站也有很大區別。

「安全」成為防水墻官網的主基調，強化防水墻的價值有以下幾點：

去除復雜元素，用準確又有效的方式表達內容，提升設計的嚴肅感。

使用大量的負空間，空白的區域可以讓用戶更加專注內容的描述。

圖形運用的一致性，尋找與安全相關的圖形元素。

3. 打造不一樣的創新元素

觀察各種競品網站，所使用的元素大同小異，從架構到圖標，云產品網站的都具備高度的一致，如何去打造不一樣的聚合產品型網站是設計側面對的很大挑戰。其中元素是將文字內容、故事或思想以視覺化的方式呈現，所以適合的元素有著視覺傳達與用戶交流的功能性。

4. 如何在產品型網站中運用抽象元素的優點

使用抽象敘述概念

整個防水墻的文案離不開「守護」「防護」兩字，圖形的運用局限性很大，使用抽象的元素能夠使的畫面更加特別，擴大使用范圍之余，也能很好的和產品形成默契的作用。

抽象的元素有著很大的發揮空間，結合安全的基調，工程數學的圖紙可以很好敘述整個官網的圖形元素，定義元素的拼合，可以很好賦予產品的概念。

例如在首頁的產品模塊中，六邊形代表驗證碼，橢圓形代表守護，將元素進行重組拼合，進行嘗試，發現多種不一樣定義。

合適的元素可以拉近與用戶的距離

簡單的幾何圖形都是我們從小學會辨認一個物體的重要元素，賦予簡單圖形的創新，能夠友好的通過圖形來接連網頁的關系，還有圖形與用戶直接的關系。

每個代表性的抽象圖形，可以很好貫穿整個產品介紹頁，圖形的一致性可以減少用戶對于新元素的學習成本，同時使用鮮明的品牌色彩，外加抽象的圖形表達，很好詮釋的安全的重要性，例如驗證碼產品頁延續了六邊形的圖形元素，強化品牌概念，提高用戶理解能力。

5. 如何通過圖形的主次關系，給網站帶來不一樣的視覺體驗

傳統型產品型網站強調的是文字的重要性，為了減少文字帶來的視覺壓力，增加適當的圖形襯托與文字相符的關聯性。通過手機端網頁和 APP 發現，圖形會大面積的使用，甚至有些模塊取消了文字的提示。

防水墻官網首頁中，使用超大圖形風格圖標，平衡好圖形和文字兩者的主次關系。首頁的重點在于展示能力，通過創新的圖形元素，目的在于減小用戶對于文字的理解壓力，增強視覺傳達的表現力。

六、設計的統一與復用

1. 保持「一致」

「一致」代表視覺層級，即是傳達的咨詢。如何組織、排序內容，讓購買防水墻產品的商業用戶能夠盡可能輕易地理解咨詢。可以利用視覺層級去區分內容的重要性，引導用戶瀏覽的順序或焦點，第一個關注到層級、第二、第三、第四等。

防水墻官網中保持統一的視覺層級關系，善用視覺層級方法，排序重要元素，能夠有效傳達意念和信息給到用戶，讓用戶更輕易地閱讀瀏覽。

2. 保持「秩序」

「秩序」代表視覺整體，即是網站整體編排系統。利用柵格系統可以讓網頁的信息呈現更加美觀一度，更具可用性，網頁將更加的靈活與規范，根據不同的版式或者劃分區塊，利用柵格系統的網頁非常的有條理性。

目前防水墻官網采取12柵格的方案，更寬的間隙可以讓網頁看起來更加舒服，以996的最大寬度自適應，目的在于更好適配大部分的屏幕尺寸，保持統一的用戶體驗。

3. 頁面模版

在產品頁和解決方案頁中給予整個模塊的定義，對于用戶來說，模塊布局的統一大大減少了閱讀的學習成本；對于設計師來說，頁面的布局設計是可復用的，這將大大減少設計成本。

七、項目歷程及效果

歷時4個月，官網承載了大部分的驗證碼用戶的轉化，用戶通過官網實現了自主了解、接入和使用驗證碼的流程。后續將把官網打造成驗證碼自助服務平臺。

官網體驗-Web端&移動端

歡迎體驗防水墻官網，WEB鏈接為：007.qq.com

移動端可掃碼瀏覽

歡迎關注「騰訊CDC體驗設計」的微信公眾號：

「優秀團隊的改版設計案例」

• 《如何打造極簡設計？來看英才APP的實戰案例！》
• 《上億人使用的唱吧APP V8.6 改版設計過程揭秘》
• 《上億人使用的泛娛樂微信店，是如何做改版設計的？》