招商蛇口：China OS系统全球首发

2016-12-27 H5案例分享 H5案例分享

案例：China OS系统全球首发

出品：招商蛇口

亮点：

策划上，故事视频类，① 此H5设计上以时间点的转换为主线，从100多年前这款系统首先由洋人占领，1872年李鸿章的洋务运动，到1979邓小平改革开放，再到2015一带一路，并通过屏幕上的软件升级说明到此时已完成第三次更新；② 后期视频说明蛇口招商是由蛇口工业区联合招商地产联合而成；③再从衣食住行论逐次而谈。
设计上，改革开放前的故事采用竖屏方式，改革开放后的今本上采用的是横屏方式；改革开放前以棕黄色作为主色调，手机应用图标为主要元素；改革开放后色彩变得清新明快，以漫画为主。
交互上，基本上是以动画自动播放的形式进行展现，采用的技术是video视频。

技术实现： jQuery + HammerJS

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

识别图中二维码

China OS系统全球首发-查阅二维码

其前半部分-竖屏展示内容如下：

其后半部分-横屏展示内容如下：

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

标签