Motion Design for iOS

motion Design for iOS (翻译)1

2015-11-25  本文已影响331人  SHChen

苹果公司在2013年6月份在iOS6的基础上推出了令人震惊的iOS7版本。取代之前代表性的逼真的物理纹理效果的是更加扁平化、优美的设计效果。而这一改变所带来的效果之一就是使用PS等软件进行设计工作变得更加简单快捷。给一个APP的界面设计仿真效果的渐变、阴影以及高亮效果是一个令人头痛的过程。而将一长条的统一颜色来代替之前的渐变效果使得设计工作变得更加的简便。

但扁平化的变化也使app很难与其他的app区别开来。现在许多app在界面设计上有着相似的视觉效果,相近的颜色、相近的排版设计、相近的留白,缺少了渐变等效果之后,大多设计者开始使用##动作和##动画##来使自己的产品区别于其他同类产品。

这究竟是什么意思呢?在iOS7版本之前也是有动画的啊,那到底是什么发生了改变呢?现在动作和动画对于用户体验的考虑由之前的设计完考虑转变为现在的前导性考虑问题,到底这个动画或者是动作对于提升用户对app的整体体验的重要性和必要性的审视。动画不再是在末尾考虑的问题,而是贯穿整个设计流程。
所以,当你准备给你的app添加一些炫酷的动画效果的时候,你应该从哪里开始呢?应该在哪里、应该怎样添加动画呢?哪些动画是可以自然的吸引用户注意的,又有哪些动画是平淡并且不太讨巧的呢?

让我们一起来一探究竟吧!

流畅逼真动画的起源

1981年,早期的迪斯尼动画片制作者写了《迪斯尼动画原则》,概述了他们在迪斯尼早期动画创作工作中的原则。

这本书详述了动画设计的12个基本原则,而该书也被奉为设计和艺术方面的圣经。虽然这些原则是在大约80年前的手绘动画的年代总结的一些经验,但是在当今时代,让然有很大的应用价值。

基本原则主要是:挤压和伸缩(以特体形状的变形,强调瞬间的物理现角)、预备动作(加入一反向的动作以加强正向动作的张力,借以表示下一个将要发生的动作)、staging表演以及呈像方式、连贯动作发与关键动作法、渐快和渐慢、弧形运动轨迹、附属动作、时间控制、夸张、纯熟的手绘技巧、吸引力、深度、平衡及重量感。

这些基本的原则是在1920——1930年间动画出现的年代,Ollie Johnston and Frank Thomas是这个新领域的前辈,那么,在当前环境下我们应该如何应用这些基本原则呢?在得到详细的答案之前,我们应该首先看看在产品中应该如何使用动画和应该怎样大致思考动画。

过渡、焦点&愉悦

我们将会通过几个现存的案例来剖析他们存在的意义以及使用这三个类别的目的。

在Facebook paper中所有的动画和展示的消息都使用了不同的2D和3D效果。

paper 使用了一个Facebook发布的一个开源的封装的一个pop库。之后我们会继续深入了解Pop框架

从苹果手环上界面的切换动画来看,在一个新的界面出现之前,当前界面会移出。因为展示空间的狭小,在加载方向上必须使用户产生所用动画的一个视觉模式。

像苹果手环的动画效果一样,该动画是从一个居中排列的text菜单开始,当点击我的文件夹按钮的时候,文件夹被打开来显示那些文件。这样用户就会知道这个菜单列表是隐藏在当前的菜单之下的,并且可以通过点击右下角的按钮来返回到当初的菜单按钮。当点击菜单按钮的时候,会收缩整个文件列表放回到最初的文件夹icon状态并且之后会再次展示这个菜单。

一些下拉刷新的动画,在下拉刷新的过程当中会发生一些列的活动。

这个复杂的动画是由一系列不同的动画元素组成的,但是你可以想象一下用户在使用的时候,一遍又一遍的进行下拉的刷新操作,仅仅是因为这个动画效果比较的吸引人,这样就会使用户在众多的其它app当中记住这款产品。

如果你想寻找一些别人设计出来的一些考看的动画效果,可以去浏览 CAPPTIVATE.co以及通过“animation”标签在Dribble上进行查找。

讨论动画是多么的有趣和吸引人并不能使我们有效分解动画的具体动作并使我们自己做出炫酷的动画效果。这个我们将在以后的部分对动画的机制和属性进行学习。

上一篇 下一篇

猜你喜欢

热点阅读