MOBILE - 优秀案例赏析

11

2017.07.27

我是隐藏很深的AI

TAG:

  • 序列帧
  • 游戏
  • pixi
  • webgl

创意设计 3分

结合近期的热门话题AI,吸引了用户的好奇心,单色蓝霓虹线条极具科技感,但体验过程中对话较多较长,若能精简些适当添加一些梗,阅读起来更有趣。

技术分析 3.5分

使用pixi引擎,开启webgl加速,整体流畅度有所提升,图片资源最好做下合并,可以提升资源加载速度。

页面动态效果除了一张大脑旋转的图片使用了序列帧,其他基本都是使用单张图片进行位移旋转等进行动画效果展示,但效果依旧出色。

问答的形式有些类似前阵子比较火的一款手机游戏《生命线》。

编辑:雅菲、K米、权妈

查看案例

世界名画抖抖抖抖抖起来了

TAG:

  • canvas

创意设计 5分

恶搞世界名画,十足的趣味反差感,争分夺秒的有梗抛出这样的H5实属良心之作。将产品的玩法展现的非常自然。

技术分析 4分

按住后开始播放视频,放开则展示UI界面,UI和视频的切换衔接的很自然。

编辑:雅菲、K米、权妈

查看案例

一個不該存在的廣告

TAG:

  • canvas
  • video
  • 3D

创意设计 4分

非常细致的蒸汽风格是整个h5的一大看点。精致的UI细节和过程中互动的小操作都可圈可点,对于常规h5的时间来讲,一个长达5分钟的视频H5也是十分具有冒险精神。

技术分析 4.5分

精美的视频和画面,每段故事中还有小交互,这个H5还有个比较难发现的亮点,以往在pc端打开移动端的页面,一般是会出现一个二维码给用户扫码,但这个H5直接用一直机械手举着手机,实现在pc端上浏览移动H5的功能,这一点非常惊喜。

整个H5流程很长,4分多钟,而且没有跳过机制。制作者很机智的在过程中加入了一些小互动让用户参与,避免枯燥。

因为整个H5是一个视频,制作者在互动插入的时候,暂停视频,同时用一个新的层盖住视频,并在新层上播放和视频元素同样的序列帧循环动画,这样就解决了互动环节视频和循环动画衔接的问题。再把背景音乐单独抽离成单独的MP3循环播放,也解决了互动环节音乐衔接的问题。

编辑:雅菲、K米、权妈

查看案例

鸟人的活剧

TAG:

  • canvas

创意设计 3分

贴纸拼贴风格结合简洁的动画出场,风格轻松有趣,每篇都藏着一个故事,如果把背景的字体放大一倍,翻屏过度自然一些会更好。

技术分析 3分

动画由gif和mp4来完成,在图片和mp4之前的切换比较生硬。

编辑:雅菲、K米、权妈

查看案例

各凭态度乘风浪

TAG:

  • 序列帧

创意设计 4分

复古简洁的剪影风格和主题很搭,保留一部分神秘感,中途穿插的视频若提前给用户有所告知会更加友好。

技术分析 3分

很有特色的loading界面,但因为loading界面已经需要载入不少资源,难免在网络不太好的情况下会有一小段时间的白屏。

氛围超赞,但中途视频的插入和退出太过唐突,如果能有个画面和音乐的渐入渐出会更加完美。

页面中的动画元素是使用序列帧来实现的,而且都是使用全尺寸的图片,图片资源可以做一些优化,去除空白处还有合成雪碧图;其实可以依靠代码实现一些动画效果不比使用序列帧,不过代码实现可能未必会有这么流畅,但整个页面的体积会小许多。

编辑:雅菲、K米、权妈

查看案例

纪念哈利波特20周年

TAG:

  • canvas
  • pixi

创意设计 3分

上下左右的页面翻页形式很新颖,如果能将操作性按钮用统一形式做出区隔,用户体验会更流畅。

技术分析 4.5分

使用pixi引擎,比较有意思的划屏操作,上下左右基本都用上,给用户一种酷炫的体验,大部分动态效果都是使用序列图,最好合成下雪碧图,缩短加载用时。

效果超赞,近60MB的体积也很感人……

编辑:雅菲、K米、权妈

查看案例

致心爱的 Siranee

TAG:

  • CSS3

创意设计 4分

非常优雅又时尚的中国剪纸风格非常吸睛,极具装饰感的插图有让人想截下来当屏保的冲动。若文案部分能做精简和出场引导体验起来更棒。

技术分析 3分

13幕的动画效果,纯CSS3实现,图片资源的占用相对较小,10MB不到。但是一些效果如果使用mask或者clip来实现,并且碎图合成雪碧图,效果会更好。

编辑:雅菲、K米、权妈

查看案例

奇幻星球号

TAG:

  • video

创意设计 3分

大胆高对比的色彩和狂放泼墨式插画,营造出了主题的奇幻还有童真感,其中元素出自自闭症儿童,完美的将线上线下结合,非常有意义。

技术分析 3分

常规视频播放,在落地页时视频和图片的切换衔接有些生硬。

编辑:雅菲、K米、权妈

查看案例