农夫山泉：维他命水 STYLE
案例：维他命水 STYLE
出品：农夫山泉
亮点：
- 策划上，DIY说唱MV合成，即输入歌词自动生成说唱MV。Loading完毕，首屏是主题页面，提示用户“滑动手指来打碟”，用户触摸打碟机进入DIY部分，选择你的嘻哈造型，此部分分为3个步骤：通过左右滑动屏幕，来选择中意的瓶身；2.选择头部造型，从预设的几个发型、配饰、特征中，搭配一套喜欢的；3.点击按钮输入歌词，开始制作。最后点击确定，即可生成歌曲MV，MV主角是刚才DIY的造型，背景音乐则是输入的歌词与伴奏的合成。结尾页可以点击按钮观看MV，如果不满意作品，能点击按钮“重新编辑歌词”。除此之外，还能“分享至新浪微博”，或点击 “喝农夫山泉维他命水，获得嘻哈投票权”来查看活动规则。若在结尾页选择分享，用户分享给好友的就是自己DIY的作品。
- 设计上，黑金为主色调（莫名有种贵族气质你敢信）。案例中可供选择的元素很多，趣味性非常强，当然对小五这样的选择困难癌患者，也友好地提供了“随机造型”这样有爱的设计。每一页的背景都一直处于动态，整体看起来非常有活力。MV部分除了将歌词与伴奏合成，还将歌词放在MV画面上与音乐同步。
- 体验上，本来以为只是输入歌词，系统念出来，糊弄一下用户，但是发现歌词每一个字，都根据字数情况的不同，刚好卡在伴奏的鼓点上，最终效果就是让用户情不自禁地开启抖腿模式。案例各处细节做得非常用心，到位，策划用心，设计精美，制作精良，小五超喜欢这支H5。以前，别人问“yo你会freestyle么”，我往往不知道怎么回答，说“有”又不想傻兮兮地唱给对方听，显得很der，但说“没有”又显得自己不够酷…以后再也不用纠结了，直接把自己DIY的作品扔给对方，甩发离开，不留一点云彩…
技术实现： CreateJS
案例演示，请长按/扫描以下二维码 ->
识别图中二维码
以上为“H5案例分享”团队原创文章，转载请注明出处！
标签
关注微信号：h5-share，获取更多创意H5案例分享！也可访问H5案例分享网站www.h5anli.com，搜索查阅~
微信扫一扫
关注该公众号
京公网安备 11010802030403号
