动效是互联网产品设计中绕不开的一个话题，无论PC端还是移动端，产品要想提供细腻顺滑的体验，很大程度上需要依靠动效将不同界面、同一界面中的不同状态衔接起来，让用户直观地感知操作结果的可控性。
虽然在细分了交互和视觉岗位的情况下，通常会让视觉设计师承担动效制作的工作。但个人一直认为，动效一定是交互设计需要考虑的范畴，即使有人承担了这部分的具体执行，也要保证自己在动效方面具有足够的专业性。
近些年，在「万能的」AE之外，InVision、Flinto、Principle、Marvel、Protopie、Kite等大量专门为UX行业打造的轻量级原型工具的出现，也让动效工具和原型设计工具之间的界线变得模糊。
一些优秀的原型设计工具，可以很好地同时覆盖可交互原型设计和动效设计这两个重要的应用场景。其中，我个人习惯使用的两款工具主要是Principle和Flinto，配合万能的AE，个人认为可以覆盖绝大多数的应用场景。
在交互设计（分为产品流程设计和具体界面设计）、视觉交付等项目不同阶段，面对不同场景，能针对性地选用合适的工具，是提高方案表达效果和个人设计效率的重要一环。本文将根据项目中的不同设计阶段，介绍这3款工具的特点、分别适合哪个设计阶段，以及实际应用过程中的一些个人经验。
这篇文章不是教程也不是测评，因此不会涉及技法教学，也不会探讨是否有更好的工具选择。
虽然新工具层出不穷，但个人觉得同质化越发严重，核心features重叠性非常大，孰优孰劣只是熟练度和个人偏好问题。并且，每个工具都有不低的学习成本，精通自己喜欢的几个工具就好。
毕竟，工具只是用来解决问题的，掌握工具的数量和设计能力完全是两回事。
阶段1：产品级交互设计阶段
输出物：可交互的流程原型
推荐工具：Flinto
严格来说，流程原型不属于狭义的动效，只是产品界面和功能点的简单串联，但工具层面还是有共性的，所以也放在这篇文章里一起讲讲。
这里的「产品级」并不一定是指整个应用。
根据业务规模、迭代范围的细分粒度不同，一个链路模块，甚至一个营销活动玩法，都可能作为一个相对独立的产品线，进行版本迭代或者从零到一的设计。
对流程具有一定复杂度的产品而言，在提案、评审这些需要快速碰撞思路的阶段，传统用流程箭头标注的交互稿其实并不实用。
即使经过了很好的流程分解，对设计师而言改动返工量依然巨大，对老板而言又没时间仔细阅读你精心撰写的交互说明。
这时，迅速通过轻量级的动效工具产出可交互原型，可以帮助设计师在提案、评审过程中，让团队成员和老板更好地对方案的实际效果有一个更直观的体验。
在这个阶段，对制作旨在串联流程的可交互原型而言，个人心目中最适合的工具当属Flinto。
先简单讲一下Flinto 和Principle 的共性和差异。
两款工具同为UX行业专属的原型/动效设计软件，比AE更轻量级、更聚焦在行业高频功能上，同时都能快速输出MOV、GIF，以及在移动端上进行实际的交互体验。
两款工具有很多共通之处，底层思路都是定义元素的属性变化。但实现逻辑上却有比较大的不同：
- Flinto：每个Artboard是一个界面，在元素上定义可以叠加的事件，在事件内定义不同State的切换。
- Principle：每个Artboard只是一个界面的一个具体State，直接在画板上定义不同State的切换中元素的变化。
实际使用时，抛开更本质的差异不谈，最直观的差别就是：同样1张界面的设计稿，在Flinto里对应1个Artboard，而在Principle里会对应N个Artboard（且会直接把切换逻辑用箭头的形式标在不同Artboard头顶）。
这点上的不同，决定了Flinto优势在于产品级复杂流程的表达，而Principle更擅长单个界面（或很短的流程）的交互细节表达，处理多界面流程时会让工作区域变得乱七八糟，甚至几个小时过后再看连自己都看不懂了。
对流程串联而言，Flinto是我用过的工具中最快的（有更快的欢迎推荐给我）。
以基于地铁查询工具的心情分享平台「一站」的主流程串联为例（鉴于工作中的案例不便讨论，专门为设计交流做的一个概念方案）：
流程原型对应的Flinto源文件如下：
在Sketch中设计稿准备妥当的情况下，下面这个原型只需要20多分钟就能做好——这还是在实现了层级分离和滚动效果的情况下。如果只是快速输出静态页面的串联，时间可以再缩减一半以上。
在制作流程Demo时，只需要表达基本的页面结构与跳转关系即可。转场无需表达得很准确，以不引起误解为原则即可，时间有限的情况下，最简单的处理方式就是统一用渐隐渐现。
各种与页面滚动位置有关的动效也暂时不用表达。同样，也完全没有必要让每个元素都可点击（当然核心交互还是要做的），更没必要在这个阶段考虑非常完整的用例。
明明在交互稿上可以用交互说明一两句话就可以说清楚的事情，完全没必要费尽周折做在流程原型上，万一做好后逻辑又改了呢？
提到这里，忽然想起前两年交流Axure制作高保真原型时，有的朋友执着于在原型中用中继器把各种变量逻辑表达得非常准确。个人觉得，除非改版就是针对这些细节所做的，否则必要性不是很大。
交互稿和可交互原型是一对相辅相成的存在，很难用一方完全替代另一方。就像买家电的时候，原型相当于在商场观看宣传短片，直观感受流程逻辑和大体布局；交互稿和交互说明相当于说明书，细化各种用例状态。
编者注：不会使用Flinto的朋友看看这篇教程，能让你30秒出交互原型，5分钟搞定交互动画→《Sketch绝佳搭配！30秒制作交互原型的次时代神器Flinto》
阶段2：界面级交互设计阶段
输出物：动效录屏/GIF
推荐工具：Principle
在产品流程和信息结构确定后，具体界面的交互设计阶段，就轮到对各个动效逐一进行细化。
应用中常见的动效可以大致分为交互动效和播放动效两个大类别：
- 交互动效：与用户交互行为相关的界面间的转场、界面内的组件反馈与层次暗示等动效都属于交互动效。
- 播放动效：纯自行播放、与操作元素无关的动效，如启动、入场、Loading、空态界面，多数是为了吸引用户注意力、情感化设计和创意需要。
关于动效的分类，这里不再展开，展开深究的话完全是另一个很大的话题了。
纯播放类的动效可以不在这个阶段细化，在视觉设计阶段再直接产出并交付。而交互动效的设计则是这个阶段必不可少的工作。
对不涉及位置联动的交互动效而言，在Flinto和Principle中的制作成本相差无几。例如下面这个纯粹由点击触发的事件：
但对于涉及位置联动的动效，Principle就比Flinto的表现优秀很多了。Principle中，时间轴和位置联动的设置比Flinto自由度更高，可以快速进行精细的设计和调整。例如下面这个站点列表界面的上滑动效：
上滑中，随着Y轴位置的变化，存在一系列的子动作：A.顶栏信息缩略；B.二级Tab吸顶；C.回顶按钮呼起；D.右侧快捷检索器的高亮切换。
同时，回顶按钮、快捷检索器又有相应的点击动作：E.点击回顶按钮，返回页面顶部；F.点击检索器字母，页面锚定至相应位置。
因此一共合计6个动作需要在动效中表达，并且同时包含了点击事件和滚动联动，这时候用Principle做起来就非常方便。不过这个例子并不是特别复杂，Flinto中大概同样也能找到办法实现，只是做起来会比Principle麻烦不少。
动效中，缓动曲线与时间的精调是一个比较考验经验的活——运动的元素是材质是刚性还是弹性、怎样的缓入缓出更自然、是否需要惯性和「助跑」、多个元素之间是否需要时间差等等，都可以参考迪士尼动画12原则仔细寻找最优解。
但在交互设计阶段，其实没有必要太过细致地考虑。缓动曲线暂时采用EaseOut（先快后慢）通常没有太大问题，可以在视觉设计阶段再精细调整；时间设置上符合大原则即可，单个属性的变化一般在0.5s内，单个交互行为触发反馈动效的总时长尽量控制在0.8s内。
另外，在制作动效时我们经常会顾虑「会不会动太快了」，这是因为我们在孤立地盯着单个动效看，对时间的感知并不能代表用户实际操作时的真实情况。
在真实用户的使用过程中，触发某个交互行为时，动效只是其体验路径中一个极其短暂的中间态，动效时长稍微偏长一点都会导致体验有拖泥带水的感觉。
这里再思考一个问题，流程原型中适不适合同时呈现完整的交互动效？
我的个人想法是，流程很短或者涉及到的交互动效很简单时，可以考虑将交互动效直接体现在流程Demo上，让流程Demo的呈现效果更接近最终的设计意图。
其中，交互动效复杂而流程简单（比如只涉及两三个界面的跳转