MOBILE - 优秀案例赏析

06

2016.01.19

胜势全开

TAG:

  • three
  • 陀螺仪
  • 3D

创意设计 5分

极具冲击力的开场,用错层的方式配合手机陀螺仪位移,搭配精美的背景画面,达到一种极其惊艳的裸眼3d感受,身临其境,与产品的高品质感相呼应。

技术实现 5分

对3D空间理解和渲染都非常棒,专题氛围渲染初衷,细节到位,算的上是精品专题!

大量图片转换成base64编码的字符串形式嵌入到了页面中,减少了请求数,但同时也会增加客户端浏览器的解码时间。

在部分老型号的Android手机上效果有折扣,不过这也是在所难免的事情。

投稿:东莞哥

编辑:雅菲、K米

查看案例

遁入梦境第四层是种什么样的感觉?

TAG:

  • 手绘
  • 漫画
  • 逐帧

创意设计 5分

纯手绘的2d画面运用逐帧动画演绎出成3d的效果,看似随性的手绘风格搭配动画组成别具一格的风格,非常吸人眼球,最终产品的落地呈现若能稍微制作出手绘的风格和页面更加浑然天成。

技术实现 4分

画面很有风格的一个H5专题。

利用canvas作为载体,通过逐帧动画的方式将手绘场景载入到页面。

双指放大的交互其实直接点击屏幕也可以触发,估计是为了降低操作难度。

音乐循环的时候能明显感觉到结尾和开头断点有点明显。

页面在一些稍老旧的Android机上回出现画面闪屏等问题。

编辑:雅菲、K米

查看案例

断舍离,改变一生的三个字

TAG:

  • 简笔画
  • 字体
  • 简约
  • 摇一摇

创意设计 4分

巧妙的用文字本身作为小元素来制作成画面,节省了制作的成本,整体页面简约与主题“断舍离”完美贴合。不过太多频繁的大篇幅文字容易引起用户疲劳,需要搭配更加精良点的动画缓和一下或许更出彩。

技术实现 3分

简约不简单的页面,干净整洁,非常贴合宣传主题“断舍离”。

简约的画面带来的好处是资源包非常小,小到感觉不到loading的过程。

字体的排列别出心裁,很有趣味,但在第三屏往后缺少交互提示,有可能导致一些用户不知道后续仍有内容。

编辑:雅菲、K米

查看案例

“游”种起源—网易游戏

TAG:

  • 手绘
  • 历史
  • 游戏
  • 怀旧

创意设计 5分

细致入微的手绘插画,每一张都可以当做屏保的良心之作。手绘风格绘制的背景加实物当做前景,这样的组合方式有一种别样的趣味感受。画面质感吻合主题儿时的回忆,复古有趣。不过需要衡量的就是制作成本大周期较长。

技术实现 5分

很棒的手绘风格专题,用年代大事件阐述游戏的起源。

专题体量不小,有25MB左右,但每一屏的信息量会吸引用户停留,所以在首次进入时做了分段加载,加载完部分后即进入专题。

片尾还有三个很有趣的小游戏。

投稿:梦想家小新

编辑:雅菲、K米

查看案例

阿惠故事1:吃饭别带老爷

TAG:

  • canvas
  • 漫画
  • 手绘
  • 逐帧

创意设计 4分

点钞的概念抓住中国国人心里吸引眼球,若是能根据手速快慢带动出钞速度就更有意思了,打破常规没有用以往的全屏翻页来进入下一页,而是将所有页面集中在一页分格子显示,非常巧妙。

技术实现 5分

页面首次进入有一个loading,然后为了提升进入速度,其实那个loading只加载了很少的必须资源,用户在数钱的界面中,其实页面仍在不断的加载后续资源,将趣味性和可用性完美兼顾。

专题的背景音乐衔接以及人物配音和环境音完美结合,为专题提升了不少品质。

从头到尾为的“hui”,想让人不记住“惠”都不行啊……

投稿:七宝

编辑:雅菲、K米

查看案例

开启NBA2015中国赛魔性空间

TAG:

  • Three
  • 3D

创意设计 3分

采用3d低面建模的素材,营造了一个手机内虚拟天空,十分有氛围,不过漂浮在空中的元素过多可能会导致点开看1,2个后就离开了,若是提炼几个精华的似乎更乐意全部点开看完。

技术实现 4分

已经快成为通用模版的3D表现形式,使用three.js实现3D效果。

这个专题难得的是针对不同的细节单独做了3D动画效果,而不是像以往的专题仅仅是3D旋转展示。

投稿:梦想家小新

编辑:雅菲、K米

查看案例

一个差点逼疯配音演员的广告

TAG:

  • 视频
  • 配音

创意设计 4分

看完后会会心一笑感觉暖暖的~h5,可以称作是一个靠旁白撑起来的案例,画面简约,主要以文案当画面,会随着旁白口吻律动,简约而恰到好处。

技术实现 2分

一般以视频直接呈现的都是元素较复杂的专题,方太的这个页面粗看以为是一个mp3播放加上CSS3和JS动画来实现,但查看代码发现整个专题的主要内容做成了一个视频……

仔细想想,这也是个不错的办法,直接视频播放,避免出现声画不同步以及其他兼容问题。简单粗暴,但有效!

投稿:梦想家小新

编辑:雅菲、K米

查看案例

突发!羽泉失声!

TAG:

  • 视频
  • 横屏提示

创意设计 4分

将产品特点用名人演绎成视频,抛出悬念抓住好奇心,用户操作来揭晓谜底,很有创意的视频故事,让产品特色深入人心。

技术实现 2分 以前有见到过直接不显示内容,提示用户必须横屏才可以继续的;也见到过打开页面,屏幕内容默认就是旋转了90度的。这个专题式另外一种思路,进入页面即不旋转90度,也不强制屏蔽内容,而是就上下留白的把内容横在那,让用户自己去转手机。也不失为一种新思路……

投稿:七宝

编辑:雅菲、K米

查看案例