从ui设计谈动效的重要性

基本动效

我们平时在Web或App中看到的动效其实都是由一些基本的动效组合而成的，这些基本动效包括：移动（Translate），旋转（Rotate），缩放（Scale）。在一些动效设计工具的帮助下，一般你只需要设置它的起点和终点，并告诉它你想要什么类型的动效，设计工具便会根据你的这些设置去渲染出整个动效。

移动（Translate）：顾名思义就是将一个物体从位置A移动到位置B，这是常见的一种动效，像滑动，弹跳，振动这些动效中都能看到。

旋转（Rotate）：通过改变物体的角度，产生旋转的效果。在页面加载，或点击某个按钮触发一个较长时间操作时，经常使用到的Loading效果或一些菜单图标的变换都会使用旋转动效。

缩放（Scale）：缩放在App应用中被广泛地使用，如点击一个App图标，打开App全屏界面时，以及通过点击一张缩略图查看具体内容时。

动效曲线

自然界大部分物体的运动都不是线性的，而是按照物理规律呈曲线性运动的。通俗点来说，就是动效的响应变化与执行动效的物体本身质量有关。的动效应该反映真实的物理现象，如果你想表现的对象是一个沉甸甸的物体，那么他们的起始动画响应/参数的变化会比较慢。反之，物体如果是轻巧的，那么其起始动画响应/参数的变化会比较快。

你也可以在easings.net中查看所有的动效曲线，获取它们对应的CSS，JS代码，并在你的项目中使用。

属性变换

属性变换是非常常见的一种动效。比如可以通过改变透明度来实现淡入/淡出效果等。同时你还可以改变对象的大小、颜色、位置等几乎所有属性来体现动画效果。

组合动效

在大多数场景中，我们需要同时使用2种以上的动效，将它们有效地组合在一起，以达到更好的效果。另外你仍需要让你的动效遵循普遍的物理规律，这样才能使它们更容易被用户接受。

动效不应该太慢

小编认为理想的动效时长应该保持在0.5-1秒之间,当你设计淡入淡出、滑动、缩放等动效时都应将时长控制在这个范围内。如果动效时长设置得太短，会让人看不清效果，甚至会给用户造成压迫感。反过来如果动效持续时间过长，又会让人感觉特别无聊，特别是当用户在使用App的过程中，反复看到同一动效的时候。

总的来说，UI设计中的动效的设计是极其重要的，不管是动效的组合还是动效的时长设置，对用户的体验度有很大的影响。的动效使用户能够非常方便地按照自己的意愿去掌控应用的行为，从而增强应用的使用体验度。

北京火星人教育：http://5199.peixun360.com/