JD.com 京东:遇见未来的你

2017-03-23 H5案例分享 H5案例分享
JD.com 京东:遇见未来的你


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

识别图中二维码

遇见未来的你-查阅二维码


案例:遇见未来的你

出品:JD.com 京东

亮点:

  1. 策划上,动画文字展示+轮盘抽奖。Loading完毕进入页面,点击屏幕下方“活动规则”可以了解此次活动相关信息,点击“开启打印之旅”进入展示部分。一共三个场景,工厂、学校和家,通过动画和文字,并结合长按交互的形式,展示了3D打印机在这些场景中所发挥的实际作用。展示完毕后,通过过度页来到抽奖环节,一共五个奖项+谢谢参与,点击“开启遇见”可进行抽奖,点击“我的奖品”可以查看自己中过的奖品。每个用户只有三次机会。结尾页可以“再看一遍”或分享给小伙伴,还能点击底部“前往3D打印现场”跳转京东页面。

 

  1. 设计上,采用手绘的方式。案例主体为3D打印机,主题为遇见未来的你。因为这两方面采用了稍微冷一些的蓝色为主,陪以黄色和粉色,让画面亮一些。整体造型上来说,改变了传统3D打印机的形状,主要突出打印臂与制作台。画面场景分为工厂、学校和家庭,每一个场景都有与之相关的事物,让画面充实起来。动效上来说,为了增加与用户的交互,采取长按的方式进行打印,打印完成后可以让画面动起来,使画面有了活力。

 

  1. 体验上,H5本身以轻松活泼的基调,展示了3D打印机在各场景中的使用,或多或少能改变人们对3D打印机“不实用、笨重”的刻板印象。小编看到案例之前,一直觉得3D打印离自己很远,体验完案例,再仔细想想,貌似它适用于任何场景,杯子、眼睛架、置物盒…需要什么,就打出来,不用再去纠结买怎么样的,自己按照想法打一个就好。希望这个技术会越来越发达,并能普及到家家户户。



技术实现: Animate CC + CreateJS + Zepto



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

标签

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

相关推荐:

京东:一起猜鸡吧

【京东】H5案例大汇总(干货精选)——2016大合集第49波

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~