耐克Nike&滴滴：NIKE 上海不信极限

2016-08-04 H5案例分享 H5案例分享

案例：NIKE 上海不信极限

出品：耐克Nike&滴滴

亮点：

策划上，图文展示类，用于活动宣传，① 在首页下方选择日期或运动类型（运动类型可选多种），即可在页面上以彩色3D立体线条的形式，将其活动覆盖区域生动形象的展现出来；② 活动详情，8月5日到8月21日，耐克精英教练团于跑道，球场和健身中心带你一起打造自己的主场，并将运动与耐克球鞋紧密结合起来；③ 想立即体验耐克产品的小伙伴，可点击活动详情介绍页下方的“即可入手”去挑选自己喜欢的夏日装备；④ 搜索列表，以时间、运动类别、地点为依据点进行选择，去搜索相关的具体活动信息，还可进行滴滴专车预约，预约成功有专车接送。
设计上，3D立体风格，采用玫红色作为主色调，① 首屏活动覆盖区3D立体线条以鹅黄色到玫红色做过渡色，看起来更显精致，并在灰色的背景下形成强烈的视觉冲击；② 活动展现主要以拍摄的活动现场照+文字的形式，这样更显真实，有较强的说服力。
技术上，首屏的彩色3D立体线条动画主要采用的是Canvas。
体验上，在某些低端机型下打开的有些慢，不过并不是很影响其内容、效果的呈现，炫酷的效果总是比较耗性能的，要有些耐心哦~

技术实现： Canvas + RequireJS（JS模块载入框架）

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

识别图中二维码

NIKE 上海不信极限-查阅二维码

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

标签