360手机助手:三娃回家
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要2分30秒
案例:三娃回家
品牌:360手机助手
技术实现: Pixi.js + Tween.js + Animate.js
亮点:
- 创意定位
360手机助手出品,用两个过年回家的片段对比,显示手机APP给人们生活带来的便利和省心,最后用户可下载相关APP。
- 策划逻辑
右滑屏幕,查看三娃的回家经历,在长幅漫画前段和结束后都可点击查看反转剧情,反转看完后可点击查看三娃用过的APP,直接下载,两段故事内容如下:
- 困难重重
三娃抢不到回家的火车票,还被年终总结困扰,听到同事说带对象回家心里很失落,经过咨询黄牛等挣扎后,终于坐上了回家的火车,但不确定能不能在大年夜前赶到家,下了火车在寒风中排队坐出租车,回到家和妈妈逛拥挤的超市买年货,排长长的队等待付款,过年时爸妈都出去了自己一个人在家无聊。
- 反转视频
三娃用软件定好了票,写好了总结,用手机交友软件认识了女友,回家的动车上下单年货,出火车站坐上预约好的专车直接回家,年货也很快直接送到家,过节用手机定好包厢跟朋友们尽情欢乐。
- 设计上
手绘长幅漫画,三娃头部被设计成了一个青蛙头,三娃回家的过程跟在外地工作的许多上班族是一样的,看起来很有共鸣。
- 交互上
随着用户的右滑漫画逐帧呈现,对话框和心理活动也渐变式出现,用户可以在开头就查看反转视频,也可以浏览完毕再点击查看。
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号