MOBILE - 优秀案例赏析

创意设计 4分

技术实现 3.5分

用阅读一本书作为开场，翻开书前景和背景变换不同场景变换，配合流畅的动画转场+走心的文案，让h5充满了故事感。

惊人的视觉效果，但同样惊人的是图片请求和容量……O.O~

专题全部是图片帧构成，超过1000张图片，整体大小达到了46MB，请在WIFI环境下打开！！在WIFI环境下打开！！在WIFI环境下打开！！（重要的事说三遍=。=#）因为整体体积实在太大，专题采用了分段加载的方式，加载完一部分后就开始动画，因为动画节奏很慢，给予了后续资源加载足够的时间。

创意设计 4.5分

技术实现 3.5分

W出品，整体氛围营造成现实收红包的画面，调侃的方式跟用户互动有趣的引出主题。

据说W很多H5专题是通过AE制作出类拔萃的视觉效果，然后再转制压缩成H5以图片帧的方式进行播放，效果很酷炫。

创意设计 4分

技术实现 4.5分

Levi's的H5运用静态GIF的方式巧妙配合移动交互的手势，恰到好处的趣味。

大家可能还记得前几年流行过一阵子的“静态GIF”，简单来说就是一幅画面中，绝大多数元素是静止的，只有一小部分元素在循环动画，比如整体静止，一个看书的妹子头发在随风飘动。

由于运用大量图片，文件过大，采取了分屏加载的方式，避免用户首次加载时间过长。

创意设计 4分

技术实现 5分

欧莱雅抓住人的攀比心理，模拟可以在明星的朋友圈留言截图炫耀，形式新颖有趣~，发朋友圈为嘛？我相信不少人就是为了晒！晒娃，晒脸，晒大腿！

用户可以在“朋友圈”中和明星互动点赞甚至评论，然后截图发到自己真实的朋友圈，虽然就图个乐呵，但也挺有趣。

创意设计 5分

技术实现 4分

3个工艺品是大象一家子，这里用擦除的方法简明扼要的传递出美丽的工艺品背后是残忍的杀害，最后用手写签名的模式传达庄严感贴合主题。

这里的擦除动作如果过快，会发现擦除效果没有连贯，可能是制作团队有意为止，避免过快的转场。

创意设计 4分

技术实现 4.5分

人性阴暗面的变态小游戏，娱乐的代入感和玩文案“招”=“招人”的手法引出主题，简单的小游戏玩着玩着从文案当中才发现有点蹊跷

主要是将人物身体各部分拆分成不同图层，在用刑时做位移动作，搭配声音得到最终效果

创意设计 5分

技术实现 4分

W为大众点评吃货节做的专题，整个专题亲和而简洁的手绘风格十分讨喜，逐帧动画流畅可爱！

通过代码查看该专题，会发现图片进行了大量的合并，通过位移实现动画的方式避免了请求数过多的问题。

创意设计 4分

技术实现 4分

模拟实际的来电画面抓住用户好奇心，接听后制造屏幕破裂的效果打破常规充满趣味。

整个专题依旧是大量图片帧搭配组合的形式完成，功底更多是表现在动画和素材上。

创意设计 5分

技术实现 3.5分

结合小时候的成长必经之路的桥段，引起用户共鸣，H5前面节奏有趣，最后感人，容易戳中泪点。

通过不同的选择播放不同的图片帧动画，难度实现并不复杂的专题。

有点坑的是惩罚方式的选择那里是个随机转盘式的选择，很容易误导用户是可点的。

创意设计 4.5分

技术实现 4分

迎合“试驾好礼”主题“试”的概念，设计出一系列生活中“试”出小美好来点题。

你什么都敢试，为什么不抓住机会试试大众点评的试驾好礼！

创意设计 5分

技术实现 4.5分

开放性大命题抓住用户好奇心——“青春是什么颜色？”每一页抛出一个观点用简单的视觉将其传达。趣味的上下屏贯穿矢量风格新颖时尚。

专题体积3.1MB，547个请求，体积还好，请求数属于非常夸张的请求数量了。所以在进入主画面后依旧在不断载入后续的资源，因为前面动画流程较长，用户也不会觉得后续会有卡断，除非网速太差。

专题动画看起来像是矢量动画，但依旧是大量的位图图片帧组成的逐帧动画。