动效设计

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

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

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

一、符合预期

此处的期待咱们能够理解为用户的心理模型，即用户对于产品表现的广泛认知。动效做为界面的重要元素，应当起到减小实际表现和用户心理模型之间差距的做用，即经过符合“用户对物理世界运动规律的广泛认知”，来增长产品的可用性。 能够感觉一下，下图的缓动动效明显不符合咱们平常熟知的天然运动规律，在没有外力介入的状况下，组件忽然加速，这样不只不能增长可用性，甚至会损害体验，让用户疑惑、分心。

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

二、体验连续

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

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

三、辅助叙事

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

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

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

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

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

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

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

2、提升动效设计功力的实用技巧

一、挤压和拉伸

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

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

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

二、预期动做

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

△ 悬停的交互一般会暗示这个按钮是能够点的

在有水平滚动界面里，一般在交互时会显示下一个元素的部份内容。这实际上是一个很好的例子，由于它是在告知用户下一步的一些信息。

三、时间节奏

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

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

四、渐快与渐慢

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

△ 左侧的卡片是没有缓动的，右侧的是带有缓动的，看起来会天然不少。 给 UI 中的元素加上缓动会让它看起来更加天然，缓动和节奏感都是能够有效的提高动画的品质。

五、呈现方式

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

好比如今有一个基于兴趣的音乐APP，对这个应用来讲，最重要的事就是让动画引导用户选择他们所喜欢的音乐。所以，有必要将相似的操做与其余元素分开编排，有目的的引导用户。

六、弧形轨迹

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

△ 经过对比，可以发现右侧的弧线运动轨迹会比左侧的直线运动轨迹显得更加天然。

七、附属动做

在动画中，次要动做可以起到烘托主要动做，好比动画中的角色在走路时，头部的晃动就是次要动做，却可以让角色行走显得更加天然。 在界面中，次要操做可以起到强化关键动做，当元素须要向用户提供反馈时，这个方法很是管用。全部的微交互都是基于这个附属动做原理。

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

八、夸张和吸引力

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

△ FAB夸张的交互形式

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

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

九、跟随动做和重叠动做

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

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

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

十、颜色，音效还有震动

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

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

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

3、动效设计思路

01. 属性转换法

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

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

02. 路径重组法

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

03. 点线面降级法

这是一个至关有用的思路。 面和面进行转换的时候，能够用线做为介质，一个面先转换成一根线，再经过这根线转换成另外一个面。同理，线和线转换时，能够用点做为介质，一根线先转换成一个点，再经过这个点转换成另外一根线。 这么说有点抽象，咱们来看几个例子。

04. 遮罩法

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

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

05. 分裂融合法

打个贴切的比方，就是把一把剑融成铁水以后，铸成一把新刀。 分裂融合法尤为适用于其中一个图标是一个总体，另外一个图标由多个分离的部分组成的状况。由分裂融合法作出来的动效也至关有趣。

06. 图标特性法

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

4、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，粗略的给你们介绍了一下，若是想学习动效设计，在具体了解这些软件的状况下，选择其中一个适合本身的就好。