写这篇文的初衷是因为之前自己和周围的一些朋友做交互设计的时候基本都是靠感觉，而没有遵循一定的逻辑规范。虽然最终的作品看起来很漂亮，但是细细追究，并不能为用户体验加分。
本文分为两个部分，第一部分介绍微交互在界面设计中的具体分类和体现，其技巧和规范是在参考了很多资料后根据经验总结而成；第二部分是各类动效软件的对比，从设计功能和动效质量两部分来阐述。
注：文章中所有用到的动效均为原创作品，引用请注明链接和作者。
下图是本文的一幅引导图：
1 功能分类
根据功能性，我们可以把动效分为以下四大类：
1.1 信息交互
当界面/系统中某一状态/信息发生改变的时候使用的衔接动效，为了更好的显示层级关系和过渡关系。
界面之间无非是平级关系或母子关系。垂直的滚动通常是信息的浏览方式，有时候通过元素体积的变化来表现信息的重要性；水平的滑动有时候是平级关系的体现；体积的大小变化，甚至3D的转化则是体现母子关系通常使用的方式。
利用Principle制作的Photo Album交互
1.2 状态和反馈
具体包括反馈状态、撤销操作、提示消息等，旨在给用户及时反馈，方便用户撤销操作或明确自己的所在位置。
利用Principle制作的表格填写动效
1.3 指导用户
通常出现在用户第一次进行某操作时，以引导动画和反馈动画为主。
如下图中的打开GPS功能，并介绍App的主要功能。
1.4 情感表达和品牌建立
开场、转场、信息加载等，为丰富信息，保留用户，增加趣味性而存在。
用Invision Studio制作的Onboarding动效
2 元素分类
要想做好一个动效，首先要明确一个界面中的持久性元素，传出元素，传入元素和静态元素，对每一个元素进行相应的动效设计。
2.1 持久性元素
持久性元素根据界面的不同自身可能会发生变化，例如burger menu -> close的变化，动效的选择可以是共享元素变换（见下文）。
2.2 传出元素
传出元素就是在下一个界面中不再出现的元素，动效的选择可以是渐出、划出等。
2.3 传入元素
传入元素是在新界面中新引入的元素，动效的选择可以是渐入、划入等。
2.4 静态元素
静态元素就是两个界面中相同且保持静止的元素，例如菜单栏。
3 观感决定因素
决定这些微交互质量或观感的则是速度（持续时间），变换方式，顺序，连续性，对比等。
3.1 速度（持续时间）
两个相同的动画，仅仅因为速度的不同，给用户的观感是大相径庭的。
时间短促的动画看上去很强劲，有快捷的感觉。
时间延长的动画看上去更舒服，有轻松的观感。
图左使用0.3s的默认持续时间，图右则为0.1s
在我们的动效制作软件里一般都有默认持续时间，大部分是0.3s（300s），对于变换体积不大的动效而言，这个时间是一个令人舒服且不拖拉的。根据变化方式和体积的不同，我们需要对持续时间进行调整。
3.2 变换方式（动作）
3.2.1 淡入淡出 easing
Easing可以细分为Ease-in，Ease-out, Ease-both，当然还有bounce，elastic等等，这里就暂不具体介绍了。
我们可以用一些简单的物理知识帮助理解，ease-in其实就是物体的初始速度很小，之后做加速运动，ease-out则是物体的初始速度很大，之后做减速运动，ease-both是先加速再减速，no ease就是匀速运动。
3.2.2 动作路径
动作路径分为线性运动（linear）和弧运动（arc）。
当一个元素的线性变化路径形成了一个不和谐的对角线（不是主对角线）的时候，就是使用弧运动的时候了。这种情况通常出现在元素缩放时比例产生了变化（因为如果缩放前后的比例相同，重心位置位置的线性运动产生的一定是一个正对角线）。
而弧运动也分为垂直向外（vertical out）和水平向外（horizontal out）。
垂直向外，简单来说就是运动从水平方向开始，在垂直方向上结束。用简单的物理知识来解释就是元素的水平运动速度大于垂直运动速度，或者水平运动早于垂直运动。
水平向外，就是从垂直方向开始，从水平方向结束，也就是水平运动速度小于垂直运动速度看，或者水平运动晚于垂直运动。
为了方便大家判断应该使用怎么的方式来做这个动效，我们可以想象手指或鼠标滑动的方向。如果我们想要用大拇指放大一个在左下角的元素，我们会使用一种垂直向外的滑动方式(即向右上方滑动，目的是元素停止运动的方向和浏览方向相同)，那么这就是最佳的路径选择方式了。
3.2.3 阻力（resistance）
物理中的阻力就是物体为了避免改变现状而产生的抵抗运动的力，对于动效也同样适用。
阻力的具体体现可以表现在下拉刷新时的Overshoot，超出应有边界而体现的抵抗性。还有就是震荡（Oscillation/Spring），延伸（stretch），视差（parallax）等。
阻力动画的设计通常会让生硬的界面更人性化、更有趣，也更容易建立情感连接，缩小虚拟交互和现实交互的差距。这种动画形式在Desktop使用偏多，更自由，在手机等小屏幕界面中要尽量避免大面积使用。
3.3 顺序
一个简单的序列就是所有元素像一个整体一样一起运动。
一个稍微复杂一些的序列，例如持续性、传出、传入元素都一同发生改变的时候，理想的顺序就是：1-传出元素消失，2-传入元素进入，持续性元素在整个过程中完成变换。
错落（stagger）是很常见的列表使用的顺序方式。
图左使用0.15s的错落动效，图右为整体运动
3.4 连续性
为了展现界面/操作的连续性，保证视觉的连贯性，不仅要考虑到之前提到的速度、变换方式和顺序，恰当的使用共享变换（shared transformation）也是极为重要的。
共享变换，即对于两个相互交替的元素进行动效设计的时候，通过共享视图实现的过渡变换。
常见的例子有：burger->close的转换，主页内容小图->内容页大图，icon变换等。这也是Principle，XD等软件的基本动效逻辑。
保证连续性的另一个重要标准就是要尽量保证元素的运动方向是一致的，例如传出元素向左淡出，传入元素从右淡入。
3.5 对比
所谓对比，要注意的是动效之间的层级关系。
目的性强的动效有的时候有一个主要元素（焦点元素），其他都属于次要元素。拥有这种对比关系之后，根据焦点元素的变换，用户就可以明确推想出动效的目的性。
为了体现焦点，通常使焦点元素的动效结束在其他动效之后，体现一种视觉延伸性。而错落元素必须按照顺序出现且间隔时差必须很短才能使焦点不便偏移。
图左为整体运动，图中使用0.2s时间差，图右使用0.4s时间差
如图中，动效的目的是突出打开添加按钮后的3个选项。我们可以使用错落的方式，以0.15-0.25s的微弱时间差来突出选项，而0.3s以上的时间差过长，视觉的连续性也消失了。
最后呢，我们需要减少动效元素数量来突出焦点元素，可以将同类型元素编组，用组的运动替代元素运动。
经常出现的动效冲突就是当我们有一个焦点元素和一个container（容器）的时候，容器和其中的焦点元素一起运动，有时候运动方向和持续时间把握不当就会造成动效冲突。在这种情况下可以直接放弃使用某些共享元素动效。
例如下图容器中的图片向右和左分别扩展，而容器中心向外扩展。
图左图片和容器扩展方向不一致，图右使用悬停方式
图右利用悬停的感觉比共享元素变换更能突出界面主体，也不会过分分散用户的注意力。
3.6 一致性
相同类别的动效之间要保证一致性。Invision、Zeplin等软件都可以智能或手动生成DS（Design System），而把将项目的动效标准列入Design System中也是未来的发展趋势之一，DS将不仅限于普通的颜色，字体，asset等。
其他决定动效质量的标准还有出现场合、频率等。过高频率的复杂动画也会影响用户的浏览体验。
4 软件测评
目前微交互功能比较强大的有Principle, Invision studio, XD, Flinto, framer.js, Anima plugin sketch, Marvel, Axure 等，本文主要对前四个使用比较常用的软件做一个简单对比，对framer也会做一个简短的介绍。
这些软件的动效逻辑基本相同，都是对于界面中发生变化的元素（或同名元素）进行自动动效处理，而这种自动处理的流畅和多样化程度差别还是很大的—— 可以说是各有千秋，也有各自的弊端。
下边呢，就根据设计和动效两个层面简单介绍一下。
4.1 Principle
4.1.1 设计界面
Principle的设计界面并没有什么优势，通常是将Sketch/Figma文件直接导入。
Principle没有钢笔工具，也不支持渐变。想要做出渐变效果需要通过蒙版(clip sublayers)来实现。
4.1.2 动效
Principle很大的优势就在于它可以实现symbol/component动效，这就可以节省很多给相同元素制作动效的时间。同时，也不用复制粘贴每一个图层去完成两个界面之间的链接。
Principle的时间轴不仅可以对于每一个元素进行动效方式、时间等的调整，还可以分别设置center X, center Y, rotate, opacity, radius, scale等细节变量，这大大增加了动效的丰富程度。
Principle Timeline 和细节动效设置
Principle并不支持路径动效和3D变换。但是通过一些简单的图层组合，利用Scroll+Drivers，也可以展现类似路径变换甚至3D转换的效果：
Principle Drivers + Scroll
利用Principle的Scroll工具制作的3D和人物动效
4.2 Invision Studio
4.2.1 设计界面
在设计功能的完善程度和强大程度而言，Invision Studio绝对秒杀其他所有软件，可以完全还原sketch的各个图层、路径。复制sketch的任何图层，粘贴到Studio里都是完美保留的。
在Invision Studio中做界面设计，甚至简单的插画都是没有问题的。
4.2.2 动效
Studio目前免费，支持Windows+Mac，暂不支持路径动效，也不支持symbol/component动效，只能建立界面之间的链接。
Invision Studio是支持reponsive design的，可以将元素编组设置为container，加上设置margin等等，可以实现适屏的动效。
Invision Studio中的Responsive
Studio目前运行消耗的CPU是相对较大的，实时性不是很好，也有一些bug，例如建立界面链接之后再修改界面元素，有时候无法实时显示应有的动效效果，必须重新建立界面链接。
4.3 XD
4.3.1 设计界面
继承了Adobe的操作基础，XD的设计界面也非常干净。但蒙版功能和钢笔功能暂时还达不到做出复杂界面和插画的水平。
4.3.2 动效
在去年加入了auto-animation之后的XD也可以说是如虎添翼了。界面设计和动效设计集中在一个软件中，大大方便了制作动效时对于界面的修改，也方便了界面文件和动效文件的同步。
因为没有时间轴，所以无法分别调整每个元素的动画和延迟时间，想做出非常流畅有错落效果的动画有一些困难。例如下图的果汁动效，没有错落效果还是略显生硬。
使用XD的auto animation制作的果汁动效
XD现阶段很大的优势就是支持路径动效，最近一直很流行的就是如下图所示的XD液体动效。
使用XD的auto animation制作的液体动效
4.4 Flinto
4.4.1 设计界面
Flinto的设计界面并没有什么特别之处，支持钢笔工具，暂无渐变。通常也是将sketch文件导入再进行动效设计。
4.4.2 动效
Flinto也是以auto-animation为基础，和其他软件不同的是，制作两个界面之间动效的时候，它有一个transition design的界面，可以把所有动效元素集中在同一界面中，相同元素（持久性或静态元素）可以使用connect layer合并，传入和传出元素可以通过设置start状态、end状态、behavior、timing等来实现auto animation.
其中的behavior design，类似于component动效，可以对任一元素设置不同的state，这对于hover、button、cursor blink等元素动效是非常实用的。
使用Flinto的behavior designer制作的简单动效
下面这个动效就是利用scroll，clip（蒙版）和behavior design来实现的仿Airbnb Menu效果。
利用Flinto的scroll功能实现的仿Airbnb动效
Flinto的behavior designer
4.5 Framer.js
Framer结合简单的设计界面，可以在design和code之间自由切换。Framer的社区目前还没有sketch发展的那么壮大，想要写出一些基本的动效也需要花不少时间去学习。而Framer做出的产品不再是静态的prototype，可以和用户直接交互，填写表格等等都通过代码实现动态化的原型。
对于设计师来说，熟悉动效的编程原理也有利于我们做出更加适宜开发的交互。开发者可以直接使用CoffeeScript库，直接提取设计师在Framer中使用的的动效代码来进行开发，这使得设计师的工作范围一直延伸到开发阶段，更好地控制界面的最终成效。
其实掌握了基本的规范和技巧之后，做微交互还是要多看，多尝试，多思考。
细节决定一切！
也写了英文版：https://uxdesign.cc/adding-value-to-your-design-by-understanding-motion-and-its-tools-c06418e43a1b
大家有时间可以去看看，翻译的过程中加入了新的idea.
参考文献：
https://uxplanet.org/animation-that-matters-adding-value-to-your-interface-65496fe4c182
https://medium.com/sketch-app-sources/7-essential-prototyping-tools-to-use-with-sketch-c7a594f486a0
https://developer.apple.com/design
https://www.youtube.com/channel/UCKQ7xHm52MlA8MSxjVj-Nwg
微信：YF设计
5
作品
178
粉丝
17
关注
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册