淘宝：一份来自三臀诊所的情绪化验单

2017-08-10 H5案例分享 H5案例分享

案例：一份来自三臀诊所的情绪化验单

出品：淘宝

亮点：

策划上，人脸识别。进入案例，提示用户长按加载诊所，随后以故事的形式进入“诊所”并开始“情感勘探”。用户点击“开始勘探”会调起手机摄像头，此时用户自拍一张照并选择使用照片后，系统会自动开始识别用户的面部表情数据，并根据算法分析给出照片上的情绪状态。用户可以选择重新测试，或者进入下一步，填写收件信息获取复诊券。

设计上，经典的淘宝橘红色为主色调。开头部分的长按交互以视频的形式完成，并且对于松开按钮进行了视频倒放处理，效果很完整。照片规则介绍部分，有三条，每一条都可以拉动并产生弹簧的动画效果。上传照片识别后的效果，也做成了游戏抽奖机的既视感，让人对识别结果充满了期待。一共8种表情类型，即便是同一类型的结果，也使用了不同的文案，进一步提升了案例的趣味性。从整体上看，案例各处的动画效果和小细节都做得非常细腻用心。

体验上，策划设计和制作，从头到尾都非常用心的一支H5。把上传照片得出面部数据，这一个简单的交互，玩成了一个高大上的情感勘探所，甚至还有规模不小的线下活动，加入了造物节豪华午餐。一个简简单单的交互形式，只要用心，也能玩出不同的花样。

技术实现： Tween.js + exif.js + jQuery

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

识别图中二维码

一份来自三臀诊所的情绪化验单-查阅二维码

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

标签