设计策略 | 停不下的游园会(2)

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:佚名

关键词

设计策略 | 停不下的游园会

3.动效

游戏受限于H5的实现能力,动画采用轻量化设计,多用位移和缩放效果;及时的动画反馈提升用户成就感,与音效的配合烘托春节氛围。除此之外,动画让设计更贴近真实场景和游戏主题。

首先,loading与封面的衔接动画,直观表现游戏主题;其次,楼阁叠加后,两侧出现烟雾动画,诠释楼的重量感,是对用户成功操作的及时反馈;第三,相同大小的楼阁叠加后出现“完美“提示词,是对用户操作的夸奖;连续叠加三次相同大小的楼阁后,立即出现加分动画;最后,礼花动画庆祝用户得到满意分数,再次提升用户成就感。

设计策略 | 停不下的游园会

4.灯笼高高挂最终界面

设计策略 | 停不下的游园会

Part.03小游戏之天降福运

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

设计策略 | 停不下的游园会

1.图形元素

在“天降福运”的游戏玩法设计中,设计师将中国传统的“福字”和“舞狮”作为游戏主体。福字对应天降福运中的“福”,而舞狮作为中国的祥瑞之兽,可以在新年带来好运,则对应着天降福运中的“运”。此外,为了与主活动保持统一,设计师也将福袋元素延展到游戏中,用福袋接住从狮头中抖落的福字,既秉承了文化传统又完成游戏元素的提取。

设计策略 | 停不下的游园会

2.色彩搭配

作为以春节民俗为主题的小游戏,设计师选择了传统的胭脂红作为主色调,并加入金色和孔雀蓝等进行点缀,希望能通过色彩将传统民俗变得更有活力。

设计策略 | 停不下的游园会

3.质感/层次

风格:主活动的风格是高饱和度的剪纸风格,作为其中的小游戏,视觉风格自然不能差异过大。所以“天降福运”小游戏的界面同样采用剪纸风格,但同时降低了色彩的饱和度与投影强度,看起来有一种稍稍做旧的感觉,既延续了主活动风格,又有自己的特点。

设计策略 | 停不下的游园会

4.动画&音效

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

气氛动画方向参考了很多和天降福运玩法类似的节奏类型游戏,我们主要参考了两款童年经典游戏——啪塔碰和太鼓达人。目标是完成像这两款游戏一样气氛强且有趣的游戏动画。

设计策略 | 停不下的游园会

基本的烟花绽放和粒子碎花的循环动画作为背景烘托整个游戏的气氛。同样作为整个游戏的标志——头部舞狮子,我们也希望它以一个热闹并且有趣的动画展示。

我们参考了dribbble上的一些卡通脸部动画,利用AE的父子级工具和简单旋转位移的完成了这个动画。

为了让这个动画更加生动(不那么容易看出循环规律)我们在这里做了6s的循环动画。计划用lottie输出整个狮子头部的动画,然而被技术同学告知白鹭引擎不支持lottie动画包。这里的动画显然不能用png序列来完成(占资源,fps低,体验不顺畅)。为了完美实现这里狮子头的动画我们用了一个“土”办法——设计师跟踪元素每一帧的运动数据,然后将数据交给重构同学完成整个动画的开发任务。终于完美实现狮子头部的动画表现。

设计策略 | 停不下的游园会

反馈相关的动画,当玩家按按错颜色福气时,为了减若玩家的操作失误时的挫败感,我们用了手机震动作为消极反馈代替音效和动效反馈。而玩家在成功消除的时候,我们用动效(福气入袋&积分加分)和类似”bingo”的音效让用户获得成就感。

同时消除类游戏关键在于在玩游戏的过程中玩家得到“割草”的快感。我们让用户进入combo状态后加入一些积极反馈的动画让用户获得更多满足感和成就感。

1)连击反馈动画

2)音效锣声提示

3)积分x2反馈提示

4)视觉对比更强的烟花背景动画

5)狮子头从蓝色进化成黄金状态

设计策略 | 停不下的游园会

在游戏中,我们增加了对战游戏中常用的“combo”连击,让用户在游戏中过程中感受到自己“猴塞雷”,通过较低成本的方式让用户获得成就与满足感。

设计策略 | 停不下的游园会

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

设计策略 | 停不下的游园会

5.科普与传播传统习俗

以民俗为主题的小游戏,让用户在玩游戏的同时科普与传播传统习俗,让逐渐消失的传统文化重新回归人们的视野。

设计策略 | 停不下的游园会

6.天降福运最终界面

设计策略 | 停不下的游园会

用户反馈

春节游园会活动自上线以来,激起了用户的热烈反响。有的用户为了赢取更高积分甚至自行“研发”了游戏的过关妙招,这些自主行为大大超出了设计原本的预想。民俗小游戏的结合增加了用户参与福袋收集、分享的兴趣与欲望,社交模式的渗入进一步扩大了活动的传播与影响。

设计策略 | 停不下的游园会

项目总结

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

鸣谢所有团队成员,谢谢你们的辛勤付出!

 收藏