动效的可用性：交互动效基本原理.pdfVIP

在用户界面中，动效不仅仅是一种视觉装饰，而是一种强大的力量，它可增

强产品参与度扩展设计交流的范围。

本文给大家介绍r十二项最基本的动效设计原理，这些都适合用于ux/ui设

计项目中，是非常有用的运动原理，建议收藏反第食用。

原理一：缓动Easing

缓动效果模拟了现实世界中对象随时间加速或减速的方式，它适用于所有运

动的元素。自然界中没有东西是从一点呈线性地移动到另一点。现实中，物

体在移动时往往会加速或减速。我们的大脑习惯于期待这种运动，因此在做

动画时，应利用此规律。自然的运动会让用户对你的应用感觉更舒适，从而

产生更好的总体体验。

线性动画

没有任何速度上的变化的的动画称为线性动画，如坐标图所示，运动的曲线

成直线状态。这种动画效果往往显得很僵硬，不自然，让用户觉得不协调。

一般来说，应避免线性运动。

EasingFLinearJ

YINJIMOTIONDESIGN

缓出动画

运动的开头速度很快，结尾处逐渐减速的动画称为缓出动画。运动曲线呈

抛物线状态，缓出动画最适合界面里面的动效，快速的入场给人反应很快

的感觉。

Easingrease-outJ

YINJIMOTIONDESI