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

移动端动画设计12个原则在移动设备用户体验设计领域,微妙精致动画已成为非常重要设计元素。为任何对象添加动画并不简单,需要观察研究在真实世界中物体是如何在时空中运动,需要设计者关注细节,并且具有耐心。适当动画能够提供清晰信息与直观有趣体验,而过多动画则容易造成糟糕用户体验。那么移动设备上动画应该如何来设计呢?Johnston与Thomas在他们1981年出版《TheIllusionofLife:DisneyAnimation》一书中总结了12个动画设计原则,虽然当初主要是针对电影与电视领域而提出,但是这些原则同样也适用于小屏移动设备上动画设计。 ,这能展示其具有较强弹性物体都存在质量,物体运动时变形状态能反映其自身刚性与弹性程度。例如书架椅子这类物体就具有较强刚性,而衣服、树叶则具有更好弹性。在移动体验中,利用挤压变形原则能够唤起用户主观记忆。如果你想表达应用刚毅效果,你就可以使用刚性界面与图形,以及更加精准动画,如果想要唤起用户对有机物记忆,则可以使用柔软易变界面,以及更加优雅柔与动画。 Flipboard刚毅效果动画来切换界面 Ibook使用更复杂、更柔与翻页效果来模仿真实阅读体验 :动作发生前预备动作,动作本身,动作结果。预备动作可以为即将发生什么动作提供线索与信息,例如棒球运动员扔球前甩臂运动,弹簧反冲动作等等。在移动设备用户体验设计中,预备动作还可以暗示用户应用内元素使用方法。现在很多移动应用打开动画都是很好预备动作案例。打开照相应用时动画运用了预备原则 WP系统主界面底部展示少量色块图标暗示了向上滑动手势操作 ,清楚表现了两个角色对话状态;左侧图片并没有很好解释这两个角色心理状态描述状态能更清晰表达动画中心思想。在移动体验设计中,状态原则主要涉及到屏幕切换,与用户界面交互过程。通过界面中颜色、亮度、组成元素与动画来引导用户合理分配注意力,可以创造非常流畅移动体验,并且可以增强应用易用性。 Keynote运用状态原则使得用户能很好理解正在处理文件 ,即使用了每一帧画面来表现动作,而下面那幅则使用了三个关键帧来展示动画为了捕捉快速而特殊动作,经常需要从头至尾绘制每一帧画面,这就是连贯原则。而关键帧技术则是绘制动作中关键点画面,并采用补间来展示动画。移动端动画设计大多采用关键帧技术来实现,这种技术比较简单,适用于展现简单动作,而对于复杂特殊动作,则可能需要使用绘制每一帧连贯技术了。由于游戏动作更复杂,水果忍者ipad版则采用了从头至尾技术来渲染动作植物大战僵尸Ipad版就采用了关键帧技术 ,不同部分以各异速度运动(如小狗摇头时耳朵、下巴摆动速度不一致) 想像一只小狗左右摇头,它脸上松弛肉也会随着头一起晃动。这就是动作顺势与叠加。很少有动作是突然发生又突然停止,一般都是逐渐停止,在物体其他部分已经停止运动时,某些部分还在继续运动。而且物体不同部分运动时速度、动作都可能是不一样,只有考虑到这些细微差异动画看起来才会更真实形象。移动端界面元素可以协同形成一个整体、叠加动画效果,这些动画可以帮助用户理解界面元素与操作方法。 WP上色块Ic