网易云音乐：嗨，一起设计一张属于你的海报吧

2019-06-20 H5案例分享 H5案例分享

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

识别图中二维码

嗨，一起设计一张属于你的海报吧-查阅二维码

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

案例：嗨，一起设计一张属于你的海报吧

品牌：网易云音乐

亮点：

1. 创意策划上

以“一起设计一张属于你的海报”为出发点，如何设计海报呢？通过4次选择。

第一个选择是4个图形，你觉得现在的自己更像哪个图形，选择了图形后，后面三个选择和最后海报都是你选择的图形；

第二个选择是选择你最喜欢的旋律，一共四个选项，可以点击播放按钮试听，但是每次进入，这四个选项不同，会有变化；

第三个选择是滑动选择现在的心情；

第四个选择是3秒内随意敲击屏幕，确实不同的敲击出现的图形波纹不同；

出现一个图后，输入你的名字，调整海报上大字的颜色，属于你的海报生成完毕。

2. 设计上

大色调纯色，还要网易云音乐的配色风格。

3. 技术上

动画使用SVG实现，代码哦！现在国外流程把图标和动画使用SVG实现，不知道你发现没有有些公众号的长图加入动画，其实也是使用SVG实现。

技术实现： svg

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

标签