迪士尼动画与界面动效的一些关联

進无尽

发布于 2018-09-12 10:16:47

1.1K0

这是一篇转载的文章，因为现在在专注产品设计和管理方面，感觉很不错就转载了下。

作者：梁，晓明

迪士尼出品的《疯狂动物城》可谓逗乐了全民，作为迪士尼动画的杰出代表，大人和孩子都爱看的缘由是什么？除了精彩的剧本，拟人和夸张的动画效果可谓是最具吸引力的地方。同样作为体验良好的界面，流畅的动效赋予了其生动和活泼。动画和动效的共通特征大概就是画面“动”的漂亮了。迪士尼动画成立于上世纪20-30年代，虽不足百年，但行成了一套动画创作的黄金原则。详细分析下，这12原则与界面动效设计的原则有很多相通的地方。

1483105880625972.png

1) 挤压和拉伸

挤压和拉伸是指物体的形变。例如抛出一个皮球，它在接触地面时发生挤压，在弹起时发生了拉伸。迪士尼动画经常出现这一手法，如人物的落地/起跳，结合夸张的手法，更加有力生动。在人机界面中，界面上的内容或控件相对严谨和机械，生命力较弱，适当的挤压和拉伸可增加趣味性和生动性。

1483105924424627.jpg

1483105894855609.gif

2)预备动作

迪士尼的动作设计经常出现反向动作，用来加强正向动作的张力，让观者对于角色的行动有一定的预期性。如下图，唐老鸭手臂反向的动作，能够让人们快速反应出来它要起跑。预期性是人机界面设计中的重要原则，符合用户预期的页面切换/控件操作/动效过渡，会让人感到自然和舒服。如下图，滑块在即将掉落的过程中出现了反弹，这个细节强调了滑块的不稳定性，符合人们对于物体滑落的认知。

1483105949321444.jpg

1483105957537394.gif

3)演出布局

动画中的演出是角色在每一个镜头的表演（表情/动作刻画），布局是每一个镜头的内容呈现。角色的走位需要仔细安排和设计，避免同一时间有过多琐碎的动作与变化，导致观者抓不住重点。人机界面中的动效同样需要区分主次，把用户的视觉焦点集中在当下。material design 中的动效切换，很多都提供了一个视觉焦点，用户很容易找到界面需要关注的地方。

1483106195931218.gif

4）连贯动作法与关键动作法

动画是一系列连续图像组成的动态影像，例如常见的1s/24帧，指的是1s内显示24张连续的图像。连贯动作法是把每一帧都抓取出来，关键动作法是选取一些关键帧，关键帧与关键帧之间通过补间帧来完成。如下图“打太极拳”的动作，上面的图是把太极拳的每一个动态抓取出来，下面的图展现的是太极拳的关键动作。人机界面中的动效，常采用的是关键动作法。

1483106222540243.jpg

1483106229611035.jpg

5）渐快与渐慢

物体的运动都有加速和减速的过程, 不会突然停止和瞬间加速,。动画中的运动遵循物理定律会更容易让人们接受，人机界面中通过贝塞尔曲线可以实现复杂的运动效果。

1483106258218429.png

6）跟随动作与重叠动作

迪士尼对于运动物体的诠释是物体的运动是一个部分接着一个部分的。如转身的动作，人的身体先完成，接着身上的衣服跟随转身，这里衣服的运动即为跟随动作。另外物体与物体的运动会有重叠的部分，如一辆车超过另外一辆车时，这个过程中他们的运动会有重叠。跟随和重叠动作可以造就视觉上的时间差，增加动作的真实性和趣味性。