题图来源：

https://dribbble.com/shots/1497998-Designers-MX-Logo-Animated

作者：Seth Eckert

一个好的动效设计可以提升UI界面与用户的交互体验，让枯燥的界面不这于沉闷，甚至具有吸引用户去继续去探索的可能，当然我们不能随便使用动效，需要经过深思熟虑，不要为了“炫”而去做。

逼真的动态效果

就物理性而言，所有的物体都有质量且只在受外力时移动。因此，物体并不会突然地移动或停止，突然移动或停止以及瞬间改变方向的动态效果看起来并不符合自然规则，对使用者来说这样的效果是不符合期待且造成令人不快的混乱。

Material Design中动效最重要的关键是保留其物理性感觉，且不会失去优雅、简约、美丽的特性，下面的设计准则将以动效展示上述概念。

动画应该有快有慢，线性的速度不符合自然规则，速度应该遵循快入快出的原则。 如下图所示意的速度对照：

线性速度违背常识

动效设计可以建立与使用者之间的信任感，同时吸引他们的注意力。使用者与程序互动时，若出现漂亮且极具逻辑性的效果，使用者会感觉被满足甚至是愉悦的。

谷歌官方介绍了三种交互实例：

1、表层的交互设计（surface reaction）

表层的交互设计是最常见的一种交互方式了，最古老应该可以追溯到鼠标悬停/点击链接变色。而在material design 中，借用墨水的隐喻，墨水是覆盖在每一张纸上的表层现象，所以，点击时，就像盖了一层墨水上去。谷歌用了一种优雅的做法：点击涟漪效果。

这里一个细节是涟漪散开的中心点。这个中心永远都是手指点击的交互点，或鼠标移入的点。

2、 物体本身的回馈（Material response）

除了在表象层呈现像墨水渲染般的动态效果，物体本身也可以做出反馈。当初触控或点击的時候，物体可以往上移动，表示是启用的状态，使用者透过触控或点击，产生新的物体或改变物体现有的状态。

正确的做法。物体从触控点出现，视觉上可以感觉到弹出菜单与按钮的视觉连接。

从中间乱入，切断了与触控点的联系

触控时的上升效果

细心的你一定发现了，日常APP中的很多交互效果都可以归类为“物体本身的回馈”。如微信点赞，爱心变大。微博点赞，大拇指变大。强烈的反馈能带来身心得愉悦。

3, 放射性动画效果（Radial action）

使用者的操作行为会有一个中心点，透过这个中心点，使用者将他们的操作意图输入这个系统。与使用者的输入点建立强烈视觉连结，可以让使用者更清楚知道他所做的动作，不论是从手指触控萤幕或是从麦克风输入声音。横跨屏幕的动画效果，应该随着与中心点的距离增加，前进式地引发动画，就像建立一个涟漪动画。

设计有意义的动画

我们设计交互动画，说白了就是在导演下列三种元素：

• 进入的元件：可能是直接新增的元件或从其他位置转变过来的，这些元件有各自被引进或再製造的方式。

• 离开的元件：与新内容不再相关的元件必须透过适当的方式移除。

• 共用的元件：从渐变动画开始到结束都持续存在的元件，可能是细小的icon图示或显眼的大型图片，透过动画改变成符合屏幕的尺寸。

注意：

当你在设计你的动画时，请注意以下几件事：

• 思考使用者的注意力应该如何被引导？什麽样的元件或动作能够协助这个目标？动画过程中，要进入、离开或共用的元件，要如何安排强调或弱化？

• 设计画面时，思考动画前后的状态，在渐变的过程中透过颜色及共用的元件，找到机会创造视觉关联性。

• 审慎地加入动作：思考如何透过移动一个元件，使动画渐变的过程更加清晰流畅。

如下面的一个示范：

通过上下弹出动画，就像幕布一般，触碰点与新场景创造了视觉的关联性

无动画过渡，新场景的出现显得莫名其妙

2个可利用的方法：

1, 阶层式的时间差：

更加有层次的展示动画，能引导用户注意力，分清主次。

2, 编排规则的一致性：

创造了视觉关联系，并且动画效果清晰流畅

使人愉悦的动画细节

充满创意的动画细节会使用户有惊喜感，谷歌提供的关于图标细节的两个例子：

这些细节的创造需要灵感，而灵感需要积累，在你创造前，欣赏很重要。

下面再附上大名鼎鼎的设计师网站dribbble上的一些动效设计案例。

Nick Rolph

https://dribbble.com/shots/1092480-Save-GIF

Nick Buturishvili

https://dribbble.com/shots/2012292-Download-transition

Colin Garven

https://dribbble.com/shots/1426764-Submit-Button

xjw

https://dribbble.com/shots/1887815-Download

-END-