移动端网页动画设计的原则

在移动设备用户体验设计领域，微妙精致的动画已成为非常重要的设计元素，为任何对象添加动画并不简单，需要观察研究在真实世界中物体是如何在时空中运动的，需要设计者关注细节，并且具有耐心。

适当的动画能够提供清晰的信息和直观有趣的体验，而过多的动画则容易造成糟糕的用户体验，那么，移动设备上的动画应该如何来设计呢？

1、挤压变形

挤压装满水的气球后形变，这能展示其具有较强的弹性，如下图所示：

物体都存在质量，物体运动时的变形状态能反映其自身的刚性和弹性程度，例如书架椅子这类物体就具有较强的刚性，而衣服、树叶则具有更好的弹性。

在移动体验中，利用挤压变形原则能够唤起用户的主观记忆，如果你想表达应用刚毅的效果，你就可以使用刚性的界面和图形，以及更加精准的动画，如果想要唤起用户对有机物的记忆，则可以使用柔软易变的界面，以及更加优雅柔和的动画。

Flipboard刚毅效果的动画来切换界面

Ibook使用更复杂、更柔和的翻页效果来模仿真实阅读的体验

2、预备动作

设计物体的运动都需要考虑这三个阶段：动作发生前的预备动作，动作本身，动作的结果。预备动作可以为即将发生什么动作提供线索和信息，例如棒球运动员扔球前的甩臂运动，弹簧的反冲动作等等。

在移动设备的用户体验设计中，预备动作还可以暗示用户应用内元素的使用方法，现在很多移动应用的打开动画都是很好的预备动作案例。

打开照相应用时的动画运用了预备原则

WP系统主界面底部展示的少量色块图标暗示了向上滑动的手势操作

3、状态

右侧图片具有很好的状态释义性，清楚的表现了两个角色的对话状态;左侧的图片并没有很好的解释这两个角色的心理状态。

描述状态能更清晰的表达动画的中心思想，在移动体验设计中，状态原则主要涉及到屏幕的切换，和用户界面的交互过程（具体可查看马海祥博客《移动场景下不同类型的图像处理应用设计》的相关介绍）。

通过界面中的颜色、亮度、组成元素和动画来引导用户合理分配注意力，可以创造非常流畅的移动体验，并且可以增强应用的易用性。

4、连贯与关键帧

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

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

由于游戏动作更复杂，水果忍者ipad版则采用了从头至尾的技术来渲染动作：

植物大战僵尸Ipad版就采用了关键帧技术：

5、顺势和叠加

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

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

移动端的界面元素可以协同形成一个整体、叠加的动画效果，这些动画可以帮助用户理解界面元素和操作方法。

WP上的色块Icon的运动使用了动作叠加的设计原则，色块并不是单独运动，而是色块组以不同的速度重叠运动。

6、缓慢出现和结束

在动画的首尾增加更多的帧可以创造出更真实的效果：

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

在移动界面上滚动列表运用了缓进缓出原则，在动画收尾增加更多的画面帧，使其更符合真实规律（具体可查看马海祥博客《基于滑动维度的交互设计变化》的相关介绍）。

7、运动路径

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

大多数物体的运动不是随机的，而是根据可预知的路径运动，但是通常情况下物体运动的轨迹是不可见的，不过一般具有一定模式。

例如机械性的物体，如火车、汽车，运动轨迹一般是直线的，而有机物体，如植物、动物和人，更趋向于曲线运动。

移动端的设计，需要考虑界面元素是按照机械物体还是有机物体的规律运动。

例如：Android平台的界面元素趋向于使用直线型的轨迹来运动，使界面更有科技的感觉：

8、次动作

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

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

两个应用界面切换时的动画很好的运用了次动作这一原则

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

9、速度

在奔跑时不同的速度能很好的表现角色身体特征（体重，身高和动作幅度）和他的情绪。

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

例如：Ipad照片应用使用了类似扑克快速洗牌的效果，这可以突出轻量、浮力和超现实的速度等感觉。

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

10、夸张

加拿大的动画设计师John Kricfalusi在他的动画片《Ren和Stimpy》中使用了大量的夸张手法。

动画中的夸张能带来很多乐趣，并且也可以使对象更形象生动，一个没有进行夸张处理的动画可能看起来比较准确，但是容易让人感到乏味和缺乏人情味，在设计中运用这一原则来改变物体的形状、大小，能够增强运动的视觉感受和戏剧性。

不过夸张也并不意味着完全失真，Disney对夸张的定义：以有想象力的形式展示真实性的内容。在设计移动体验时需要一定克制的使用夸张手法，界面上的夸张元素应该相互协调，避免给用户造成困惑和干扰。

主界面与应用程序打开界面的切换动作是进行了一定的夸张，这使得打开应用程序时更有趣和弹性，有点像蹦床。

11、丰满的形象和个性

丰满的形象强调三维形态、精准感和动画的重量感、均衡感和光影感。

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

12、实际的设计过程中应该如何来做？

以上的原则对于移动端的动画设计非常有帮助，那么在实际的设计过程中应该如何来做呢？

第一步需要意识到动画元素是一个非常有用的设计元素；第二步是将动画的设计整合进整个设计过程，包括草图阶段、线框图阶段和原型阶段。

（1）、草图阶段

在草图阶段就应该考虑应该使用怎样的动作运用于界面元素，从而突出应用的个性和感觉，例如通过界面元素的状态改变，或者不同界面的切换方式来营造不一样的体验效果，这些都可以在草图阶段通过手绘形式来进行思考和设计。

在Itunes中阅读详细信息的动画设计草图

（2）、线框图阶段

线框图经常用来表示界面的流程，在该阶段应该整合动画的设计，在线框图问卷中使用简单的动画来与开发工程是和老板沟通设计构思和想法。

线框图中的动画设计主要采用图片和插图的形式

（3）、原型阶段

草图和线框图是设计的第一步，高保真的设计原型能有更好的沟通效果和说服力，你可也通过使用原型工具来展示方案中动画的效果，例如使用Keynote和PPT来制作动画，这些动画可以帮助你和团队验证设计方案的可行性。

使用Keynote来制作的高保真原型，可以让你测试用户与界面的交互行为，探讨方案的可行性。

不过在实际的移动体验设计项目中，动画的使用也有一定的原则：

（1）、克制

过多的动画会让人感到烦躁不安，会破坏产品的体验，需要有节制的使用动画元素，并且使用微妙精致的动画效果来营造良好的体验氛围。

（2）、互补原则

动画设计原则的使用很少是鼓励存在的，因此需要巧妙的结合不同的设计原则来设计优秀的动画效果。

（3）、动画是为了支持角色

电影中的动画都是为了支持剧情和角色，同样在移动端动画也属于辅助性的设计元素，不应该喧宾夺主，并且不能让用户因为动画而产生迷惑感。

马海祥博客点评：

设计人员在进行移动端网页动画设计中，也应该要做好事前的前期策划，比如了解网页的动态特点，了解产品的特点，了解企业和公司的文化，在此基础上才能够进行移动端网页动画的设计流程。