虾米音乐：虾米流年电台
案例演示，请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要2分钟
案例：虾米流年电台
出品：虾米音乐
亮点：
- 策划上，视频+海报生成。Loading完毕，画面是一个模拟的电视机，提示用户点击播放按钮。点击按钮后，开始播放视频，视频内容是“虾小米”主持的模拟电台节目，节目回顾了“虾小米”在2017的经历，并向观众提出“听听你2018年的故事吧”。视频播放完毕，进入下一页，屏幕上有三字关键词不断变换，用户点击按钮“点我”会停止并选择一个，此时可以点击“重选”换一个，点击“确定”会提示输入名字，输入后点击“确认”，会根据用户的选择，生成一个关键词海报，海报背景会播放对应的BGM片段，播放完毕出现截图分享提示。点击“收听2018的歌单”会跳转至相应的虾米歌单页，点击“分享你2018的BGM”则会提示分享至微信或新浪微博。
- 设计上，电台部分整体配色偏复古，电视画面内容则是虾米主题相近配色，电视机上面的按钮皆可点击，分别对应暂停、播放等不同的功能，甚至还有“跳过”这样非常人性化的功能。关键词部分，界面简洁、可爱，选词幽默，贴合网络流行语。结尾页BGM播放完后设置了一个分享提示小彩蛋，这个设计也很有意思。
- 体验上，小五觉得整体上是个蛮有趣的案例，它前后两部分的用语或选词，都是2017年的热点，比如“葛优躺”、“佛系”等等，看到会不自觉联想到自己，尤其是最后的关键词部分，充满随机性，能吊起用户的好奇心，想看看自己的2018会是什么样子。而动效和交互部分，小五觉得有可改进的地方，那就是由电台到关键词的过渡动画，有点生硬，给人断层的感觉，如果背景不变只是变换上面的内容，看上去也会好一些。结尾页，虽然BGM会提示截图保存提示，但也有不少用户，是喜欢更简洁的画面，即不带微信的头部黑条，所以可以加一个“长按保存图片”的功能和提示。
技术实现： LayaAir引擎 + Video(视频)
以上为“H5案例分享”团队原创文章，转载请注明出处！
标签
关注微信号：h5-share，获取更多创意H5案例分享！也可访问H5案例分享网站www.h5anli.com，搜索查阅~
微信扫一扫
关注该公众号
京公网安备 11010802030403号
