騰訊防水墻官網(wǎng)項目設計總結

5 評論 14708 瀏覽 154 收藏 19 分鐘

本文作者將結合自身的項目設計經(jīng)驗,與你分享,enjoy~

一. 項目背景

1.“騰訊防水墻”是什么?

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

2. 為什么設計官網(wǎng)

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

二. 設計發(fā)現(xiàn)

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

1. to B 企業(yè)官網(wǎng)有設計公式?

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

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

帶著這兩個疑問,我們再去看了垂直競爭市場——其他業(yè)務安全產(chǎn)品情況是怎么樣的,有兩方面的發(fā)現(xiàn):

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

(2)網(wǎng)站信息架構雖然還是基本一致,但篩選哪些內容和信息(賣點)最先push給客戶,有了明顯的差別。

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

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

三. 設計目標及策略

防水墻的官網(wǎng)如何設計?

結合項目目標和我們前期的設計分析發(fā)現(xiàn),我們的設計目標和設計思路如下:

(1)組織對客戶有效的內容信息和呈現(xiàn)方式

技術型B類客戶在做判斷時通常是偏理性的,需要我們了解潛在客戶特征,梳理他們需要多少信息和需要什么形式的信息。

(2)建立鮮明的品牌認知

品牌的曝光,能夠幫助防水墻的脫穎而出,記憶深刻;打造適合但不一樣的創(chuàng)新元素,傳達品牌概念與內容,用戶更好的理解和接收。

(3)保持設計的統(tǒng)一和復用

隨著產(chǎn)品發(fā)展和toB市場情況變化,我們可能會持續(xù)&快速更新子產(chǎn)品、子業(yè)務;模塊布局的統(tǒng)一不僅減少用戶閱讀成本,還能保持體驗的一致性;復用設計也可以有效的節(jié)約設計和研發(fā)成本。

四. 組織對客戶決策有效的內容信息和呈現(xiàn)方式

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

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

2. 應用“經(jīng)典銷售法則”組織介紹內容

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

如:活動反作弊、帳號安全防護子產(chǎn)品介紹頁

3. 設計多種樣式展示產(chǎn)品賣點

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

我們在驗證碼的子產(chǎn)品頁進行介紹時整合了特性、優(yōu)勢、解決效果、技術佐證等多項內容,突出賣點“安全和體驗兼得”。

主要的“佐證” — 客戶案例展示樣式有三種,“LOGO墻”可以展示最多,“語錄卡”能承載大客戶的使用效果,更有說服力;“企業(yè)卡”主要展現(xiàn)客戶行業(yè)屬性。

五. 提供更強的品牌認知

1. 品牌的“顯現(xiàn)”

如何去敘述品牌是目前不得不面對的問題,設計側根據(jù)問題羅列下列解決方案:

(1)官網(wǎng)的色彩主要提取標志當中的焦點色,首頁大面積的藍色、圖標的藍色和點擊態(tài)的藍色遍布整個網(wǎng)站,目的在于沖擊用戶的眼球,給用戶帶來色彩上對與品牌的認知

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

(3)“醒目”的標語是很好的解決方案

2. 品牌的價值觀

強大的品牌是獨一無二的,需要做的是與別人不一樣的事情。防水墻對應的競品是“極驗”“谷歌驗證碼”“網(wǎng)易驗證碼”等網(wǎng)站,但防水墻官網(wǎng)是一個聚合產(chǎn)品型的網(wǎng)站,安全產(chǎn)品是防水墻的特色,這樣與一般的云類別網(wǎng)站也有很大區(qū)別。

“安全”成為防水墻官網(wǎng)的主基調,強化防水墻的價值有以下幾點:

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

(2)使用大量的負空間,空白的區(qū)域可以讓用戶更加專注內容的描述

(3)圖形運用的一致性,尋找與安全相關的圖形元素

六. 打造不一樣的創(chuàng)新元素

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

如何在產(chǎn)品型網(wǎng)站中運用抽象元素的優(yōu)點

(1)使用抽象敘述概念

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

抽象的元素有著很大的發(fā)揮空間,結合安全的基調,工程數(shù)學的圖紙可以很好敘述整個官網(wǎng)的圖形元素,定義元素的拼合,可以很好賦予產(chǎn)品的概念。

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

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

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

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

(3)如何通過圖形的主次關系,給網(wǎng)站帶來不一樣的視覺體驗

傳統(tǒng)型產(chǎn)品型網(wǎng)站強調的是文字的重要性,為了減少文字帶來的視覺壓力,增加適當?shù)膱D形襯托與文字相符的關聯(lián)性。通過手機端網(wǎng)頁和APP發(fā)現(xiàn),圖形會大面積的使用,甚至有些模塊取消了文字的提示。

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

七. 設計的統(tǒng)一與復用

1. 保持“一致”

“一致”代表視覺層級,即是傳達的咨詢。如何組織、排序內容,讓購買防水墻產(chǎn)品的商業(yè)用戶能夠盡可能輕易地理解咨詢??梢岳靡曈X層級去區(qū)分內容的重要性,引導用戶瀏覽的順序或焦點,第一個關注到層級、第二、第三、第四…等。

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

2. 保持“秩序”

“秩序”代表視覺整體,即是網(wǎng)站整體編排系統(tǒng)。利用柵格系統(tǒng)可以讓網(wǎng)頁的信息呈現(xiàn)更加美觀一度,更具可用性,網(wǎng)頁將更加的靈活與規(guī)范,根據(jù)不同的版式或者劃分區(qū)塊,利用柵格系統(tǒng)的網(wǎng)頁非常的有條理性。

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

3. 頁面模版

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

八. 項目歷程及效果

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

 

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@騰訊CDC,作者@jessica

題圖來自 Pixabay,基于 CC0 協(xié)議

更多精彩內容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 思路很清晰,挺好的,官網(wǎng)產(chǎn)品其實核心點還是在于內容如何組織和呈現(xiàn)。

    來自廣東 回復
  2. 說實話,看了線上站,總覺得不像騰訊設計出品…

    來自江蘇 回復
    1. 當然了只是針對表現(xiàn)層哦

      來自江蘇 回復
  3. 學習了。FABE——Feature、Advantage、Benifits、Evidence

    來自上海 回復
  4. 說了很多也看了官網(wǎng),網(wǎng)站表達的是營銷的能力和用戶的心理需求,但很大程度上必須滿足如何讓用戶明白,找什么,哪里去,要什么?電商的設計模式和企業(yè)的產(chǎn)品宣傳本身就是很大的差異性。

    來自廣東 回復