Tmall 天猫：被这么美的瞳色种草，天猫真会玩

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

案例：被这么美的瞳色种草，天猫真会玩

出品：Tmall 天猫

亮点：

策划上，动画海报类H5。天猫联合多个隐形眼镜品牌，为其 #喵眼看世界瞳色幻想# 艺术展打造的H5。最佳观看方式是先锁屏后横屏。Loading完毕进入案例，（横屏）向左滑屏幕，会依次展示7种配色的海报，对应7种瞳色。海报间自动过渡，无交互。结尾页可点击“进入瞳色幻想”到达活动链接，点击“分享”出现分享提示。

设计上，画面色彩丰富，冷暖都有，画风也很养眼，配合空灵的背景音乐，整体给人的感觉非常梦幻，跟自身主题“幻想”风格很搭。结尾页也是用了一个简单的循环旋转动画，使页面保持动态活力。

体验上，画面给人的视觉冲击很强，动效也很精致，整体调调还是很讨人喜欢的。不过，小五觉得有一些可以改进的地方：①在iPhone6环境下，如果没有锁屏，横屏看到锁屏提示后，再将手机竖回来时，锁屏提示会变形，并且不会消失，不知道是不是也有人遇到这个问题；②Loading完毕后的首屏，画面中的左滑提示为白色，而背景为浅色，加上屏幕所有元素都是动态的，所以提示效果非常不明显，小五建议可以换一个颜色，效果可能会好些；③虽然自动播放动画解放了双手，但与此同时失去了交互性，让人没有参与感。如果整体节奏偏缓，内容不是很少的话，小五觉得，动播放动画其实不是一个很好的选择。

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

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

识别图中二维码

被这么美的瞳色种草，天猫真会玩-查阅二维码

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

标签