移动端动画设计的12个原则

Posted 2022-11-22 phyLearn

  在移动设备用户体验设计领域，微妙精致的动画已成为非常重要的设计元素。为任何对象添加动画并不简单，需要观察研究在真实世界中物体是如何在时空中运动的，需要设计者关注细节，并且具有耐心。适当的动画能够提供清晰的信息和直观有趣的体验，而过多的动画则容易造成糟糕的用户体验。那么移动设备上的动画应该如何来设计呢？Johnston 和Thomas在他们1981年出版的《The Illusion of Life： Disney Animation》一书中总结了12个动画设计原则，虽然当初主要是针对电影和电视领域而提出的，但是这些原则同样也适用于小屏移动设备上的动画设计。

1. 挤压变形

物体都存在质量，物体运动时的变形状态能反映其自身的刚性和弹性程度。例如书架椅子这类物体就具有较强的刚性，而衣服、树叶则具有更好的弹性。在移动体验中，利用挤压变形原则能够唤起用户的主观记忆。如果你想表达应用刚毅的效果，你就可以使用刚性的界面和图形，以及更加精准的动画，如果想要唤起用户对有机物的记忆，则可以使用柔软易变的界面，以及更加优雅柔和的动画。

2. 预备动作

设计物体的运动都需要考虑这三个阶段：动作发生前的预备动作，动作本身，动作的结果。预备动作可以为即将发生什么动作提供线索和信息，例如棒球运动员扔球前的甩臂运动，弹簧的反冲动作等等。在移动设备的用户体验设计中，预备动作还可以暗示用户应用内元素的使用方法。现在很多移动应用的打开动画都是很好的预备动作案例。

3. 状态

描述状态能更清晰的表达动画的中心思想。在移动体验设计中，状态原则主要涉及到屏幕的切换，和用户界面的交互过程。通过界面中的颜色、亮度、组成元素和动画来引导用户合理分配注意力，可以创造非常流畅的移动体验，并且可以增强应用的易用性。

4. 连贯与关键帧

上面那幅图片采用了连贯技术，即使用了每一帧画面来表现动作，而下面那幅则使用了三个关键帧来展示动画 

为了捕捉快速而特殊的动作，经常需要从头至尾的绘制每一帧画面，这就是连贯原则。而关键帧技术则是绘制动作中关键点的画面，并采用补间来展示动画。移动端的动画设计大多采用关键帧技术来实现，这种技术比较简单，适用于展现简单的动作，而对于复杂特殊的动作，则可能需要使用绘制每一帧的连贯技术了。

5. 顺势和叠加

顺势可以描述物体运动时，不同部分以各异的速度运动（如小狗摇头时耳朵、下巴的摆动速度不一致）

想像一只小狗左右摇头，它脸上松弛的肉也会随着头一起晃动。这就是动作的顺势和叠加。很少有动作是突然发生又突然停止的，一般都是逐渐停止，在物体的其他部分已经停止运动时，某些部分还在继续运动。而且物体的不同部分运动时的速度、动作都可能是不一样的，只有考虑到这些细微的差异动画看起来才会更真实形象。移动端的界面元素可以协同形成一个整体、叠加的动画效果，这些动画可以帮助用户理解界面元素和操作方法。

6. 缓慢出现和结束

无论是汽车还是短跑运动员，几乎所有的动作都需要一定时间来加速或者减速停止，这是客观规律。动画设计中经常会在动作的首尾，相对运动过程中，增加更多的画面帧。在移动体验设计领域，将缓慢进出的原则运用于滚动数据列表等微妙的动画时，都能很好更真实的用户体验。 

7. 运动路径

大多数时候物体的运动轨迹是不可见的，但是在特殊的情况下可以看到，如点燃的烟火可以根据火花来看到其运动的轨迹。

大多数物体的运动不是随机的，而是根据可预知的路径运动，但是通常情况下物体运动的轨迹是不可见的，不过一般具有一定模式。例如机械性的物体，如火车、汽车，运动轨迹一般是直线的，而有机物体，如植物、动物和人，更趋向于曲线运动。移动端的设计，需要考虑界面元素是按照机械物体还是有机物体的规律运动。

8. 次动作 

主要动作是松鼠的身体和脚，松鼠尾巴的运动则是次运动，这两个动作一同使得整个动作更加真实。

想象这个画面：一只松鼠跑过阳台跳到一棵树上，松鼠脚上的动作可以表现出它轻盈敏捷的特点，它的尾巴则可以通过有区分的运动方式来支持奔跑和跳跃的主要动作。不过次要动作主要是为了支持增强主动作而非分散了用户的注意力。 

Iphone上的邮箱应用就使用了次动作原则，在邮箱邮件中点击链接将打开浏览器窗口，这时浏览器界面的出现是主要动作，而邮箱应用退后变为背景是次动作，次动作很好的增强了主动作的体验，又不会喧宾夺主。

9. 速度

当动画中，对象或角色运动的速度太慢或太快都会引起人们的反感，也就是说动画的速度是非常重要的。在动画设计中，速度经常涉及到组成一个动作的画面帧数目。速度是一项非常重要的技术，它能够使物体看起来更符合客观规律。并且通过速度还可以表达角色的情绪状态和性格特征。

不管是列表的滚动还是不同界面的切换，速度原则都是一项非常微妙而重要的技术。在实际的设计中，动画的速度需要不断的尝试和试错，来验证速度的体验感。

10. 夸张

动画中的夸张能带来很多乐趣，并且也可以使对象更形象生动。一个没有进行夸张处理的动画可能看起来比较准确，但是容易让人感到乏味和缺乏人情味。在设计中运用这一原则来改变物体的形状、大小，能够增强运动的视觉感受和戏剧性。不过夸张也并不意味着完全失真。Disney对夸张的定义：以有想象力的形式展示真实性的内容。在设计移动体验时需要一定克制的使用夸张手法，界面上的夸张元素应该相互协调，避免给用户造成困惑和干扰。

11-12. 丰满的形象和个性

这条原则主要是真的动画角色的设计提出来的，通过重量、体积感、平衡、光影等手段创造一个具有三维感觉的动画角色，并且应该使角色具有个性魅力。这两条原则与移动体验的设计关系并不密切。角色的吸引力就想现场演员一样所具有的个人魅力。 

以上十二条原则对于移动端的动画设计非常有帮助，那么在实际的设计过程中应该如何来做呢？第一步需要意识到动画元素是一个非常有用的设计元素，第二步是将动画的设计整合进整个设计过程，包括草图阶段、线框图阶段和原型阶段。

草图阶段 在草图阶段就应该考虑应该使用怎样的动作运用于界面元素，从而突出应用的个性和感觉。例如通过界面元素的状态改变，或者不同界面的切换方式来营造不一样的体验效果，这些都可以在草图阶段通过手绘形式来进行思考和设计。线框图 线框图经常用来表示界面的流程，在该阶段应该整合动画的设计，在线框图问卷中使用简单的动画来与开发工程是和老板沟通设计构思和想法。原型阶段 草图和线框图是设计的第一步，高保真的设计原型能有更好的沟通效果和说服力。你可也通过使用原型工具来展示方案中动画的效果，例如使用Keynote和PPT来制作动画，这些动画可以帮助你和团队验证设计方案的可行性。使用Keynote来制作的高保真原型，可以让你测试用户与界面的交互行为，探讨方案的可行性 不过在实际的移动体验设计项目中，动画的使用也有一定的原则：克制 过多的动画会让人感到烦躁不安，会破坏产品的体验，需要有节制的使用动画元素，并且使用微妙精致的动画效果来营造良好的体验氛围。互补原则 动画设计原则的使用很少是鼓励存在的，因此需要巧妙的结合不同的设计原则来设计优秀的动画效果。动画是为了支持角色 电影中的动画都是为了支持剧情和角色，同样在移动端动画也属于辅助性的设计元素，不应该喧宾夺主，并且不能让用户因为动画而产生迷惑感。