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

移动端动画设计的12个原则 在移动设备用户体验设计领域，微妙精致的动画已成为非常重要的设计元素。为任何对象添加动画 并不简单，需要观察研究在真实世界中物体是如何在时空中运动的，需要设计者关注细节，并且具 有耐心。适当的动画能够提供清晰的信息和直观有趣的体验，而过多的动画则容易造成糟糕的用户 体验。那么移动设备上的动画应该如何来设计呢？Johnston 和Thomas在他们1981年出版的《The Illusion of Life: Disney Animat ion》一书中总结了12个动画设计原则，虽然当初主要是针对电影和 电视领域而提出的，但是这些原则同样也适用于小屏移动设备上的动画设计。 由迪士尼公司Frank Thomas 和 Ollie Johnston写的《生命的幻觉》 1. 挤压变形 挤压装满水的气球后形变，这能展示其具有较强的弹性 物体都存在质量，物体运动时的变形状态能反映其自身的刚性和弹性程度。例如书架椅子这类物体 就具有较强的刚性，而衣服、树叶则具有更好的弹性。 在移动体验中，利用挤压变形原则能够唤起用户的主观记忆。如果你想表达应用刚毅的效果，你就 可以使用刚性的界面和图形，以及更加精准的动画，如果想要唤起用户对有机物的记忆，则可以使 用柔软易变的界面，以及更加优雅柔和的动画。 Flipboard刚毅效果的动画来切换界面 Ibook使用更复杂、更柔和的翻页效果来模仿真实阅读的体验 2. 预备动作 投掷保龄球前的甩臂就是一个预备动作 设计物体的运动都需要考虑这三个阶段：动作发生前的预备动作，动作本身，动作的结果。预备动 作可以为即将发生什么动作提供线索和信息，例如棒球运动员扔球前的甩臂运动，弹簧的反冲动作 等等。在移动设备的用户体验设计中，预备动作还可以暗示用户应用内元素的使用方法。现在很多 移动应用的打开动画都是很好的预备动作案例。 打开照相应用时的动画运用了预备原则 WP系统主界面底部展示的少量色块图标暗示了向上滑动的手势操作 3. 状态 右侧图片具有很好的状态释义性，清楚的表现了两个角色的对话状态；左侧的图片并没有很好的解 释这两个角色的心理状态 描述状态能更清晰的表达动画的中心思想。在移动体验设计中，状态原则主要涉及到屏幕的切换， 和用户界面的交互过程。通过界面中的颜色、亮度、组成元素和动画来引导用户合理分配注意力， 可以创造非常流畅的移动体验，并且可以增强应用的易用性。 Keynote运用状态原则使得用户能很好的理解正在处理的文件 4. 连贯与关键帧 上面那幅图片采用了连贯技术，即使用了每一帧画面来表现动作，而下面那幅则使用了三个关键帧 来展示动画 为了捕捉快速而特殊的动作，经常需要从头至尾的绘制每一帧画面，这就是连贯原则。而关键帧技 术则是绘制动作中关键点的画面，并采用补间来展示动画。移动端的动画设计大多采用关键帧技术 来实现，这种技术比较简单，适用于展现简单的动作，而对于复杂特殊的动作，则可能需要使用绘 制每一帧的连贯技术了。 由于游戏动作更复杂，水果忍者ipad版则采用了从头至尾的技术来渲染动作 植物大战僵尸Ipad版就采用了关键帧技术 5. 顺势和叠加 顺势可以描述物体运动时，不同部分以各异的速度运动（如小狗摇头时耳朵、下巴的摆动速度不 一致） 想像一只小狗左右摇头，它脸上松弛的肉也会随着头一起晃动。这就是动作的顺势和叠加。很少有 动作是突然发生又突然停止的，一般都是逐渐停止，在物体的其他部分已经停止运动时，某些部分 还在继续运动。而且物体的不同部分运动时的速度、动作都可能是不一样的，只有考虑到这些细微 的差异动画看起来才会更真实形象。移动端的界面元素可以协同形成一个整体、叠加的动画效果， 这些动画可以帮助用户理解界面元素和操作方法。 WP上的色块Icon的运动使用了动作叠加的设计原则。色块并不是单独运动，而是色块组以不同的 速度重叠运动。 6. 缓慢出现和结束 在动画的首尾增加更多的帧可以创造出更真实的效果 无论是汽车还是短跑运动员，几乎所有的动作都需要一定时间来加速或者减速停止，这是客观规律 。动画设计中经常会在动作的首尾，相对运动过程中，增加更多的画面帧。在移动体验设计领域， 将缓慢进出的原则运用于滚动数据列表等微妙的动画时，都能很好更真实的用户体验。 在移动界面上滚动列表运用了缓进缓出原则。在动画收尾增加更多的画面帧，使其更符合真实规律 。 7. 运动路径 大多数时候物体的运动轨迹是不可见的，但是在特殊的情况下可以看到，如点燃的烟火可以根据火 花来看到其运动的轨迹。 大多数物体的运动不是随机的，而是根据可预知的路径运动，但是通常情况下物体运动的轨迹是不 可见的，不过一般具有一定模式。例如机械性的物体，如火车、汽车，运动轨迹一般是直线的，而 有机物体，如植物、动物和人，更趋向于曲线运动