来源:网络 作者:佚名
该项目作为QQ春节福袋运营活动的主体部分，其目标是在虚拟游园会上，通过民俗小游戏等方式，吸引用户关注活动，增加用户互动并提高春节福袋的分享率。在玩游戏的同时亦科普与传播传统习俗，让逐渐消失的传统文化重新回归人们的视野。
为了使活动更有新春热闹的氛围，区别于往年单一获得现金红包的形式，这次我们在红包的基础上增加了共享红包的玩法，也增加了更多商家的福利卡券，并包装成新年福袋的样式。用户不仅仅可以获得现金红包与亲朋好友分享，更可以获得各种实用的福利，并配合玩小游戏获得福袋，充分调动了用户的参与感和积极性，真正让用户和家人朋友一起玩起来。
使命感是吸引用户玩游戏的首层因素，所以我们要明确用户的目标是什么。在整个活动中，用户最想得到的是福袋。我们把游戏内的福袋结果进行随机处理，福袋额度并不与游戏积分成正比。比起确定的收益，用户更喜欢自己能掌握的不确定的收益，“说不定下次会有好运到来”的心理驱使用户更加积极地参与到活动之中。
活动的另一个目标是鼓励用户进行更多的互动和分享。用户是喜欢能够瞬间看到自己成功的效果行为，所以及时的进步反馈和成就感会带给用户“爽“的体验。在活动主页及游戏内增加排行榜等内容，从得分和排行榜玩法增加用户的成就感与分享热情。
受限于H5的承载和实现能力，元素和动画不能过于复杂；设计师确定轻量化设计原则，力争在短时间内输出高品质内容。在此我们遵循“故事性-场景化-轻量级”三原则打造视觉体验。“故事”乃整个设计所依存的背景，“场景化”则是在特定背景下将具象的元素进一步勾勒出来，而“轻量级”则是元素的具体表现方式，“故事-场景-轻量”是“由里及表”的设计过程。
该项目中，整个“故事”框架设定在游园会的背景之下，借用不同的民俗主题作为游戏背景，通过统一的轻量化视觉语言，从图形、色彩、质感、层次、动效五个维度入手，将整个活动主旨贯穿到细节。
H5首页，作为小游戏及装扮等活动的入口载体，起到统合整体活动视觉DNA的作用。庙会是最具中国传统年味的民俗气息的文化活动形式之一，为构建富有中国年味的体验场景,使用户产生情感共鸣，设计师将活动背景设定为一场花天锦地的春节游园会。主界面中，融合了庙会常见的舞狮、灯笼、锦鲤、财神等元素，将传统民俗风情从现实世界搬到网络舞台。
1.图形元素
首页主要元素是三个小游戏及一个装扮商城入口，设计师将每个入口都设计成一处别致的园林小景，入口的主图形外观设计亦与所代表的内容本身相契合。三个小游戏入口采用了游戏内的舞狮、福楼等元素，而装扮入口则使用布衣售卖摊位的形式，图形元素既符合游园会主题，又让用户一眼明了其所代表的游戏、活动内容。
红色作为中国传统喜庆佳节的代表色，理所当然成为整个H5主题色彩的首选。配色方案以中式古建常见的檐下彩绘为灵感，红色打底，孔雀蓝辅助，金色作镶边及点缀，暖主冷辅的格调让整体画面显得热烈而不过火，让双眼在高饱和度的画面上有个舒适的缓冲空间。
为了让整体界面既保留传统风味又具有现代气息，质感上选用了轻量的彩色剪纸风格。通过细致的阴影变化区分前后景，营造丰富的层次感，让画面保留扁平风的同时又带有轻巧的立体效果。微立体样式的添加亦有助于不同模块功能区域的划分，每个游戏入口图形均为一整片独立的剪纸裁切，通过投影用户可以更方便区分每个模块热区的边界。
整个首页是一个约为2屏长度的长图，乍看像一张虚拟的游园地图。地图中间留出一条“主路”，至上而下引导用户视线自然地从一个场景转移到另一个场景。视觉动线的设计使场景间错落而有序，增加“游园”体验沉浸感的同时，也不会让用户在长地图中迷失方向。
即是“游园”，拥有活跃气氛、增强场景故事性功能的角色设计便不可或缺。我们选用深受年轻群体喜爱的品牌吉祥物之一——Pupu鹅作为游园的角色主体。
为了让角色设计与福袋更有搭配感，设计师将Pupu鹅与财神的角色合二为一，因为财神象征着财富，而福袋的作用则是聚集财富。从Banner到主场景再到末尾插画，都有头戴财神帽的Pupu鹅贯穿其中，通过生动的动效设计，引领用户体验这一场趣味盎然的游园活动。
00:00/00:00倍速
Part.02 小游戏之灯笼高高挂
在游戏设计中故事为魂。“灯笼高高挂”小游戏里，我们把“挂灯笼”作为此款游戏的核心。它即是民间根深蒂固的习惯，又象征团圆，同时营造一种过年喜庆的视觉氛围。
单纯的让灯笼层层“叠加“并不能体现“挂”。那么如何维持“叠”的游戏玩法，同时又体现“挂”呢？设计师从模拟真实场景入手，楼阁是中国古代建筑中的多层建筑物，其中一种构架形式是将单层建筑体逐层重叠构成整体建筑物，楼阁每层都会悬挂灯笼。设计师巧妙运用这一点，以灯笼挂在楼阁的形式与游戏玩法相结合。并且设计师把“清晨-正午-夜晚”的时间变化增加到游戏场景中，让用户在玩中更接近生活。
楼阁样式设定为三种。设计师从中国十大历史文化名楼入手，研究其特点，尝试提炼，并借用到设计中。1.屋檐考虑使用弧线；2.柱头区分楼阁样式；3.适度添加墙体纹样。
抓住上述名楼特点，设计师开始绘制草图。名楼的“高级脸”形象不适合民俗风情，考虑到春节还是老百姓的节日，所以设计师又参考了西北窑洞，北京胡同这类民居建筑元素，力求在设计上接地气。第一稿草图后，设计师发现，由于过渡追求真实感和造型精美感，楼阁的细节刻画的太多而繁琐；忽视了游戏元素的尺寸规定。针对这些问题，设计师提炼了四种执行方法：1.平行视图；2.几何形体；3.轻微弧线；4.减少修饰线
避免多色带来的打扰感，设计师在中国传统色彩里面选择“酡红”、“金”和“栗”作为楼阁与灯笼的主色调。
参考工笔画技法，每个楼阁采用1像素金边，增加元素精致感。“清晨-正午-夜晚”的时间变化，选用“碧蓝-杏黄-靛蓝“相互循环渐变。再配合山、树、云、太阳、月亮、星星这类场景元素，即突出楼阁灯笼的主体，又增加游戏场景变换的氛围感。
QQ春节主活动的风格是剪纸风，视觉DNA需要遗传至游戏项目中，所以《灯笼高高挂》质感同样采用纸。如何实现呢？在图形上添加细微的阴影，把界面的层级关系拉开，传达核心信息，用户对游戏结构更清晰易懂。
