您现在的位置: 万盛学电脑网 >> 软件知识 >> 图文处理 >> 平面设计理论 >> 正文

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

作者:佚名    责任编辑:admin    更新时间:2022-06-22

   1. 挤压变形

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

  挤压装满水的气球后形变,这能展示其具有较强的弹性

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

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

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

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

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

  2. 预备动作

  投掷保龄球前的甩臂就是一个预备动作

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

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

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

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

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

  3. 状态

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

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

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

  Keynote运用状态原则使得用户能很好的理解正在处理的文件

  4. 连贯与关键帧

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

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

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

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

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

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

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

  5. 顺势和叠加

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

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

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

  6. 缓慢出现和结束

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

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

缓慢进入和退出的原则

  在移动界面上滚动列表运用了缓进缓出原则。在动画收尾增加更多的画面帧,使其更符合真实规律。

  7. 运动路径

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

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

  Iphone应用中的自然元素,例如鱼和水都是以曲线的轨迹来运动的

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

  8. 次动作

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

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

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

8.2

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

  9. 速度

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

  当动画中,对象或角色运动的速度太慢或太快都会引起人们的反感,也就是说动画的速度是非常重要的。在动画设计中