腾讯WiFi管家：腾讯WiFi管家，地铁都能连

2017-11-08 H5案例分享 H5案例分享

案例：腾讯WiFi管家，地铁都能连

出品：腾讯WiFi管家

亮点：

策划上，长图动画类。这是由腾讯wifi管家为宣传自己的品牌所打造的一款宣传h5，主要是分为三个阶段。①进站阶段。一双手拿着车票，车票的左上角显示腾讯wifi管家的logo，车票的中部位置通过定位的方式显示用户当前位置附近的站口，车票底部的“进站”的按钮在闪动跳跃着，通知用户尽快进站。② 坐车阶段。地铁上被阴霾笼罩着，没有一丝生机。长图从左到右自动滑动着，人物呈现百态，然而百态的背后皆是哭丧着脸，阴沉，郁闷，“wifi断开模式”，丧尸一片。按住腾讯wifi管家的logo，切换成“wifi连接模式”，黑白场景转变成彩色场景，整个地铁生机勃勃，笑意傲然，春暖花开。③ 下车阶段。彩色的场景中，“腾讯wifi管家，地铁都能连”这行文字被列车和生机勃勃的人们围绕在其中，凸显其内在的作用，达到一个宣传的效果。页面中有可重新体验的“还没看够”的按钮，有查询被wifi覆盖的城市地铁的“查看城市”按钮，也有跳转到下载页面中的“立即体验”按钮。
设计上，手绘漫画风格。① 黑白色与彩色场景的切换，凸显出wifi的断开模式与连接模式下的不同。② 地铁上人们形象在黑白色与彩色场景中的不同转换，细腻生动。
交互上，黑白色与彩色场景的切换采用了长按腾讯管家logo的操作，搞笑好玩。

技术实现： jQuery + Egret（白鹭引擎）

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

识别图中二维码

腾讯WiFi管家，地铁都能连-查阅二维码

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

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

标签