小米:小米10梦幻之作

2020-03-08 H5案例分享 H5案例分享
小米:小米10梦幻之作


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

识别图中二维码

小米10梦幻之作-查阅二维码

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


案例:小米10梦幻之作

品牌:小米

技术实现: jQuery+PlayCanvas

亮点:

1.创意定位

小米公司为“小米10”推出的产品介绍H5,利用H5的Web 3D特性,简洁炫酷的将小米10梦幻般的放到了一个“太空舱”中,供用户欣赏和了解,简洁、直接、大气。

 

2.策划逻辑

Loading加载完毕,一个移动镜头把“小米10”手机置入太空舱中,用户可以滑动手机,从水平和垂直任何方向看手机漂浮在太空舱中,映衬了主题“梦幻之作”。

 

主界面有五个菜单:

 

①拆机细看你会爱得更彻底,点击后进入手机内部分层结构图,每个分层中,重要部件有高亮提示,点击提示,显示该部件的碳层介绍;

 

② 1亿像素8K电影相机,点击后进入摄像头介绍单页,每个特点点击,会有更详细的文字介绍,点击页面底部的“看看拍出的照片有多棒”进入照片浏览页面,多张高清照片左右滑动可以浏览,双击可以看高清大图;

 

③外观颜色,点击后进入机身颜色配置详情页,小米10分两款:10和10 pro,一共有5种机身颜色,点击对应颜色按钮,太空舱机身随之变化;

 

④配置价格,点击后弹出两款手机的配置特点和起步价格;

 

⑤马上入手,直接跳转“小米商城”,可以下单购买。

 

3.视觉上

 3D构建空间,一直悬浮于太空,视觉冲击力太过梦幻。需要了解的信息,以平面弹层出现,简洁高效。

 

4.交互体验

滑动屏幕可以看到3D空间中手机的各个角度,很流畅。





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

标签

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

相关推荐:

小米:智米空调-挑战“吹”实力

MI 小米:小米6周年

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~