有破有立，再造升級。官網(wǎng)作為會員體系中最主要的營銷渠道，突破原有的資源壁壘，將QQ三大會員體系官網(wǎng)進(jìn)行再造升級，對商業(yè)目標(biāo)的達(dá)成起到至關(guān)重要的作用，同時也能給QQ用戶提供更為全面的會員服務(wù)。我們將從確定目標(biāo)價值、構(gòu)建官網(wǎng)架構(gòu)、設(shè)計語言升級、打造通用組件這幾個方面一一道來QQ VIP官網(wǎng)的再設(shè)計之路。

項目背景

QQ原有的兩大會員體系QQ會員和QQ空間黃鉆，原本互相獨(dú)立，產(chǎn)品運(yùn)營和用戶體驗(yàn)上存在很多差異。但QQ空間本身是基于QQ關(guān)系鏈而存在的社交平臺，對用戶而言QQ空間屬于QQ產(chǎn)品下的業(yè)務(wù)分支，因此QQ會員和QQ空間黃鉆兩大會員業(yè)務(wù)也應(yīng)該突破原本的資源壁壘，提供統(tǒng)一的用戶體驗(yàn)。

從兩大會員的用戶數(shù)據(jù)可以看出，目前同時開通了會員和黃鉆業(yè)務(wù)的雙棲用戶體量大，加之高付費(fèi)的頭部用戶是提升產(chǎn)品ARPU值的關(guān)鍵，我們急需擴(kuò)充會員體系來滿足這兩類用戶的需求。于是大會員應(yīng)運(yùn)而生，它的特權(quán)同時覆蓋了QQ和QQ空間中的使用場景，主要包括超級會員和豪華黃鉆已有的特權(quán)，并拓展了線下生活特權(quán)和線上包月優(yōu)惠特權(quán)。

由于三大會員體系各自業(yè)務(wù)發(fā)展存在一定瓶頸，它們之間錯綜復(fù)雜的關(guān)系和差異對用戶來說認(rèn)知門檻高，我們急需突破單個會員體系的業(yè)務(wù)局限，用更長遠(yuǎn)的視角來縱觀QQ整個會員服務(wù)的全景。

官網(wǎng)作為會員體系中最主要的營銷渠道，將三大會員官網(wǎng)進(jìn)行有效的收歸整合，對商業(yè)目標(biāo)的達(dá)成起到至關(guān)重要的作用，同時也能給QQ用戶提供更為全面的會員服務(wù)。

接下來將從確定目標(biāo)價值、構(gòu)建官網(wǎng)架構(gòu)、設(shè)計語言升級、打造通用組件幾個方面來詳細(xì)闡述下我們是如何對會員體系官網(wǎng)進(jìn)行設(shè)計整合的。

打造協(xié)同效用，確定目標(biāo)價值

QQ會員和QQ空間黃鉆是QQ平臺上早已運(yùn)營多年的會員體系，在會員類型、推廣渠道、特權(quán)覆蓋場景、界面風(fēng)格、支付體驗(yàn)等方面存在不少差異。

會員包括普通會員和超級會員兩種會員類型，特權(quán)主要覆蓋QQ中的使用場景，例如QQ聊天、身份展示、QQ好友和群管理、游戲、閱讀、動漫和QQ郵箱等。黃鉆包括普通黃鉆和豪華黃鉆兩種會員類型，特權(quán)主要覆蓋QQ空間中的使用場景，例如好友動態(tài)、身份展示、個人空間展示、好友互訪、好友互動等。

官網(wǎng)承載著會員體系中的核心內(nèi)容，是觸達(dá)用戶轉(zhuǎn)化的主要平臺。我們針對已有的會員官網(wǎng)和黃鉆官網(wǎng)進(jìn)行梳理，了解兩個官網(wǎng)間的相同點(diǎn)和差異點(diǎn)。

通過首頁對比可以看出，大部分內(nèi)容模塊具有相同點(diǎn)，主要包括：品牌曝光、用戶及會員信息、特權(quán)信息、開通續(xù)費(fèi)入口、活動推廣等，而差異性主要體現(xiàn)在模塊分布區(qū)域以及信息展示方式方面。

我們通過縱向分析三大會員體系的差異，橫向打通共有能力，打造協(xié)同效用來創(chuàng)造更大的用戶和產(chǎn)品價值。

將三大會員體系官網(wǎng)進(jìn)行整合，對用戶而言，能夠覆蓋到不同維度的用戶需求和場景，高效觸達(dá)到更多感興趣的特權(quán)內(nèi)容，簡化付費(fèi)路徑。對產(chǎn)品而言，可以打造階梯化的增值服務(wù)，進(jìn)行分層運(yùn)營，三大會員體系間可進(jìn)行資源整合，相互交叉引流，提升付費(fèi)率。

以商業(yè)目標(biāo)為指導(dǎo)，在深入理解用戶核心需求和促進(jìn)營收增長的基礎(chǔ)上，構(gòu)建合理的會員體系，制定有效的設(shè)計目標(biāo)，保證官網(wǎng)的體驗(yàn)統(tǒng)一，遵循一致的設(shè)計語言和規(guī)范的同時，求同存異，強(qiáng)化不同會員體系的品牌感知，從而創(chuàng)造更好的用戶體驗(yàn)，提升運(yùn)營效率。

深入會員體系，構(gòu)建官網(wǎng)架構(gòu)

對于一個產(chǎn)品或平臺來講，會員體系的核心包括賣給誰、賣什么、怎么賣三個方面，分別對應(yīng)用戶成長、所得權(quán)益和精細(xì)運(yùn)營三個部分。這三部分決定是否能有效激勵用戶留在體系內(nèi)，在構(gòu)建官網(wǎng)架構(gòu)時需要重點(diǎn)考慮到這三個關(guān)鍵部分進(jìn)行設(shè)計。

用戶成長指的是用戶完整生命周期的體現(xiàn)，細(xì)分會員用戶的生命周期包括：潛在用戶——新開/回流用戶——在網(wǎng)用戶——即將到期用戶——到期用戶。用戶成長一般通過等級、積分、銘牌、排行榜等來刺激用戶，取得進(jìn)步，獲得成就。

所得權(quán)益是用戶根據(jù)所處的成長階段和付出程度的不同，享受不同等級的權(quán)益內(nèi)容，包括各種類型的特權(quán)和福利。權(quán)益內(nèi)容不僅可以滿足用戶對產(chǎn)品的需求，還能有效驅(qū)動用戶不斷付出，實(shí)現(xiàn)用戶成長，從而擁有更多權(quán)益。

精細(xì)運(yùn)營是根據(jù)用戶成長階段不同，進(jìn)行差異化的運(yùn)營策略，可從渠道、活動、付費(fèi)和營銷手段幾個角度考慮，讓用戶需求不斷得到滿足，對產(chǎn)品形成忠誠度，刺激用戶成長。

根據(jù)用戶成長、所得權(quán)益和精細(xì)運(yùn)營三個核心部分，首先梳理出三大會員體系官網(wǎng)所包含的關(guān)鍵信息。

用戶成長的部分主要展示用戶的個人信息，當(dāng)前所處的會員類型、等級和銘牌，會員的成長值和有效期，以及激勵用戶的勛章、任務(wù)和排行榜。

所得權(quán)益主要是三大會員體系中的各項特權(quán)，包括功能特權(quán)、個性化特權(quán)、游戲特權(quán)和一些外部合作的特權(quán)，以及不同的福利禮包。

官網(wǎng)中的精細(xì)運(yùn)營主要是針對不同用戶生命周期進(jìn)行不同的付費(fèi)引導(dǎo)和分層運(yùn)營，例如年費(fèi)分期、業(yè)務(wù)打包優(yōu)惠、新人紅包、連續(xù)包月、會員升級等，以及在不同廣告位進(jìn)行活動推送。

接下來從業(yè)務(wù)角度出發(fā)，分別梳理三大會員體系官網(wǎng)的信息架構(gòu)。根據(jù)三大會員所涵蓋的業(yè)務(wù)內(nèi)容不同，官網(wǎng)中所包含的信息也有所不同。

QQ會員擁有比其他兩個會員體系更豐富的所得權(quán)益，例如游戲特權(quán)以及與外部合作的聯(lián)合特權(quán)等，在精細(xì)運(yùn)營的部分，QQ會員除了有三大會員體系共有的包月和年費(fèi)兩種運(yùn)營方式外，還有和騰訊視頻、QQ音樂等合作的SVIP+聯(lián)合會員，以及和王卡合作的王卡超級會員，分別針對不同類型用戶的需求。

黃鉆和大會員在信息架構(gòu)上突出了成長任務(wù)和排行榜的信息層級，期望通過任務(wù)和排名的形式，刺激用戶主動、頻繁的在官網(wǎng)保持活躍，達(dá)成商業(yè)目標(biāo)。

最后我們依據(jù)前面梳理的官網(wǎng)信息架構(gòu)，來確定頁面結(jié)構(gòu)。

首先確定導(dǎo)航結(jié)構(gòu)，由于QQ會員的業(yè)務(wù)結(jié)構(gòu)在三大會員體系中相對復(fù)雜，存在二級業(yè)務(wù)導(dǎo)航，為了避免兩層導(dǎo)航在頂部占用頭部高度，讓頭部顯得層級多，所以把一級導(dǎo)航放在了頁面底部，二級導(dǎo)航放在頁面頂部，對于沒有二級導(dǎo)航的黃鉆和大會員來說只存在底部的一級導(dǎo)航。

其次根據(jù)三大會員各自所承載的信息和商業(yè)目標(biāo)不同，確定各個模塊的優(yōu)先級排布。

凸顯品牌調(diào)性，設(shè)計語言升級

會員體系中，當(dāng)前所處的會員類型、等級和銘牌，是會員信息里最能讓用戶清晰感知到的，為了有效傳遞會員體系的品牌感，我們在原有銘牌的基礎(chǔ)上結(jié)合騰訊字體進(jìn)行了設(shè)計優(yōu)化。

“視覺識別系統(tǒng)”是品牌調(diào)性的核心，決定了不同產(chǎn)品的延續(xù)性。將用戶已認(rèn)知的“普通會員”、“超級會員”、“普通黃鉆”和“豪華黃鉆”進(jìn)行了延續(xù)，對新推出的“大會員”進(jìn)行了特殊的炫彩漸變色設(shè)計，在這些會員系統(tǒng)的標(biāo)準(zhǔn)配色中結(jié)合不同會員體系的等級差異新增了輔助色系，提升產(chǎn)品的識別度。

整個會員體系的品牌色需要給到用戶升級的感覺，一個比一個“屌”。QQ會員中的普通會員一直以來的形象代表為紅毛QQ，整體品牌色以紅色為主色調(diào)，那一撮紅毛與普通用戶作出差異。而超級會員，則用代表著高貴、光榮、輝煌的金色為主體。

過往超級會員最高等級為SVIP8，而今年我們推出了SVIP9，能達(dá)到這個等級的用戶很少，為了滿足用戶升級欲望，我們將SVIP9進(jìn)行了差異化設(shè)計，引入了代表高雅、莊重、神秘、權(quán)利和力量的黑色，與原超級會員品牌色金色進(jìn)行結(jié)合。黑與金的結(jié)合，色彩的對比帶出的力量感結(jié)合高雅，SVIP9的尊貴感更容易呈現(xiàn)出來。

普通黃鉆以及豪華黃鉆則是在QQ空間品牌色的基礎(chǔ)上增加了輔助色系。新推出的大會員涵蓋了最多種類的會員權(quán)益，結(jié)合其“包羅萬象”的特權(quán)，配色在提取了會員“紅”“金”和黃鉆的“黃”再加入年輕化的“紫”進(jìn)行漸變處理，創(chuàng)造出一種看起來像是“全新的顏色” ，更獨(dú)特、現(xiàn)代，令人耳目一新。

在界面優(yōu)化的過程中，針對不同會員體系我們提取了對應(yīng)的輔助圖形、標(biāo)準(zhǔn)配色等細(xì)節(jié)規(guī)范，在保持統(tǒng)一的同時又有各自會員系統(tǒng)的品牌延續(xù)。

為了將三大會員體系官網(wǎng)的設(shè)計語言統(tǒng)一，將曾經(jīng)分散的信息聚合起來，同時將新的改版內(nèi)容加入進(jìn)去，卡片式的界面表達(dá)則是最合適的載體?？ㄆ瑢⑿畔⒁詤^(qū)塊的形式組織到一起，使內(nèi)容更為集中更適合閱讀。

卡片也是承載故事的可靠工具，而且會員體系又與大眾認(rèn)知里的會員卡、身份證等卡片相一致，所以用戶對于卡片有著極為直觀的認(rèn)知。當(dāng)用戶面對這種卡片界面的時候，會更容易接受與他們相似的卡片屬性，更容易與界面進(jìn)行“卡片式”交互。

三大會員體系下還有著各自不同的會員類型，例如QQ會員體系下就分為普通會員（VIP）、超級會員1-8（SVIP）、超級會員9(SVIP9)，在卡片設(shè)計中，每個不同卡片對應(yīng)著一個信息模塊，用戶一眼看去就能清晰了解該模塊的內(nèi)容，根據(jù)不同卡片顏色即可區(qū)分會員的等級差異。

在每個單獨(dú)的會員體系下會有不同的內(nèi)容模塊，不同的內(nèi)容模塊里包含的信息也不一樣，卡片的設(shè)計形式就可以將這些不同媒介形式的內(nèi)容單元以統(tǒng)一的方式進(jìn)行混合呈現(xiàn)，做到視覺上盡量保持一致的同時將信息劃分成多個清晰的內(nèi)容區(qū)域。

搭建頁面結(jié)構(gòu)，打造通用組件

以QQ會員為例，根據(jù)不同用戶生命周期，針對潛在會員用戶和會員用戶兩種情況。

其中會員用戶的個人信息、會員類型、等級、銘牌、成長值、有效期等信息在會員卡片上展示，而潛在會員用戶則以突出快速付費(fèi)操作為主，縮短支付路徑。所得權(quán)益的部分，將會員的功能特權(quán)進(jìn)行分等級梳理，將當(dāng)前等級所擁有的特權(quán)和升級后可得的特權(quán)進(jìn)行對比展示，刺激用戶升級。內(nèi)容型特權(quán)根據(jù)不同內(nèi)容類型，排列方式稍有不同。最后我們將三大會員官網(wǎng)中涉及到的通用模塊，作為通用組件復(fù)用到QQ大會員和黃鉆官網(wǎng)中。

三大會員官網(wǎng)中均有涉及到特權(quán)組件的展示，由于每個會員體系的特權(quán)數(shù)量都較多，如果用傳統(tǒng)的列表樣式，顯示的內(nèi)容有限，要展示同樣數(shù)量的特權(quán)占用的頁面空間也較大，而用橫向卡片式布局，能顯示更多內(nèi)容，用戶水平滑動即可看到更多數(shù)量的特權(quán)。

在梳理支付組件時，我們優(yōu)化了支付體驗(yàn)，將支付流程進(jìn)行了優(yōu)化和統(tǒng)一。對不同會員體系支付操作的統(tǒng)一，可以降低用戶的學(xué)習(xí)成本，提升支付的成功率。根據(jù)各個業(yè)務(wù)不同的內(nèi)容模塊，提取相應(yīng)的信息內(nèi)容，且打通不同會員支付體系，可相互切換引流。我們在“會員”、“黃鉆”和“大會員”的系統(tǒng)標(biāo)準(zhǔn)配色中提取了黃色與金色進(jìn)行了漸變處理，讓支付組件內(nèi)容整體化。

在組件化建立的過程中我們對齊了手機(jī)QQ8.0版本的設(shè)計原則以及設(shè)計規(guī)范，在應(yīng)用中也加入了符合各自品牌的相關(guān)元素，在制定好初稿后，與項目參與成員一起多角度出發(fā)共同梳理，針對不同場景進(jìn)行討論，確定規(guī)范優(yōu)先級，進(jìn)行分工優(yōu)化，在設(shè)計中不斷進(jìn)行修改完善。

目前我們已完成了三大官網(wǎng)首頁的新版升級，后續(xù)將會根據(jù)產(chǎn)品迭代逐步對各個子頁面進(jìn)行規(guī)范，同時也會根據(jù)產(chǎn)品方向變化，保持規(guī)范的更新。

小結(jié)

QQ三大會員體系官網(wǎng)的設(shè)計整合，只是革命的第一步，也取得不錯的成效。然而在增值包月業(yè)務(wù)上，我們還面臨著巨大挑戰(zhàn)，比如用戶活躍場景的轉(zhuǎn)移以及會員用戶流失大于新增等等，我們將繼續(xù)細(xì)化業(yè)務(wù)目標(biāo)和設(shè)計目標(biāo)，強(qiáng)化包月等生命周期，多維度的商業(yè)模式組合的嘗試。

接下來，我們也會引入更完善的數(shù)據(jù)統(tǒng)計，使得看似感性的設(shè)計變得理性，有策略的設(shè)計方案為用戶帶來更好的體驗(yàn)，也為業(yè)務(wù)帶來更大的商業(yè)價值。QQ擁有著豐富的會員類型，我們將致力于打造高端會員用戶的尊貴感與身份象征，一步步打造一個全新的會員俱樂部。

來源：https://isux.tencent.com/articles/qq-vip-redesign）

本文由 @騰訊ISUX 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自騰訊ISUX官網(wǎng)