编辑导语：用户在使用一款产品时，都希望能有良好的使用体验。出色的动效，可以使页面之间联系更加紧密，整体体验更加流畅，减少用户的负面情绪；同时，也可以增加产品的趣味性与品牌特色，让用户产生兴趣并提高品牌认知度。接下来，本文作者就带我们去了解动效设计。
现如，今动效设计在产品中的使用已经十分普遍。
这也导致动效设计由早期的「魅力型因素」逐渐成为「必要型因素」，越来越多的公司和团队已经意识到动效在产品用户体验中的重要性，动效也逐渐成为UI设计师的基本能力之一。
动效设计，顾名思义即动态效果的设计，用户界面上所有运动的效果，也可以视其为界面设计与动态设计的结合。
而在Material design 设计规范中，将动效设计这一章命名为「Animation」，意思是动画，活泼的意思。好的动效设计可以帮助引导、取悦用户，减少等待焦虑，是拉近用户与产品之间距离的有效手段。
动效的分类并没有明确的界限，根据其作用大致可以分为3类：
此类动效一般用于产品设计，通过动态图形向用户传递信息，其中加载/刷新和进度条应该是我们平时接触最多也是最早的动效了，此类动效最开始只是为了告知用户产品的页面状态。
随着社会上产品数量的快速增长以及竞争日益激烈，产品的有趣和差异化显得愈发重要，于是便看到越来越多的产品将自己的品牌因素融入动效当中，设计也越来越生动有趣。
除了加载、刷新和进度外，功能型动效还被广泛的运用在产品的其他各种状态当中，如信息报错、二维码扫描等。虽然具体表现不同，但都是通过动态形式帮助用户理解和使用产品。
顾名思义，该类动效的核心是“交互”，其主要的作用是帮助用户理解界面的层级逻辑关系，让产品的使用更加符合现实生活中的认知习惯，从而降低使用成本，提升产品体验。
要注意的是此类动效不能脱离用户的认知模型，只是单纯的炫酷对于整个产品来说是有害的。
其实交互型动效是用户在产品使用中接触最多的一种动效，因为产品的使用是通过不同产品元素串联而完成的，而负责元素串联的就是交互型动效。
一般可分为「单页面交互动效」和「多页面交互动效」。
「单页面交互动效」：就是在当前页面发生的交互动画，比如tab切换、左滑删除、二级菜单展开、返回顶部等等。
「多页面交互动效」：就是不同页面之间的交互动画，其实就是页面的跳转，根据不同的场景会使用到不同的跳转样式，好的跳转动画能够帮助用户理解前后页面的逻辑关系。
此类动效的最大作用就是尽可能的为用户制造视觉上的愉悦，营造活动氛围，让用户觉得有趣生动，使用的场景也十分广泛，常见的如「品牌展示」、「运营活动」、「H5营销」等。
1）品牌展示
将有趣的动态图形与品牌相结合，让原本生硬的产品形象变得有趣生动，拉近用户与产品之间的距离。
2）运营活动
动效设计同样也可以使用在运营设计中，作为业务数据转化的重要入口，动效可以极大的吸引用户的注意力，从而提升业务数据。
H5营销
从2014年开始，H5因其丰富的表现形式便开始逐渐走红，每年都会有很多火遍全网的H5活动，如「网易云音乐听歌报告」、「支付宝集五福」、「支付宝年度账单」、「穿越故宫来看你」等等。
网易云音乐听歌报告
支付宝五福
支付宝年度账单
穿越故宫来看你
不同的产品有属于自己的产品调性，例如：
金融产品强调的是可靠理性，而手游类产品的重点则是炫酷有趣，二者的动效设计自然也需要贴合各自的属性，思路设计要符合提升的产品体验，要经过细致思考不能盲目跟风。
因为自然界中运动都不是线性的匀速运动，而是按照物理规律，呈现出的曲线的变速运动，这也是物体运动的基本常识和规律。
人们对于一个运动形式产生的情感反馈，大部分也来自于生活中看到的类似的运动形式。所以我们要符合物理规律，这样才能准确的专递我们动效设计的情感。当然可以适当根据需要夸张、精简。
我们还需要多看一些优秀的动效设计作为积累，同时也需要对优秀的动效设计进行深入思考，思考别人为什么这么设计，以及如何完成动画设计的。
要与自己对类似事物的想法进行对比，找差距，补不足，这是经验技巧积累的过程。同时要学会怎么去拆解别人复杂的动效设计，从中总结经验，最后通过合理的编排设计出自己的动效设计作品。
就是要保持对于设计行业，或者说是APP动效设计领域的关注。了解当下新的设计手法，设计趋势以及设计工具，不要做一个落伍者。
常见的动效文件格式有GIF、APNG/WEBP、序列帧/精灵图、Lottle、SVGA。
GIF 图格式应该是设计师接触过的最多的动态格式了， 因其体积小而成像相对清晰，其在各个平台的兼容性非常好，使得它的传播性非常强。
当然gif格式也存在很明显的缺陷：
对电脑的内存和性能占用非常大（根据 GIF 的时间尺寸的等情况会有不同的程度的影响），作为设计师常有的一个经验是在网页上多开几个 GIF 之后电脑风扇就开始飚起来了。它是一个有损的文件格式，不论是色彩还是画面质感都会有一定程度的压缩。对透明通道的支持非常有限，输出结果会非常差，时常会有锯齿或白边的情况。以上是我们在输出 GIF 格式的之前需要提前思考是否可以接受以上的问题。这些格式是基于现有的 JPEG、PNG、GIF 格式的所衍生出来的。
APNG 格式在目前主流的所有浏览器上都可以完美支持，在移动的设备上通过一些代码框架也可以完美支持，它相比 GIF 支持的色彩范围更广，更清晰，并且占用更低的内存，支持透明通道，有非常多的优势。
WEBP格式目前也基本兼容所有的主流浏览器，相同的效果，webp 格式要比 png 格式小出来大概一半的大小，同时它也兼容所有的安卓设备，像一些 ios 设备需要通过一定的方式才可以支持。
不过，相比来说各方面的表现都是非常优秀的。
1）序列帧
序列帧就是将动动效的所有画面拆分开来，形成一系列静态的png图片，然后通过前端代码来控制每张png图片出现的间隔时间，而且实现连贯的动画效果。
序列帧是一个无损且低内存的格式，但是它只能在客户端环境中使用，不建议在 Web 环境中使用。
原因是序列帧一般都是随着 App 程序包一起下载下来的，但是 Web 中每次进入一个新的网页都需要重新下载。
举个例子如果一个 60 帧的动画就得重复向服务器请求 60 次，在这种高频次的请求下很容易因为一个小的问题导致整个动画无法正常播放，为了避免这种错误我们一般会这个 60 张图合并为一个，并且通过代码在指定时间内显示某一个区块，所以这里我们引出另一种格式——精灵图/雪碧图。
2）精灵图（又叫雪碧图）
当我们把所有序列合并在一张图片上往往还是不够的，我们还需要提供给开发具体哪个时间显示哪一部分的具体参数。
我们可以直接通过 AE 插件 CSS Sprite Exporter(By Bigxixi) 直接快速的输出开发所需的代码和精灵图：
Lottie：
Lottie 可以说是近几年在动画输出方面不得不提的一个格式，它由 Airbnb 推出，并且迅速在国内外各种大小厂快速推广开来，目前已经是一个非常普遍常用的格式。它在 AE 中的插件叫 Bodymovin，它的原理是把各种矢量元素以及位图图层以及他们的效果关键节点打包行成一个 json 格式的文行。
开发人员拿到 Bodymovin 输出的 json 格式是无法直接使用的，它需要在代码中加入 Airbnb 提供的 Lottie 第三方库来读取播放，相当于 lottie 文件在我们各个端口设备上的播放器的作用。
ps：
由于lottie不支持ae表达式，可以用插件（Easy Bake）将表达式转为关键帧，这样问题就解决了；ae软件因为汉化的原因，会导致Bodymovin插件对其中的某些属性不支持，比如ae中如果存在颜色渐变，导出来的json文件所有的渐变会变为黑白渐变。解决的办法有两个：一个是使用英文版ae软件；第二个是将属性「渐变填充1」重命名改为「Gradient Fill1」（后面的数字需与汉化版的保持一致）。
SVGA：
针对 Lottie 对缓动曲线解析差带来的性能问题和稳定性问题，我们会有第二种备选方案是 SVGA，不管是导出之后的内存占用，还是在各个端的表现稳定性都会好很多。
但是它的内存占用会比 Lottie 稍高，并且支持的特性也会比 Lottie 少一些。
SVGA 与 Lottie 最本质的区别在于代码对动画过程记录的方式， Lottie基本上是按照我们在 ae 当中的关键帧及缓动的结合形式去记录动画；而 SVGA 则是通过记录我们每一个图层每一个时间上的动画状态，从而省去对缓动值的计算。
跟序列帧的逻辑非常相似，但是因为它的素材可以复用，所以会比序列帧占用更低的内存。
基于实现方式，它会比 Lottie 稳定很多，相应的，它所支持的特性也要比 Lottie 少很多。
动效制作的软件其实非常多，这里只介绍一些自己接触过的主流动效软件：
AE是时间轴动效软件，不支持交互操作，但几乎可以制作任何你想要的动画效果，但操作相对复杂时间成本较高。
Principle是可交互的动效软件，主要用于交互动效Dome制作，可以制作出较为复杂效果的交互动效，操作难度相对较低。
Origami是一款以代码思维进行动效制作的软件，学习门槛较高，但可以实现与开发的无缝对接。
C4D主要针对三维动画效果的制作，学习门槛较高。
作者：WOWdesign，研究设计价值最大化，涉及用户体验、品牌体验、空间体验。
本文由 @agoodesign 原创发布于人人都是产品经理。未经许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议
编辑导语：总是会在手机、电脑看到各种小动画，这些动态的界面有什么小细节可以考量呢？本文作者分别从动画组件、动画功能、智能设备动效、动效设计工具四个方面讲述了交互动画设计，希望对你有所启发。
大屏手机中的交互设计越来越讲究用户体验，而对设计来说提升用户体验除了完善友好的产品链路和精致的视觉体验之外，还有一个被越来越多设计师重视起来的地方，就是交互动画设计。
我们熟知的苹果开关按钮就是使用交互动画的典型案例，它精准的模仿了现实中用户按下按钮后的转换过程并且给到用户实时的点击反馈。
苹果经典按钮开关
添加动画效果是为界面服务并给到用户能够控制的预期，用户在操作页面的同时也乐于看到生动活泼的情感化响应。
制作时需要注意一些规则，比如参考现实中物体的运动规律，这样会使页面功能的展示方式更加丰富、更富有吸引力，但动画的加入要根据场景和功能而定，不宜过多，否则会使用户感觉混乱分散注意力。
安卓和iOS的动画组件库都支持针对目标的基础动画属性调整，如目标的透明度、大小、旋转角度，颜色变化等，经过不同的组合后便成为了丰富的动画样式。具体表现形式可以参考Jorge Rolando Canedo Estrada基于迪士尼动画原理提炼的十条动画设计原则。
动画设计的十个原则
渐进渐出模仿了现实中目标进入和滑出的方式，会伴有加速和减速的过程，部分样式还会加入弹跳的效果，这种样式多用于表现页面的上下级切换。
渐进渐出动效
这种动画效果模拟了现实中近大远小的物理关系，多用于图片内容的查看，一般会配合上下滑动来切换。
页面缩放动效
叠加遮罩的效果动画常用于界面中的弹层展示和一些细节界面，常伴随着同一页面中前后目标之间的形变和转换。
叠加遮罩动效
针对多层且复杂的页面层级需要在多个页面之间转换，这些场景中往往需要简单的滑动和点击操作向用户传达清楚页面之间的层级链路关系，而默认的动画效果如横滑和平移并不能很好的加深用户的印象，这时可以结合app的特性来添加动画以强化属性。
比如下图中这款图书类的app设计对页面的转场加入了翻滚的动效，用户在操作时和现实中的翻书类似，很好的串联了界面前后转换的过程，强化了界面之间的关系。
阅读app的翻页动效
下面这个日历app也模拟了现实中纸张的层叠效果，滑动切换待办事件就可以轻松丢掉已完成事项的便笺，让完成的动作更轻松有趣，同时也赋予了用户成就感。
日历app的层叠动效
当页面中有详细信息但又不至于跳转页面的时候也可以使用叠加效果，对页面的局部信息进行放大，同时弱化模糊其他非必要信息，可以有效的帮助用户抓到内容重点。
图片app浏览动效
现实使用过程中常常会因为硬件配置和网络等因素导致页面的加载速度极不稳定，为了让用户感知到当前页面正在运行，通过丰富有趣的小动画可以很好地缓解用户在等待中产生的焦虑情绪。
loading动画
空白页面的加载也可以和过场动画相结合，如下图所示，首先是拟物化的卡片抽出效果，之后的数据读取用色块的滑动效果取代死板的填充。同时卡片成功删除后的效果并不是直接确认的生硬文案，而是符合现实中消除卡片的粉碎动画，帮助用户加深确认效果。
支付app的加载和删除动效
下图中足球比赛的app也用到了同样的设计方式，当用户点击球队比分时会显示详细的进球数据，因为是实况比赛用户需要快速阅读了解当下比分，这时的加载画面用球场的轮廓形状展现，这样既切合了app本身的属性，也弱化了用户对数据加载的焦急等待。
体育app的加载动效
在app版本升级和一些页面新功能介绍时我们经常看到这类动画效果，主要功能是给用户介绍更新内容，ios15更新后将多国语言的hello文字转换成更加友好的动画形式，增加了温度也更贴合用户的情感需求。
iOS15设置欢迎引导
支付宝的集五福活动把五福做成了开屏动画，动画结束时落在了页面的顶部五福活动入口，动画上的前后无缝承接既起到了活动入口宣传的作用也帮助用户强化了对于活动的理解。
支付宝集五福开屏动效
智能设备逐渐普及的当下，很多交互界面是非常规或是没有屏幕的，这就更需要利用软硬件的结合动效来传达用户的操控反馈，这些动画效果和特殊的硬件设计结合在一起起到了1+1>2的效果。
LV智能手表三代
LV采用鸿蒙系统的三代智能手表，与特殊印花表盘结合的动画效果在非常的炫酷流畅，凸显了品牌的调性。
LV智能手表表盘动画
苹果Homepod mini的触控面板动画模仿了手机上呼出siri的动画效果，让用户在呼叫音箱的时候代入了手机的操作体验，延续了体验的一致性。
Home pod mini
Home pod mini操作动效
目前安卓和ios平台都有自己的工具来支持开发者制作交互动画，可以直接加入贝塞尔曲线来设置动画目标的各项参数，这里分享两款常用动画制作软件，都支持精致且舒适的动画效果，让吸引人的动画效果向用户呈现操作结果，传达界面状态，增强用户的感知。
贝塞尔曲线
Adobe After Effects拥有丰富的图层效果和动画参数设置选项，可以根据需求输出多种格式，缺点是上手有一定难度，在导入素材时一些常用的设计软件无法很好的兼容。
Adobe AE 2021
相较之下Principle则更为小巧便捷，可以直接导入sketch和figma的源文件，并且默认设置了多种转场的交互动画和预置的贝塞尔动画参数供使用者选择，可以用来快速的制作交互动画原型。
Principle
随着智能设备硬件的不断升级，平时习以为常的设计细节也需要不断地推陈出新。不论是基础组件还是链路设计，都可以结合实际界面做出惊艳的动画效果，帮助用户带来更好的体验，交互动画设计将是未来设计师必备的一项专业技能。
作者：Troy；公众号：淘宝设计
原文链接：https://mp.weixin.qq.com/s/TrK0ggIn3HB1_o9AirxaSQ
本文由@淘宝设计 授权发布于人人都是产品经理。未经许可，禁止转载。
题图来自 Unsplash，基于CC0协议。
相关问答
青岛动效文化科技有限公司成立于2020年04月01日,注册地位于山东省青岛市城阳区山河路702号40号楼603室,法定代表人为邹超。经营范围包括教育软件技术研发、技...
下个答案:第一阶段:视觉设计基础第二阶段:品牌运营视觉设计第三阶段:电商运营设计基础第四阶段:产品交互UI设计第五阶段:UI项目实战基础第六阶段:就...
费用1W-2W之间,时长不是一年,一般都大概4个月左右吧。但更重要的是要找到合适的,能够学习到更多的专业知识的机构,授课模式、讲师水准都是很重要的考量部分。...
进来就看到个故作高深不知道在说啥的回答,不知道在哪里复制的,真是醉了。设计师的重心永远都在于想法和如何用合适美观的手法把自己的想法表现出来,而不是软件...
深圳UI设计培训学校哪家好?多数小姐姐都说千锋教育比较不错的。UI设计师可以为用户提供良好的体验,是互联网企...深圳UI设计培训学校哪家好?如何判断课程好坏?...
dribbble并不是一个展示完整项目的网站。它的定位是灵感或者设计概念展示,更多的是展示局部设计,或者设计亮点。通过dribbble,更多的是了解设计趋势以及提高...
1.拉勾教育:提供平面设计、UI设计、网页设计等课程。2.美术学堂:提供平面设计、插画、手绘等课程。3.智慧树:提供平面设计、UI设计、动效设计等...
制作一个简单的动效表情包的时间取决于多个因素。首先,需要确定表情包的规模和复杂度。如果是一个简单的动态图像,例如一个眨眼的表情或微笑,可能只需要几分钟...
4.动效设计:动效可以增加PPT的互动性和吸引力,但要避免过度使用或滥用。5.流程明确:在制作过程中要注意演示顺序和时间安排,确保整个PPT演示过程流畅清晰。...
前端前沿设计前端框架前端交流社区前端学习平台在线学习编程有的学习网站的视频,教程,即零碎又没什么用,我给你推荐一个(众创缘)这是一个ui设计学习网站,在...
