【H5案例分享】虾米流年电台

互联网 2018-04-20

原标题:【H5案例分享】虾米流年电台

案例链接

https://toutiao.xiami.com/public/xiami5.0/index.html

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

案例:虾米流年电台

出品:虾米音乐

亮点:

策划上,视频+海报生成。Loading完毕,画面是一个模拟的电视机,提示用户点击播放按钮。点击按钮后,开始播放视频,视频内容是“虾小米”主持的模拟电台节目,节目回顾了“虾小米”在2017的经历,并向观众提出“听听你2018年的故事吧”。视频播放完毕,进入下一页,屏幕上有三字关键词不断变换,用户点击按钮“点我”会停止并选择一个,此时可以点击“重选”换一个,点击“确定”会提示输入名字,输入后点击“确认”,会根据用户的选择,生成一个关键词海报,海报背景会播放对应的BGM片段,播放完毕出现截图分享提示。点击“收听2018的歌单”会跳转至相应的虾米歌单页,点击“分享你2018的BGM”则会提示分享至微信或新浪微博。

设计上,电台部分整体配色偏复古,电视画面内容则是虾米主题相近配色,电视机上面的按钮皆可点击,分别对应暂停、播放等不同的功能,甚至还有“跳过”这样非常人性化的功能。关键词部分,界面简洁、可爱,选词幽默,贴合网络流行语。结尾页BGM播放完后设置了一个分享提示小彩蛋,这个设计也很有意思。

体验上,小五觉得整体上是个蛮有趣的案例,它前后两部分的用语或选词,都是2017年的热点,比如“葛优躺”、“佛系”等等,看到会不自觉联想到自己,尤其是最后的关键词部分,充满随机性,能吊起用户的好奇心,想看看自己的2018会是什么样子。而动效和交互部分,小五觉得有可改进的地方,那就是由电台到关键词的过渡动画,有点生硬,给人断层的感觉,如果背景不变只是变换上面的内容,看上去也会好一些。结尾页,虽然BGM会提示截图保存提示,但也有不少用户,是喜欢更简洁的画面,即不带微信的头部黑条,所以可以加一个“长按保存图片”的功能和提示。

技术实现: LayaAir引擎 + Video(视频)

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