浦发银行：寻找你遗忘的歌单

2018-03-29 H5案例分享 H5案例分享

案例演示，请长按/扫描以下二维码 ->

识别图中二维码

寻找你遗忘的歌单-查阅二维码

完整欣赏此案例大约需要30秒

案例：寻找你遗忘的歌单

出品：浦发银行

亮点：

策划上，宣传类。这是对浦发银行以及蔡依林、张靓颖、周笔畅等人的演唱会的宣传。首页进入选择自己喜欢的歌星，点击进入猜歌名，滑动转盘拼凑出正确的歌名即为成功。进入下一页面，显示“以爱之名为爱行动”Love Concert关爱留守儿童公益计划活动的详情，下方有两个按钮，继续引导用户进入领票页或者分享。品牌浦发银行|信用卡在页面上方露出，白色字体。
设计上，以黑色为主色调，红色为辅色调;唱片辅以相应的明星的海报，更有辨识度;整个页面以歌曲播放页为主，唱片可以转动，动画比较多；天后歌曲画面切换也比较流畅。
交互上，滑动交互，滑动转盘上的文字，拼接出正确的歌名。
技术上，使用白鹭引擎搭建整个H5的框架，而页面的动画等由canvas实现。
体验上，交互无难度，每位歌星只有一首歌要猜歌名，选择歌星时就可听到相应的歌曲，所以可以选择自己知道名字的歌曲点击猜歌名哦。切换的时候很流畅，音量有渐小的变化，比较自然；同时页面模拟歌曲播放页面，视觉上感觉很友好。

技术实现： tween.js + egret.js

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

标签