设计基础

动画为界面注入活力,并且让用户能够清晰的感受到在操作之后,元素之前、之后与过渡的变化

直接 有意图

在设计思考之后进行动画设计,所设计的动画应该直接明了,告知用户屏幕中最重要的元素,当用户操作时,给予指引。

基础属性 决定了动画的根基。

构建模块

基础属性是界面动画的构建模块,这些基础属性动画可以单独使用,也可以组合使用。

位置

当物体被放置在坐标轴中,坐标轴可以有效的对比出物体的运动路径。位置移动可以受到力比如说阻力、推理和重力的影响。

比例

物体的相对尺寸变化可以让物体在空间中看起来更近或者更远,也可以突出元素的重要性,抓住用户的视觉焦点。

旋转

物体沿着轴线旋转可以有效的暗示用户系统中的某些元素发生了改变或者将要发生改变。

不透明度

在移动的物体中加入不透明度动画,可以让转场更佳流畅,也可以让元素变得更加凸显

层次感

运动的层次感可以用来显现出指引路径,也可以用来显示动画的布局,或者显示出屏幕中的信息层级,让用户的视觉焦点逐渐靠拢到重要的信息上。

动画可行性

给予用户控制的机会

必须充分考虑到用户的心理和物理行为。超过5秒的动画,必须提供暂停、停止、隐藏的功能,以免播久了用户心烦意乱。如果动画带有音频,超过3秒,那么提供音频控制,以便让使用屏幕阅读软件的用户可以理解内容。

不要太突兀

不要制作过于突兀过快的动画,看起来会非常的闪,动画制作的要让用户易于察觉。


风格化 决定了动画的气质,赋予机器的运动感。

灵感源自机器

100年来,IBM 在全球各地生为专业用户生产商用机器。我们从打字机中印码杆猛烈的撞击中,以及打字机托架微妙的横滑中获取到了丰富的灵感,机器运动中往往蕴含着目的与意图,让整个系统运转自如。同样地,我们设计软件也有着同样的需求——我们的动画必须有意图,必须在细节上让用户感到真实。

机器运动的风格化元素

灵活

设计出来的动画要有优雅的缓动曲线,富有节奏感和韵律感,让运动灵巧活泼。

高效

设计出来的动画要极具效率,而且要最小化所花费的时间。

精确

设计出来的动画的移动感要精确感十足,尤其是我们的设计灵感来自人造机器

有序

设计出来的动画要和谐一致。高优先级的元素先运动,低优先级的紧随其后。

运动中的IBM机器

IBM Executive electric typewriter

我们的侧拉菜单动画深受 IBM 打字机托架移动的影响。我们从机器运动中感受到运动的精确感,纸托架平滑的横向移动,返回到左边缘,而且每次听下的地方都位置一致。

IBM 729 Magnetic Tape Unit

磁带机有节奏的旋转,让我们思考用户的等待体验。当用户观察搜索结果加载动画时,旋转的过程展示系统正在运作,优雅的旋转暗示它正在工作,正在完成进度。

IBM 2560 Multi-function Card Machine

多功能卡片机滑动给予了我们制作移动端下拉效果的灵感。当卡片从漏斗中迅速的弹射出来的时候,会迅速的移动。而当卡片移出的时候卡片会在拐弯处暂停一会儿,然后迅速移走。


时间 与距离的关系决定了动画的个性

完美的结合

时间和距离时动画的原子单位。两者以不同的方式结合,赋予动画以不同的个性。即便是细微的改动,动画的风格也可能从紧凑不安变为愉悦舒缓。注意细节,争取让动画的质感变得舒服。

使用恰当的速度,让用户能够感到运动自然,元素自然的出现小时。当运动过快会导致沮丧感,当运动过慢,会让用户感到不快。例如移动设备上的列表滚动,加入一点点缓动,让整体的滚动看起来具有惯性,效果就好很多。缓动曲线是动画的关键点,能有效的将意图传达给用户。

设计过渡

当一个元素从一个点移动到另一个点的时候,要确定的是运动时间和运动曲线。定义“过渡”主要定义的是行为切换之间所产生的种种动画。过渡告诉了我们2张静态线框图之间发生了怎样的运动,有效的反馈了交互。一般来说过渡都有一个主角,会在转场中保留并凸显这一元素。

当设计过渡类动画的时候,你需要问你自己:

  • 什么元素在两个场景中是通用的?
  • 这一元素是怎样根据时间而变化的?
  • 所创建的动画是否有效的指明了转场效果,反馈了交互?

延迟

延迟指的是动画延期执行,延迟期间不发生任何运动。延迟可以有效的帮助构建富有层次感的动画和转场。延迟效果应该加在相似的内容元素上,以保证动画的一致性。

案例

Ease in

Ease in动画在开始时速度很慢,逐渐加速。Ease in动画可以构建优雅的加速运动感,可以和Ease out结合,让Ease out补充一些减速感。

Ease out

Ease out在开始时加速很快,逐渐减速,Ease out动画可以让物体有一种逐渐抵抗自然力,比如说风力和重力,最后区域静止的效果。

Easy ease

Ease ease动画先加速再减速。能让元素的运动自然,富有真实感,而不是突然的开始运动和停止。

Linear spacing

Linear Spacing 运动开始到结束,运动感完全一致,速度完全相同,这类运动让物体的运动感觉一致,但是比较的冷硬、机械。

Variable spacing

Variable Spacing 可以构建不一致感,元素以不一致的速度运动。不一致感有时候会让元素看起来富有生机,有时候却让元素感觉不协调。


动画原则 展示了动画如何提高用户体验。

指向性

动画提供用户空间感和指向感。

知觉性

动画会给予用户预示,让用户知晓接下来会发生什么。

导航性

动画可以提供有效的指引,让用户知道要做什么。

上下文

动画按序列移动,可以给予用户提供丰富的上下文,告知用户目前在哪儿。

焦点性

动画可以告知用户目前最重要、最优先的元素,可以有效的抓住用户的焦点,减少次要元素所导致的分心。

富有意义

动画可以协助用户,告知用户信息的层次关系,以及内容的重要度。/p>

个性化

动画可以为界面带来真实的质感,可以让动画变得有性格,可以构建用户与界面的情感练习。

关联性

动画展示了元素之间信息关系,帮助用户构建相关内容之间的心理模型。

Back to top of page