Tmall 天猫：办公室隐身购物课堂

2017-03-09 H5案例分享 H5案例分享

案例：办公室隐身购物课堂

出品：Tmall 天猫

亮点：

策划上，视频+图文展示。进入页面，帷幕拉开，屏幕上的人怂恿“边开会边购物，赶紧试试”，进入微信群视频界面，接着画风一转，界面变成了女王节购物相关主题，并且显示“Office派对现在开始”。最后一页上下左右各有四个小人，代表Word、PPT等四类办公软件或办公环境，每个点进去都会显示不一样画风的购物主题。点击页面里的商品可以切换观看，右上角“直达主会场”会提示用户打开天猫APP抢券。

设计上，写实风格，画面颜色丰富，色彩绚丽，而且各部分动画效果都很炫酷。从视频部分的风格突变，到图文展示部分的独特创意，都给人强烈的视觉冲击感，令人眼前一亮。背景音乐也让案例充满活力。

体验上，无论是视频部分，还是办公软件展示部分，或者是商品切换，视觉效果都非常赞。但是看完一遍，脑子里只记住了炫酷的画面。可能是小编懒得思考，并没有觉得案例和“课堂”或“办公室”有什么联系，商品只能切换观看并不能跳转。

技术实现： jQuery + Video视频

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

识别图中二维码

办公室隐身购物课堂-查阅二维码

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

标签