@折折熊 的设计博客
用最简单地方式改变世界

移动app上的动画们

最早使用PC时,看到mac os上的神奇效果进行最小化时,就被深深地震撼了。若干年后,再也没有离开过mac电脑,有很大程度也是因为它有非常流畅的动画过场。

[上图完整动画请到这里看]

现在移动端的动画们更是层出不穷,我在花瓣上关注了北京淘宝的一个同事,她是收集牛人,在她的采集里你可以看到各种各样的动画效果

当然如果你纯粹为了动画而动画,结果一定很糟糕。所以我在这里列举一下动画的四种应用场景:

1、创造空间:

在移动端寸土寸金的屏幕上,超过一屏的内容、次级内容或者导航的呈现就成了最大的问题。创造空间这个动画过场便是最好解决这个问题的手段。最著名的抽屉式大家应该不会陌生。

[上图完整动画请到这里看]

当然除了传统汉堡式抽屉,还有各种各样创造空间的方式。

[上图完整动画请到这里看]

[上图完整动画请到这里看]

[上图完整动画请到这里看]

[上图完整动画请到这里看]

还有创造新空间的同时,更是在创造新内容,比如大名鼎鼎的clear。

[上图完整动画请到这里看]

这些除了创造更多空间以外,更多是让用户能够更加focus当前屏幕下的内容呈现。并且有时候,通过创造空间的方式来安置导航,也等于是创造了动画品牌,让用户对某个app更有操作记忆和印象。

但这样的折叠等动画在技术实现上还是很大成本,特别是实时的那种。而且之前在iOS端和android端同时开发app时,明显android端的动画实现成本更高,不得不去砍掉很多动画效果。

2、过程引导

在移动设计中我们常提到沉浸式体验,也就是让用户可以沉浸到使用过程中而不被打断。传统的设计都是点击切换,这样恰恰是很容易打断用户的。所以包括加载、流程中以及完成等,都是需要非常亲和的动画过场去引导用户。

比如iOS里mail的加载(当然这个是dribble上的大神Max Rudberg略微加工过的):

[上图完整动画请到这里看]

还有翻页等效果动画,这些在过程动画中应该是最常见的,比如flipborad也是这样的翻页操作。这样的过程引导,可以让人不用去思考过程是怎么样,而是非常符合自然环境中的常识。

[上图完整动画请到这里看]

[上图完整动画请到这里看]还有一些,流畅的过程动画,让整个画面都生动起来。

[上图完整动画请到这里看]

[上图完整动画请到这里看]

除了操作的反馈动画,还有一些是加载内容时进行分布式的动态加载,从而使页面看起来非常顺畅,让人的情绪可以更投入进去。

[上图完整动画请到这里看]
3、力反馈

移动操作不像传统操作,有机械硬件的互动,比如键盘、鼠标按键的力反馈,而主要是手指和硬屏幕直接互动,所以一些动画力反馈能够让用户在操作的过程中更具有“手感”。苹果在这方面是最细腻的,不仅仅是登录界面。

[上图完整动画请到这里看]

[上图完整动画请到这里看]

包括最新的iOS7的开关切换,也非常细腻。

[上图完整动画请到这里看]
4、情感表达

还有一种动画的作用就是情感的表达,生硬的界面会让人感觉冷冰冰,没有任何情感和喜爱。所以增加一些动画过程,可以把情感表达得更加充分。

[上图完整动画请到这里看]

甚至现在有些app在介绍功能的时候已经用上一些小动画来提高感受。

[上图完整动画请到这里看]

最让我震撼的还是iOS上passbook里面优惠券删除的动画,兼职逆天的细腻,第一次看还不明白怎么回事,后来就懂了。

[上图完整动画请到这里看]

好了,移动动画基本的就是这几个方面,当然还有更多丰富的值得大家去挖掘。移动应用和pc或者web不一样的地方,动画一定是很重要的一个部分,如果你想要做好一个吸引人的app,动画绝对不可少。(当然能够多了解实现的方案,对动画引擎更深入地理解,就可以更顺利地作出你心中理想的动画效果)


评论 ( 1 )
热度 ( 36 )
  1. 再睡一夏灵感星球 转载了此文字
    喜欢win8弱弱的动画 ~ 灵感星球:
  2. Norbbytao独立设计 转载了此文字  到 灵感星球
  3. bingo独立设计 转载了此文字
  4. FF_HUST独立设计 转载了此文字

© 独立设计 | Powered by LOFTER