20130329早读课:为什么APP需要动画效果?

标签: 交互体验 产品设计 用户研究 | 发表时间:2013-03-29 07:15 | 作者:reynold
出处:http://reynold.cn

推荐理由: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图库里选择图片发送邮件,通过一个动画就做到了让用户无需理解邮件附件这个概念,实在是经典。

 

小结

写了这么多,总结一下。“为什么要有动画?”,我的答案是,不要为了动画而动画,使用动画是为了与人现实生活中的认知相一致,动画要平滑、自然、有用。

好的动画应该是每个产品人追求的目标,很多人看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早读课:为什么百度的产品经理大多不懂技术?
无觅

相关 [app 需要 动画] 推荐:

20130329早读课:为什么APP需要动画效果?

- - 互联网er的早读课,专注产品、用研、交互
推荐理由:iPhone的成功真的是因为美得让人飙泪的图标和华丽炫目的动画吗. 作者 @i问号 回归原点的思考了动画效果的价值,列举了APP需要动画效果的四个理由,一起来看看. 苹果在Mac上尝试动画的时候,微软和谷歌接近文盲,改变世界对于动画理解的仍然是iPhone. 最初做App的时候,我压根没考虑过动画,直到有一天,在运行宋提交的新版本时,突然发现一个界面的切换用了动画.

新的APP演示良方:GIF动画

- - 设计师可乐橙
每种事物都有回归的本能,长期以来,GIF动画在开发者当中,失去了它的统治地位,不再受欢迎,不再通用,近期它摆出了回击的姿态. 尽管还是一如既往展示图像序列,但它不再像当年那些生硬的低画质视频,没有粗糙简陋的过渡效果. 如今,GIF动画能够通过抢眼的效果和流畅的过渡,有效地聚集人气,给最终的动画一种柔滑精致的感观.

Android App启动画面的制作

- - CSDN博客推荐文章
  安卓软件启动时,都会有一个全屏的带LOGO,软件名称,版本号的启动屏幕. 打开eclipse,新建一个Android项目,不建Activity. 1、新建Activity文件. 点击项目管理里的res,进入layout,右键点击NEW-》Project-》Android-》Android XML Layout File 按步骤新建一个Activity的XML文件.

需要时显示——论App中的功能可见性

- - 腾讯CDC
近几年移动平台风生水起,APP多得数不胜数,交互方式也是遍地开花,相信大家都玩过那么几个让人惊艳的APP. 大家看到的亮点或是转场够炫、或是拟物得恰到好处、又或是突破性的操作方式,但我认为“需要时显示”也是许多设计中的精妙之笔,是设计师应遵循的原则之一. 首先谈谈“需要时显示”这个概念,记忆中这句话有2个出处:.

设计移动 App 需要注意的 10 点

- - ITeye资讯频道
1.  不要在没有流程图之就前开始设计或者画线框图. 即便一个简单的App也要有一个思虑周全的流程图,以确保在App有合乎逻辑的、合理的导航结构. 另一点值得关注的是确保核心功能所在的屏幕位于上层而不是被埋没在多层导航元素之下. 跳过流程图直接进进入开发会让开发变得复杂、不可控,很容易让用户迷茫,最后选择关掉或者卸载你的App.

运营人员都需要跟踪哪些app数据?

- - 互联网分析沙龙
数据是一个产品每天都要盯着的东西,虽说数字也会撒谎,但是在产品设计中数据,常常作为辅助设计决策和与研发沟通的必不可少的东西之一. 一、移动产品经理需要跟踪app的哪些数据. 在做数据分析之前,对移动产品人员来说,首先要了解在移动互联网领域,我们需要关注那些数据呢. 讨论发现,不同的产品关注的数据数据分为:基本数据、跟产品类别无关的数据和跟产品类别相关的数据.

做一个 App 前需要考虑的几件事

- - limboy's HQ
随着工具链的完善,语言的升级以及各种优质教程的涌现,做一个 App 的成本也越来越低了. 尽管如此,有些事情最好前期就做起来,避免当 App 有了一定规模后,再感慨当初为什么没有多留点心. 以 iOS 为例,有时图方便,就直接用 NSLog 了,甚至线上都一直开着. 一方面会影响性能,尤其是输出比较频繁的时候,另一方面也容易泄露敏感信息,所以一般做法是在 Release 模式下禁用 NSLog,比如在 pch 文件中,通过对环境的判断,对 NSLog 做不同的处理.

App设计者需要注意的21条禁忌

- - 人人都是产品经理
我们通常在做APP设计的过程中,遇到很多看似很小,且很容易被忽略的问题,正是这些小问题,一次次的撩拨用户的耐心,让用户对你的APP心生怨念. 现在WeX5君呕血为大家整理出APP设计的21条禁忌,希望与APP设计者的您共勉. 不要在没有流程图之就前开始设计或者画线框图. 即便一个简单的 APP 也要有一个思虑周全的流程图,以确保在 APP 有合乎逻辑的、合理的导航结构.

设计手机 App 支付解决方案时都要涉及哪些方面?都需要注意哪些地方?

- - 知乎每日精选
题主描述的问题涉及如下几方面:. 由于是APP,采用的支付方式主要大致有如下几种方式:. 支持银行卡支付(借记卡、信用卡)、账户支付、快捷支付等. 支付宝、微信支付、银联在线等主流的第三方支付都提供对应的解决方案. 与APP SDK类似,但微信支付目前不开放给第三方的手机网页版. 像信用卡无磁无密支付(ePOS/MOTOPay)、代扣等由于只对实名行业开放,且商家需要资质较好,题主行业应该不适用.

App 和 iCloud

- 笑炊 - 爱范儿 · Beats of Bits
iCloud 的技术细节还在 NDA 的保护下. 但是大家的好奇心不能等到 NDA 失效再满足. 本文基于对 iCloud 的猜测写成,靠谱与否,等待时间检验. 打开浏览器,嗯,今天用 Safari , Chrome , IE 或者 Firefox. 输入 Twiter.com ,啊,不对,是 Twitter.com.