原文链接 腾讯ISUX

    image.png
    项目背景

    春节作为极富中国特色的传统佳节,承载了丰厚的历史文化底蕴。为了让传统文化得以继承和发扬,今年的QQ春节活动搭建了QQ春节红包活动平台,在主活动玩起来的同时,给微视、游戏等分会场业务导流。主活动以对联及答题的形式为主要载体,旨在让用户通过简单而有趣的方式获得福利的同时,重温中华民族上下五千年文化沉淀的趣味知识点。
    image.png
    整个项目主要经历了3大阶段:脑暴发散、设计实践、设计验证。脑暴发散阶段,结合3D&游戏化思维进行概念玩法探索,明确活动如何玩;设计实践阶段,全局系统思考,基于用户多渠道引流,通过用户行为路径进行全链路转化,并在形状、色彩、字体、质感、动效五个维度进行组件化与规范化的视觉设计;最后作为设计师,深度参与多轮多维度的不同设计策略验证,保证了活动体验不断优化。

    image.png
    脑爆发散
    项目伊始,当“答题”作为核心玩法确定下来时,设计师们便开始苦思冥想,要通过何种方式呈现一个富有中国年味的答题活动呢?脑暴阶段我们列出了诸多与春节文化及传统民俗相关的字眼,通过层层比较分类筛选,最终定下了三个关键词作为本次春节活动的重要载体:“对联”、“荷包”以及“鼓”。
    image.png
    “对联”是中国传统年俗文化代表之一,古代才子佳人都乐衷于以对对子的方式怡情悦性,“对联”作为答题活动的载体再合适不过。而提到春节活动,自然少不了发红包这一环节,这次我们选择以中华传统配饰的“荷包”为红包的载体,“荷包”是古人储存钱财的随身物件,既有装饰作用,又因其常绣有吉祥图案而赋有招财辟邪的寓意。
    image.png
    除此之外,我们还选择“鼓”作为贯穿整场春节活动的主体元素。鼓为周代八音群音之首,它的身份不仅只是一件历史源远流长的民间传统打击乐器,在我国古代,亦扮演了交流沟通、传播信息的重要角色:战场上有以鼓为信号的“击鼓鸣金”,日常生活有起报时作用的“暮鼓晨钟”,鼓作为古代人民朴实智慧下诞生的远程交流工具,与现代QQ的通讯社交功能遥相呼应;鼓同时也是春节传统民乐担当,具有浓厚春节特色。鼓作为核心符号,会辐射到我们这次活动的各个维度。

    设计实践
    为了更加全局系统思考设计实践,首先理解用户活动运营的本质,明确用户在行为链路上的流程,也就是从人流到信息流再到行为流的过程。基于新版本灰度用户&大盘活跃用户进行小版本不断灰度放量迭代,基于用户画像、偏好、标签等精准推送商家卡券到目标用户;通过微博、微信、合作方等公域渠道和QQ多个私域渠道引流吸引触达QQ春节红包活动,并在用户活动行为路径上进行全链路转化。
    image.png
    image.png
    全链路转化-触达
    触达入口
    通过微博、微信等公域渠道引流到QQ私域渠道,QQ私域渠道吸引用户触达红包主活动。在多个私域触达入口上,聚焦核心触达入口,全面考虑多个增量触达入口;并在各个触达入口做加法设计,通过微动效、明星、红包等元素,吸引用户注意,引发用户参与兴趣。

    全链路转化-浏览
    主界面设计
    活动开始时,QQ消息右上角会出现活动入口的吊坠图标,同时小程序内亦会出现活动Banner,点击吊坠或小程序Banner均可进入活动主会场。主会场分为大致三个部分:顶部是答题入口,中部是四个分会场入口,下方是福利领取、广告、设置以及合作伙伴模块。
    image.png
    活动吊坠及小程序banner设计
    活动入口吊坠使用了统一的鼓元素为载体,鼓槌砰砰敲击鼓面时,会弹出荷包、元宝以及烟花等让人惊喜的小元素。小程序banner的装饰以荷包和红包为主,摇曳的灯笼微动效,以及不断蹦出的小元宝,都为整个活动营造了浓浓的春节氛围。
    iNBHQKkjpWv0X8VJUjZXwz0XpH8zP2BptIy6E2wQ3nO.gif
    答题入口设计
    为了让场景更具仪式感和视觉冲击,设计师为答题入口作了故事化的设定:仙云密林中,一座龙门伫于莲花座上,莲花座心有一面金鼓煜煜生辉,身着将军服的QQ鹅整装待发。草图的细节灵感来源于中国传统建筑、文物以及文化习俗,并在后期调整时,放大了需要承载关键信息的物件,突出可点击区域。
    image.png
    答题入口主要以宫门形式承载,因此配色也汲取了皇家宫殿中的典型色彩特征。“朱红墙柱、黄绿瓦面、青绿梁枋”,以朱红、明黄、蓝绿、石青以及金这五种中国传统色为主要配色体系,产生喜庆而富丽堂皇的美感。
    image.png
    图案借鉴了中国皇家传统纹样,如皇袍上的云海江崖纹、莲花纹、祥云纹等,后期调整时做了更现代、抽象的处理方式。

    image.png
    前期我们定了多个活动标题方案,最终选择了“鼓力全开”这个元气满满的主题。Logo字体以隶书为骨架,在起笔和出峰处做了个性化处理,装饰以传统的如意祥云纹为主。进行鼓的设计时,将传统的兽面铺首改成了QQ的鹅脸。
    image.png
    答题入口设计借鉴了很多皇家建筑特色及配色,整体布局类似一个露天的演出小剧场,因此也为打鼓鹅设计了一套京味儿十足的京剧武生服饰,装饰上加入了与建筑呼应的龙鳞及祥云元素,并且在背后衣片上加入了QQ的品牌Logo。
    image.png
    主页顶部最终效果图。
    image.png
    可答题期间-用动画及光效强调可点击区域,吸引用户参与游戏。游戏入口每次开放2小时。非游戏时间做了拉下帘幕的动画,突出下一场的倒计时,同时缩小顶部范围,露出更多下方的内容。

    BEoPHrTgfP9TwJzjokUXWcTp0ZDzGvFy9l531biPbGn.gif
    分会场入口设计
    分会场入口模块在答题入口的下方,分为四个部分:会员分会场、微视分会场、游戏分会场以及Pupu读书、波动、企鹅FM三个品牌联合的分会场。为了保证页面均衡与灵动性,分会场模块布局采用s型动线的方式,每个分会场都由图标、标题及简介三部分组成。在进行分会场入口图标设计时,设计师调研了大量中国鼓相关的资料,为每个分会场选择了符合分会场特性的鼓元素。
    image.png
    会员分会场的代表鼓元素是壮族的铜鼓,铜鼓通常用于祭祀和重大庆典,是“吉祥、富贵、权利”的象征,在当地人民心中占有神圣地位,适合会员的尊贵身份;进行会员入口图标设计时,让会员鹅穿上壮族服饰,鼓面有黄钻图标,背景建筑融入壮族牛角图腾,同时加入大会员头像和星星人IP。
    image.png
    微视分会场的代表鼓元素是中国朝鲜族的仗鼓,仗鼓的鼓手通常也是舞者,敲打的同时伴随着婀娜的舞姿,载歌载舞,极具观赏性,适合微视视频平台的特质;微视的入口图标场景里,QQ鹅穿上了传统朝鲜族服饰,背景是朝鲜族风格的建筑,左侧加入小电视和微视Logo。

    image.png
    游戏的代表鼓元素是拨浪鼓,拨浪鼓是中国民间传统儿童玩具,亦为最古老的“手游。为了让整个场景更具有娱乐色彩,QQ鹅身着唐装手持拨浪鼓,还戴上了一顶俏皮的虎头帽,背景加入王者荣耀水晶塔、绝地求生三级头、降落伞等热门游戏元素。

    image.png
    第四个分会场是三个品牌结合,因此选择了排鼓作为代表元素。排鼓是一种组合乐,亦是鼓类乐器的新品种,由若干音质不同的鼓组成一套,契合第四分会场“三合一”概念。同样场景中有Pupu读书、波动、企鹅FM三个品牌的元素露出。
    image.png
    主页效果图。

    3PwqydBFFJjQeXJYXQ90zW5s4owvINPrjtp8f82qRbH.gif
    全链路转化-参与
    游戏界面设计
    游戏框架
    点击主会场的“开抢荷包”,进入答题游戏主活动。答题游戏框架大布局统一,基于用户认知与浏览习惯差异,对游戏容器框架作异化处理。三种题型,对联题目展示在两侧,问题和填空题目展示在横批的位置。
    image.png
    image.png
    游戏玩法
    考虑iOS审核限制,基于答题参与核心路径,解构答题多个模块,抽离领取红包模块,并基于iOS端和Android端细化具体玩法路径,明确流程中统一模块部分和涉及到审核差异化部分,比如iOS答完全部题目后领取荷包,Android答题过程中答对即时领取荷包。
    image.png
    针对单题答题玩法,以答题不同节点时间作为横轴,用户答题的输入输出多通道作为纵轴。拆解单题答题过程关键节点,打磨用户答题输入输出多个通道内容元素(包含用户输入、主屏幕输出、背景音效输出、手机震动输出、底部打鼓鹅),最终呈现有节奏有层次有时序的多模态答题互动,构建视觉、听觉、触觉多感官融合体验。
    image.png
    做游戏界面动效设计时,分引导、反馈、激励三步进行考量。游戏开始时会有5秒的倒计时提示,让用户快速了解玩法,同时用动画强调需要填空的部分。题目由横向切换到纵向时,为了让用户注意到题目位置的变化,做了对联由中部向两侧展开的视觉引导。

    otyNNVuAgjYmTgUj7nGnJQCznHlMZihUHN73td69ElV.gif
    游戏进行中,通过视觉、听觉、触觉三个维度,营造游戏氛围,准确给予用户游戏反馈。在用户选择正确或错误答案时,会有动画、声音及手机震动反馈,打鼓鹅也作出相对的动作回应。
    yZYhktNBVkbpVnrpwbhlMhLsj34kOeBstZE87ZBkgXK.gif
    游戏结束后,弹出大荷包,强化用户的获奖感受。荷包的设计借鉴了一件故宫清朝的传统刺绣文物,相传清宫除夕夜,皇帝会给臣子及皇室成员派发荷包以示奖励,希望通过这种设定让用户也能获得传统风味的“御赐”荷包。荷包在主页、小程序等多个其它入口均有露出,通过利益驱动吸引用户参与游戏。
    ONTirkfEVpvKlzoFbAkf8xKcFEgnlJ2Kw8lLNboJiUQ.gif
    全链路转化-转化分享
    分享渠道&内容
    深挖用户参与活动行为链条的各个关键节点,在多个触点上,通过多种奖励形式和多种玩法,促进用户层层转化和分享。
    首页分享主活动获得荷包:
    image.png
    答题游戏后获得QQ开运词和明星祝福词:
    设计师基于社交刷屏竞品分析,推动答题游戏后基于运势、祝福的开运词玩法,并基于时事快速上线相关内容,如春节期间基于疫情快速增加疫情相关的QQ开运词,引发共情,包含福、健康、平安等。
    image.png
    image.png
    多维度验证
    整个春节红包活动历时3个月,以周为单位历经内外总计9轮演练,最终在2020.1.17正式上线。整个过程中团队设计师深入每一轮演练,通过数据验证、用户反馈、全员走查等多维度设计验证,形成迭代问题验证池,并依据优先级快速跟版本迭代,不断的完善和演进。
    image.png
    数据验证层面,通过看全链路多节点的数据转化,聚焦核心渠道触点和用户核心行为路径,分析不同产品设计策略设计影响。通过对多个渠道流量数据监控,聚焦核心渠道入口,并有针对性的优化设计;通过对主活动行为漏斗监控,关注各个阶段关键指标和转化率,并横向比较行为漏斗数据,针对转化率差异较大的找出关键问题,并寻找优化解决方案。
    image.png
    而用户反馈主要聚焦两大类: 产品具体设计相关和产品口碑相关。产品具体设计相关,包含活动玩法、答题完成率、活动性能等;产品口碑相关,如用户好评,整体满意度等。
    image.png
    最终效果效果一览

    00:00/00:00倍速 画中画

    结语
    一年一度的春节红包活动,在顺利上线的同时,设计团队也进行了一些经验沉淀和方法总结,主要有4点:
    1. 春节活动流量巨大,覆盖人群广,在玩法上尽量简单易玩,老少咸宜,易传播为主。可提前策划不同的玩法demo,缩短提案时间。
    2. 尽量使用Lottie实现动态效果,多轮迭代优化素材和动画性能调优,减少性能压力。
    3. 主动深入数据验证和用户反馈,有针对性的进行有效设计迭代优化。
    4. 规范和组件化的输出,对整体视觉风格统一和跨团队合作效率都有很好的提升。
    总而言之,设计师需在底层设计思维层面,认知设计本质;同时了解新技术新思维,拓展思维边界打破局限,这样才能基于基础产品,在活动运营中,进行多渠道引流,通过用户行为路径进行全链路转化,经过多维度设计验证,最终达成促活拉新、品牌推广与业务增长的目标。

    福利赠送
    除了线上活动,设计师们还精心制作了PUPU以及QQ鹅的2020新春限量公仔,两只鹅均是意气风发的打鼓将军服造型。然后福利来啦!我们将从参与抽奖的粉丝中抽两位每人送一只新春限量QQ鹅~
    image.png
    image.png