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