Tmall 天猫 + vivo：全球首家自拍治愈馆开张
案例：全球首家自拍治愈馆开张
出品：Tmall 天猫 + vivo
亮点：
- 策划上，视频+图片处理。案例以第一人称视角展现故事，主人公是一位声音好听的萌妹纸（萌不萌不知道反正肯定没小五萌），来到一扇门前，此时用户点击打开并进入，通过电梯来到了二楼。原来这里是“自拍治愈馆”，所有来到这里的人，只要拥有自拍相关病症，都将会被天猫博士带入“神奇的治愈之旅”。有三种症状，点击可以“对症入室”，观看对应的动画，动画结束后，用户输入名字并上传自拍照来进行“治愈”，完成后能获得治愈证书，证书以图片形式呈现，用户可以选择长按保存至本地。结尾页可选择“自拍不能停”去别的屋治愈，或者“出示治愈书”分享给好友看。
- 设计上，画面风格多变。刚进入治愈馆时，整体色调偏暗黄，带有一点复古风格和神秘感。“黑夜焦躁症”治愈室内则是机械风格，色调由暗变明，对应治愈主题。 “存在感缺失症”治愈室内很明亮，整体色调偏粉，角色玻璃质感十足，画面充满科技感。“P图多动症”治愈室中角色是木制的，整体色调偏黄，动画效果有种木制机械风。所有视频中，元素都很有立体感，动画效果非常细腻，背景音乐也配合得恰到好处。
- 体验上，上传了几张照片，感觉区别不是特别明显，那个…也有可能是因为小五上传的照片，全是已经P过的吧…不过，如果照片的显示区域如果稍微大一点，对比应该就会能显得更明显一些。除此之外，小五个人对“存在感缺失症”画面中的那些眼睛，有点抵触，感觉很渗人，不知道看官们有何感受？不过总体上，无论是从画面表现，视频动画效果，功能的实现，和音乐的选择等多种方面来看，已经是一个很棒很精致的H5了。
技术实现： Video(视频) + CreateJS + jQuery + HammarJS + iScroll
案例演示，请长按/扫描以下二维码 ->
识别图中二维码
以上为“H5案例分享”团队原创文章，转载请注明出处！
标签
关注微信号：h5-share，获取更多创意H5案例分享！也可访问H5案例分享网站www.h5anli.com，搜索查阅~
微信扫一扫
关注该公众号
京公网安备 11010802030403号
