腾讯：所谓英雄 不止一面
案例：所谓英雄 不止一面
出品：腾讯
亮点：
- 策划上，视频+人脸识别+图片合成+摇一摇变脸。“2017全球合作伙伴大会”活动宣传。Loading完毕，自动播放视频（视频可跳过）。视频结束进入首屏，会读取用户微信昵称，并提示上传“清晰正面、五官端正的头像照”。等用户上传照片后，会识别照片的脸部，并与随机一位中国古代名人的身体合成在一起。此时用户可以选择长按保存到相册，或者摇一摇手机变个身子，也可以点击海报重新上传照片。点击底部按钮“我要报名参加”可跳转“2017全球合作伙伴大会”活动报名页。
- 设计上，视频部分，虽然只有短短的几秒，但将戏剧与嘻哈结合在一起，同时搭配丰富的人设、色彩和炫酷的动效，一上来就非常博人眼球。再到照片部分，虽然案例说的是“变脸”，但从视觉效果上看，其实是变身，变的是除了五官以外的地方，当然脸部也会做微小的调整（比如眉毛），以搭配身体，并且给脸部还化了妆，让整体有中国戏剧风。
- 体验上，人脸识别+图片合成的H5案例数不胜数，搭配不同古风服装的也是有，但是再搭配摇一摇自动“变脸”功能的，就有点新鲜了。想体验别的角色/服装，不用重新上传，或者重新点击，而是直接“摇一摇”就好，虽然摇动手机可能更费劲些，但能避免交互疲劳，再加上变脸是随机的，会从头到尾充满新鲜感和趣味性。案例的细节设定也是小五喜欢的地方，比如在用户摇一摇的时候，还会有背景音效；再比如上传照片识别失败后，不用用户再点击H5中的上传按钮，便会自动弹出系统的拍照/上传功能按钮，很人性化。
技术实现： jQuery + Video + Swiper + 重力感应
案例演示，请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要1分钟
以上为“H5案例分享”团队原创文章，转载请注明出处！
标签
关注微信号：h5-share，获取更多创意H5案例分享！也可访问H5案例分享网站www.h5anli.com，搜索查阅~
微信扫一扫
关注该公众号
京公网安备 11010802030403号
