SODA & UI动效讲解【附MaterialDesign基础理论要点】

动效作为UI释放光彩的地方，应该大胆想象，针对你所绘制的图标，网页，app，以及插画，对其赋予恰当好处又不失想象力空间的动效，将会使你的UI作品更加有趣夺目。UI动效主要使用AfterEffects软件，通过导入PS及AI或者sketch的文件，将我们绘制好的图形赋予真实世界的力与感受，对我们所添加的每一个关键帧都打上缓动，对其速度和节奏做出一个合理的解释，让我们的动效不是立即开始或者立即结束，而是缓入缓出，有的放矢。

针对MaterialDesign动效，你应该做到以下几点：

1.生动有意义：移动的物体或动作不应该干扰用户体验，而是保证用户体验的连贯性。

2.真实且自然：视觉线索必须立足于现实。

3.醒目有策略：基本的设计原理，必须引导视觉效果。

4.Material Design重视动画效果，它反复强调一点：动画不只是装饰，它有含义，

能表达元素和界面之间的关系，具备功能上的作用。（强调功能性）

5.动画要贴近真实世界。物理世界中的运动和变化都是有加速和减速过程的，

忽然开始，忽然停止的匀速动画显得机械而不真实。考虑动画的easing（缓动），

要先考虑它在现实世界中的运动规律。

6.在移动设备上的长动画大约是300-400ms（0.3s-0.4s），短动画大概是150-200ms。

过长的动画让人感觉迟钝，过短的动画让人觉得难以看明白。

其次感觉最重要，好的动画节奏是调出来的。

7.Material Design的代表性交互：水波纹效果

用户触摸屏幕时，通过水波纹动画能使用户确认输入。卡片上升表示该卡片处于激活状态。

8.Material Design的元素关联：

元素之间的相互协作和关联。显示触发元件或动作和创建出的新的卡片之间的联系。

9.Material Design的动效通过模仿真实世界的力，而展现了自然的运动过程。

10.Material Design的动效能使焦点在对的时间聚焦在对的点。

如：转场动画有助于引导用户进行下一步的交互。

运动动效可告知用户当前状态，如iPhone解锁失败。