赞助商
立即赞助

同样是红包设计,腾讯的顶尖团队是如何做的?

产品经验3年前 (2021)发布 流光
2.6K 0 0

项目背景

春节作极富中特色的传统节,承载了丰厚的历史文化底蕴。了让传统文化得以继承发扬,今的 QQ 节活动搭了 QQ 节红包活动,在主活动玩起来的同,给视、游戏等会业导流。主活动以对及答题的形式为主要载体,旨在让用户通过简而有趣的方式获得福利的同,重温中族上下五千年文化沉淀的趣味知识点。

同样是红包设计,腾讯的顶尖团队是如何做的?

整个项目主要经历了 3 大阶段:脑暴发散、计实践、计验证。脑暴发散阶段,结 3D & 游戏化思维进行概念玩法探索,确活动如何玩;计实践阶段,全局系统思考,基于用户多渠道引流,通过用户行为路径进行全链路转化,并在形状、色彩、字体、质、动效五个维度进行组件化规范化的视觉计;最后作为计,深度参多轮多维度的不同计策略验证,保证了活动体验不断优化。

同样是红包设计,腾讯的顶尖团队是如何做的?

脑爆发散

项目伊始,当「答题」为核心玩法确定下来时,设计师们便开始苦思冥想,要通何种方式呈现一个富有中国年味的答题活动呢?脑暴阶段我们列出诸与春节文化及传统民俗相关的字眼,通比分类筛选,最终定下三个关键词为次春节活动的重要载:「对联」、「荷包」以及「鼓」。

同样是红包设计,腾讯的顶尖团队是如何做的?

「对联」是中国传统年俗文化代表之一,古代才子佳人乐衷以对对子的方式怡情悦,「对联」为答题活动的载合适不。而提到春节活动,自少不红包一节,次我们选择以中华传统饰的「荷包」为红包的载,「荷包」是古人储存钱财的随身物件,既有装饰用,又因其常绣有吉祥图案而赋有招财辟邪的寓意。

同样是红包设计,腾讯的顶尖团队是如何做的?

除此之外,我们还选择「鼓」为贯穿整场春节活动的主元素。鼓为周代八音群音之首,它的身份不仅只是一件历史源远流长的民间传统打击乐器,在我国古代,亦扮演流沟通、传播信息的重要角:战场上有以鼓为信号的「击鼓鸣金」,常生活有报时用的「暮鼓晨钟」,鼓为古代人民朴智慧下诞生的远程流工具,与现代 QQ 的通功能遥相呼应;鼓同时也是春节传统民乐担当,具有浓厚春节特。鼓为核心符号,辐射到我们次活动的各个度。

设计实践

为更加局系统思考设计践,首先理用户活动运营的质,明确用户在行为链路上的流程,也就是从人流到信息流到行为流的程。基新版灰度用户 & 大盘活跃用户进行小版不断灰度放量迭代,基用户画像、偏、标签等精准推送家卡券到目标用户;通微博、微信、合方等域渠道和 QQ 个私域渠道引流吸引触达 QQ 春节红包活动,并在用户活动行为路径上进行链路转化。

同样是红包设计,腾讯的顶尖团队是如何做的?

同样是红包设计,腾讯的顶尖团队是如何做的?

1. 全链路转化-触达

触入口

过微、微信等公域渠引流到 QQ 私域渠,QQ 私域渠吸引用户触红主活动 。在多个私域触入口上,聚焦核心触入口,全考虑多个增量触入口;并在各个触入口做加法设计,过微动效、明、红等元素,吸引用户注意,引发用户参与兴趣。

2. 全链路转化-浏览

主界面计

活动开始,QQ 消息右上角会出现活动入的吊坠图标,同程序内亦会出现活动 Banner,点击吊坠或程序 Banner 均可进入活动主会。主会为大致三个部:顶部是答题入,中部是四个会入,下方是福利领取、广告、置以及作伙伴模块。

同样是红包设计,腾讯的顶尖团队是如何做的?

活动吊坠及小程序banner设计

活动口吊坠使用统一的鼓元素为载,鼓槌砰砰敲击鼓面时,弹出荷包、元宝以及烟花等让人惊喜的小元素。小程序 banner 的装饰以荷包和红包为主,摇曳的灯笼微动效,以及不断蹦出的小元宝,为整个活动营造浓浓的春节氛围。

同样是红包设计,腾讯的顶尖团队是如何做的?

答题入口设计

为了场景更具仪式感和视觉冲击,设计师为答题入口作了故事的设定:仙密林中,一座龙门伫于莲座上,莲座心有一面金鼓煜煜生辉,身着将军的 QQ 鹅整待发。草图的细节灵感来源于中国传统建筑、物及习俗,并在后期调整时,放大了需要承载键信息的物件,突可点击区域。

同样是红包设计,腾讯的顶尖团队是如何做的?

答题入口要宫门形式承载,因此配色汲取了皇宫殿中的典色彩特征。「朱红墙柱、绿瓦面、青绿梁枋」,朱红、明、蓝绿、石青及金这五种中国传统色为要配色体系,产生庆而富堂皇的美感。

同样是红包设计,腾讯的顶尖团队是如何做的?

图案借鉴了中国皇传统纹样,如皇袍上的海崖纹、莲纹、纹等,后期调整时做了更现代、抽象的处方式。

同样是红包设计,腾讯的顶尖团队是如何做的?

前期我们定了多个标题方案,最终择了「鼓全开」这个元气满满的题。Logo 字体隶书为骨架,在起笔和峰处做了个性处,传统的如意纹为。进行鼓的设计时,将传统的兽面铺首改成了 QQ 的鹅脸。

同样是红包设计,腾讯的顶尖团队是如何做的?

答题入口设计借鉴了很多皇建筑特色及配色,整体布类似一个露天的演小剧场,因此为打鼓鹅设计了一套京味十足的京剧生,上入了与建筑呼应的龙鳞及元素,并且在背后衣片上入了 QQ 的牌 Logo。

同样是红包设计,腾讯的顶尖团队是如何做的?

页顶最终效果图。

同样是红包设计,腾讯的顶尖团队是如何做的?

可答题期间-画及光效强调可点击区域,吸引户参与游戏。游戏入口每次开放 2 小时。非游戏时间做了拉帘幕的画,突一场的倒计时,同时缩小顶范围,露更多方的容。

同样是红包设计,腾讯的顶尖团队是如何做的?

分会场入口设

分会场入口模块答题入口的下方,分四部分:会员分会场、微视分会场、游戏分会场以及 Pupu 读书、波动、企鹅 FM 三品牌联合的分会场。了保证页面均衡与灵动性,分会场模块布局采用 s 型动线的方式,每分会场都由图标、标题及简介三部分组。行分会场入口图标设时,设师调研了中鼓相关的资料,每分会场选择了符合分会场特性的鼓元素。

同样是红包设计,腾讯的顶尖团队是如何做的?

会员分会场的表鼓元素壮族的铜鼓,铜鼓通常用于祭祀重庆典,「吉祥、富贵、权利」的象征,当人民中占神圣,合会员的尊贵身份;行会员入口图标设时,让会员鹅穿壮族服饰,鼓面黄钻图标,背景建筑融入壮族牛角图腾,同时加入会员星星人 IP。

同样是红包设计,腾讯的顶尖团队是如何做的?

微视分会场的表鼓元素中朝鲜族的仗鼓,仗鼓的鼓手通常也舞者,敲打的同时伴随婀娜的舞姿,载歌载舞,极具观赏性,合微视视频平台的特质;微视的入口图标场景里,QQ 鹅穿了传统朝鲜族服饰,背景朝鲜族风格的建筑,左侧加入小电视微视 Logo。

同样是红包设计,腾讯的顶尖团队是如何做的?

游戏的表鼓元素拨浪鼓,拨浪鼓中民间传统儿童玩具,亦古老的「手游。了让整场景具娱乐色彩,QQ 鹅身唐装手持拨浪鼓,还戴了一顶俏皮的虎帽,背景加入王者荣耀水晶、绝求三级、降落伞门游戏元素。

同样是红包设计,腾讯的顶尖团队是如何做的?

第四分会场三品牌结合,因此选择了排鼓作表元素。排鼓一种组合乐,亦鼓类乐器的新品种,由若音质不同的鼓组一套,契合第四分会场「三合一」概念。同样场景中 Pupu 读书、波动、企鹅 FM 三品牌的元素露出。

同样是红包设计,腾讯的顶尖团队是如何做的?

主页效果图。

同样是红包设计,腾讯的顶尖团队是如何做的?

3. 全链路转化-参与

游戏界面计—游戏框架

点击主会的「开抢荷包」,进入答题游戏主活动。答题游戏框架大布局统一,基于用户认知浏览习惯差异,对游戏容器框架作异化理。三种题型,对题目展示在侧,问题和填空题目展示在横批的位置。

同样是红包设计,腾讯的顶尖团队是如何做的?

同样是红包设计,腾讯的顶尖团队是如何做的?

游戏玩法

考虑 iOS 审核限制,基于答题参与核心路径,解构答题多个模,抽离领取红包模,并基于 iOS 端和 Android 端细具体玩法路径,明确流程中统一模分和涉及到审核差异分,如 iOS 答全题目后领取荷包,Android 答题过程中答对即时领取荷包。

同样是红包设计,腾讯的顶尖团队是如何做的?

针对单题答题玩法,答题同节点时间作为横轴,户答题的输入输多通道作为纵轴。拆解单题答题过程键节点,打磨户答题输入输多个通道容元素(包含户输入、屏幕输、背景音效输、手机震输、打鼓鹅),最终呈现有节奏有层次有时序的多模态答题互,构建视觉、听觉、触觉多感官融合体验。

同样是红包设计,腾讯的顶尖团队是如何做的?

做游戏界面效设计时,分引导、反馈、激励步进行考量。游戏开始时会有 5 秒的倒计时示,户快速了解玩法,同时画强调需要填空的分。题目由横向切换到纵向时,为了户注意到题目位置的变,做了对联由中向两侧展开的视觉引导。

同样是红包设计,腾讯的顶尖团队是如何做的?

游戏进行中,通过视觉、听觉、触觉个维,营游戏氛围,准确给予户游戏反馈。在户择正确或错误答案时,会有画、声音及手机震反馈,打鼓鹅作相对的作应。

同样是红包设计,腾讯的顶尖团队是如何做的?

游戏结束后,弹大荷包,强户的获奖感受。荷包的设计借鉴了一件故宫清的传统刺绣物,相传清宫除夕夜,皇帝会给臣子及皇室成员派发荷包示奖励,希望通过这种设定户获得传统味的「御赐」荷包。荷包在页、小程序等多个它入口均有露,通过利益驱吸引户参与游戏。

同样是红包设计,腾讯的顶尖团队是如何做的?

4. 全链路转化-转化分享

分享渠&内容

深挖用户参与活动为链条各个关键节,在多个触上,过多奖励形和多玩法,促进用户层层转化和分享。

首页分享主活动获得荷包:

同样是红包设计,腾讯的顶尖团队是如何做的?

答题游戏后获得 QQ 运词明星祝福词:

设计师基于社交刷屏竞分析,推答题游戏后基于势、祝福的开词玩法,并基于时事快速上线相容,如春节期间基于疫情快速增疫情相的 QQ 开词,引发共情,包含福、健康、平等。

同样是红包设计,腾讯的顶尖团队是如何做的?

同样是红包设计,腾讯的顶尖团队是如何做的?

多维度验证

个节红活动历时 3 个月,以为单位历经内计 9 轮演练,最终在 2020.1.17 正上线。个过程团队设计师深入轮演练,过数据验证、用户反馈、全员走查等多维度设计验证,形成迭代问题验证池,并依据优先级快速跟版本迭代,不断地完善和演进。

同样是红包设计,腾讯的顶尖团队是如何做的?

数据验证层,过看全链路多节数据转化,聚焦核心渠触和用户核心为路径,分析不品设计策略设计影响。过多个渠流量数据监控,聚焦核心渠入口,并有针性地优化设计;过主活动为漏斗监控,关注各个阶段关键指标和转化率,并比较为漏斗数据,针转化率异较大找出关键问题,并寻找优化解决案。

同样是红包设计,腾讯的顶尖团队是如何做的?

而用户反馈主要聚焦两大类: 品具体设计相关和品口碑相关。品具体设计相关,含活动玩法、答题完成率、活动性能等;品口碑相关,如用户好评,体满意度等。

同样是红包设计,腾讯的顶尖团队是如何做的?

结语

一年一度的春节红包活动,在顺利上线的同,计队也进行了一些经验沉淀和方法总结,主要有4点:

  • 春节活动流量巨大,覆盖人群,在玩法上尽量简单易玩,老少咸宜,易传播为主。提前策划不同的玩法demo,缩短提案时间。
  • 尽量使用 Lottie 实现动效果,多轮迭代优化素材和动画性能调优,减少性能压力。
  • 主动深入数据验证和用户反馈,有针性进有效设计迭代优化。
  • 规范组件化的输出,对整体视觉风格统一跨团队合作效率都很好的提升。

而言,设计师需在底层设计思维层,认知设计本质;时了解新技术新思维,拓展思维边界打破局限,这样才能基于基础品,在活动运,进多渠引流,过用户为路径进全链路转化,经过多维度设计验证,最终成促活新、品广与业务增长目标。

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

进行了2个多月的APP大改版即将结束,为此产品技术团队真的是尽心尽力,猛追猛赶,非常辛苦。然而越是大项目,越需要在结束时...
App改版
对于一款社交产品,面临最大的挑战也许不是来自竞争对手,而是随时间飞逝不断进化的互联网环境。作为已诞生 20 年的 QQ,历经...
QQ
斑点元素有机感气泡元素用户体验 得益于游戏产业蓬勃发展,社会对游戏的接受度不断提高,中国电竞同样也迎来井喷。据统计,...
实战案例
近年来,设计圈有两大趋势不容忽视,一是人工智能、神经网络、深度学习无疑是时下最热门的科技名词,「人工智能设计」这个词...
Banner
郁剑华:回顾对于一个较大型且历史包袱比较重的项目我们是如何去做改版的。 一、背景 · 问题 起点是一个有着16年历史的原创...
App改版
一、概览 品牌讲述产品的故事,并建立产品和用户之间的关系。设计师的部分职能是翻译、桥梁、联结者的作用,因而对于业务的梳...
丁香医生
UI 在拿到产品原型时该如何思考?如何着手设计界面?最近跟一些设计师朋友交流 UI 设计方案,总结了一下在方案优化的思考过程...
UI设计师
项目背景 曹操出行是由世界500强车企吉利集团布局「新能源汽车共享生态」的战略性业务,秉持「低碳致尚、服务至上」的核心价...
实战复盘