破局升级｜QQ VIP官网再设计之路（我调色贼棒红包版）

有破有立，再造升级。官网作为会员体系中最主要的营销渠道，突破原有的资源壁垒，将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大会员和黄钻官网中。

三大会员官网中均有涉及到特权组件的展示，由于每个会员体系的特权数量都较多，如果用传统的列表样式，显示的内容有限，要展示同样数量的特权占用的页面空间也较大，而用横向卡片式布局，能显示更多内容，用户水平滑动即可看到更多数量的特权。

在梳理支付组件时，我们优化了支付体验，将支付流程进行了优化和统一。对不同会员体系支付操作的统一，可以降低用户的学习成本，提升支付的成功率。根据各个业务不同的内容模块，提取相应的信息内容，且打通不同会员支付体系，可相互切换引流。我们在“会员”、“黄钻”和“大会员”的系统标准配色中提取了黄色与金色进行了渐变处理，让支付组件内容整体化。