淘宝：年货街_H5案例分享

淘宝：年货街

2017-01-13 H5案例分享 H5案例分享

案例：年货街

出品：淘宝

亮点：

策划上，图文展示类。纵向、淘宝年货主题的“清明上河图”。进入页面后，画面会自动慢慢向下移动展示内容，用户也可以上下滑动屏幕来查看。内容是各家店铺所组成的年货街。滑动完毕停留在某处时，会出现一个个小的闪动弹出层，简单介绍当前画面中的各店铺，用户点击店铺会有大的弹出层跳出，来详细介绍，用户可以点击“关注”，也可以“进店逛逛”。屏幕下方点击“随便逛”可以随机移动到某家店铺，屏幕最下方能点击“买手集市”、“名家食坊”、“特产大道”、“全部会场”跳转外链。

设计上，清明上河图风格，虽为古代画风，但掺杂了很多现代因素如“自拍”“摩托车”等等，画面整体有种魔性美，内容丰富，信息量很足，也很细腻。背景是街上店家吆喝声，带入感十足。

体验上，只能用浏览器或者淘宝APP来打开，虽然有点点不方便，但本身就是面对卖家的，所以只要是想买年货的，应该不会在意这个细节吧。整体创意和内容都很赞，画面中的很多地方，都能戳中笑点，值得细看细品。

技术实现： Canvas + 序列帧动画

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

识别图中二维码

年货街-查阅二维码

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