大众点评:阿惠故事3 吃饭不带五姨
案例:阿惠故事3 吃饭不带五姨
出品:大众点评
亮点:
-
策划上,武侠故事类,主要分为三部分,① 在泰山酒店饭后,阿惠快手买单,战胜五姨(五元钱),将“闪惠买单更快”这一特点在H5一开始,就展现在大家眼前,有利于加深大众对闪惠买单快的印象;② 场景化设计,采用三个动态流畅的比武打斗场景,生动形象地将闪惠击败零钱、穷B、AA制快速买单演绎了出来,极其吸引人;③ 通过阿惠战后向大家传授阿惠吃饭抢单心经,再次强调吃饭不带钱,买单用闪惠
-
设计上,主要采用武侠风格;① 连绵不绝的泰山图采用人民币“五元钱”背面上的群山图,并将山上的字由“五岳独尊”改为“吃饭不带钱”;② 打斗场景采用的是中国古代山水画、风俗画做背景,人物形象采用漫画风格;③ 尾屏的分享弹出层采用的是人民币“五元钱”正面上的图片,细节部分稍有变动,比较明显的有毛爷爷的头像改成了“阿惠”, “伍元”字样改为“闪惠”,将“中国人民银行”改为“吃饭不带钱银行”等
-
交互上,主要采用长按主画面的方式,观看打斗场景,一旦手指松开,退出观看,三个场景也会出现文字提醒;还配有相应的打斗场景音效哦,让人有一种身临其境的感觉
-
技术上,首屏消除 “先锁屏在横屏” 提示采用的是html5的重力感应,整体主要采用Canvas,并在Canvas上绑定touch事件,加帧动画,控制动画播放
-
体验上,整支H5看起来非常带感,十分吸引人,有些美中不足的就是在某些安卓机下看不了啊~~~
技术实现: Zepto + Canvas
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号