杭州象文科技有限公司：一榜“京”天下

2016-11-11 H5案例分享 H5案例分享

案例：一榜“京”天下

出品：杭州象文科技有限公司

亮点：

策划上，主营数码、家电的京东秉持“透明”、“公开的原则”，将各类别家电的销售业绩进行排行，以便用户方便选购。而直白的数据表报形式显然已经不符合现在的潮流，所以策划上选择将各个家电图标漂浮在星空的形式，以便用户选择他们说喜欢的类别，查看各大品牌的销量。
设计上，采用星空为背景，玫红璀璨的星空突出各个家电的轮廓，避免用户点击错图标；在家电的单页，宝蓝为主色调，配以家电曲面光泽，整体看上去清爽、简明；在排行榜加载页，星空蓝渐变到玫瑰红，辅以“进入排行榜”五个字，给人一种简约感；在排行榜页，主色调为红色，有一种揭榜昭告天下之感。
配乐上，使用了激昂的交响乐，营造了一种激动人心的氛围。
体验上，页面加载流畅，虽然页面元素众多，整个加载时间不足3s，有效地减少用户的跳出率。星空中漂浮的家电图标，吸引着眼球与之转动。点击单个家电图标，页面秒开，无需多余的等待时间，体验很好。单个家电的排行榜也无需任何操作，页面自动播放画面进入排行榜，省去点击操作。
在交互上，采用3D全景交互技术，点击屏幕，以用户视角，随意转动家电图标，支持360度无死角旋转。

技术实现：使用自主研发3D引擎制作，e3dx.js

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

识别图中二维码

一榜“京”天下-查阅二维码

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

标签