数极客首页

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

在移动

设备用户体验设计范畴
,巧妙

精致的动画已成为十分

重要的设计元素。为任何对象添加动画并不简单,需求
察看

研讨
在真实世界中物体是怎样
在时空中运动的,需求
设计者关注细节,并且具有耐烦
。恰当
的动画能够

提供明晰
的信息和直观有趣的体验,而过多的动画则容易构成

糟糕的用户体验。那么移动

设备上的动画应该怎样
来设计呢?Johnston 和Thomas在他们1981年出版的《The Illusion of Life: Disney Animation》一书中总结了12个动画设计准绳
,固然
当初主要是针对电影和电视范畴
而提出的,但是这些准绳
同样也适用于小屏移动

设备上的动画设计。

移动端动画设计的12个准绳
由迪士尼公司Frank Thomas 和 Ollie Johnston写的《生命的幻觉》

1. 挤压变形

移动端动画设计的12个准绳
挤压装满水的气球后形变,这能展示

其具有较强的弹性

物体都存在质量,物体运动时的变外形
态能反映其自身

的刚性和弹性水平

。例如书架椅子这类物体就具有较强的刚性,而衣服、树叶则具有更好的弹性。

在移动

体验中,应用
挤压变形准绳
能够

唤起用户的客观
记忆。假定

你想表达应用坚毅
的效果,你就能够

运用
刚性的界面和图形,以及愈加
精准的动画,假定

想要唤起用户对有机物的记忆,则能够

运用
柔软易变的界面,以及愈加
文雅
温和
的动画。

移动端动画设计的12个准绳
Flipboard坚毅
效果的动画来切换界面
移动端动画设计的12个准绳
Ibook运用
更复杂、更温和
的翻页效果来模仿

真实阅读的体验

2. 准备
动作

移动端动画设计的12个准绳
投掷保龄球前的甩臂就是一个准备
动作

设计物体的运动都需求
思索
这三个阶段:动作发作
前的准备
动作,动作自身

,动作的结果。准备
动作能够

为行将
发作
什么动作提供线索和信息,例如棒球运发起

扔球前的甩臂运动,弹簧的反激动

作等等。在移动

设备的用户体验设计中,准备
动作还能够

暗示用户应用内元素的运用
办法

。往常

很多移动

应用的翻开
动画都是很好的准备
动作案例。

移动端动画设计的12个准绳
翻开
照相应用时的动画运用了准备
准绳
移动端动画设计的12个准绳
WP系统主界面底部展示

的少量色块图标暗示了向上滑动的手势操作

3. 状态

移动端动画设计的12个准绳
右侧图片具有很好的状态释义性,分明

的表现了两个角色的对话状态;左侧的图片并没有很好的解释这两个角色的心理状态

描画

状态能更明晰
的表达动画的中心机
想。在移动

体验设计中,状态准绳
主要触及
到屏幕的切换,和用户界面的交互过程。经过
界面中的颜色、亮度、组成元素和动画来引导用户合理分配留意
力,能够

发明

十分

流利
的移动

体验,并且能够

增强

应用的易用性。

移动端动画设计的12个准绳
Keynote运用状态准绳
使得用户能很好的了解

正在处置
的文件

4. 衔接

与关键帧

移动端动画设计的12个准绳
上面那幅图片采用了衔接

技术,即便

用了每一帧画面来表现动作,而下面那幅则运用
了三个关键帧来展示

动画

为了捕捉快速而特殊的动作,经常需求
自始至终
的绘制每一帧画面,这就是衔接

准绳
。而关键帧技术则是绘制动作中关键点的画面,并采用补间来展示

动画。移动

端的动画设计大多采用关键帧技术来完成
,这种技术比较

简单,适用于展示

简单的动作,而关于
复杂特殊的动作,则可能需求
运用
绘制每一帧的衔接

技术了。

移动端动画设计的12个准绳
由于游戏动作更复杂,水果忍者ipad版则采用了自始至终
的技术来渲染动作
移动端动画设计的12个准绳
植物大战僵尸Ipad版就采用了关键帧技术

5. 顺势和叠加

移动端动画设计的12个准绳
顺势能够

描画

物体运动时,不同部分

以各异的速度运动(如小狗摇头时耳朵、下巴的摆动速度不分歧

想像一只小狗左右摇头,它脸上松弛的肉也会随着头一同
晃动。这就是动作的顺势和叠加。很少有动作是忽然

发作
又忽然

中止
的,普通
都是逐步

中止
,在物体的其他部分

曾经
中止
运动时,某些部分

还在继续运动。而且物体的不同部分

运动时的速度、动作都可能是不一样的,只需

思索
到这些细微的差别

动画看起来才会更真实形象。移动

端的界面元素能够

协同构成
一个整体、叠加的动画效果,这些动画能够

辅佐

用户了解

界面元素和操作办法

移动端动画设计的12个准绳
WP上的色块Icon的运动运用
了动作叠加的设计准绳
。色块并不是单独运动,而是色块组以不同的速度堆叠
运动。

6. 迟缓

呈现
和终了

移动端动画设计的12个准绳

无论是汽车还是短跑运发起

,简直

一切
的动作都需求
一定时间来加速或者减速中止
,这是客观规律。动画设计中经常会在动作的首尾,相对运动过程中,增加更多的画面帧。在移动

体验设计范畴
,将迟缓

进出的准绳
运用于滚动数据列表等巧妙

的动画时,都能很好更真实的用户体验。

移动端动画设计的12个准绳
在移动

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

7. 运动途径

移动端动画设计的12个准绳
大多数时分
物体的运动轨迹是不可见的,但是在特殊的状况

下能够

看到,如点燃的烟火能够

依据

火花来看到其运动的轨迹。

大多数物体的运动不是随机的,而是依据

可预知的途径
运动,但是通常状况

下物体运动的轨迹是不可见的,不过普通
具有一定方式

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

端的设计,需求
思索
界面元素是依照

机械物体还是有机物体的规律运动。

移动端动画设计的12个准绳
Iphone应用中的自然元素,例如鱼和水都是以曲线的轨迹来运动的
移动端动画设计的12个准绳
Android平台的界面元素趋向于运用
直线型的轨迹来运动,使界面更有科技的觉得

8. 次动作

移动端动画设计的12个准绳
主要动作是松鼠的身体和脚,松鼠尾巴的运动则是次运动,这两个动作一同使得整个动作愈加
真实。

想象这个画面:一只松鼠跑过阳台跳到一棵树上,松鼠脚上的动作能够

表现出它轻盈矫捷
的特性
,它的尾巴则能够

经过
有辨别

的运动方式来支持奔跑和腾跃
的主要动作。不过次要动作主要是为了支持增强

主动作而非分散了用户的留意
力。

Iphone上的邮箱应用就运用
了次动作准绳
,在邮箱邮件中点击链接将翻开
阅读
器窗口,这时阅读
器界面的呈现
是主要动作,而邮箱应用退后变为背景是次动作,次动作很好的增强

了主动作的体验,又不会喧宾夺主。

移动端动画设计的12个准绳
两个应用界面切换时的动画很好的运用了次动作这一准绳

9. 速度

移动端动画设计的12个准绳
在奔跑时不同的速度能很好的表现角色身体特征(体重,身高和动作幅度)和他的心情

当动画中,对象或角色运动的速度太慢或太快都会惹起
人们的恶感

,也就是说动画的速度是十分

重要的。在动画设计中,速度经常触及
到组成一个动作的画面帧数目。速度是一项十分

重要的技术,它能够

使物体看起来更契合
客观规律。并且经过
速度还能够

表达角色的心情
状态和性格特征。

不论

是列表的滚动还是不同界面的切换,速度准绳
都是一项十分

巧妙

而重要的技术。在理论

的设计中,动画的速度需求
不时
的尝试和试错,来考证
速度的体验感。

移动端动画设计的12个准绳
Ipad照片应用运用
了相似

扑克快速洗牌的效果,这能够

突出轻量、浮力和超理想
的速度等觉得

10. 夸大

移动端动画设计的12个准绳
加拿大的动画设计师John Kricfalusi在他的动画片《Ren 和Stimpy》中运用
了大量的夸大

手法。

动画中的夸大

能带来很多乐趣,并且也能够

使对象更形象生动。一个没有中止

夸大

处置
的动画可能看起来比较

精确

,但是容易让人感到乏味和缺乏人情味。在设计中运用这一准绳
来改动
物体的外形
、大小,能够

增强

运动的视觉感受和戏剧性。不过夸大

也并不意味着完好

失真。Disney对夸大

的定义:以有想象力的方式
展示

真实性的内容。在设计移动

体验时需求
一定抑止

的运用
夸大

手法,界面上的夸大

元素应该相互

调和

,避免

给用户构成

困惑和干扰。

移动端动画设计的12个准绳
主界面与应用程序翻开
界面的切换动作是中止

了一定的夸大

。这使得翻开
应用程序时更有趣和弹性,有点像蹦床。

11-12. 丰满

的形象和个性

移动端动画设计的12个准绳
丰满

的形象强调三维形态、精准感和动画的重量感、均衡

感和光影感。

这条准绳
主要是真的动画角色的设计提出来的,经过
重量、体积感、均衡

、光影等伎俩

发明

一个具有三维觉得
的动画角色,并且应该使角色具有个性魅力。这两条准绳
与移动

体验的设计关系并不密切

。角色的吸收
力就想现场演员一样所具有的个人魅力。

以上十二条准绳
关于
移动

端的动画设计十分

有辅佐

,那么在理论

的设计过程中应该怎样
来做呢?第一步需求
认识
到动画元素是一个十分

有用的设计元素,第二步是将动画的设计整合进整个设计过程,包括草图阶段、线框图阶段和原型阶段。

草图阶段 在草图阶段就应该思索
应该运用
怎样的动作运用于界面元素,从而突出应用的个性和觉得
。例如经过
界面元素的状态改动
,或者不同界面的切换方式来营造不一样的体验效果,这些都能够

在草图阶段经过
手绘方式
来中止

思索

和设计。

移动端动画设计的12个准绳
在Itunes中阅读细致
信息的动画设计草图

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

移动端动画设计的12个准绳
线框图中的动画设计主要采用图片和插图的方式

原型阶段 草图和线框图是设计的第一步,高保真的设计原型能有更好的沟通效果和压服
力。你可也经过
运用
原型工具来展示

计划

中动画的效果,例如运用
Keynote和PPT来制造
动画,这些动画能够

辅佐

你和团队考证
设计计划

的可行性。

移动端动画设计的12个准绳
运用
Keynote来制造
的高保真原型,能够

让你测试用户与界面的交互行为,讨论
计划

的可行性

不过在理论

的移动

体验设计项目中,动画的运用
也有一定的准绳

抑止

  过多的动画会让人感到焦躁

不安,会破坏

产品的体验,需求
有节制的运用
动画元素,并且运用
巧妙

精致的动画效果来营造良好的体验氛围

互补准绳
  动画设计准绳
的运用
很少是鼓舞
存在的,因而

需求
巧妙的分别

不同的设计准绳
来设计优秀的动画效果。

动画是为了支持角色 电影中的动画都是为了支持剧情和角色,同样在移动

端动画也属于辅助性的设计元素,不应该喧宾夺主,并且不能让用户由于
动画而产生迷惑感。

文章来源:用户体验咨询网

给大家举荐

我国新一代大数据用户行为剖析

与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合剖析

用户行为数据和业务数据,能够

自动监测网站、APP、小程序等多种渠道推行
效果剖析

,是增长黑客们必备的互联网数据剖析

软件。数极客支持实时多维剖析

、漏斗剖析

、留存剖析

、途径
剖析

等十大数据剖析

办法

以及APP数据剖析

网站统计网站剖析

小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据剖析

模型,是用户行为剖析

范畴
首款应用定量剖析

与定性剖析

办法

数据剖析

产品

发表评论

评论已关闭。

相关文章