美的Midea:鼓舞2021

2021-01-24 H5案例分享 H5案例分享
美的Midea:鼓舞2021


案例演示,请长按/扫描以下二维码 ->

识别图中二维码

鼓舞2021-查阅二维码

完整欣赏此案例大约需要1分钟


案例:鼓舞2021

品牌:美的Midea

技术实现: HTML5

制作:艾洛互动

亮点:

1.创意定位

美的2021年春节前推出的品牌营销创意H5作品。以“鼓舞2021”为主题,通过一个击鼓小游戏,为大家的2021年鼓劲加油。

 

2.策划逻辑

整体流程:Loading→故事引导→用户接棒→选鼓(5选1)并开始游戏→321倒计时+游戏引导→击鼓小游戏→生成海报过场动画→海报。

 

① Loading部分:几种鼓面动画切换+加载进度百分比;

 

② 故事一道视频动画:千百年来,苗族人闻鼓起舞。该战即战,该乐即乐。把铿锵的鼓声,变成对生活的鼓舞。一个叫阿朵的姑娘在舞动击鼓,然后,画面停住。

 

③ 用户接棒:交互弹层,是否接棒阿朵姑娘,继续击鼓。用户点击“我要接棒”,出现鼓舞界面,随后进入“选鼓”环节。

 

④ 选股:五选一。五种鼓:五谷丰登鼓,猴儿鼓,老人鼓,团圆鼓,年鼓。每种鼓面配合不同剪影动画和鼓励文案。引导文案清晰:左右滑动选择。选好后,点击“开始鼓舞”按钮,进入击鼓小游戏。

 

⑤ 击鼓小游戏:闪耀开始后,自动进入游戏,用户根据从上而下降落的节奏,敲打鼓面,如果没击中,显示Miss,如果击中和连续击中,都有反馈提示,随着背景音乐和用户敲打的鼓点,很快游戏结束,大约15秒左右。如果用户点击次数小于9次,则不生成海报,如果大于9次,会显示击鼓的集中率,然后跳转生成海报过场动画。

 

⑥ 生成海报过场动画:根据选鼓环节选定的鼓面人物,显示一个人物过场动画,然后,进入海报页面。

 

⑦ 海报页面:主要包含根据选鼓环节生成的鼓舞文案,品牌Logo和Slogan的露出,带有用户昵称的第XXX位鼓舞传人。海报底部有两个按钮:再次击鼓和召唤接棒人。

点击再次击鼓,则进入选鼓页面;点击召唤接棒人,弹出半透明分享引导蒙层。最底部,有长按保存鼓舞海报提醒,用户长按即可把海报保存到手机相册。保存后的海报包含H5自身回流二维码。

 

3.设计交互

整体界面用红黄配色,砖红背景,黄金字体,衬托出节日的气氛,又给人暖暖的力量。民族服饰和剪影,很巧妙的融入游戏元素。交互上,尽可能多的给用户清晰的指引,在每个环节,都不需要思考太多,就能轻易上手。

 

4.体验上

敲鼓没敲过瘾,小五反复体验了很多遍,玩完心里涌动着力量,确实被鼓舞了。





以上为“H5案例分享”团队原创文章,转载请注明出处!

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

Midea美的:等风停靠

美的:你的家电有隐性污染吗?测测就知道

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~