美的Midea:鼓舞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-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号