20130329早读课:为什么APP需要动画效果?
推荐理由:iPhone的成功真的是因为美得让人飙泪的图标和华丽炫目的动画吗?作者 @i问号 回归原点的思考了动画效果的价值,列举了APP需要动画效果的四个理由,一起来看看。
苹果在Mac上尝试动画的时候,微软和谷歌接近文盲,改变世界对于动画理解的仍然是iPhone。
最初做App的时候,我压根没考虑过动画,直到有一天,在运行宋提交的新版本时,突然发现一个界面的切换用了动画。
我问:“宋,你加动画了啊?这样的确平滑多了”。
宋答:“看了Pinterest,发现所有的界面切换都有动画,很舒服,我决定以后每改到一个界面就顺手把动画加上”。
这是我第一次试图从使用者的角度感受动画。再后来,做的多了,反思的也多了,忍不住问自己一个问题:“为什么要有动画?”
回答这个问题前,让我们先思考一个场景:
每天出门、回家,您都要做两件事:开门、关门。好了,麻烦您走到门口,打开门,再把门关上。现在让我们从这个过程中去掉一点点东西,去掉动画。假设门只有两种状态,关闭着的门和打开着的门(就像是二进制里的0和1),麻烦您再去门口试试。很别扭,是不是?
没错,的确很别扭,生活中的一切都有动画,心理学上有一个词叫“ 知觉恒常性”,我们的认知习惯了这个动画的世界,去掉动画,我们将无所适从。最终想明白这个事儿的还是苹果,指望谷歌的工程师和微软的官僚的确有点儿难,不信你在Win7上打开、关闭下窗口、或者在Gmail里写封邮件试试。
如果只是为了聊一下开门、关门,我这篇文章毫无营养。iPhone之后,通过各色山寨(创新)者们的努力,我们进入了一个动画甚至超动画的时代,手机上各种华丽、炫目的动画充斥着我们的眼球。
为什么要有动画?
记住“我们可能会因为很多原因给App加上动画,但这些原因里一定不包括华丽和炫目”。华丽和炫目的动画就相当于是您开门的时候,门开启的过程没了,换成一个礼花弹在您眼前绽放,除了危险和搞笑外没任何好处。
App需要动画大概有这么几个理由:
1、动画一定要有用。
我们可能会为了界面切换的平滑而设计动画,为了让用户更容易理解删除操作而设计动画,但一定不要为了动画而动画。举几个反例:
例:Android 2.1的那个动态桌面的新特性,除了费电和看的时间长了晃眼睛外,没什么好处?什么?您喜欢手触屏幕水波荡漾的感觉?装个捕鱼达人玩儿水去吧,就别跟桌面较劲了。
例:Galaxy Note里的图库,图库是兵家必争之地,读图时代嘛!可能是受到了iPad的刺激,图库上的各色创意层出不穷,动画特效的滥用几乎到了东施们排着队效颦的程度,图库里尤其奇葩的是三星,界面切换时候的大黑屏没想着用动画平滑过渡,反倒是来回滑动的时候图片们那盖世的抖动和跳跃,选个图都费死劲了。
2、动画是为了让用户体验更平滑。
平滑很难有个准确的定义,一般来讲,经常使用一个软件如果觉得眼睛疲劳就有可能是因为不平滑动画的滥用了。大体上,平滑的动画要做到以下几点:
1)不卡。相比起iOS,Android上做到不卡的确要费点儿劲,不少应用连Splash动画都是卡的。这主要是因为谷歌自己都没想明白动画到底有啥用,JellyBean开始终于考虑基于硬件的动画了(这其实就是谷歌吹嘘了半天的Android 4.1性能大幅提升),SDK弄的又烂,App开发仍然有很多难度,不信您试试号称顶配的Nexus 10,基本上所有App的动画在上面都杯具,只能靠开发者们自己纠结着解决了。
2)不跳跃。先用iPhone再用Note,您就知道啥叫跳跃了,三星是田径队出身?
3)不闪。在闪这个字儿上,Google+ Android版是个极品,滚动的时候居然用动画来加载图片,闪的眼睛真心难受啊,还好俺只是试试,压根没打算真用。在平滑的动画方面,iOS默认的就很舒服了,Pinterest Android版做的也很不错。
3、动画是为了让用户使用的时候更自然。
自然的动画指的是动画要尽量与人在现实生活中的感知一致,越一致,人的思维开销就越小,也就越舒服。简单的说就好比是开门的时候您可千万别给个关门的动画。
例:不知道从什么时候开始,App们流行起Tab切换动画,当前选中的Tab上给您盖块“破布”,当您选择另一个Tab的时候,那块布就会滑过来,滑远点儿经常还丢帧。我愣是没搞明白这到底要表达什么?就像是您开门的时候,隔壁家的门帘子飞过来盖在您家门上。代表应用:蘑菇街、360手机助手。
例:Windows Phone上基本上没有一个动画是自然的,随便举一个打开应用的例子吧,点击桌面上某个应用的图标(专业术语是磁贴?),桌面上其它磁贴都会翻牌子飞走,然后此应用的磁贴会放大成应用界面,魔术般神奇。就像是您开门的时候,您家门没打开,楼道里其他家的门全开了。
在自然的动画方面,还是苹果所做的努力最多,比如说动画一定是非匀速直线运动,再比如那个让人头疼的橡皮筋专利。
4、某些精心设计的动画还能表达一些含义,有效降低用户的学习和使用软件的成本。
例:Mac上最小化和关闭窗口的动画,能让您一下子就能明白点哪里可以再次打开这个窗口。作为码农,俺第一眼看到这个动画时就觉得费劲,要记住原来的位置,还要逐渐变小,变小还得是平滑的,这程序是tmd人写的吗?要说唯一让我感觉有点儿别扭的是,可能因为动画太平滑了,总给我西游记里的大神们拿着葫芦收妖怪的感觉。
小结
写了这么多,总结一下。“为什么要有动画?”,我的答案是,不要为了动画而动画,使用动画是为了与人现实生活中的认知相一致,动画要平滑、自然、有用。
好的动画应该是每个产品人追求的目标,很多人看iPhone 4s的时候关注的是Siri,iPhone 5的时候关注的是地图和Passport,俺看到的却是苹果对于极致体验的追求。不信?您可以找两台iOS 5和iOS 6的设备对比着看看,动画又有进步哦!
Via: 作者博客
如果看到这段文字,证明您已经看完这篇文章了,有什么收获有什么感想有什么不赞同,我们期待您的留言评论,并诚挚邀请您加入“互联网er早读课”QQ群,一同交流每天文章的心得并结识同行。官方2群:74447564,加群密码“职业信息+城市+姓名”,否则不予通过,入群后请修改群名片。注:官方QQ群非水群,喜欢闲聊的童鞋请勿加入。再次感谢您对早读课网站的支持。
我们猜您可能也喜欢: | ||||
20130310早读课:用户体验小细节,如何让Web链接完美的跳转到App |
20130206早读课:减少App页面跳转的四种方法 |
20121108早读课:谈谈Mobile Web App的设计方法 |
20130202早读课:移动端动画设计的12个原则 |
20121201早读课:为什么百度的产品经理大多不懂技术? |
无觅 |