大众点评:阿惠故事3 吃饭不带五姨

2016-06-23 H5案例分享 H5案例分享
大众点评:阿惠故事3 吃饭不带五姨

案例:阿惠故事3 吃饭不带五姨

出品:大众点评

亮点:

  1. 策划上,武侠故事类,主要分为三部分,① 在泰山酒店饭后,阿惠快手买单,战胜五姨(五元钱),将“闪惠买单更快”这一特点在H5一开始,就展现在大家眼前,有利于加深大众对闪惠买单快的印象;② 场景化设计,采用三个动态流畅的比武打斗场景,生动形象地将闪惠击败零钱、穷B、AA制快速买单演绎了出来,极其吸引人;③ 通过阿惠战后向大家传授阿惠吃饭抢单心经,再次强调吃饭不带钱,买单用闪惠

  2. 设计上,主要采用武侠风格;① 连绵不绝的泰山图采用人民币“五元钱”背面上的群山图,并将山上的字由“五岳独尊”改为“吃饭不带钱”;② 打斗场景采用的是中国古代山水画、风俗画做背景,人物形象采用漫画风格;③ 尾屏的分享弹出层采用的是人民币“五元钱”正面上的图片,细节部分稍有变动,比较明显的有毛爷爷的头像改成了“阿惠”, “伍元”字样改为“闪惠”,将“中国人民银行”改为“吃饭不带钱银行”等

  3. 交互上,主要采用长按主画面的方式,观看打斗场景,一旦手指松开,退出观看,三个场景也会出现文字提醒;还配有相应的打斗场景音效哦,让人有一种身临其境的感觉

  4. 技术上,首屏消除 “先锁屏在横屏” 提示采用的是html5的重力感应,整体主要采用Canvas,并在Canvas上绑定touch事件,加帧动画,控制动画播放

  5. 体验上,整支H5看起来非常带感,十分吸引人,有些美中不足的就是在某些安卓机下看不了啊~~~



技术实现: Zepto + Canvas


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

识别图中二维码

阿惠故事3 吃饭不带五姨-查阅二维码




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

标签

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

相关推荐:

大众点评年度战略产品“闪惠”品牌形象宣传 — 阿惠故事1:吃饭别带姥爷

大众点评:大众点评:大肠点评

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~