首页 > 网页教程 > 设计分享 > 移动设备动画设计的12个原则分享

移动设备动画设计的12个原则分享

时间:2013-01-21    来源:jupeterlee

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

由迪士尼公司Frank Thomas 和 Ollie Johnston写的《生命的幻觉》

由迪士尼公司Frank Thomas 和 Ollie Johnston写的《生命的幻觉》                                           

1. 挤压变形

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

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

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

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

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

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

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

2. 预备动作

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

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

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

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

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

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

3. 状态

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

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

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

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

4. 连贯与关键帧

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

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

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

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

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

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

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

5. 顺势和叠加

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

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

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

相关推荐
前瞻:2012年Web设计和开发的15个最新趋势
移动应用开发:无线终端用户理解工作方法分享
无线移动终端APP的文字阅读体验设计分享
15个超棒的无线移动终端UI设计案例赏析
浅谈界面UI设计中的包容性设计
移动应用设计的横竖屏切换中的界面设计与体验提升
交互设计:移动应用与PC应用的交互差异浅析
2013年web开发者最需要了解的开发趋势和技能
优秀移动APP应用图标设计指南
换汤不换药?看应用们如何“为iOS 7设计”
20个创意漂亮的手机应用程序登陆页面设计欣赏
13款设计精美的移动应用网站案例欣赏
移动应用图标配色诀窍 APP界面配色设计教程
Android应用开发教程:最常见的十大导航设计错误!
移动应用导航设计如何用魅力来征服用户?
国外UI设计师:UI界面设计作品精选
APP设计!6个方法助你设计出优秀的APP
2015最流行的APP设计是啥?比如 Facebook那样的
20款创意设计的移动动画界面案例欣赏
动效设计教程:如何制作符合场景的交互动效?
动效设计:让网页设计的用户体验更有趣!
网页交互设计的一些理解
深挖交互设计的细节提升用户满意度
8个原则打造优秀的用户体验
交互设计中6个通用原则的介绍
如何杜绝网页设计中视噪对用户的影响
电子商务网站如何设计高效易用的网站左侧导航树
网页视觉设计如何针对用户有效表达信息
交互设计之浅谈下意识设计
用户体验评估之用户心理负荷的测量
百度统计流量研究院设计过程及思路详解
给不完整视觉信息寻找最简单直接的解读办法
分享:体验设计师需要学习的一些前端技术
分享:5招助你打造更加简洁的用户界面

精彩推荐

热门教程