MOBILE - 优秀案例赏析

05

2015.11.03

罗斯·决不凋谢

TAG:

  • 视差
  • 兼容性
  • 影片

创意设计 5分

全篇用了较多张的静帧图片加上各种位移旋转达到动态的方式,节省大量动画制作成成本,而画面亦极具视觉冲击力,黑白的画风加重点标红处理很有风格。转场的动效细致且连续让画面呈现出故事感一气呵成,避免用户中途多次操作减少流失率。

技术实现 5分

图层分的非常细致,通过不同的DOM结构来堆叠影片效果,全程陀螺仪检测展现视差效果。

上传和分享页针对微信和第三方浏览器做了区分处理,微信下通过微信授权,第三方浏览器通过新浪微博;分享时避免了一些专题在第三方浏览器下打开后分享遮罩层指向右上角,而用户在右上角只能找到刷新按钮的尴尬。

猜测制作团队应该是通过视频软件制作整体效果,然后转制或临摹成HTML5页面,才达到了如此震撼的视觉效果。

编辑:K米、雅菲

查看案例

鹊桥会,爱更多

TAG:

  • 双机互动
  • 逐帧

创意设计 3.5分

好看的水墨画风让鹊桥爱的概念更加唯美生动,车的出现或许用同样偏水墨的处理画面更搭配。

技术实现 5分

双机互动的一款H5,主手机打开页面后,还需要另外一部手机扫描主手机上的二维码才可以继续浏览。

画面唯美,主要使用逐帧实现整个动画过程。

专题设计的初衷是让两款手机放在一起完成整个画面的浏览,但因为网络原因,背景音乐不可避免的会出现微小的不同步,导致背景乐混乱,其实只用一部手机播放背景音乐就可以了。

编辑:K米、雅菲

查看案例

索尼中国

TAG:

  • CSS3
  • 图片帧

创意设计 4分

loading小动画让等待更有耐心,整体动画篇幅多但集中在画面主体,因此背景用同一张图片减少了文件包负担。用复古的牛皮质感与主题秘籍贴合紧密,传达给用户真实秘籍的感受阅读感受更加身临其境。

技术实现 4分

页面包含大量图片,因此做了按需加载,在查看具体某一屏时才加载所需资源,避免了首次loading时间过长。

查看案例

献给夏天最闷的人

TAG:

  • 图片帧
  • W
  • 影片

创意设计 5分

看情景剧式的开场和小互动设计,提升期待感一开始就抓住好奇心。整个画面用颜色绚丽的插画风格极具个性,加上背景人物的旁白,整个故事氛围营造更加生动,最有趣的是h5在一开始设置的悬念,最后竟然化作一个“嗝”,创意杠杠。

技术实现 5分

音乐压缩成单声道,图片进行压缩并合并雪碧图,都很好的减少了图片的尺寸。

逐帧动画做的交互式动画片,循环动画使用JS更改class名的方式实现,转场动画则是直接更改DOM的css属性值,避免了在一个DOM下循环和移动的冲突问题。

查看案例

为你的好奇心估个价

TAG:

  • 图片帧
  • 答题
  • 报纸
  • canvas

创意设计 4分

整体的视觉包装成老电影老报纸的方式,画面复古精致,扁平的插画风格减少文件包大小加快了loading加载速度,小动画很精致提升页面的美誉度,也让主题在丰满的视觉画面中更加凸显。

技术实现 4分

canvas逐帧动画。使用了分段加载,首屏加载2.6MB,在全部浏览完毕后约为4.9MB。

非常可取的是,分段加载时没有使用loading,而是使用一张静态图片替代动画“雪碧图”,既不会打算流程,也让网速良好的用户浏览到了动画。

查看案例

唤起这一刻

TAG:

  • 水墨
  • 国风
  • 图片帧

创意设计 4分

真实实景水墨处理,中国风十足凸显黄山旅行的属性,每一页恰到好处的小动画让原本静止的水墨画面起到画龙点睛的作用,又不会让画面过于轻佻,音乐和画面的处理都非常得当,一种点到为止的方式,每一页设计了长按屏幕触发不一样的效果也是创意小亮点,给用户惊喜感。

技术实现 4分

技术上主要使用了图片帧来还原唯美的画风。

首屏加载了7.9MB,在划屏的过程中还会陆续加载几张10KB不到的小图,感觉这几张小图完全可以合并到首屏加载,没有必要拆分出来。

音乐分类中有一类“氛围音乐”,该专题的音乐就属于这一类,专题音乐唯美动听且长度很短,兼顾了效果和容量。一些专题的背景音乐在循环时能听出明显的衔接点,但该专题完全没有这个问题。

连分享页的动画都做的很用心,很注意细节品质的专题!赞~

查看案例

一加手机2

TAG:

  • 手绘
  • 照片
  • 分段加载
  • canvas

创意设计 4分

手绘的风格让整体轻松有趣,贴合主题营造一种趣味测试感吸引用户,真人照片黑白处理减少文件包大小同时营造出漫画感风格统一。

技术实现 4分

专题中只要是动画的部分都是用一个一个的canvas来显示,div仅负责布局和静态图片展示。

容量较大的结果页采用了分段加载的方式呈现,“本色筛选中”其实是一个loading,很巧妙的将资源载入与场景融合在了一起。

查看案例

爱过银河

TAG:

  • canvas
  • 图片帧

创意设计 3.5分

将产品本身的皮包巧妙的和喜鹊融合,使原本纯展示皮包更加生动有趣,小鸟的质感就是皮包的质感,而两者都是受众女生喜欢的东西,爱情和包包合二为一,创意巧妙且整体视觉轻薄舒服。

技术实现 4分

和其他专题不太一样,这个专题整个主交互就是通过上下拖拽“喜鹊银河”,但由于拖拽过程做的异常流畅,感觉完全停不下来啊……

“喜鹊银河”部分使用Canvas技术实现,每一只“喜鹊”有3张图片帧用来做飞翔效果。专题初次加载仅有不到1MB,大小控制做的不错。

查看案例

黑科技来袭?这手机竟然能变身战斗机!

TAG:

  • 图片帧

创意设计 4分

一改平铺直叙的产品卖点手法,用酷炫的变身视觉阐述产品的几大特点,趣味有看点。中间的动画变身更流畅些体验更棒。

技术实现 3分

底部硕大的“查看客户详情”非常容易让人直接跳出该页,从而让4个动画白白浪费。

4个变形动画非常酷炫,但页面的转场和音乐等整体氛围却感觉做的不够细致。

查看案例

玩A大考验,你有多内涵?

TAG:

  • 答题

创意设计 4分

用诙谐有趣的题材结合复古扁平的插画风格,整体营造一种诙谐的氛围。

技术实现 2分

循环音乐的衔接点没有处理,断点非常明显。

题目太多,加上思考的时间,不适合碎片时间进行。

结果页的动画也略显拖拉。

查看案例

你无聊么?

TAG:

  • 答题
  • 图片帧

创意设计 4.5分

简洁的画风扁平的色彩减少文件包大小提高加载速度,较现代的插画方式与产品受众属性吻合。

技术实现 3分

有几张图片在点击后才会加载,但并没有很大容量,感觉可以合并到首次loading时,避免用户网速过慢出现图片无法显示。

音乐非常应景,过程中舒缓音乐和结尾的激情音乐反差明显,很好的吸引了用户的注意力;过程中的Ukulele弹奏的曲子收尾衔接无缝,但片尾的电子乐的断点则很明显。

查看案例

可能是史上最无聊的H5

TAG:

  • 横屏

创意设计 4分

整个页面是一张大的插画背景,第一眼很丰富抓眼球,最后的文案创意打中用户痛点,但画面细节元素制作更加精致些能让人停留在画面更长时间。

技术实现 3分

非常有趣的横屏专题,过程中有不少彩蛋可点,流程不长,碎片时间看也没问题。

但是页面兼容性有一点问题,在默认浏览器下会出现黑边,可能是只考虑了微信的问题?

查看案例

如果世界上只剩下一个APP

TAG:

  • 模拟

创意设计 4.5分

抛出一个现实生活中息息相关的提问,用仿真实手机界面的视觉效果另用户身临其境,删除的瞬间还是有点心慌慌呢,创意形式有趣吸引。

技术实现 3分

非常多的小图标合并一下其实可以大幅减少请求数。

查看案例