2019年农历新年将至，各大互联网平台红包大战正式拉开帷幕 作为腾讯深度运营的年轻用户，QQ被赋予了更多的娱乐和社交属性 今年QQ也在探索重新定义红包的社会价值，推出新的玩法，将民间广为流传的民间活动——庙会从线下移到线上，也就是QQ游园会。 逛QQ游园会，玩民间游戏，普及民间知识，有一定概率得到幸运包，与家人朋友分享幸运包，传递祝福。分享的越多，拥有的祝福就越多。 项目目标作为QQ春节福袋运营活动的主要部分，该项目旨在通过民间游戏吸引用户对活动的关注，增加用户互动，提高春节福袋在虚拟花园派对上的分享率。 在玩游戏的同时，也普及科学，传播传统习俗，让正在消失的传统文化回归人们的视野 为了让新年活动更加热闹，有别于往年获取现金装红包的单一形式，这次我们在红包的基础上增加了分享红包的游戏，也增加了更多商家的福利卡优惠券，打包成新年福袋。风格， 用户不仅可以得到装满现金的红包与亲朋好友分享，还可以得到各种实际的好处，还可以通过玩小游戏得到一个福袋，充分调动了用户的参与感和积极性，真正让用户与家人和朋友一起玩。 使命感是吸引用户玩游戏的第一要素，所以要明确用户的目标是什么 在整个活动中，用户最想要的是福袋 我们随机处理游戏中福袋的结果，福袋的数量与游戏点数不成正比 与一定的收入相比，用户更喜欢自己能够掌握的不确定收入。“也许下次会有好运”的心理驱使用户更积极地参与活动 活动的另一个目标是鼓励用户更多地互动和分享 用户喜欢能够在瞬间看到自己成功的效果，所以及时的进度反馈和成就感会给用户带来“爽”的体验 在活动主页和游戏中添加排行榜等内容，从评分和排行榜播放中增加用户的成就感和分享热情 设计方法受限于H5的携带和实现能力，元素和动画也不要太复杂。设计师确定轻量级的设计原则，努力在短时间内输出高质量的内容 这里我们遵循“故事-场景-轻量级”的三个原则来创造视觉体验 “故事”是整个设计的背景，“场景”是在特定的背景下进一步勾勒出具体的元素，“轻量”是元素的具体表达，“故事-场景-轻量”是“由内而外”的设计过程 本项目将整个“故事”框架设定在游园会的背景下，以不同的民间题材作为游戏背景。通过统一的轻量级视觉语言，从图形、色彩、质感、层次、动态效果五个维度入手，贯穿整个活动主题到细节 第一部分首页设计H5首页作为小游戏和装扮活动的入口载体，起着整合整个活动视觉DNA的作用 庙会是最具中国传统风味的文化活动之一。为了营造一个具有中国风味的体验场景，让用户产生情感共鸣，设计师将活动背景设置为一个色彩丰富的春节游园会 在主界面中，融合了舞狮、灯笼、锦鲤、财神等常见元素，将传统民俗从现实世界移至网络舞台 1.图形元素主页的主要元素是三个小游戏和一个服装商城入口。设计师将每个入口设计成一个独特的花园场景，入口的主要平面设计也与内容本身相兼容 三个小游戏入口在游戏中使用舞狮、伏楼等元素，而服饰入口则采用布匹售卖摊位的形式。图形元素既满足了游园会的主题，又让用户一目了然地了解到他们所代表的游戏和活动。 2.配色红色是中国传统节日的代表色，自然成为整个H5主题色的首选 配色灵感来源于中国古建筑常见的檐下绘画，以红色为底，孔克兰为辅，黄金为边，点缀，冷暖为辅的风格使整个画面看起来温暖而不太热，让双眼在高饱和度画面上有一个舒适的缓冲空 3.质感/层次为了使整体界面既保留传统气息又保留现代气息，质感选择了轻薄的彩色剪纸风格 通过细致的阴影变化区分前后场景，营造出丰富的层次感，让画面保留了平风，同时又有淡淡的立体感 微立体风格的加入也有助于不同模块功能区域的划分。每一个游戏入口图形都是一个独立的剪纸切割，让用户更容易通过投影来区分每个模块的热区边界 4.视觉动线整个主页是一张长约2屏的长图，乍一看像是虚拟的花园地图 一条“主干道”留在地图的中间，引导用户的视线从一个场景自然地从上到下到达另一个场景 视觉动线的设计使得场景分散有序，增加了“花园”体验的沉浸感，不会让用户在漫长的地图中迷失方向 5.角色/动画是一个“花园”，气氛活跃、场景故事功能增强的角色设计不可或缺 我们选择了深受年轻人喜爱的品牌吉祥物之一——普普鹅作为花园的主角 为了使角色设计更符合福袋，设计师结合了普普鹅和财神的角色，因为财神象征财富，福袋的作用是聚敛财富 从班纳到主场景再到最后的插图，都有戴着财神帽子的普普鹅穿过。通过生动的动态设计，引导用户体验这个有趣的花园活动 6.首页界面效果第二部分小游戏的灯笼高高挂在游戏设计里。故事是灵魂 在“高挂灯笼”这个小游戏中，我们把“高挂灯笼”作为这个游戏的核心 它不仅是根深蒂固的民间习惯，也是团聚的象征，同时营造了春节庆祝活动的视觉氛围 简单地“叠加”灯笼层并不反映“悬挂” 那么如何在保持“栈”游戏性的同时体现“挂”呢？设计师从模拟真实场景开始。展馆是中国古代建筑中的一座多层建筑。其中一种框架形式是将单层建筑层层重叠，形成一个完整的建筑，亭子的每一层都将悬挂灯笼 设计师巧妙地利用这一点，将亭子里挂灯笼的形式与游戏性结合起来 设计师在游戏场景中加入了“清晨-中午-夜晚”的时间变化，让用户在玩的时候更贴近生活 1.图形元素的亭子样式设置为三种类型 设计师从中国十大历史文化建筑入手，研究其特点，加以提炼，并将其借用到设计中 1.考虑在屋檐使用弧形；2.柱头区分城堡风格；3.适度添加墙壁图案 设计师抓住了上述著名建筑的特点，开始绘制草图 著名建筑的“高层脸”形象不适合民俗。考虑到春节仍然是普通人的节日，设计师还参考了西北窑洞、北京胡同等住宅建筑的建筑元素，力求在设计中扎根 草图初稿后，设计师发现由于过渡追求写实，造型精致，亭的细节太多太繁琐；忽略游戏元素的大小规定 针对这些问题，设计人员细化了四种实现方法:1。平行视图；2.几何形状；3.轻微弧线；4.减少装饰线条2。配色/质感/层次，避免多色带来的干扰感。设计师选择“拓红”、“黄金”和“栗色”作为中国传统色彩中亭子和灯笼的主色调 参照工笔画技术，每个展馆使用1像素金边来增加元素的精致感 对于“清晨-中午-夜晚”的时间变化，选择“青绿色-杏黄色-靛蓝色”进行相互循环和渐变 结合山、树、云、日、月、星等场景元素，突出亭灯主体，增加游戏场景变换的氛围 QQ春节的主要活动风格是剪纸风格，视觉DNA需要继承到游戏物品中，所以《灯笼高高挂》的质感也是用纸 如何实现？在图形上添加细微的阴影，打开界面的层次关系，传达核心信息，让用户更加清晰轻松地理解游戏结构 3.动态游戏受限于H5的实现能力，动画采用轻量化设计，多用途位移和缩放效果；及时的动画反馈增强了用户的成就感，配合音效烘托春节气氛 此外，动画使设计更接近真实场景和游戏主题 首先，装帧和封面连接的动画直观的展示了游戏的主题；其次，楼阁堆叠后，两侧出现烟雾动画来解读建筑的重量，是对用户成功操作的及时反馈；三是相同大小的亭子叠加后出现“完美”提示字，是对用户操作的一种恭维；连续堆叠三次相同大小的亭子后，立即出现加成动画；最后，烟花动画庆祝用户的满意度得分，再次增强用户的成就感 4.灯笼高高挂在最后的界面上。03在中国民间传统中，“舞狮”是一种不可或缺的表演艺术。在传统文化中，“舞狮”可以驱魔和制造鬼魂 因此，每逢喜庆节日，如新张庆典、春节联欢晚会等。，喜欢玩锣鼓和舞狮来庆祝 “福”字是春节中另一个常见的传统习俗，已成为春节的象征 它维系着人们对幸福生活的向往和对美好未来的憧憬 1.图形元素在《祝福天堂》的游戏设计中，设计师将中国传统的“祝福”和“舞狮”作为游戏的主体 “福”字对应的是天上的“福”，而舞狮作为中国的吉祥兽，能在新年带来好运，对应的是天上的“福” 此外，为了与主体活动保持统一，设计师还将福袋元素延伸到游戏中，用福袋接住从狮头上抖落下来的祝福话语，既继承了文化传统，又完成了游戏元素的提取 2.配色作为一款以春节民俗为主题的小游戏，设计师选择了传统的胭脂红作为主色调，并添加了黄金和孔克兰进行点缀，希望通过色彩让传统民俗更有活力 3.质感/层次风格:主要活动的风格是高饱和度剪纸风格。作为一个小游戏，视觉风格自然不能太不一样 所以游戏《好运》的界面也采用剪纸风格，但同时降低了色彩的饱和度和投影强度。好像有一种微老的感觉，既延续了主要的活动风格，又有自己的特色 4.动画&音效动画简单分为游戏氛围动画和反馈相关动画 氛围动画的方向是指很多类似天佑游戏的节奏型游戏。我们主要指的是两个经典的童年游戏——Pata Touch和太谷达人 目标是像这两个游戏一样，以浓厚的氛围和趣味性完成游戏动画 基本的烟花绽放和粒子碎花的环形动画作为背景，烘托出整个游戏的氛围 作为整个游戏的象征——舞狮，我们也希望它能以一个生动有趣的动画来展示 我们参考了dribbble上的一些卡通人脸动画，利用AE的父子工具和简单的旋转位移完成了这个动画 为了让这个动画更生动(循环规律不是那么容易看到的)，我们在这里做了一个6s循环动画 打算用洛蒂输出整个狮子头的动画，但是技术同学告诉我白鹭引擎不支持洛蒂动画包 显然，这里的动画不能用png序列来完成(占用资源，fps低，体验不流畅) 为了在这里完美地实现狮子头的动画，我们使用了一种“地球”的方法——设计师跟踪元素每一帧的运动数据，然后将数据交给重建学生完成整个动画开发任务 最终完美实现了狮子头的动画表现 反馈相关动画，当玩家按错颜色时，为了减少玩家出错时的挫败感，我们用手机震动作为负反馈，而不是音效和动态效果反馈 当玩家成功消除它时，我们使用动态效果(祝福入袋&:点数加点数)和声音效果，如“宾果”，给用户一种成就感 同时，消除游戏的关键是玩家在玩游戏的过程中获得“割草”的快感 我们让用户进入组合状态，并添加一些正反馈动画，让用户获得更多的满足和成就感 1)连击反馈动画2)音锣提示3)积分x2反馈提示4)视觉对比更强的烟花背景动画5)游戏中狮子头从蓝色进化到金色状态，我们加入了战斗游戏中常用的连击，让用户在游戏过程中感受到自己的“猴雷”，让用户以更低的成本获得成就和满足感。 游戏结束后，根据分数随机获得“QQ春节祝福包”。拆开福袋的行为是随机游戏，通过拼写“欧洲精神”来增加游戏的可玩性 5.科普传播传统习俗一款以民俗为主题的小游戏，让用户在玩游戏的同时科普传播传统习俗，让逐渐消失的传统文化回归人们的视野 6.天江富蕴春节游园会最终界面用户反馈自上线以来，引起了用户的热烈反响 为了赢得更高的分数，一些用户甚至“开发”了游戏的传递技巧。这些自主行为大大超出了最初的设计预期 民间游戏的结合增加了用户参与福袋收集和分享的兴趣和欲望，社会模式的渗透进一步扩大了活动的传播和影响 春节游园会H5运营活动整体规模较大，项目启动时间较往年晚近2个月。除了文中提到的界面，还要配合业务团队做投资设计，配合之前练习的素材，预热活动，flash屏幕等。项目时间很紧，有些活动从设计到上线只有一周。大多数时候，设计、开发和测试验证需要并行进行。 该项目极大地考验了设计师的高速创作和协作能力。设计师加班加点，在有限的时间内不断进行造型和视觉效果的优化，力求在各大平台的红包运营活动中做到最好 这次尝试的新福袋游戏也为以后类似活动的操作提供了很好的借鉴。我相信在未来的运营活动中，我们会尝试更多有趣的运营模式，以更广阔的设计思维迎接未来的挑战 感谢所有团队成员，感谢你们的辛勤工作！