杜蕾斯 Durex：探索你的X

2019-10-29 H5案例分享 H5案例分享

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

识别图中二维码

探索你的X-查阅二维码

完整欣赏此案例大约需要1分钟

案例：探索你的X

品牌：杜蕾斯 Durex

技术实现： cocos2d-js

亮点：

1、创意定位

杜蕾斯为2019年双11预售，新品情趣X做的品牌宣传H5。

2、策划上

测试类，以每个人都是一颗孤星为基础，在首屏中，随机显示9个用户的测试结果，点击顶部“创造你的星”按钮，可以进行测试并创建自己的星；

在测试阶段，通过5道问题，每个问题选项从5个到2个不等，根据用户的选择，生成海报。

3、设计上

相对其他测试类H5，视觉界面还是很精致，科幻和机械感，用户点击不同的选项，会有不同的动画，悬浮在下方的机械转盘上。

4、技术上

核心技术使用cocos2d-js，该技术对应的网址：https://www.cocos.com/，该技术平时做游戏偏多。

5、交互上

选项点击后，不会直接跳转到下一个问题，需要点击屏幕右下角的下一个按钮，应该是由于选择不同的选项，显示不同的动画造成的。

6、体验上

很多网友都说这个案例访问起来有点卡。

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

标签