苹果公司在2013年6月份在iOS6的基础上推出了令人震惊的iOS7版本。取代之前代表性的逼真的物理纹理效果的是更加扁平化、优美的设计效果。而这一改变所带来的效果之一就是使用PS等软件进行设计工作变得更加简单快捷。给一个APP的界面设计仿真效果的渐变、阴影以及高亮效果是一个令人头痛的过程。而将一长条的统一颜色来代替之前的渐变效果使得设计工作变得更加的简便。
但扁平化的变化也使app很难与其他的app区别开来。现在许多app在界面设计上有着相似的视觉效果，相近的颜色、相近的排版设计、相近的留白，缺少了渐变等效果之后，大多设计者开始使用##动作和##动画##来使自己的产品区别于其他同类产品。
这究竟是什么意思呢？在iOS7版本之前也是有动画的啊，那到底是什么发生了改变呢？现在动作和动画对于用户体验的考虑由之前的设计完考虑转变为现在的前导性考虑问题，到底这个动画或者是动作对于提升用户对app的整体体验的重要性和必要性的审视。动画不再是在末尾考虑的问题，而是贯穿整个设计流程。
所以，当你准备给你的app添加一些炫酷的动画效果的时候，你应该从哪里开始呢？应该在哪里、应该怎样添加动画呢？哪些动画是可以自然的吸引用户注意的，又有哪些动画是平淡并且不太讨巧的呢？
让我们一起来一探究竟吧！
流畅逼真动画的起源
1981年，早期的迪斯尼动画片制作者写了《迪斯尼动画原则》，概述了他们在迪斯尼早期动画创作工作中的原则。
这本书详述了动画设计的12个基本原则，而该书也被奉为设计和艺术方面的圣经。虽然这些原则是在大约80年前的手绘动画的年代总结的一些经验，但是在当今时代，让然有很大的应用价值。
基本原则主要是：挤压和伸缩（以特体形状的变形，强调瞬间的物理现角）、预备动作（加入一反向的动作以加强正向动作的张力，借以表示下一个将要发生的动作）、staging表演以及呈像方式、连贯动作发与关键动作法、渐快和渐慢、弧形运动轨迹、附属动作、时间控制、夸张、纯熟的手绘技巧、吸引力、深度、平衡及重量感。
这些基本的原则是在1920——1930年间动画出现的年代，Ollie Johnston and Frank Thomas是这个新领域的前辈，那么，在当前环境下我们应该如何应用这些基本原则呢？在得到详细的答案之前，我们应该首先看看在产品中应该如何使用动画和应该怎样大致思考动画。
过渡、焦点&愉悦
- 过渡 为了使用户能够适应两个视觉状态之间的转换而不是突然转换。这种平滑的转换能够消减用户对于不熟悉界面的内心压力。
- 焦点 为了指引用户去关注界面当中重要的部分或者是最新更新的部分，特别是那些需要用户立即做出响应的部分。
- 愉悦 通过使用一些稀奇古怪或者是意料之外的动作使平淡的动画变得更加的吸引人。
我们将会通过几个现存的案例来剖析他们存在的意义以及使用这三个类别的目的。
- iOS的日历应用 在查询年和单独的月份之间的切换就是一个很好的指引用户在两个界面之间切换的一个很好的例子。因为过渡动画不仅仅是一个简单的导航控制器的push动画，而是能够变焦到一个更深层次的细节层面上，用户可以明显的感觉到自己在探索更深层次的数据。
- iOS7.1版本出现的打电话界面的动画是一个完全重新设计的动画，要比之前的都来得更加的统一和连贯。当接通一个电话的时候，接听按钮则会变成红色的挂断按钮。当你点击绿色的按钮来加入一个电话的时候也会发生相同的动画效果。锁屏状态下的滑动按钮现在更好理解，如果你继续滑动按钮，屏幕上的所有控件都会隐藏来暗示下一个状态——不包括电源按钮的滑动事件。
- 通过使用嵌入加强的效果，使用户在某一个时间段只关注到显示到屏幕上的一个部分。这种设计方式可以使设计者清楚用户在每一个时间里的焦点所在。这也会比毫无动画的直接显示整个屏幕的内容或者一次性完全的实现整屏幕内容动画会更具有吸引力。但是有一个弊端就是这种方式会花费较长的时间来显示内容，而这会使用户感觉到烦躁尤其是当它一遍又一遍的出现的时候。动画的视觉延迟 和 时间控制会在以后的内容当中继续进行介绍。
在Facebook paper中所有的动画和展示的消息都使用了不同的2D和3D效果。
- 我们第一个讨论的是“球”形图标的点击，当点击这个按钮的时候，会从这个图标的下一层淡出一个通知sheet，给用户一种印象就是它一直被隐藏在icon的后面等待显示。
- 另外，同时会使用户产生一定的思维模式：无论这个“球”在应用的哪个地方出现，都可以得到这个效果。
- 第三点，当你滑动从底部滑动一部分来覆盖整个屏幕的情况下，内容会展示在当前能够出现的顶部，并且暗示用户可以通过轻拂界面来返回到刚才的状态。
paper 使用了一个Facebook发布的一个开源的封装的一个pop库。之后我们会继续深入了解Pop框架。
从苹果手环上界面的切换动画来看，在一个新的界面出现之前，当前界面会移出。因为展示空间的狭小，在加载方向上必须使用户产生所用动画的一个视觉模式。
像苹果手环的动画效果一样，该动画是从一个居中排列的text菜单开始，当点击我的文件夹按钮的时候，文件夹被打开来显示那些文件。这样用户就会知道这个菜单列表是隐藏在当前的菜单之下的，并且可以通过点击右下角的按钮来返回到当初的菜单按钮。当点击菜单按钮的时候，会收缩整个文件列表放回到最初的文件夹icon状态并且之后会再次展示这个菜单。
一些下拉刷新的动画，在下拉刷新的过程当中会发生一些列的活动。
- 构成骨头动画的元素运动使它看起来像骷髅选装向下的效果一样。
- 出现了两个在平常状态下看不到的两个动画人物，而这些人物动画不仅仅是被用户拉动而是随着用户手势的变化而进行移动和旋转。
这个复杂的动画是由一系列不同的动画元素组成的，但是你可以想象一下用户在使用的时候，一遍又一遍的进行下拉的刷新操作，仅仅是因为这个动画效果比较的吸引人，这样就会使用户在众多的其它app当中记住这款产品。
如果你想寻找一些别人设计出来的一些考看的动画效果，可以去浏览 CAPPTIVATE.co以及通过“animation”标签在Dribble上进行查找。
讨论动画是多么的有趣和吸引人并不能使我们有效分解动画的具体动作并使我们自己做出炫酷的动画效果。这个我们将在以后的部分对动画的机制和属性进行学习。
网友评论