西门子:音乐之城

2017-05-26 H5案例分享 H5案例分享
西门子:音乐之城

案例:音乐之城

出品:西门子

亮点:

  1. 策划上,动画。Loading完毕后,播放一段引导动画,介绍智慧城市,并由“音乐之城”将画面过渡到一个八音盒上。八音盒上面是不断变换的智慧城市,点击右边的八音盒旋钮,可以前往“智慧城市”的下一站。点击屏幕下方“+”按钮,按钮会展开成一个文字框,里面以文字+图片的形式讲述西门子为“智慧城市”做出的贡献及成就。最后八音盒收起进入结尾页,提示“邀请最爱的人来到你的城市”。

 

  1. 设计上,黑色大背景,突出主题内容。八音盒的设计非常巧妙,包括每一站之间的过度动画在内,整体动画效果很炫酷同时也非常细腻。轻巧的背景音乐给案例增添了一分科技感,配合画面,给人一种很精致美好的感觉。

 

  1. 体验上,所有的动画效果都是以图片序列帧的形式展现的,所以每段动画每个过渡都控制得非常到位,又加上了交互使得案例不会没有参与感,所以小编觉得整体来说,它是个很精美的H5动画。不过小编觉得还有可以改进的地方:①结尾部分除了文案和动画,没有任何提示,返回重看需要刷新,也没有提示跳转活动页之类的,不知道是不是有意这样设计,但是这样的设计可能不是很人性化。②案例既然没有滑动交互,那完全可以屏蔽默认滑动,使得用户在上下滑动屏幕时,页面在微信浏览器下不会跟着整体滑动,这样会显得更加精致。③众所周知八音盒旋钮是旋转交互,并且会发出一点机械音,如果在交互的同时,播放一点旋钮转动的音效,可能代入感会更强。



技术实现: CreateJS + jQuery


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

识别图中二维码

音乐之城-查阅二维码




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

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

西门子:一平米咖啡馆

西门子:鲜活大世界

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~