昕薇：薛之谦的buy家情报局

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

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

识别图中二维码

薛之谦的buy家情报局-查阅二维码

案例：薛之谦的buy家情报局

出品：昕薇

亮点：

策划上，图文展示类，① 首页是薛之谦坐在膜法世家面膜上的大图和美丽的模特们，利用明显效应引出薛之谦的buy家情报局；② 而后是护肤情报播报，点击带有模特头像的汽泡去看看昕薇模特推荐给他家的护肤方法吧；③ 还有好多搞笑好玩的昕薇模特推荐护肤方法的拍摄花絮，任你撩；④ 树上结了五款膜法世家系类面膜，点击面膜图标即可查看产品详情；⑤ 想了解更多面膜产品，请识别二维码关注膜法世界微信公众号，优惠多多，快来剁手吧。
设计上，小清新风格，采用生机勃勃的绿色作为主色调，采用面膜与大自然的景色相融合的视觉设计，从侧面展现了膜法世界的面膜是绿色产品。
交互上，看搞笑好玩的拍摄花絮采用的是拖动或直接点击的方式将自己想看的图片置顶，而后可拖动放缩旋转，欣赏花絮图片。
技术上，上下滑屏采用的是JS滑屏组件Swiper，昕薇模特推荐护肤方法的展现采用的是Video视频，拍摄花絮的拖动放缩旋转的手势操作采用的是HammerJS。

技术实现： jQuery + Swiper + HammerJS

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

标签