MOBILE - 优秀案例赏析

08

2016.06.06

清明祭扫我的童年

TAG:

  • 游戏
  • canvas
  • 红白机

创意设计 3分

运用像素风格很好的带出了80年代的游戏人怀旧情愫,将儿时游戏的真实界面精彩瞬间直接展现并串联成一个新的小游戏,激发用户好胜心态促进传播。

技术分析 2分

随机播放游戏视频片段,然后根据用户选择来判断答案正确与否。

编辑:雅菲、K米

查看案例

我们的精神角落

TAG:

  • 豆瓣
  • 逐帧
  • 品牌
  • 游戏

创意设计 5分

将h5包装成一个解谜游戏,画风充满奇幻色彩,制作非常细腻,体验中会发现,它将许多经典元素融入到画面小细节中与主题巧妙呼应,每一个细节都能感受到用心满满。

技术分析 5分

豆瓣的品牌H5,同时也是一个有趣的解密类小游戏。

庞杂的交互,复杂的逻辑处理,还有序列帧和大量的音频让整个专题显得异常复杂,但制作者处理得当,专题品质得以提升。

编辑:雅菲、K米

查看案例

你真的了解你所在的城市吗?

TAG:

  • 答题
  • 数据
  • SVG

创意设计 3分

纯文案配合简洁的icon,画面设计成本低,交互体验较丰富,对于数据的呈现添加了和用户互动的操作,微妙的可操作体验增加用户参与感。

技术分析 4分

画面挺简陋,技术不简陋。

页面中的动画效果综合了CSS3和SVG的动画效果。 同时使用了JS模版技术,避免页面一次性加载过多DOM元素导致的页面性能下降的问题。

编辑:雅菲、K米

查看案例

起点大事记 - 515粉丝节

TAG:

  • SVG
  • CSS3

创意设计 4分

不同于以往的平铺直叙的陈述大事件,加入了用户点击进行探索松手画面定格呈现,小小的互动操作增添了用户探索欲,体验更加生动。

技术分析 5分

SVG的特色是可通过代码不断更改矢量图的形状从而达到各种各样的动画效果。

专题的SVG动画和CSS3动画搭配非常出彩,但是每一个场景的转场略显生硬。

编辑:雅菲、K米

查看案例

全新BMW M2锋芒上市

TAG:

  • 仿朋友圈
  • 视频

创意设计 4分

整个视频一气呵成体验良好,将车做为贯穿前后画面的载体,穿梭于虚拟网页和播放界面中,非常好玩有趣。

技术分析 4分

整个H5是以视频的方式存在,前端对视频进行了特殊处理,令食品可以在iOS原生浏览器上正常播放而不出现控制面板。

编辑:雅菲、K米

查看案例

Vogue Shop

TAG:

  • 横屏滚动
  • gif
  • 按需加载

创意设计 3分

拼贴式的元素加上扁平风格,画面极具玩味色彩,不过画面中题目的引导再明显一点就更好,体验起来略卡壳。

技术分析 3分

页面横屏滚动的方式有别于往常的竖屏滚动,别有特色。

按需加载做的不是特别好,在后续页面没有加载完毕的时候没有任何提示,直接让用户看到了“灰屏”,体验不是很好。

页面动画并不复杂,其实可以考虑使用CSS3实现而非gif,在色彩和性能上都会有所提升。

编辑:雅菲、K米

查看案例

黑科技?!凡人也能成大侠

TAG:

  • 视频
  • 陀螺仪
  • 横屏

创意设计 4分

运用陀螺仪翻转手机切换查看两种不同人生的方式,符合移动端操作习惯。动作夸张且大线条插画风格将画面氛围传递贴切到位。

技术分析 3分

创意满满,利用陀螺仪展示不同人生。

实际技术分析是播放两段不同的视频,但是并没有处理好,导致视频在微信下也出现了控制界面。

下方的提示翻转手机体验不同人生,让用户误以为是可以随时查看不同的人生,但其实是在进入页面后就无法更改了,必须重新看一次才可以,体验并不是太好。

编辑:雅菲、K米

查看案例

极限偷吃,你亲到了嘛

TAG:

  • 游戏
  • 微信专属
  • 排名

创意设计 3分

萌萌哒的画风比较讨喜,整个小游戏流程非常简单,动画有些粗糙,若能再添加一些小彩蛋也许更能留住用户。

技术分析 4分

微信专属H5,手Q和浏览器都没法玩…… =。=#

玩家通过微信授权后进入游戏,根据游戏成绩获取不同的礼品。

但是有次数限制,需要分享后才可以解锁更多游戏次数,类似体力值的概念,感觉这存在诱导分享啊,哈哈~

编辑:雅菲、K米

查看案例

梅赛德斯-奔驰 SUV 家族

TAG:

  • 逐帧
  • 陀螺仪

创意设计 2分

全实景照片素材减少了视觉成本,配合移动端性能操作体验增加了用户参与感。

技术分析 4分

视频特效和web前端技术的完美结合。

在炫酷的视频特效基础上,辅助web前端技术,利用陀螺仪和逐帧动画的方式将视觉内容完美的串联起来。

编辑:雅菲、K米

查看案例

前海湖山壹号

TAG:

  • CSS3
  • 音乐

创意设计 4分

用极简风格营造出细腻的画面,排版考究,细腻的动画过场为页面加分,配合轻柔的钢琴音乐整个氛围烘托更加立体。

技术分析 4分

音乐挑的很棒,搭配简洁的页面风格,再辅助简单的动画效果让页面整体看起来非常的有范儿。

编辑:雅菲、K米

查看案例

我飞跃万里,看了一场世界最美的表演

TAG:

  • 卡通
  • 蜡笔
  • 舞马

创意设计 3分

用一段童趣的儿童蜡笔手绘风格动画阐释“舞马”,生动有趣。

技术分析 4分

页面整体风格非常赞,让人有一种看动画片的感觉。适时加入的一个小交互不仅没有打断用户的观看体验,也同时增加了乐趣。

不过音乐的端点衔接没有做好,在播放第二次的时候有明显的停顿。

编辑:雅菲、K米

查看案例