心相印：研究你的好心情

2018-12-26 H5案例分享 H5案例分享

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

识别图中二维码

研究你的好心情-查阅二维码

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

案例：研究你的好心情

出品：心相印

亮点：

策划上，①这是一款心相印为了推广产品制作的H5，②开启后以点击不同的胶囊进行选择，不同的胶囊上有不同的诗句对应心情，紫色的胶囊对应的是装睡的人叫不想，躁动的心按不住；粉色的胶囊对应的是落叶归根我归你，小幸运亦是大幸福；蓝色的胶囊对应的是人生总会雨雨雨雨雨雨雨过天晴的；绿色的胶囊对应的是寂寞是一场梦，而我总是睡过头；黄色的胶囊对应的是何必活成别人想要的样子，你就是你。③选择多样化可以用来增强用户的参与兴趣，用户选择旋转台子上的胶囊后进入动画界面（19秒），进入心相印纸巾制造的过程，有纸巾压合，音符从纸巾上跳跃下来等画面步骤，结合了产品的特点和音乐的符号很好的点出了合作的重点，创意有趣吸引用户观看，④动画结束后进入最后界面，用户可以收听完整音乐，也可以唱，或者有料。
设计上，绿色系，心相印的主题色，中间穿插着音符，与酷狗的合作凸显出来。
体验上，赶快戴上耳机寻找共鸣，聆听专属于自己的音乐世界。

技术实现： jQuery canvas clipboard

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

标签