动效设计

一、好的动效如何让你的设计事半功倍？

好的动效，不应当仅仅是外表光鲜的童话，合理地支持可用性，才是它的内核。 一个合格的动效动效应当在以下四个方面起到对可用性的支持，分别是：

接下来，就让我们结合具体示例，看看它们是如何进行实际应用的。

1、符合预期

此处的期待我们可以理解为用户的心理模型，即用户对于产品表现的普遍认知。动效作为界面的重要元素，应当起到减少实际表现和用户心理模型之间差距的作用，即通过符合“用户对物理世界运动规律的普遍认知”，来增加产品的可用性。 可以感受一下，下图的缓动动效明显不符合我们日常熟知的自然运动规律，在没有外力介入的情况下，组件突然加速，这样不仅不能增加可用性，甚至会损害体验，让用户疑惑、分心。

对比之下，天猫小黑盒的页面动效就很好地配合了品牌本身“盒”的概念，在下拉、转动的动作中都参照了盒子的运动样式，符合用户对其品牌的期待的同时，还可以加深品牌印象：

2、体验连续

这里的连续性包含两个方面的内容： 一是使用流程的“连续性”； 二是将多个场景连接在一起，构成整个体验场景的“一致性”。 使用流程的连续性，即用户的体验流程是完整的，不是被突然打断的。一个常见的例子就是瀑布流，利用动效，可以让用户在等待加载的过程中依然处于“连续”的体验感受中，而不是戛然而止，同时也可以帮助用户产生心流体验。 下图Medium的文章瀑布流加载效果就很好地增强了这一点。在下拉的loading后，文章以渐现的效果出现，相比之下，知乎日报的效果就要生硬很多，每次加载都有一种生硬的截断感。

体验场景的一致性，则是指在整体的体验流程中，保持整体逻辑和设计语言的一致。我们会遇到很多不同场景的切换，例如网购时从登录账号到搜索商品、浏览结果等等。这些细分场景本身应当拥有一致的设计语言，在使用动效连接场景的时候，也应当和前后设计语言保持一致。 如下图，在名画推荐软件“Daily Art”中，滑动当日推荐画作的卡片时，卡片会产生了形状大小上的变化，随即从图片场景转换到了文字场景；在从文字场景回归到图片场景时，依然延续了先前的变化逻辑，卡片从全屏幕缩小回原本的大小：

3、辅助叙事

用户使用产品的过程，可以类比为与产品的设计对话的过程。在这个过程中，动效就像是设计语言中运用的修辞手法，将语言中的元素链接成一个更加完整的体验故事，例如可以使用隐喻引导用户进行操作。 京东“早点上新”频道首页中轮播的盘子，就隐喻了用户可以对该部分进行滑动操作：

在叙事层面上，动效还可以帮助进行对界面元素性质的辅助阐述，例如下图，进入京东App的“签到”处时，我们可以看到京豆的数字变化上升的动态效果，体现了它的可增加性：

除了功能上的辅助叙事，动效还可以帮助传递产品的性格和情感，和用户构建起更为紧密的联系。例如时间管理软件Forest，在进入圣诞月后便在页面中加入了雪花飘落的效果，以烘托冬季的气氛，也增加了用户“种树”的实感，十分符合其小而精致的文艺调性：

需要注意的是，就像日常对话中，我们使用修辞（例如类比）是为了让他人更好地理解自己的意思，连篇累牍的华丽辞藻只会让听者一脸懵圈。动效设计也是如此，不要让它的锋芒盖住了设计本身想传达的内容。

这张图中，icon和文字作为信息上的共同体，应当成组出现。图中的效果将文字与icon各自拆分设计了独立的动作，对其本身应当起到的叙事作用造成了干扰。 4、合理关联 动效于界面设计而言，带来的核心价值之一，就是拓展了屏幕展示空间的维度，设计师可以利用动效来进行更加丰富的层次设计。但需要注意的是，当界面包含的维度增加时，不同元素之间互相映射的关系也会变得更加复杂。 当我们设计动效时，每个运动的界面元素之间、多个界面元素构成的组件之间所涉及的空间、时间和层次变化都应当具有合理的关联性，以此来清晰地告诉用户“这是什么”、“它是怎么出现的”、“我可以利用它去到哪里”，从而使用产品达成决策。 在关联性中，最为常见的动效之一即表现父子关系（Parenting）的动效：

下图就是一个使用了父子关系的动效例子，在滑动按钮的同时，气泡处的表情也会随之变化，从中我们既可以理解二者是从属关系，一个元素会随着另一个元素的变化而变化。

一个好的动效是如何帮助产品提高可用性，优化使用体验的。在日常的设计中，我们也需要反复提醒自己，检查自己设计的动效是否能在以上四个方面辅助提高产品的可用性，从而利用设计语言将产品内容更加清晰地传达给用户。

二、提高动效设计功力的实用技巧

1、挤压和拉伸

在动画中，挤压和拉伸代表了物体的重力，质量，重量和灵活性。举例来说，当一个弹球在它撞击地面时会发生形态变化，就是挤压和拉伸。 在界面中，挤压和拉伸很容易就联想到按钮。当一个按钮被按下时，就可以理解为受到了挤压，通过控制按钮的挤压和拉伸，我们可以很轻易地做好一个按钮的交互动画。除了按钮之外，这种原则也可以应用于 UI 中的任何交互元素上。

△ 按钮在交互时的挤压和拉伸

△ 挤压和拉伸被应用于侧边栏

2、预期动作

让观众能预先知道接下来将会发生什么，它是先于下一步会发生的动作。举例来说，迪士尼动画里经常有从高空往下跳跃时会先弯曲膝盖再跳，正在跑步的人要停止跑步前会逐渐变慢步伐等等。 在界面中，悬停状态就是很好的例子。当我们把鼠标悬停在元素上时，元素会提供反馈，表明它是可以点击的，并且在点击时，又会有一些别的反馈。

△ 悬停的交互通常会暗示这个按钮是可以点的

在有水平滚动界面里，通常在交互时会显示下一个元素的部分内容。这其实是一个很好的例子，因为它是在告知用户下一步的一些信息。

3、时间节奏

在传统动画中，时间会决定关键帧的绘制方式。帧数越多，动画就越流畅，同时也更慢，时间能够给动画赋予情绪和性格。 时间的节奏感是任何动画的基础，速度在元素编排中起着非常重要的作用。速度太慢，用户会不耐烦；速度太快，用户又会错过一些内容。一般来说，大多数 UI动画在200-600ms之间，其中悬停和反馈交互时长大约为300ms，精细的转场动画大约在500ms。可以去参考谷歌的动画规范（material.io/design/moti… 一些设计系统，如 Carbon（www.carbondesignsystem.com/guidelines/… Lightning（www.lightningdesignsystem.com/guidelines/…

△ 右边的过渡动画显得太过于漫长，繁琐。

4、渐快与渐慢

在现实世界中，大多数物体都遵循着缓动运动规律。也就是说，物体的运动并不会瞬间开始或瞬间结束，就像一个物体自由落体，也是一开始很慢后面才会变快。

△ 左侧的卡片是没有缓动的，右侧的是带有缓动的，看起来会自然很多。 给 UI 中的元素加上缓动会让它看起来更加自然，缓动和节奏感都是可以有效的提升动画的品质。

5、呈现方式

舞台中的表演需要合适的编排才会精彩。也就是说，对象在场景中如何摆放，每个动画又如何出现，关乎演出的质量。通过这种编排，能够将注意力引向最重要的角色。 在界面中，呈现方式能够决定元素的位置，以及在交互时，它应该如何编排才能将用户的注意力引向预期的元素。

比如现在有一个基于兴趣的音乐APP，对这个应用来说，最重要的事就是让动画引导用户选择他们所喜欢的音乐。因此，有必要将类似的操作与其他元素分开编排，有目的的引导用户。

6、弧形轨迹

一个从高处抛出的小球，运动轨迹会做抛物线轨迹运动，弧线能使物体的运动更加自然。 在界面中，沿着对角线的元素沿着弧线轨迹将会使运动变得更加自然。当需要凸显出元素的运动路径时，多尝试使用弧线轨迹。

△ 通过对比，能够发现右侧的弧线运动轨迹会比左侧的直线运动轨迹显得更加自然。

7、附属动作

在动画中，次要动作能够起到烘托主要动作，比如动画中的角色在走路时，头部的晃动就是次要动作，却能够让角色行走显得更加自然。 在界面中，次要操作能够起到强化关键动作，当元素需要向用户提供反馈时，这个方法非常管用。所有的微交互都是基于这个附属动作原理。

△ 按钮边上的粒子效果强化了主按钮的点击效果

8、夸张和吸引力

场景中的重要角色通常会采用一些比较夸张的动作来获得更多的注意力。 在界面中，重要的交互也会通过一些夸张的动画来引起用户的注意。谷歌设计规范中的 FAB按钮就是一个很好的例子，FAB按钮在不动的时候也比较能引起注意，因为它通常会带有比较鲜明的颜色，并且是独立悬浮在界面元素之上的。当它被点击时，FAB的动画被放大，把整个界面都占满，使得它完全占据用户的注意力。

△ FAB夸张的交互形式

△ 对于支付这么重要功能的按钮，通过夸张的动效引起用户的注意

△ 表单输入的用户体验加入动效就有很大的提升空间。比如你可以在用户输入完成或者输入正确之后，给用户一个点头的动效，在输入错误之后左右晃动提供“摇头拒绝”的动效，人性化地传递信息，用户也是很容易理解的。

9、跟随动作和重叠动作

想象一只兔子从高处跳下来，当兔子开始起跳时，它的耳朵动作会与身体动作发生错位。然后当它着陆时，它的身体停下来了，但是耳朵还在动。前者称之为跟随动作，后者被称为重叠动作。其原理说的就是：没有任何一种物体会突然停止，物体的运动是一个部分接着另一个部分的。 在界面中，可以使元素在停止之前超过它们原本的位置，使得元素运动更加自然。就是我们常说的回弹效果。

△ 界面有一定的回弹，会显得更加自然。

△ 当界面滚动时，文字会跟随图片的运动，图片与文字以不同的速度运动会更加自然。像是被拖着走的那种感觉

10、颜色，音效还有震动

动效不只是视觉上的，因为动效其实就是机器跟用户的沟通方式。 另外一点就是「小输入，大输出」。想想在苹果手机上浏览网页，只要轻轻在网页往上一划，就会滑出很长一段距离。在设置日期，调整时间的时候，手机的震动以及音效使得交互变得更加真实。 iOS在设定日期时间的时候，来自手机的音效和震动效果增加了这个交互的真实感。

△ 在谷歌Pixel 上面，用户可以通过挤手机来激活谷歌智能助手，这不但使得交互变得方便，也一定程度上增加了互动的趣味，甚至让机器「活」了起来。所以交互不是一定要都要在屏幕上发生。

界面中的每一次交互都必须在适当的场景中精心设计，让整个体验更具沉浸感。在正确的地方使用这些原则能够确保产品中的交互体验更加协调自然。

三、动效设计思路

01. 属性转换法

这是最为普遍也最为简单的一种icon切换思路。 属性包含了位置、大小、旋转、透明度、颜色等，在这些属性上面做动效，若运用恰当，可以做出令人眼前一亮的动效。

现在绝大多数icon动效都离不开属性变化，运动恰当，这个简单而强大的方法大有可为之处。

02. 路径重组法

这可能是看惯了属性变换的动效之后，又一个让人眼前一亮的动效思路。 将icon的路径（笔画）进行重组，构成一个新的icon，这期间考验着更多的东西，比如观察两个icon笔画之间的关系，这个思路最近相当流行，同时也具有挑战性。

03. 点线面降级法

这是一个相当有用的思路。 面和面进行转换的时候，可以用线作为介质，一个面先转换成一根线，再通过这根线转换成另一个面。同理，线和线转换时，可以用点作为介质，一根线先转换成一个点，再通过这个点转换成另一根线。 这么说有点抽象，我们来看几个例子。

04. 遮罩法

两个图形之间相互转换时，可以用其中一个图形作为另一个图形的遮罩，也就是边界，当这个图形放大的时候，因为另一个图形作为边界的缘故，转换成了另一个图形的形状。 思路很简单，却又一点局限性，两个图形必须是包含关系。

在谷歌的Material design规范中也出现类似的动效。

05. 分裂融合法

打个贴切的比方，就是把一把剑融成铁水之后，铸成一把新刀。 分裂融合法尤其适用于其中一个图标是一个整体，另一个图标由多个分离的部分组成的情况。由分裂融合法做出来的动效也相当有趣。

06. 图标特性法

以上的五种思路只是停留在如何让icon动效有趣的层面上，那么如何让icon动效不仅有趣而且有意义呢？这就需要考虑不同icon之间的特性来设计动效。 图标特性法，顾名思义就是利用图标表达的实际意义，做出与之吻合的动效，需要很强的思维发散性。

四、14款UI动效设计软件

目前行业里的UI动效软件确实挺多的，但是99%的都只支持Mac，只有1%支持windows，没有Mac确实是一个硬伤，建议学好一个，够用就好。学多而不精其实就是浪费时间！

1. Adobe After Effects

系统支持：Windows、Mac

AE这个软件我想大家都该知道，火得一塌糊涂，如果U妹没猜错的话，它目前属于设计师学动效的首选。

它的特点就是强大且牛逼。基本上要的功能都有，UI动效制作其实只是用到了这个软件很小的一部分功能而已，要知道很多美国大片都是通过它来进行后期合成制作的， 配合PS和AI等自家软件，更是得心应手，Dribbble 、Behance上很多的大神都是用这个软件在show。

但是有些效果工程师不见得能够帮你实现出来， 因为实际的项目产品受太多的制约。

2. Adobe Photoshop

系统支持：Windows Mac

可能很多人都认为PS 只用来作图和处理图像的，并不知道PS 可以做gif，然而当AE没有火起来的时候，我们这些老UI 设计师们都是用PS 做Gif，用Flash 做Demo（过去我们只需要做PC桌面的动效）。PS从CS 6之后开始进一步加强了动效的模块，现在的版本能够实现很多相对复杂的动效。

3. Adobe Flash

系统支持：Windows Mac

Flash可以说是过去的王者，也是由于时代的发展原因，现在基本被淘汰了，这里不多做解释，具体可以百度。 而Adobe开发出取代Flash的软件叫做：Adobe Animate CC ，是Adobe为了适应h5和css3设计的趋势，在flash的基础上添加了h5动画的新功能和新属性，是flash的升级版。

4. Pixate

系统支持：Windows、Mac

这个软件被大牛Google 收购了，然而它Google收购一年后：Pixate Studio宣布却于10月31号被停止更新了（真是windows用户的一大损失）。简单说下它的优缺点： Pixate是图层类交互原型软件。优点：可交互，共享性强，和Sketch结合相对高，同时对Google Material Design的支持比较好，有许多MD相关预设。Pixate的缺点是没有时间线，层级管理不是很明确，图层一多就会非常的繁杂。

5. Origami

系统支持：Mac

交互动画原型设计工具 Facebook出品，必属精品。 自Origami Studio出世以来，就广受交互设计师青睐。这正是在于Origami Studio采用的Facebook的开源项目组件。 类似可视化编程的模式展示，所有操作几乎只需要拖动连接即可，极大提高了工作的效率，操作起来也十分方便快速，因此也被设计师成为“动效神器”。 要是没点代码知识做压惊，建议远处观望就好。

6. Hype 3

系统支持：Mac

Hype 3也算是火了一小段时间的，号称无代码动效神器，像AE一样使用时间轴就做可互动的动画。PC、手机、Pad端都可以直接访问（以web的形式），也可以导出视频或者GIF。3.0版还有物理特性和弹性曲线，可以发挥更强大的动画效果。对中国人来讲，它原生支持中文这一点也非常棒！配合sketch效果也是杠杠的。

7. Flinto

系统支持：Mac

界面跟Sketch很像，如果会用sketch那么上手很快。能够快速实现各种滚动、转场、点击反馈效果。手机和电脑端的预览都非常的流畅。貌似现在用的人不少，下图是demo：

8.Principle

系统支持：Mac

这个软件的和上面的flinto有点类似，界面和sketch类似，同时配合sketch也是非常方便。它主要是做2个页面间过渡专场特效，元素切换，细节动效的工具。优点很明显，效率高，质感好，缺点就是不能做整套原型。

9.CINEMA 4D

系统支持：Windows Mac

C4D 教程： 纯干货：C4D完全自学宝典

10. keynote

系统支持：Mac

keynote相当于windows的powerpoint，是个幻灯片软件。但是！或许你并不知道，据说苹果的交互设计师都是用keynote做交互演示的。只要能够熟练掌握这个软件，目前App里的绝大多数动效都是可以做出来的，但是相对复杂一点的动效实现起来就有点不够。 用它做个简单demo给程序员看的。快捷方便，要知道时间就是金钱！

相对主流的动效制作软件就是上面这些

11. proto.io

系统支持：Mac

Proto.io是一个专用的手机原型开发平台——可以构建和部署全交互式的移动程序的原型，并且可以模拟出相似的成品。它可以运行在大多数的浏览器中，并提供了3个重要的接口：dashboard、编辑器以及播放器。 dashboard可以用来管理项目。编辑器是构建原型的环境，由一组设计和开发原型的工具组成，另外还可以构建交互。播放器用来观看原型，并与原型进行交互，并提供了相关工具来标注和保留反馈信息。你可以直接在真实的移动设备上对原型进行测试。并且可以使用iOS或Android上的浏览器以全屏模式运行原型。

12. Atomic.io

系统支持：Mac

无论是在简单的交互上，或是贯穿在整个产品的研发中，Atomic 都可以帮助你快速创建切实的原型。

13. Framer

系统支持：Mac

Framer是一个设计可交互动效的软件，可快速导入Photoshop、Sketch中的图像并模拟图层分层，支持手势，可在手机或平板中预览。 Framer是一个开源项目，一个基于JavaScript的原型工具，专为设计师打造。现在的应用更注重交互设计，它可以让你效率更高。

14. protopie——windows用户设计师的福利

系统支持：Windows Mac

Protopie（菠萝头派）是一款交互原型设计工具，支持Mac和windows双平台（我们都知道99%的动效设计软件都只支持Mac，windows平台目前只有2款，pixate和protopie无疑是win用户设计师的福利，但pixate被谷歌收购后2-3年再也没更新了），与principle、orgami、AE等相比，它更加轻量级，集成的功能更吸引人，可以调用iphone系统的陀螺仪、麦克风、罗盘、3D Touch， 多种智能传感器等等，这绝对是windows用户设计师的福利。

官方网站 里面已经提供简单的介绍和教程，在这里不进行赘述，在之后更新的文章中会通过我自己的使用和体验对其中的各个小功能进行尝试和介绍。 对于UI/UE设计师来说： 在 ProtoPie 上使用时不需要编写代码，通过后者可视化的设计即可完成相应功能的增减。比如，在一款软件设计时，设计师无需记住具体的数据, 通过时间轴拖动相应版块就能完成操作。在完成软件设计后，设计师可以将其导出到 ProtoPie 的应用中供开发者直接查看。 对于移动开发者和APP产品经理来说： 可以直接在“设计师版”的应用中看到设计师的功能设计、交互逻辑等，还会获得一份由 ProtoPie 提供的具体参数数据，并按照这份数据进行开发。如此一来不仅减少了设计师和开发者的沟通成本，也为设计师探索新的交互设计提供了平台。

总结：UI动效的优势

1. 展示产品功能 动效设计可以展示产品的功能、界面、交互操作等细节，让用户更直观的了解一款产品的核心特征、用途、使用方法等细节。

2. 更有利于品牌建设 比较恰当的例子如最近优酷更新了Logo：

3. 利于展示交互原型（设计细节） 很多时候设计不能光靠嘴去解释你的想法，静态的设计图设计出来后也不见得能让观者一目了然。因为很多时候交互形式和一些动效真的很难用嘴来形容，所以才会有高保真Demo，这样就节约了很多沟通成本。

4. 增加亲和力和趣味性 有时候加个动效，能立马拉进与观者的距离，要是再加些趣味性在里面，用”爱不释手“这词也毫不夸张。
   以上这些都是做交互动效原型的工具：AE，Principle、Keynote，Flash（已经退出了历史舞台），Hype3，Flinto，Proto.io，Pixate，Origami，Framer，protopie，Atomic.io，粗略的给大家介绍了一下，如果想学习动效设计，在具体了解这些软件的情况下，选择其中一个适合自己的就好。

转载于:https://juejin.im/post/5c77c57ff265da2dbb124483