亿万人在玩的QQ游园会，是如何设计出来的？

2019年农历节要到了，各大互联网平台红大战也正开帷幕。作为腾讯旗下深度运年轻用户QQ，被赋予了更多娱乐社交属性。今年，QQ也在探索新定义红社交价值，出了全新玩法，将民广为流传民俗活动──庙会从线下搬到线上，即QQ游园会。逛QQ游，玩民俗游戏，普及民俗识，还有一定概率获得袋，与家人和分享袋，传递气，分享越，气越。

项目目标

该项目为QQ春节袋运营活动的主部分，其目标是在虚拟游上，通民俗小游戏等方式，吸引用户关注活动，增加用户互动并提高春节袋的分享率。在玩游戏的同时亦科普与传播传统习俗，让逐渐消失的传统文化重新回归人们的视野。

为使活动更有新春热闹的氛围，区别往年单一获得现金红包的形式，次我们在红包的基础上增加共享红包的玩法，也增加更家的卡券，并包装成新年袋的样式。用户不仅仅以获得现金红包与亲朋分享，更以获得各种用的，并合玩小游戏获得袋，充分动用户的参与感和积极，正让用户和家人朋一玩来。

使命感是吸引用户玩游戏的首因素，所以我们要明确用户的目标是什么。在整个活动中，用户最想得到的是袋。我们把游戏内的袋结果进行随机处理，袋额度并不与游戏积分成正比。比确定的收益，用户更喜欢自己能掌握的不确定的收益，「说不定下次有运到来」的心理驱使用户更加积极地参与到活动之中。

活动另个目标是鼓励用户进更多互动和分享。用户是喜欢能够瞬看到自己成功效为，所以及时进步反馈和成感会带用户「爽」体验。在活动主页及游戏内增加排榜等内容，从分和排榜玩法增加用户成感与分享热情。

设计方法

受H5的承载和现能力，元素和动画不能复；设计师确定轻量化设计原则，力争在短时间内输出高品质内容。在此我们遵循「故-场化-轻量级」三原则打造视验。「故」乃整个设计所依存的背，「场化」则是在特定背下将具象的元素进一步勾勒出来，而「轻量级」则是元素的具表现方式，「故-场-轻量」是「由里及表」的设计程。

该项目，个「故事」框架设定在游园会背景下，借用不民俗主题作为游戏背景，过统轻量化视觉语言，从图形、色、质感、层、动效五个维度入手，将个活动主旨贯穿到细节。

  1. 首页设计

H5首页，为小游戏及装扮等活动的口载，到统合整活动视DNA 的用。庙是最具中国传统年味的民俗气息的文化活动形式之一，为构建富有中国年味的验场，使用户产生情感共鸣，设计师将活动背设定为一场花天锦地的春节游。主界面中，融合庙常见的舞狮、灯笼、锦鲤、财神等元素，将传统民俗风情从现世界搬到网络舞台。

图形元素

首页主元素三小游戏及一装扮商城入口，设师将每入口都设一处别致的园小景，入口的主图形外观设亦与所表的内本身相契合。三小游戏入口采用了游戏内的舞狮、福元素，装扮入口则使用布衣售卖摊的形式，图形元素既符合游园会主题，又让用户一眼明了其所表的游戏、活动内。

△ 元素提取

色彩搭配

色作中传统喜庆节的表色，理所当然整H5主题色彩的首选。配色方案以中式古建常见的檐下彩绘灵感，色打底，孔雀蓝辅，金色作镶及点缀，暖主冷辅的格调让整体画面显得烈不过火，让眼高饱度的画面舒的缓冲空间。

△ 色彩搭配

质感/层次

了让整体界面既保留传统风又具气息，质感选用了轻的彩色剪纸风格。通过细致的阴影变化区分后景，营造丰富的层次感，让画面保留扁平风的同时又轻巧的立体效果。微立体样式的添加亦于不同模块功能区域的划分，每游戏入口图形均一整片独立的剪纸裁切，通过投影用户可以方便区分每模块区的界。

△ 层次

视觉动线

整首页一约2屏度的图，乍看一张虚拟的游园图。图中间留出一条「主」，至下引导用户视线自然从一场景转移到另一场景。视觉动线的设使场景间错落序，增加「游园」体验沉浸感的同时，也不会让用户图中迷失方向。

△ 视觉动线

角色/动效

既「游园」，拥活跃气氛、增强场景故事性功能的角色设便不可或缺。我们选用深受轻群体喜的品牌吉祥之一──Pupu鹅作游园的角色主体。

为让角设计与袋更有搭感，设计师将Pupu鹅与财神的角合二为一，因为财神象征着财富，而袋的用则是聚集财富。从Banner到主场到末尾插画，有头戴财神帽的Pupu鹅贯穿其中，通生动的动效设计，引领用户验一场趣味盎的游活动。

首页界面效果

△ 点击查视频版

  2. 小游戏之灯笼高高挂

在游戏计中故事为魂。「灯笼高高挂」游戏，把「挂灯笼」作为此款游戏的核心。它既是间根深蒂固的习惯，象征圆，同营造一种过年喜庆的视觉氛围。

单纯的让灯笼层层「叠加」并不能体「挂」。那么如何维持「叠」的游戏玩法，同时又体「挂」呢？设师从模拟真实场景入手，阁中古建筑中的多层建筑，其中一种构架形式将单层建筑体逐层重叠构整体建筑，阁每层都会悬挂灯笼。设师巧妙运用这一点，以灯笼挂阁的形式与游戏玩法相结合。并且设师把「清晨-午-夜晚」的时间变化增加到游戏场景中，让用户玩中接近活。

图形素

楼阁式定为三种。计从中国十大历史文化名楼入，研究其点，尝提炼，并借用计中。屋檐考虑使用弧线；柱头楼阁式；适度添加墙体纹。

△ 素提取

抓住述特点，设师始绘制草图。的「高级脸」形象不合民俗风，考虑到春节还老姓的节日，所以设师又参考了北窑洞，北京胡同这类民居建筑元素，力求设接气。第一稿草图后，设师发，由于过度追求真实感造型精感，阁的细节刻画的太多繁琐，忽视了游戏元素的尺寸规。针对这些问题，设师提炼了四种执行方法：平行视图、几何形体、轻微弧线、减少修饰线。

△ 终稿

色彩搭配/质/层次

避免多色带来的扰，计在中国传统色彩面选择「酡红」、「金」和「栗」作为楼阁灯笼的主色调。

参考笔画技法，每阁采用1素金，增加元素精致感。「清晨-午-夜晚」的时间变化，选用「碧蓝-杏黄-靛蓝」相互循环渐变。再配合山、树、云、太、月亮、星星这类场景元素，既突出阁灯笼的主体，又增加游戏场景变换的氛围感。

QQ春节主活动的风是剪纸风，视DNA 需要遗传至游戏项目中，所以《灯笼高高挂》质感同样采用纸。何现呢？在图形上添加细微的阴影，把界面的级关系拉开，传达核心信息，用户对游戏结构更清晰易懂。

△ 次

△ 颜

△ 其他界面

动效

游戏受H5的现能力，动画采用轻量化设计，用位移和缩放效果；及时的动画反馈提升用户成就感，与音效的合烘托春节氛围。除此之外，动画让设计更贴近场和游戏主题。

首先，loading 与封衔接动画，观表现游戏主题；其，楼阁叠加后，两侧出现烟雾动画，诠释楼量感，是用户成功操作及时反馈；第三，相大小楼阁叠加后出现「完美」提示词，是用户操作夸奖；连续叠加三相大小楼阁后，立即出现加分动画；最后，礼花动画庆祝用户到满意分数，再提升用户成感。

灯笼高高挂最终界面

  3. 小游戏之天降福运

中国俗传统中，「舞狮」是必不可少的表演艺术，传统文化中认为「舞狮」可以驱邪辟鬼。故此每逢喜庆节日，例如新张庆典、迎春赛会等，都喜欢敲锣鼓，舞狮助庆。而「福」字是新春的另一个常见传统习俗，成为春节的一种象征。寄托了人对幸福生活的向往，也是对美好未来的祝愿。

图形元素

在「天降福」的游戏玩法设计中，设计师将中国传统的「福字」和「舞狮」作为游戏体。福字对应天降福中的「福」，而舞狮作为中国的之兽，可在年带来好，则对应着天降福中的「」。此外，为了与保持统一，设计师将福袋元素延展到游戏中，福袋接住从狮头中抖落的福字，既秉承了传统又成游戏元素的取。

△ 元素取

色彩搭配

作为春节民俗为题的小游戏，设计师择了传统的胭脂红作为色调，并入金色和孔雀蓝等进行点缀，希望通过色彩将传统民俗变得更有。

△ 色彩

质感/层次

格：的格是饱和的剪纸格，作为中的小游戏，视觉格自然差异过大。「天降福」小游戏的界面同样采剪纸格，但同时降低了色彩的饱和与投影强，看起来有一种稍稍做旧的感觉，既延续了格，又有自己的特点。

△ 格

画&音效

画方面简单的分成了游戏气氛画和反馈相的画。

气氛动画方向参考了多和降福运玩法类似的节奏类型游戏，主要参考了款童年经典游戏──啪塔碰和鼓达人。目标是完成像这款游戏一气氛且有趣的游戏动画。

△ 动画参考

基本的花绽粒子碎花的循环动画作背景烘托整游戏的气氛。同样作整游戏的标志──部舞狮子，我们也希望它以一闹并且趣的动画展示。

我们参考 dribbble 上的一卡通脸部动画，用 AE 的父子级工具和简单旋转位移完成个动画。

为了让这个动画更加生动（不那么容易看出循环规律）我们在这里做了6s循环动画。计划用 lottie 输出个狮子头部动画，然而被技术学告知白鹭引擎不支持 lottie 动画。这里动画显然不能用 png 序列来完成（占资，fps低，体验不畅）。为了完美实现这里狮子头动画我们用了个「土」办法──设计师跟踪元素帧运动数据，然后将数据交构学完成个动画开发任务。终于完美实现狮子头部动画表现。

反馈相关动画，玩家按颜色福时，为了减弱玩家操作失误时挫败感，我们用了手震动作为消极反馈代替音效和动效反馈。而玩家在成功消除时候，我们用动效（福入袋&积分加分）和类似「bingo」音效让用户获成感。

同时消除类游戏键在于在玩游戏的过程中玩得到「割草」的快感。我们户进入 combo状态后入一些积极反馈的画户获得更多满足感和成就感。

• 连击反馈动画
• 音效锣声示
• 积x2反馈提示
• 视觉对比强的花背景动画
• 狮子头从蓝进化成黄金状态

在游戏中，增加了对战游戏中常用的「combo」击，让用户在游戏过程中受「猴塞雷」，通过较低成本的方式让用户获得成就足。

游戏结束之后，会根据得随机获得「QQ春节福袋」，拆福袋的行为就是一种随机性的游戏，通过拼「欧气」增加游戏的可玩性。

科普与传播传统习俗

民俗为题的小游戏，户在玩游戏的同时科普与传播传统习俗，逐渐消失的传统重归人们的视野。

天降福运最终界

用户反馈

春节游园会活动自线以，激起了用户的烈反响。的用户了赢取高积分甚至自行「研发」了游戏的过关妙招，这些自主行超出了设原本的预。民俗小游戏的结合增加了用户参与福袋收集、分享的趣与欲望，社交模式的渗入一扩了活动的传播与影响。

项目总结

春节游园会H5运营活动整体较为庞大，项目启动间比往年晚了近2个月，除了文章中提的界面，还要配商队做招商计，配前期演练的素材，预热活动，闪屏等，项目间非常紧张，有的活动从计上线只有一周间，大多数候计、开发和测验证都需要并行。该项目极大地考验了计的高速创作及协作能力，计加班加点，在有限的间内不断雕琢、优化视觉效果，力争在各大百花争鸣的红包运营活动中做最好。这次尝的全新福袋玩法也给未来类似活动运营提供了不错的参考思路，相在未来的运营活动中，将尝更多有趣的运营模式，用更开阔的计思维迎未来的挑战。