MOBILE - 优秀案例赏析

创意设计 5分

写实复古+扁平插图类型的画面传递给用户一种科学感，跟文案结合科普感满满，用户触动触发小动画效果非常细腻。

制作难点主要在创意以及视频动画的技术上，是精细的视频动画为用户带来了震撼的视觉效果。

技术实现 3分

页面整体由一个Canvas组成，精细的动画依靠播放大量的图片帧完成，整体在前端实现难度不大，主要难度在视频动画的制作上。

创意设计 4分

标题以社会热点为切入点吸引用户点进去。抓住用户猎奇心制造悬念让用户静放手机30秒，30秒过程中画面中零星碎片组成社会现象文案击中用户痛点引起同理心，让用户在探索中完成等待，最终黑白风格的画面出现唯一的彩色logo落版，点题醒目。

技术实现 3分

陀螺仪以及触屏的判断，在60秒内没有触发陀螺仪和触屏就算成功。

在很有冲击力的错层效果上是使用了JS来不断修改坐标值，如果修改成CSS3过渡效果并启用浏览器的硬件加速，我想效率上会有所提升。

在数字方面，制作者很机智的把0~9的数字转码为base64的方式直接显示出来，即没有载入远程字体，也没有使用图片，算得上是不错的方式！

创意设计 3分

用有趣的“造物”创意，用户自己创造一个新物种，来传达h5的“科技改变一切”，画面准确传达了主题，使用户在趣味体验中获得资讯。

技术实现 4分

一些气泡炸开的效果以及火焰效果，制作者并没有使用图片帧的方式制作，而是使用CSS3和Canvas完成，有效减少了专题大小。

但是一些定位问题没有做好，比如结尾合成的人物，挥动的手臂在部分手机下会出现错位问题。

创意设计 4分

洗脑歌的形式别具一格~主要的视觉部分在于手绘插画，黑白线条+唯一亮色处理让页面风格更具个性，每个元素出现与当前歌词完美吻合。

技术实现 2分

技术实现上的难点更多是那首洗脑的背景歌曲，在web前端实现上并没有太复杂的技术。

部分动画效果在没有播放的时候依旧在不断的利用JS循环播放和切换，如果做一下判断，已经完全过场的动画，就停止播放，效率会有一定提升。

创意设计 4分

黑白简笔小人的手绘风格大大减少了文件包大小，每个背景画面是把照片黑白风格处理，跟前景更搭配易操作。

技术实现 4分

一个很有特色的细节是打开这个页面，专题自动就是横屏的效果，在用户体验上我觉得是好过给用户一个“请横屏手机”的提示的。

大量的动画效果使用gif的形式实现而非png图片帧，因为专题的黑白色调，gif的毛边其实问题不大，使用gif可以在人力以及文件大小和请求数上都节省不少。

创意设计 5分

3D动态效果非常流畅，360度无死角的完美展示了产品本身。

技术实现 5分

使用three.js写出的实时3D效果，在手机上实现了震撼的交互方式。更难得的是专题针对部分鞋子使用了3D皮肤，让用户可以观看到鞋子各个角度的颜色细节，而非仅仅是线条，3D皮肤一小块一小块的进行覆盖展现，相当细致用心！

3D效果在iOS以及Android系统下有不同的表现，iOS下表现更为精细。因为3D场景偏大，要求配置高，专题在一些中低端手机中不够流畅，会有点卡，在部分机型中则无法使用，专题给予了禁用提示。

创意设计 4.5分

量最大是在动画转场上，运用十分流畅的视觉动态效果，让每一个元素的变形具有强烈的视觉冲击力，让整个h5非常酷炫。

技术实现 3分

专题在web前端方面主要使用的仍旧是图片帧技术，炫目的3D效果是通过前期视频制作，后期转制图片帧的方式完成的，制作难度更多在视频动画方面。

因为专题图片较多，每一次专长都会有一个单独的loading，提升了首次进入页面的速度。

创意设计 4分

换装搭配的形式跟用户产生互动，mini车身真实质感设计最大程度还原产品本身，搭配颜色艳丽的小插画让用户一目了然了解实际上身效果。主要设计难度在于插画绘制本身。

技术实现 3分

有趣但制作难度不大的专题，通过车顶和车身颜色的更换来搭配自己独特的MINI。

在动画实现方面有些地方过于依赖JS，如果通过CSS3动画效果来实现，性能应该会提升一点点。

创意设计 2.5分

纯色背景符合移动端的设计，节省文件包大小，高饱和度的色彩让“美食”更加可口~小范围的动态效果打破扁平的画面更加有趣。

技术实现 3.5分

专题在web前端上的技术实现主要是简单的划屏和简单的图片帧，难度并不大。

主要难度在炫丽的动画制作上面，动画采用gif实现，没有采用png图片帧，虽然有微小的毛边，但影响不大，猜测动画是用Flash制作，后期转成gif的。

创意设计 3.5分

矢量简洁的图形设计大大提高工作效率同时符合可口可乐品牌的一贯调性~搭配流畅的小动画和用户进行小游戏互动体验很轻量讨喜。

技术实现 4分

可乐气泡运动轨迹做的很自然，如果没有通过一些可视化的工具来辅助完成，纯手工代码调整是一件挺累的事情。

专题整体动画效果，场景切换干净自然，制作者的水平真不错。