海飞丝：一起打破常“硅”

2017-12-15 H5案例分享 H5案例分享

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

识别图中二维码

一起打破常“硅”-查阅二维码

完整欣赏此案例大约需要30秒

案例：一起打破常“硅”

出品：海飞丝

亮点：

策划上，图文展示类，进入首页是一个镜面，上面浮现的是各种世俗常规的看法和束缚，比如女生就该安稳一点、结婚生子才是正事等等。其中最为醒目的就是对无硅油洗发水的看法：无硅油又干又涩。点击这些世俗的偏见，它们就会像镜子一样破碎，但是对无硅油洗发水的看法会破碎又重组，象征着这种看法根深蒂固。数次破碎后，无法打破无硅油的硅则，就可以交由海飞丝了。海飞丝可以打破这个常硅。一段音乐配合图片和动画介绍海飞丝打破0硅油看法的特点，吸引用户购买。
设计上，采用淡蓝色作为主色调，给人以干净纯净之感。镜面上的其他偏见很符合现实中对女生的偏见，所以可以很好地引起女生的共鸣，加深对海飞丝的印象同时把海飞丝0硅油的特点很好地展现出来，让人深深记住这款洗发水是一个拥有这款优点的。
交互上,进入速度很快，点击破碎偏见很有趣但是多次无法打破0硅油的偏见会让人疑惑和失去耐心。最后的洗发第一步和第二步速度过快，还没看清就结束了，对事件的控制不太合理。

技术实现： zepto.js+p2.js+loading.js

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

标签