Motion Graphic 也称 Mg 或者 Mograh，通常翻译动效或者动态图形。
Motion Graphic 称为 Mg 或者 Mograh，通翻译为动效设计或者动态图形。它已经成为 UI 设计师不或缺的技能之一。动效的目的是告诉用户元素之间的关系以及哪是点击的、哪是不点击的元素。还暗示界面将出现什么内容等等功能。在情感化设计理论中，动效是能够拉近用户与产品之间距离的设计手段。优的动效为常见的互增加很趣味，让品牌更加深人心。Material Design 的动效规范非常适合我们学习动效识，但由机翻不准确和示例式等问题给中国设计师学习带来一困扰。为此，我用一个月时间去消化并翻译为准确的业词汇，并结合我自身的动效经验内容，为大家总结篇动效识，希望对大家学习动效有所裨益。在我们开始之前，让我们先来看一优的动效吧：
△ 该动效暗示收件箱和邮件之间的级结构
△ 该动效将菜单图标与操结合在一
△ 该动效暗示页卡和内容之间的次结构
1. 反馈与状态
动效设计除具有暗示级结构的功能，也以说明操的状态或是对操进行反馈。扁平化设计是 UI 设计的主流趋势，其缺点就是无法传递给用户够的情感，生动的动效刚以弥补一点。设想一下，每点击一个按钮，它就像果冻或者是塑料一样产生反馈，是不是特别有趣呢？
△ 该动效提示键盘输的操，并告诉用户个操是否成功
△ 该动效暗示内容正在加载，并即将出现
2. 用户教育
动效还以指导一次使用产品的用户应该何操，让用户在轻松的氛围下学习。的动效以让用户在几秒钟的时间里看懂产品的使用方法，要比生硬的图文说明。
△ 该动效提示何滑动手势来完成锁操
△ 该动效提示所选项目的位置
3. 角动画
优的角动画还以为产品的互增添个和吸引力，让用户流连忘返。也许就是我们在孩时代就喜欢动画的原因吧。果产品有吉祥物，就更需要我们来设计角动画。准备为你的项目创建角动画吗？
△ 优的角动效以创造美的一印象
△ 角动画以为错误提示增加趣味
把动效的结构为：出动画、入动画和持续动画。页面中不需要运动的素称为静素。素的属性决定了动效的转换方式。在计动效一定要考虑每个素的逻辑和属性，再据此配不同的效果。
- 导航图标常驻元素的动画
- 标题使用出场动画淡出效退出屏幕
- 操作选项使用入动画进入屏幕
- 更菜单样的静态元素没有动效
1. 动效连续性
动效设计以运动元素吸引着用户注意力。我们应该设计前后关系明确动效。我们可以使用以下技术表动效连续性：渐变、渐隐、共享变形。
2. 补 Tweening
补作用是补充元素在两状态转换时缺少动作。例如，个开关可以在屏幕上平滑移动，或者 FAB 可以过补变为新页或者页卡。补能应用于那些具有值属性变化，比如颜色。例如我们需要把红色变为蓝色，可以过紫色补变化实现。补不能应用于法生成值或状态元素，例如栅格设计列数必须是数，如 1 或 2，此不能介于它们生成补。
FAB 过补进了位、大小、高度、颜色和圆变化变成了个浮层。补也可以增加背景半透明黑色图层。
3. 渐隐 Fading
渐隐动画是过利用元素透明度变换来设计补。即使需要补两个元素属性不具有状态，我们也可以过渐隐动画创造平滑过渡。比如个图片可以过逐渐降低透明度露出另个图像法来转换到另个图像。
4. 溶解 Dissolve
溶解动画是在两个叠元素创过渡动画。例如下演示，前景元素进淡入（显示）或出场动画（消失）后，显示其后隐藏元素。
△ 个元素消失以显示隐藏在其后另个元素
5. 交溶解 Cross-dissolve
交溶解动画涉及两个时渐隐元素：个淡入另个淡出，呈现交状态。注意：如界有多个交溶解动画很可能会分散用户注意力。
△ 虽然两个元素时进了交溶解动画，在转换瞬仍然可以时看到背景以及两个元素
6. 渐隐穿透 Fade through
渐隐穿透是指是在另个元素淡入前，该元素已经完全淡出效。这过渡可以应用于文本，图标和其他不完全叠元素。
△ 两个元素按序淡出，在任何时候都不会时显示
7. 共享变形 Shared transformation
共享变形是在转换时候使多个元素进类似变换以增强动画连续性。例如下 FAB 突然出现了两个不图标切换，这会让用户不知所措。共享变形使两个图标在出现时都进旋转，此这个动画效不再突兀，变更加易于理解。
△ ①FAB图标切换太过突然；②在转换时进了平滑切换
速度动效中重的一环，好的速度调整可以使动效加顺滑流畅。这里我们需注意两方面：一持续时间，就动效整体所花费的时间；第二缓动，也就元素运动的轨迹方式。
1. 方法
合理的动效速度可以让用户注意到应该注意的置元素。我们设动效时，应当避免太突兀让用户措手不及的同时，尽缩短动效的时间。
△ 确的方式：页面切换时，动效应该迅速且易于理解
△ 错误的方式：页面跳转太慢了，浪费了很多时间
2. 持续时间
无论动画的风格如何，过渡都不应该过或者过慢。选择确的持续时间缓动可以让动效变得流畅清晰。
3. 复杂程度
动效的持续时间依据内的复杂程度。如果内不太复杂，那么动效的速度就应该些；如果内比较复杂，那么相应动效持续时间应该一些，给用户多的时间以消化这些内。
△ 这四选择控件的动效持续时间100毫秒
△ 对话框的动效，淡入时间：150ms 淡出时间：75ms
△ 形状的变形动效加复杂，所以它们的动效持续时间应该，动效度200ms
△ 许多动效细节的图标动效持续时间应500毫秒左右
4. 退出关闭动效
关闭、折叠元素的动效应该使用较短的时间，因用户的注意力多的集中接下的任务，因此退出折叠动效不能喧宾夺主，抢夺用户的注意力。
△ 抽屉式导航的打动效约250毫秒，关闭动效约200毫秒
△ 该页面展约300毫秒，关闭约250毫秒
5. 小面积的动效
元素越，它设置的动效所花费的时间应当越。这考虑到用户需理解界面元素设的。下面按钮面积比较小，所以运动速度很。
△ 按钮切换动画的时间100毫秒
下列出底部菜单和纸片动效涉及积相较大，所以动效持续时长于上按钮。
△ 底部菜单展开时：250毫秒 折叠时：200毫秒
△ 纸片展开时：250毫秒 折叠时：200ms
6. 大积动效
运动元素积很大，为了让用户适应，动效持续时应更长。
△ 卡片展开动效时：300毫秒 折叠时：250毫秒
△ 持久表展开：300毫秒折叠：250ms
缓动一种调整动画速率的方式，它可以让元素的运动具速度的变化，不匀速行。实世界中，运动不会立即始或停止，元素运动中都会加速减速。这由于初中时我们学过的加速度、空气阻力、重力、万引力因素引起的。加入了缓动的动效十分自然，看起就真实世界中的运动一样。
△ 加入缓动的运动看起十分僵硬机械
△ 确的方式：使用缓动让多元素同时行加速减速。这些元素同运动的，产了统一的感觉
△ 错误的方式：避免把应该减速的元素行加速运动，会产杂乱无章的感觉
1. 缓动的类型
不同软件里的缓动类型命千差万别，比如 Adobe After Effects Princple 动效软件里，对缓动的命就不尽相同。但根据我的人验，我们可以把缓动分主三种形式：缓入（先后慢）、缓出（先慢后）、缓动（先慢再再慢）。
2. 缓动 Standard easing
缓动可以用任何动效的始结束部分。缓动强调了该元素的运动，以吸引用户的注意力。下图的实例中两缓动，分别该元素的入场出场缓动。 AE 中默认缓动的速度图表先慢再再慢，当然我们可以通过速度图表编辑器改变运动的曲线，速度图表编辑器中，通常 X Y 两坐标轴：Y轴置（或速度）；X轴时间。
△ 应用了缓动的动效，y轴表示置，x轴表示时间
3. 缓入 Decelerate easing
应用缓入效果的元素，它的运动速度会先再慢，就受到了阻力。好一辆汽车慢慢停了下，好停到了用户待用户车一样。
△ 使用了缓入的动效。 y轴表示置，x轴表示时间
4. 缓出 Accelerate easing
元素退出屏幕时可以使用缓出，它的运动速度先慢再的，让用户感觉到很「爽」。仿佛元素坐了一辆汽车，慢慢加速离了界面。
△ 使用了缓出的动效。 y轴表示置，x轴表示时间
人的视觉注意往往一次只注一个效。而手容易犯的问题是在一个时间入了多个效，户的眼睛知道要跟踪哪个，成了效逻辑的混淆。我们要像指导一个芭蕾舞团一样，界面上多个效的场顺序和各自要占的时间。在前面的篇幅中我们了解到了效占的时间受到元素的逻辑重要性、占据界面的面积等因素的影响，那么分配给各个效的时间就全看我们的「编舞」了。
1. 简单的「编舞」
简单的编舞适合逻辑系简单的元素。如页卡伸展的效，先使了缓入拉面的信息，然后进行了 FAB 和背景颜色的反转。户解到它是从哪里来的，并且感知变前后页面的同逻辑系。
△ 页卡的效
2. 复杂的「编舞」
复杂的容转换需要更复杂的「编舞」，如查看联系人列表中的详细信息这个效，可将过渡分为两分来成：第一是顶导航区域的变换，第二是面从某个联系人单元扩展成整个页面的变换。我们把将每个元素的效分为类：入场画（incoming），场画（outgoing），持续画（persistent）和静态（static）。
入场画元素在90毫秒成，场画元素在210毫秒成。在入场画、场画和持续画中都使了缓的效果。
1. 简的变形
简的变形是通过补间的方式使某个控件从一个状转换另一个状。
△ 这个简的变形使开关组件从左向右移动并且从渐变紫色来切换它的状
2. 复杂的变形
涉及复杂的版式变换的动效，可以使用共同转换的方式来创造滑的过渡。界面中的素可以作为一个共同进行变化。以为位的变化多是使用淡出等动效方式来计的，这的变化容易让用户理解。
△ 正确的方式：尽量减少独立运动的素数。在一些一素运动的同，整体的淡入淡出吸引了用户主要的注力，并且让用户觉界面的续性。
△ 错误的方式：不要在一个动效中把许多素关在一起。每个独立的素都会争夺用户的注力，会使用户心。
△ 错误的方式：界面素动效跳跃，让用户无法集中注力
3. 使用动画容器层进行过渡
制作动效，可以通过一个包含着多素的容器层进行变换，在变换的候素保持内部的宽高比例，慢慢放大。
△ 为容器层的外沿置动效，内部素全部等比例缩放，没有裁剪
4. 没有容器层的过渡
当一组素没有确的边界，也没有容器层，可以使用共享转换创建滑的过渡动画。例如 FAB 动画内部图标的动效，虽然外轮廓的容器层没有动画，但是内部动画同可以创造续。
△ 该动效的FAB图标使用了顺针的旋转过渡
△ 入和出通过左侧的标签引导而出
5. 使用焦点素
焦点素是动效中最吸引用户注力的素，也是补间中最重要的素。
△ 该动效中的标题和图像都是焦点素，在折叠和展开的动效一直保持可见
Material Design 鼓励我们自定义符合品风格和品调性动效。我们可以过速度、位移、动效序、独特图标和插图来定制动效。其实国内很多品都已经这么做了，比如站酷、QQ 等品 Tabbar 图标动效常符合自身品和调性，让过目不忘。
△ 正确：①OWL品使用了可爱卡动画来设计动效；②独特晃动动效
△ 误：不要视品风格和调性乱用动效。该动效案例，品调性比较严肃，是动效相比下太有趣和活泼了。
1. 情感连接
自定义动效在用户使用过程创了品和用户情感连接。
△ 奖励用户执任务动画可以创愉悦感
2. 频率
添加自定义动效时，我们需要考虑动画频率。系统图标动画可以设计常精细，时要避免过于频繁动画分散了用户注意力。
△ 正确：动画图标为底部导航添色不少
△ 误：频繁使用品图标动画会阻碍用户操作
1. 缓动
缓动用于多数的过渡动效，比如顶部导航或底部导航的出入场动效。
△ 缓动合很多界面的切换
2. 强调型缓动
强调型缓动一般加动效的后，用以强调某元素的重性。
△ 界面返回后，强调型缓动强调了页面从哪里展的
△ 强调型缓动可以给人轻松优的感受
△ 与一般性缓动相比，强调型缓动的加速度，停止时加缓慢
3. 持续时间
缩短动画的持续时间可以让它感觉胆，延动画的持续时间可以表达轻松的氛围。如果持续时间 400ms 以，一般性缓动可能表不，这些况下考虑使用强调性缓动。表达特氛围，可以对默认持续时间行小幅调整。将默认从 300 毫秒增加到 350 毫秒表示松的效果，将其缩短到 250 毫秒则使其加胆。同时应当避免对默认持续时间行幅调整。减缓这过渡到 550 毫秒可能太慢了，加速到 115 毫秒可能会让人震惊。
当元素变换时，它的轨迹称为路径。默认情况，路径是线性的。如果一个元素需要改变大小或对角线移，则路径可使直线或弧线的路径。
1. 直线 Linear motion
直线就是简单的，适合大多数的过渡效果。这种作极会分散户的注意。
△ 正确的方式：该效的页卡直线的方式折叠和展开
△ 注意：该效中有一个大的对角线，与他元素的要上或左右协调
2. 弧线 Arc motion
弧线是模仿自然的一种效设计，它们适于对界面进行大幅调整的效。弧线可在水平和垂直两个方向上进行。
△ 正确的方式：该效中元素在转换成卡片设计过程中应了弧线的方式
3. 弹 Overshoot
弹是指元素在时超应该停止位置的画，就好像这个元素被很大推而跑过了头一样。这样的效可户感觉有趣和充满质感。
△ 正确的方式：弹人感觉到一种自然的感
4. 晃 Oscillation
晃是非吸引户注意的，在一个手势操作之后，使元素进行晃会人感觉到效的质感，人觉得有趣。
△ 正确的方式：使晃来创有趣的格
5. 伸展 Stretch
伸展是指元素在快速时会发生形变，多于开和滑。这种变来源于现实中的柔软物体，因此有伸展画的元素会人感觉到柔软。
△ 拉伸效果为指示器增添了有趣的细节
△ 该效的时针在摆时有弧形的伸展效
6. 视差滚 Parallax
视差滚是指 z 轴上多层元素进行速统一的滚。这种统一暗示了它们海拔的同，从而户感知到 z 轴的存在。
△ 视差滚为界面增了深感
△ 视差滚可暗示信息的Z轴系
1. 间偏移 Temporal offset
在素进行不同的动效，可以使用间偏移突出某一个素。
△ 该动效需要100ms 来让FAB变大，有助于突出FAB
2. 摇晃 Stagger
摇晃指的是按顺序将间偏移应用于一组素，如列表中。摇晃创造了一种简的效果，可以使用户将注力集中在每个列表上。
△ 使用摇晃为重要的素添加润色
△ 优秀的摇晃动效
给图标、插图和产品图标加入动效可以为用户体验增添喜悦和趣味性。
1. 系统图标
系统图标的动效可以计出妙的运动细化。它有助于给用户完美的用户体验。
△ 这些图标动画为细节增添了俏皮
△ Owl中图标动效反映了其产品的调性
2. 产品图标
产品图标的动画给用户一种温暖和关怀的觉。
△ 这个钻造型的产品图标动效含有3D旋转的效果
△ 该动效中的产品图标有线条和动的丰变化，非常有趣
△ 该动画中鸟的运动更加为造型增添了趣味
△ 该动画让用户知了产品的调性
3. 插图
插图的动效可以给用户创造惊喜的觉。国内的互网计都会为产品绘制一些插图，如果这些插图会动，那更会让用户觉惊喜和愉悦了。
△ 当产品发生错误和外，在错误提示中可以使用插图的动效增添趣味
△ 插图动画可以引导用户做下一步的操作
4. 适应的动画
屏幕的转向、窗的缩放等改变会引起界面的变化，在这可以加入适应的动画。
△ 网页中不同尺寸图片切换的变换
相关资料
- MD动效部分原文：https://material.io/design/motion/understanding-motion.html
- 国优秀动效收网站：https://uimovement.com/
- 动效素周期表：http://foxcodex.html.xdomain.jp/
欢迎关注作者微信公众号：「西见」
浙公网安备33011002017549号