欧珀莱：育肤棉_H5案例分享

欧珀莱：育肤棉

2017-06-09 H5案例分享 H5案例分享

案例：育肤棉

出品：欧珀莱

亮点：

策划上，图文展示类，① 采用多幅图文的形式展示了化妆棉的各种小秘密，包括使用化妆棉的正确方式、用途，还不知道自己是什么肌肤的可以点击相应按钮去做做专业的肌肤测试；② 而后由化妆棉引出欧珀莱育肤棉并讲述了欧珀莱育肤棉的材质，如果你有化妆棉小技巧还可提交留言哦，长按尾页二维码还可关注欧珀莱官方微信获取更多详情。
设计上，插画风格，采用粉红色作为主色调，里面的背景小元素多采用镂空效果。
技术上，加载和音频控制采用的是CreateJs中的PreloadJS和SoundJS，滑屏采用的是JS滑屏组件Swiper。
体验上，无论是做肌肤测试还是填写妆棉小技巧留言，都没有返回或者关闭按钮，只能去做测试、填写留言，感觉用户体验上还需要稍加优化。

技术实现： jQuery + Swiper + CreateJs

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

识别图中二维码

育肤棉-查阅二维码

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