有破有立，再造升級。騰訊QQ VIP官網作為會員體系中最主要的營銷渠道，突破原有的資源壁壘，將
QQ三大會員體系官網進行再造升級，可以對商業目標的達成起到至關重要的作用，同時也能給QQ用戶提供更為全面的會員服務。本文為大家分享來自QQ官網設計師的升級思路，從確定目標價值、構建官網架構、設計語言升級、打造通用組件這幾個方面一一道來QQ VIP官網的再設計之路。項目背景
QQ原有的兩大會員體系QQ會員和QQ空間黃鑽，原本互相獨立，產品運營和用戶體驗上存在很多差異。但QQ空間本身是基於QQ關係鏈而存在的社交平臺，對用戶而言QQ空間屬於QQ產品下的業務分支，因此QQ會員和
QQ空間黃鑽兩大會員業務也應該突破原本的資源壁壘，提供統一的用戶體驗。從兩大會員的用戶數據可以看出，目前同時開通了會員和黃鑽業務的雙棲用戶體量大，加之高付費的頭部用戶是提升產品ARPU值的關鍵，我們急需擴充會員體系來滿足這兩類用戶的需求。於是大會員應運而生，它的特權同時覆蓋了QQ和QQ空間中的使用場景，主要包括超級會員和豪華黃鑽已有的特權，並拓展了線下生活特權和線上包月優惠特權。
由於三大會員體系各自業務發展存在一定瓶頸，它們之間錯綜複雜的關係和差異對用戶來說認知門檻高，我們急需突破單個會員體系的業務侷限，用更長遠的視角來縱觀QQ整個會員服務的全景。
官網作為會員體系中最主要的營銷渠道，將三大會員官網進行有效的收歸整合，對商業目標的達成起到至關重要的作用，同時也能給QQ用戶提供更為全面的會員服務。
接下來將從確定目標價值、構建官網架構、設計語言升級、打造通用組件幾個方面來詳細闡述下我們是如何對會員體系官網進行設計整合的。
打造協同效用，確定目標價值
QQ會員和QQ空間黃鑽是QQ平臺上早已運營多年的會員體系，在會員類型、推廣渠道、特權覆蓋場景、界面風格、支付體驗等方面存在不少差異。
會員包括普通會員和超級會員兩種會員類型，特權主要覆蓋QQ中的使用場景，例如QQ聊天、身份展示、QQ好友和群管理、遊戲、閱讀、動漫和QQ郵箱等。黃鑽包括普通黃鑽和豪華黃鑽兩種會員類型，特權主要覆蓋QQ空間中的使用場景，例如好友動態、身份展示、個人空間展示、好友互訪、好友互動等。
官網承載著會員體系中的核心內容，是觸達用戶轉化的主要平臺。我們針對已有的會員官網和黃鑽官網進行梳理，瞭解兩個官網間的相同點和差異點。
通過首頁對比可以看出，大部分內容模塊具有相同點，主要包括：品牌曝光、用戶及會員信息、特權信息、開通續費入口、活動推廣等，而差異性主要體現在模塊分佈區域以及信息展示方式方面。
我們通過縱向分析三大會員體系的差異，橫向打通共有能力，打造協同效用來創造更大的用戶和產品價值。
將三大會員體系官網進行整合，對用戶而言，能夠覆蓋到不同維度的用戶需求和場景，高效觸達到更多感興趣的特權內容，簡化付費路徑。對產品而言，可以打造階梯化的增值服務，進行分層運營，三大會員體系間可進行資源整合，相互交叉引流，提升付費率。
以商業目標為指導，在深入理解用戶核心需求和促進營收增長的基礎上，構建合理的會員體系，制定有效的設計目標，保證官網的體驗統一，遵循一致的設計語言和規範的同時，求同存異，強化不同會員體系的品牌感知，從而創造更好的用戶體驗，提升運營效率。
深入會員體系，構建官網架構
對於一個產品或平臺來講，會員體系的核心包括賣給誰、賣什麼、怎麼賣三個方面，分別對應用戶成長、所得權益和精細運營三個部分。這三部分決定是否能有效激勵用戶留在體系內，在構建官網架構時需要重點考慮到這三個關鍵部分進行設計。
用戶成長指的是用戶完整生命週期的體現，細分會員用戶的生命週期包括：潛在用戶——新開/迴流用戶——在網用戶——即將到期用戶——到期用戶。用戶成長一般通過等級、積分、銘牌、排行榜等來刺激用戶，取得進步，獲得成就。
所得權益是用戶根據所處的成長階段和付出程度的不同，享受不同等級的權益內容，包括各種類型的特權和福利。權益內容不僅可以滿足用戶對產品的需求，還能有效驅動用戶不斷付出，實現用戶成長，從而擁有更多權益。
精細運營是根據用戶成長階段不同，進行差異化的運營策略，可從渠道、活動、付費和營銷手段幾個角度考慮，讓用戶需求不斷得到滿足，對產品形成忠誠度，刺激用戶成長。
根據用戶成長、所得權益和精細運營三個核心部分，首先梳理出三大會員體系官網所包含的關鍵信息。
用戶成長的部分主要展示用戶的個人信息，當前所處的會員類型、等級和銘牌，會員的成長值和有效期，以及激勵用戶的勳章、任務和排行榜。
所得權益主要是三大會員體系中的各項特權，包括功能特權、個性化特權、遊戲特權和一些外部合作的特權，以及不同的福利禮包。
官網中的精細運營主要是針對不同用戶生命週期進行不同的付費引導和分層運營，例如年費分期、業務打包優惠、新人紅包、連續包月、會員升級等，以及在不同廣告位進行活動推送。
接下來從業務角度出發，分別梳理三大會員體系官網的信息架構。根據三大會員所涵蓋的業務內容不同，官網中所包含的信息也有所不同。
QQ會員擁有比其他兩個會員體系更豐富的所得權益，例如遊戲特權以及與外部合作的聯合特權等，在精細運營的部分，QQ會員除了有三大會員體系共有的包月和年費兩種運營方式外，還有和騰訊視頻、QQ音樂等合作的SVIP+聯合會員，以及和王卡合作的王卡超級會員，分別針對不同類型用戶的需求。
黃鑽和大會員在信息架構上突出了成長任務和排行榜的信息層級，期望通過任務和排名的形式，刺激用戶主動、頻繁的在官網保持活躍，達成商業目標。
最後我們依據前面梳理的官網信息架構，來確定頁面結構。
首先確定導航結構，由於QQ會員的業務結構在三大會員體系中相對複雜，存在二級業務導航，為了避免兩層導航在頂部佔用頭部高度，讓頭部顯得層級多，所以把一級導航放在了頁面底部，二級導航放在頁面頂部，對於沒有二級導航的黃鑽和大會員來說只存在底部的一級導航。
其次根據三大會員各自所承載的信息和商業目標不同，確定各個模塊的優先級排布。
凸顯品牌調性，設計語言升級
會員體系中，當前所處的會員類型、等級和銘牌，是會員信息裡最能讓用戶清晰感知到的，為了有效傳遞會員體系的品牌感，我們在原有銘牌的基礎上結合騰訊字體進行了設計優化。
“視覺識別系統”是品牌調性的核心，決定了不同產品的延續性。將用戶已認知的“普通會員”、“超級會員”、“普通黃鑽”和“豪華黃鑽”進行了延續，對新推出的“大會員”進行了特殊的炫彩漸變色設計，在這些會員系統的標準配色中結合不同會員體系的等級差異新增了輔助色系，提升產品的識別度。
整個會員體系的品牌色需要給到用戶升級的感覺，一個比一個“屌”。QQ會員中的普通會員一直以來的形象代表為紅毛
QQ，整體品牌色以紅色為主色調，那一撮紅毛與普通用戶作出差異。而超級會員，則用代表著高貴、光榮、輝煌的金色為主體。過往超級會員最高等級為SVIP8，而今年我們推出了SVIP9，能達到這個等級的用戶很少，為了滿足用戶升級慾望，我們將SVIP9進行了差異化設計，引入了代表高雅、莊重、神秘、權利和力量的黑色，與原超級會員品牌色金色進行結合。黑與金的結合，色彩的對比帶出的力量感結合高雅，SVIP9的尊貴感更容易呈現出來。
普通黃鑽以及豪華黃鑽則是在QQ空間品牌色的基礎上增加了輔助色系。新推出的大會員涵蓋了最多種類的會員權益，結合其“包羅萬象”的特權，配色在提取了會員“紅”“金”和黃鑽的“黃”再加入年輕化的“紫”進行漸變處理，創造出一種看起來像是“全新的顏色” ，更獨特、現代，令人耳目一新。
在界面優化的過程中，針對不同會員體系我們提取了對應的輔助圖形、標準配色等細節規範，在保持統一的同時又有各自會員系統的品牌延續。
為了將三大會員體系官網的設計語言統一，將曾經分散的信息聚合起來，同時將新的改版內容加入進去，卡片式的界面表達則是最合適的載體。卡片將信息以區塊的形式組織到一起，使內容更為集中更適合閱讀。
卡片也是承載故事的可靠工具，而且會員體系又與大眾認知裡的會員卡、身份證等卡片相一致，所以用戶對於卡片有著極為直觀的認知。當用戶面對這種卡片界面的時候，會更容易接受與他們相似的卡片屬性，更容易與界面進行“卡片式”交互。
三大會員體系下還有著各自不同的會員類型，例如QQ會員體系下就分為普通會員（VIP）、超級會員1-8（SVIP）、超級會員9(SVIP9)，在卡片設計中，每個不同卡片對應著一個信息模塊，用戶一眼看去就能清晰瞭解該模塊的內容，根據不同卡片顏色即可區分會員的等級差異。
在每個單獨的會員體系下會有不同的內容模塊，不同的內容模塊裡包含的信息也不一樣，卡片的設計形式就可以將這些不同媒介形式的內容單元以統一的方式進行混合呈現，做到視覺上儘量保持一致的同時將信息劃分成多個清晰的內容區域。
搭建頁面結構，打造通用組件
以QQ會員為例，根據不同用戶生命週期，針對潛在會員用戶和會員用戶兩種情況。
其中會員用戶的個人信息、會員類型、等級、銘牌、成長值、有效期等信息在會員卡片上展示，而潛在會員用戶則以突出快速付費操作為主，縮短支付路徑。所得權益的部分，將會員的功能特權進行分等級梳理，將當前等級所擁有的特權和升級後可得的特權進行對比展示，刺激用戶升級。內容型特權根據不同內容類型，排列方式稍有不同。最後我們將三大會員官網中涉及到的通用模塊，作為通用組件複用到QQ大會員和黃鑽官網中。
在梳理支付組件時，我們優化了支付體驗，將支付流程進行了優化和統一。對不同會員體系支付操作的統一，可以降低用戶的學習成本，提升支付的成功率。根據各個業務不同的內容模塊，提取相應的信息內容，且打通不同會員支付體系，可相互切換引流。我們在“會員”、“黃鑽”和“大會員”的系統標準配色中提取了黃色與金色進行了漸變處理，讓支付組件內容整體化。
在組件化建立的過程中我們對齊了手機QQ8.0版本的設計原則以及設計規範，在應用中也加入了符合各自品牌的相關元素，在制定好初稿後，與項目參與成員一起多角度出發共同梳理，針對不同場景進行討論，確定規範優先級，進行分工優化，在設計中不斷進行修改完善。
目前我們已完成了三大官網首頁的新版升級，後續將會根據產品迭代逐步對各個子頁面進行規範，同時也會根據產品方向變化，保持規範的更新。
小結
QQ三大會員體系官網的設計整合，只是革命的第一步，也取得不錯的成效。然而在增值包月業務上，我們還面臨著巨大挑戰，比如用戶活躍場景的轉移以及會員用戶流失大於新增等等，我們將繼續細化業務目標和設計目標，強化包月等生命週期，多維度的商業模式組合的嘗試。
接下來，我們也會引入更完善的數據統計，使得看似感性的設計變得理性，有策略的設計方案為用戶帶來更好的體驗，也為業務帶來更大的商業價值。QQ擁有著豐富的會員類型，我們將致力於打造高端會員用戶的尊貴感與身份象徵，一步步打造一個全新的會員俱樂部。
原文鏈接：
https://mp.weixin.qq.com/s/Ph9NBYXwBi02Xk337MYsIg
閱讀更多 IXDC 的文章
