专栏首页腾讯社交用户体验设计福利赠送 | QQ春节鼓力全开活动设定

福利赠送 | QQ春节鼓力全开活动设定

腾讯ISUX

isux.tencent.com

社交用户体验设计

项目背景

春节作为极富中国特色的传统佳节,承载了丰厚的历史文化底蕴。为了让传统文化得以继承和发扬,今年的QQ春节活动搭建了QQ春节红包活动平台,在主活动玩起来的同时,给微视、游戏等分会场业务导流。主活动以对联及答题的形式为主要载体,旨在让用户通过简单而有趣的方式获得福利的同时,重温中华民族上下五千年文化沉淀的趣味知识点。

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

脑爆发散

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

“对联”是中国传统年俗文化代表之一,古代才子佳人都乐衷于以对对子的方式怡情悦性,“对联”作为答题活动的载体再合适不过。而提到春节活动,自然少不了发红包这一环节,这次我们选择以中华传统配饰的“荷包”为红包的载体,“荷包”是古人储存钱财的随身物件,既有装饰作用,又因其常绣有吉祥图案而赋有招财辟邪的寓意。

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

设计实践

为了更加全局系统思考设计实践,首先理解用户活动运营的本质,明确用户在行为链路上的流程,也就是从人流到信息流再到行为流的过程。基于新版本灰度用户&大盘活跃用户进行小版本不断灰度放量迭代,基于用户画像、偏好、标签等精准推送商家卡券到目标用户;通过微博、微信、合作方等公域渠道和QQ多个私域渠道引流吸引触达QQ春节红包活动,并在用户活动行为路径上进行全链路转化。

全链路转化-触达

触达入口

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

全链路转化-浏览

主界面设计

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

活动吊坠及小程序banner设计

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

答题入口设计

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

答题入口主要以宫门形式承载,因此配色也汲取了皇家宫殿中的典型色彩特征。“朱红墙柱、黄绿瓦面、青绿梁枋”,以朱红、明黄、蓝绿、石青以及金这五种中国传统色为主要配色体系,产生喜庆而富丽堂皇的美感。

答题入口主要以宫门形式承载,因此配色也汲取了皇家宫殿中的典型色彩特征。“朱红墙柱、黄绿瓦面、青绿梁枋”,以朱红、明黄、蓝绿、石青以及金这五种中国传统色为主要配色体系,产生喜庆而富丽堂皇的美感。

图案借鉴了中国皇家传统纹样,如皇袍上的云海江崖纹、莲花纹、祥云纹等,后期调整时做了更现代、抽象的处理方式。

前期我们定了多个活动标题方案,最终选择了“鼓力全开”这个元气满满的主题。Logo字体以隶书为骨架,在起笔和出峰处做了个性化处理,装饰以传统的如意祥云纹为主。进行鼓的设计时,将传统的兽面铺首改成了QQ的鹅脸。

答题入口设计借鉴了很多皇家建筑特色及配色,整体布局类似一个露天的演出小剧场,因此也为打鼓鹅设计了一套京味儿十足的京剧武生服饰,装饰上加入了与建筑呼应的龙鳞及祥云元素,并且在背后衣片上加入了QQ的品牌Logo。

主页顶部最终效果图。

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

分会场入口设计

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

会员分会场的代表鼓元素是壮族的铜鼓,铜鼓通常用于祭祀和重大庆典,是“吉祥、富贵、权利”的象征,在当地人民心中占有神圣地位,适合会员的尊贵身份;进行会员入口图标设计时,让会员鹅穿上壮族服饰,鼓面有黄钻图标,背景建筑融入壮族牛角图腾,同时加入大会员头像和星星人IP。

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

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

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

主页效果图。

全链路转化-参与

游戏界面设计

游戏框架

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

游戏玩法

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

针对单题答题玩法,以答题不同节点时间作为横轴,用户答题的输入输出多通道作为纵轴。拆解单题答题过程关键节点,打磨用户答题输入输出多个通道内容元素(包含用户输入、主屏幕输出、背景音效输出、手机震动输出、底部打鼓鹅),最终呈现有节奏有层次有时序的多模态答题互动,构建视觉、听觉、触觉多感官融合体验。

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

游戏进行中,通过视觉、听觉、触觉三个维度,营造游戏氛围,准确给予用户游戏反馈。在用户选择正确或错误答案时,会有动画、声音及手机震动反馈,打鼓鹅也作出相对的动作回应。

游戏结束后,弹出大荷包,强化用户的获奖感受。荷包的设计借鉴了一件故宫清朝的传统刺绣文物,相传清宫除夕夜,皇帝会给臣子及皇室成员派发荷包以示奖励,希望通过这种设定让用户也能获得传统风味的“御赐”荷包。荷包在主页、小程序等多个其它入口均有露出,通过利益驱动吸引用户参与游戏。

全链路转化-转化分享

分享渠道&内容

深挖用户参与活动行为链条的各个关键节点,在多个触点上,通过多种奖励形式和多种玩法,促进用户层层转化和分享。

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

答题游戏后获得QQ开运词和明星祝福词:

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

多维度验证

整个春节红包活动历时3个月,以周为单位历经内外总计9轮演练,最终在2020.1.17正式上线。整个过程中团队设计师深入每一轮演练,通过数据验证、用户反馈、全员走查等多维度设计验证,形成迭代问题验证池,并依据优先级快速跟版本迭代,不断的完善和演进。

数据验证层面,通过看全链路多节点的数据转化,聚焦核心渠道触点和用户核心行为路径,分析不同产品设计策略设计影响。通过对多个渠道流量数据监控,聚焦核心渠道入口,并有针对性的优化设计;通过对主活动行为漏斗监控,关注各个阶段关键指标和转化率,并横向比较行为漏斗数据,针对转化率差异较大的找出关键问题,并寻找优化解决方案。

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

最终效果一览

结语

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

1. 春节活动流量巨大,覆盖人群广,在玩法上尽量简单易玩,老少咸宜,易传播为主。可提前策划不同的玩法demo,缩短提案时间。

2. 尽量使用Lottie实现动态效果,多轮迭代优化素材和动画性能调优,减少性能压力。

3. 主动深入数据验证和用户反馈,有针对性的进行有效设计迭代优化。

4. 规范和组件化的输出,对整体视觉风格统一和跨团队合作效率都有很好的提升。

总而言之,设计师需在底层设计思维层面,认知设计本质;同时了解新技术新思维,拓展思维边界打破局限,这样才能基于基础产品,在活动运营中,进行多渠道引流,通过用户行为路径进行全链路转化,经过多维度设计验证,最终达成促活拉新、品牌推广与业务增长的目标。

福利赠送

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

点击小程序参与抽奖


PS:ISUX 开通粉丝QQ群啦!

欢迎各大设计师加入和我们一起聊设计~

添加QQ群:764345161

或长按以下二维码

以下ISUX文章,你可能也感兴趣

网络上的另一个我 | 00后人设剖析

设计匠人 | 一个人完成的3D动画片

企鹅冲锋CF联名潮玩设计

The PBR Guide基于物理的渲染指引(下)

过去的未来:成为用户体验设计师


感谢阅读,以上内容均由腾讯ISUX团队原创设计,以及腾讯ISUX版权所有,转载请注明出处,违者必究,谢谢您的合作。注明出处格式:

文章来自公众号:

腾讯ISUX 

 ( https://isux.tencent.com/articles/2020guliquankai)

本文分享自微信公众号 - 腾讯ISUX(tencent_isux),作者:ISUX设计部

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-04-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 多端统一,内容至上--微云WEB改版小结

    腾讯ISUX
  • 空·境——腾讯微云为空页设计

    腾讯ISUX
  • [ISUX译]iOS 9人机界面指南(三):iOS 技术 (中) - 腾讯ISUX

    腾讯ISUX
  • python群聊工具实现(上)

    相信都有使用过聊天工具聊过天,不管使用QQ还是微信,首先得注册一个账号,聊天前,你得加对方为好友,之后才可以聊天。

    用户7054460
  • 解锁FaceBook隐藏好友和朋友圈

    最近,国外的开源情报(OSINT)爱好者分享了一篇帖子,查找朋友不可见的facebook用户的朋友圈,这篇帖子也在我们的知识星球(开源网络空间情报)中第一时间分...

    FB客服
  • Linux 输出重定向 2>&1

    nohup /mnt/Nand3/H2000G >/dev/null 2>&1 &

    用户2929716
  • 开源OLAP分析引擎Apache Kylin™| MTdata小讲堂

    欢迎来到 MTData 小讲堂,本期 MT 酱带大家认识 Apache Kylin™

    美图数据技术团队
  • iNeuOS云操作系统,.NET Core全系打造

          演示地址: http://demo.ineuos.net。(建议使用chrome浏览器) 测试名称:admin

    唯笑志在
  • 大数据说:几代同行,恐怕一言不合就得“分开旅行”

    国庆黄金周在即,全国近一半的人都将选择外出旅游,消费更是创新高。中国旅游研究院(国家旅游局数据中心)预测:七天长假期间预计全国旅游市场接待5.89...

    钱塘数据
  • 1.3.1 计算机的主要性能指标

    机器字长是指计算机进行一次整数运算(即定点整数运算)所能处理的二进制数据的位数,通常与CPU的寄存器位数、加法器有关。所以机器字长一般等于内存寄存器的大小,字长...

    week

扫码关注云+社区

领取腾讯云代金券