QQ VIP 官網(wǎng)是如何做改版設(shè)計的?
發(fā)布時間:2022-01-26 10:08 [ 我要自學網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175

語言升級、打造通用組件這幾個方面一一道來 QQ VIP 官網(wǎng)的再設(shè)計之路。

實戰(zhàn)復盤!QQ VIP 官網(wǎng)是如何做改版設(shè)計的?


項目背景


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

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

實戰(zhàn)復盤!QQ VIP 官網(wǎng)是如何做改版設(shè)計的?

由于三大會員體系各自業(yè)務發(fā)展存在一定瓶頸,它們之間錯綜復雜的關(guān)系和差異對用戶來說認知門檻高,我們急需突破單個會員體系的業(yè)務局限,用更長遠的視角來縱觀 QQ 整個會員服務的全景。官網(wǎng)作為會員體系中最主要的營銷渠道,將三大會員官網(wǎng)進行有效的收歸整合,對商業(yè)目標的達成起到至關(guān)重要的作用,同時也能給QQ 用戶提供更為全面的會員服務。

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


打造協(xié)同效用,確定目標價值


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

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

實戰(zhàn)復盤!QQ VIP 官網(wǎng)是如何做改版設(shè)計的?

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

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

實戰(zhàn)復盤!QQ VIP 官網(wǎng)是如何做改版設(shè)計的?

我們通過縱向分析三大會員體系的差異,橫向打通共有能力,打造協(xié)同效用來創(chuàng)造更大的用戶和產(chǎn)品價值。將三大會員體系官網(wǎng)進行整合,對用戶而言,能夠覆蓋到不同維度的用戶需求和場景,高效觸達到更多感興趣的特權(quán)內(nèi)容,簡化付費路徑。對產(chǎn)品而言,可以打造階梯化的增值服務,進行分層運營,三大會員體系間可進行資源整合,相互交叉引流,提升付費率。以商業(yè)目標為指導,在深入理解用戶核心需求和促進營收增長的基礎(chǔ)上,構(gòu)建合理的會員體系,制定有效的設(shè)計目標,保證官網(wǎng)的體驗統(tǒng)一,遵循一致的設(shè)計語言和規(guī)范的同時,求同存異,強化不同會員體系的品牌感知,從而創(chuàng)造更好的用戶體驗,提升運營效率。

實戰(zhàn)復盤!QQ VIP 官網(wǎng)是如何做改版設(shè)計的?


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


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

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

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

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

實戰(zhàn)復盤!QQ VIP 官網(wǎng)是如何做改版設(shè)計的?

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

用戶成長的部分主要展示用戶的個人信息,當前所處的會員類型、等級和銘牌,會員的成長值和有效期,以及激勵用戶的勛章、任務和排行榜。所得權(quán)益主要是三大會員體系中的各項特權(quán),包括功能特權(quán)、個性化特權(quán)、游戲特權(quán)和一些外部合作的特權(quán),以及不同的福利禮包。官網(wǎng)中的精細運營主要是針對不同用戶生命周期進行不同的付費引導和分層運營,例如年費分期、業(yè)務打包優(yōu)惠、新人紅包、連續(xù)包月、會員升級等,以及在不同廣告位進行活動推送。

實戰(zhàn)復盤!QQ VIP 官網(wǎng)是如何做改版設(shè)計的?

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

QQ 會員擁有比其他兩個會員體系更豐富的所得權(quán)益,例如游戲特權(quán)以及與外部合作的聯(lián)合特權(quán)等,在精細運營的部分,QQ 會員除了有三大會員體系共有的包月和年費兩種運營方式外,還有和騰訊視頻、QQ 音樂等合作的 SVIP+ 聯(lián)合會員,以及和王卡合作的王卡超級會員,分別針對不同類型用戶的需求。黃鉆和大會員在信息架構(gòu)上突出了成長任務和排行榜的信息層級,期望通過任務和排名的形式,刺激用戶主動、頻繁的在官網(wǎng)保持活躍,達成商業(yè)目標。

實戰(zhàn)復盤!QQ VIP 官網(wǎng)是如何做改版設(shè)計的?

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

首先確定導航結(jié)構(gòu),由于 QQ 會員的業(yè)務結(jié)構(gòu)在三大會員體系中相對復雜,存在二級業(yè)務導航,為了避免兩層導航在頂部占用頭部高度,讓頭部顯得層級多,所以把一級導航放在了頁面底部,二級導航放在頁面頂部,對于沒有二級導航的黃鉆和大會員來說只存在底部的一級導航。其次根據(jù)三大會員各自所承載的信息和商業(yè)目標不同,確定各個模塊的優(yōu)先級排布。

實戰(zhàn)復盤!QQ VIP 官網(wǎng)是如何做改版設(shè)計的?


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


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

實戰(zhàn)復盤!QQ VIP 官網(wǎng)是如何做改版設(shè)計的?

實戰(zhàn)復盤!QQ VIP 官網(wǎng)是如何做改版設(shè)計的?

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

實戰(zhàn)復盤!QQ VIP 官網(wǎng)是如何做改版設(shè)計的?

整個會員體系的品牌色需要給到用戶升級的感覺,一個比一個「屌」。QQ 會員中的普通會員一直以來的形象代表為紅毛 QQ,整體品牌色以紅色為主色調(diào),那一撮紅毛與普通用戶作出差異。而超級會員,則用代表著高貴、光榮、輝煌的金色為主體。過往超級會員最高等級為 SVIP8,而今年我們推出了 SVIP9,能達到這個等級的用戶很少,為了滿足用戶升級欲望,我們將 SVIP9 進行了差異化設(shè)計,引入了代表高雅、莊重、神秘、權(quán)利和力量的黑色,與原超級會員品牌色金色進行結(jié)合。黑與金的結(jié)合,色彩的對比帶出的力量感結(jié)合高雅,SVIP9 的尊貴感更容易呈現(xiàn)出來。普通黃鉆以及豪華黃鉆則是在 QQ 空間品牌色的基礎(chǔ)上增加了輔助色系。新推出的大會員涵蓋了最多種類的會員權(quán)益,結(jié)合其「包羅萬象」的特權(quán),配色在提取了會員「紅」「金」和黃鉆的「黃」再加入年輕化的「紫」進行漸變處理,創(chuàng)造出一種看起來像是「全新的顏色」 ,更獨特、現(xiàn)代,令人耳目一新。

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

實戰(zhàn)復盤!QQ VIP 官網(wǎng)是如何做改版設(shè)計的?

為了將三大會員體系官網(wǎng)的設(shè)計語言統(tǒng)一,將曾經(jīng)分散的信息聚合起來,同時將新的改版內(nèi)容加入進去,卡片式的界面表達則是最合適的載體?ㄆ瑢⑿畔⒁詤^(qū)塊的形式組織到一起,使內(nèi)容更為集中更適合閱讀。卡片也是承載故事的可靠工具,而且會員體系又與大眾認知里的會員卡、身份證等卡片相一致,所以用戶對于卡片有著極為直觀的認知。當用戶面對這種卡片界面的時候,會更容易接受與他們相似的卡片屬性,更容易與界面進行「卡片式」交互。

實戰(zhàn)復盤!QQ VIP 官網(wǎng)是如何做改版設(shè)計的?

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

實戰(zhàn)復盤!QQ VIP 官網(wǎng)是如何做改版設(shè)計的?

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

實戰(zhàn)復盤!QQ VIP 官網(wǎng)是如何做改版設(shè)計的?


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


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

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

實戰(zhàn)復盤!QQ VIP 官網(wǎng)是如何做改版設(shè)計的?

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

實戰(zhàn)復盤!QQ VIP 官網(wǎng)是如何做改版設(shè)計的?

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

實戰(zhàn)復盤!QQ VIP 官網(wǎng)是如何做改版設(shè)計的?

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

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

實戰(zhàn)復盤!QQ VIP 官網(wǎng)是如何做改版設(shè)計的?


總結(jié)


QQ 三大會員體系官網(wǎng)的設(shè)計整合,只是革命的第一步,也取得不錯的成效。然而在增值包月業(yè)務上,我們還面臨著巨大挑戰(zhàn),比如用戶活躍場景的轉(zhuǎn)移以及會員用戶流失大于新增等等,我們將繼續(xù)細化業(yè)務目標和設(shè)計目標,強化包月等生命周期,多維度的商業(yè)模式組合的嘗試。接下來,我們也會引入更完善的數(shù)據(jù)統(tǒng)計,使得看似感性的設(shè)計變得理性,有策略的設(shè)計方案為用戶帶來更好的體驗,也為業(yè)務帶來更大的商業(yè)價值。QQ 擁有著豐富的會員類型,我們將致力于打造高端會員用戶的尊貴感與身份象征,一步步打造一個全新的會員俱樂部。

實戰(zhàn)復盤!QQ VIP 官網(wǎng)是如何做改版設(shè)計的?

UI交互app及axure設(shè)計教程
我要自學網(wǎng)商城 ¥50 元
進入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔因您的行為而導致的法律責任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計 室內(nèi)設(shè)計 室外設(shè)計 機械設(shè)計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設(shè)計 會計課程 興趣成長 AIGC