QQ音乐 + 七喜：窥探你体内的复古DNA
案例：窥探你体内的复古DNA
出品：QQ音乐 + 七喜
亮点：
- 策划上，数据展示类H5。用户进入页面后，选择一键登录QQ，系统便可获取用户使用QQ音乐的相关数据，如“今年以一首XXX作为开始”，“XXX直击你的心声，你将它重复播放了X次”等等，这些都是用户使用QQ音乐后产生的专属数据，系统会由此分析你的“复古DNA构成”，从而推荐七喜专属罐装饮料，并生成复古DNA。结尾页用户可以长按保存或截屏，来秀出自己的复古DNA。选择“吃复古套餐”跳转汉堡王活动页面，选择“拿复古罐”可跳转京东来购买专属复古罐饮。
- 设计上，QQ音乐的经典黄绿配色，并混合了七喜的风格。小五一开始并不知道跟七喜相关，只是觉得配色很眼熟，后来七喜饮料一出现，小五恍然大悟。案例采取了传统的上下滑动翻页的方式，但精美的动画，使画面从头至尾都充满活力。画面大部分区域都为绿色，从视觉上来讲非常友好，同时在酷热的夏天给人一种清凉舒适的感觉。
- 体验上，虽然首页需要一键登录QQ，可能会造成部分用户流失，但案例本身就是为QQ用户及QQ音乐使用者制作，所有数据都来源于用户自己的QQ号，所以也就无伤大雅了。案例动画精美，交互简约，音乐也很有节奏感，整体充满了活力。不过小五觉得有可改进之处，就是进入案例时，音乐没有自动播放，而是需要用户手动点击右上角的音乐图标来开启，并且音乐图标虽然有动画，但因为画面一直都是动态的，所以用户很可能不会注意这个图标，小五觉得进入案例自动播放音乐的话，体验可能会更好。总的来说，案例很赞，小五作为音乐爱好者，真的很喜欢这样轻松愉快的H5。
技术实现： SeaJS + jQuery + Egret(白鹭引擎)
案例演示，请长按/扫描以下二维码 ->
识别图中二维码
以上为“H5案例分享”团队原创文章，转载请注明出处！
标签
关注微信号：h5-share，获取更多创意H5案例分享！也可访问H5案例分享网站www.h5anli.com，搜索查阅~
微信扫一扫
关注该公众号
京公网安备 11010802030403号
