项目背景

2000 年 QQ 会员诞生，不断探索如何带给用户更好的增值服务，正值 20 周年的时间节点，QQ 会员推出 20 周年系列庆典活动，携手靓号、会员游戏、个性化装扮、QQ 音乐、bilibili 等多个分会场，通过多种好礼折扣、豪华大礼包等联合回馈用户，和广大 QQ 用户一起携手为 QQ 会员 20 周年庆生。

整个项目主要从以下六个部分进行规划：概念脑暴、品牌重塑、主活动（portal 聚合、QQ 能量值等）、设计衍生、外部联动、庆典宣传等。通过系统有节奏的整体规划，设计团队一步一步建立会员 20 周年品牌，体系化的构建以“渠道-场景-触点-情感”为切入点的系列运营活动，打造会员 20 周年超燃盛典，达成用户体验和商业营收的平衡。

1.概念脑暴

在 QQ 会员品牌的升级的过程中，设计师提取了会员核心象征元素，并与产品团队一起脑爆一些关键词，最终确定以“燃”的主题对品牌形象进行了全面升级，在 QQ 企鹅的基础上，将品牌符号的头发，形状优化的更加锐利更像一搓火焰。

在 QQ 会员 20 周年项目中，我们围绕“燃”主题进行了多轮脑爆，最终以“理所当燃” 作为 20 周年的 Slogan。

2.品牌重塑

20 周年品牌设定

“QQ 会员 20 周年 – 理所当燃”作为起源事件，我们提取了会员企鹅、数字 20、以及“燃”作为核心符号的基础模型，将“会员企鹅”、“20”的抽象符号进行结合，再利用正负形的方式融合了火焰，来传达“理所当燃”。Logo 文字部分设计，也同样结合了火焰的图形。配色也与 QQ 会员品牌升级后的颜色保持一致。并规范了在不同场景的使用标准。

二次元 IP 设定

为进一步提升品牌在年轻用户间的好感度与传播力度，设计师为会员业务设计了崭新的二次元拟人形象，通过塑造虚拟 IP 独具特色的性格特征与人格魅力，传递给用户更深层次的品牌情怀与温度。

在拟人 IP 诞生前，会员业务已有一个经典的动物形象 IP——会员鹅，它头顶的红毛似一团火焰。为了和已有的动物IP相搭配，拟人IP继承了会员鹅的红毛特征与“火”属性。新的二次元IP名为“火仔”，英文名“Loki”取自北欧火与恶作剧之神洛基，火仔主体配色使用会员品牌“三原色”——红、黄、黑，眼眸还有服装细节都有火焰形状的装饰图形。

会员 20 周年品牌重塑完成后，以活动品牌为基础，构建“渠道-场景-触点”体系化的活动品牌延展应用。通过微博、微信、合作方等公域渠道引流到 QQ 私域渠道，并在 QQ 私域渠道的核心触达入口做加法设计，通过微动效、礼包、品牌元素等多维度吸引用户参与主活动，并在主活动场景的用户行为路径上进行全链路转化。同时辅助品牌衍生设计、外部联动以及庆典宣传等共同打造会员 20 周年超燃庆生盛典，最终实现为 20 岁会员庆生的情感表达。

3.主活动设计

QQ 会员 20 周年活动主题为“理所当燃”，提到“燃”，不禁会让人联想到青春洋溢的热血少年漫。本次活动还首次推出了新功能——QQ能量值，“能量”一词往往与科技、未来相关联。因此在进行视觉设计时，设计师以“热血漫画”与“科幻未来”为关键词，将“火焰”“机甲”与“二次元”定为此次活动的主要视觉元素。

主 KV 设计

角色的背景设定里，火仔与 QQ 的黄钻 IP“星娘”以及大会员 IP“维克”同属于 QQ 魔法学院的一员。和其它魔法师不同的是，火仔使用的是机械魔法。为迎接学院 20 周年嘉年华，火仔制作了魔法机甲阿布西隆号和载人飞行器魔音巨蛋，准备在庆典上一展风采。

20 周年活动的主 KV 设计中，火仔驾驶着魔法机甲从焰火中腾空而起，在学院庆典上奏出超燃鼓点。机甲造型里加入了会员鹅与火焰相关的元素。

视觉组件

界面设计延续了主 KV 的图形风格及色彩搭配。图形元素以机甲造型为主，辅以火焰装饰。质感则以表现科技感的全息、发光为主，同时结合二次元的描边漫画风格。

字体方面，由于涉及到数据展示，设计师专门设计了一套机甲数字，并制成开发可调用的字体包。其他中英文字体，根据平台、运营场景也做了区分。

20 周年的系列活动由多名设计师协作完成，为提高效率、确保界面风格的一致性，UI 组件设计提取了机甲的图形特征作为基因符号，细节上保持了 45 度的统一切角和机甲边框装饰。

主活动页面设计

20 周年活动主页面大致分为三个阶段。第一阶段为活动预约阶段，这个阶段头图以火仔为主角，通过新颖的二次元形象吸引用户参与活动；第二、三阶段能量值功能正式上线，分别为预售以及狂欢盛典阶段，这期间头图以新功能 QQ 能量值为主题，用户进入活动时通过炫酷的动画转场后即可了解 QQ 能量值相关信息。

为凸显科幻与漫画感，主装饰图形结合了表现全息的半透明风格以及硬朗的机甲边框，辅助图形则由二次元动漫常见的机甲元素如斜纹斑马线、轮胎线、瞄准器边框以及火焰等元素构成，机甲及火焰图形营造出酷炫的活动氛围。

QQ 能量值页面设计

关于 QQ 能量值，是在 QQ 里的账号信息、活跃、消费等 “行为积分” 的总数值，再将数值展示出来。在视觉元素提取中，从能量值的属性出发，用“能量卡”的造型作为积累储存，以“能量环”的形式展示数值。风格上提取 kv 里的的“机械” “科技感” “漫画风” 等元素，贯彻了品牌调性。

所以在 KV 设计之初，我们就通过分析 20 周年以及能量值的属性分别代表的设计元素，比如 20 周年是“青春”“热血”等关键词，而能量值则是，科技、智能等关键词，为了能传达“理所当燃”的主题又让画面结合二者之间不冲突。所以提前做了场景化的预设。推出“热血机甲”概念。包括能量值的落地页的设计上，也只用了机甲的元素，在 20 周年结束之后的新用户再进入能量值也不会有违和感。

转载自网络