动效设计学习总结

1.什么是动效设计

动效设计，顾名思义即动态效果的设计，用户界面上所有运动的效果，也可以视其为界面设计与动态设计的结合。

而在Material design 设计规范中，将动效设计这一章命名为「Animation」，意思是动画，活泼的意思。好的动效设计可以帮助引导、取悦用户，减少等待焦虑，是拉近用户与产品之间距离的有效手段。

2.动效分类

目前能够分为三大类：

功能型动效

此类动效一般用于产品设计，通过动态图形向用户传递信息，其中加载/刷新和进度条应该是我们平时接触最多也是最早的动效了，此类动效最开始只是为了告知用户产品的页面状态。

像上方的美团页面；除了加载、刷新和进度外，功能型动效还被广泛的运用在产品的其他各种状态当中，如信息报错、二维码扫描等。虽然具体表现不同，但都是通过动态形式帮助用户理解和使用产品。

交互型动效

顾名思义，该类动效的核心是“交互”，其主要的作用是帮助用户理解界面的层级逻辑关系，让产品的使用更加符合现实生活中的认知习惯，从而降低使用成本，提升产品体验。

要注意的是此类动效不能脱离用户的认知模型，只是单纯的炫酷对于整个产品来说是有害的。

其实交互型动效是用户在产品使用中接触最多的一种动效，因为产品的使用是通过不同产品元素串联而完成的，而负责元素串联的就是交互型动效。

展示型动效

此类动效的最大作用就是尽可能的为用户制造视觉上的愉悦，营造活动氛围，让用户觉得有趣生动，使用的场景也十分广泛，常见的如「品牌展示」、「运营活动」、「H5营销」等。

我在网上找了几张案例大家可以看看：

品牌展示

 运营活动

H5营销

 

动效趋势 

在技术和商业的驱动下，“动态化设计”开始蔓延到各个设计领域，从 LOGO 、 UI到大型运营活动，动画一直以别具一格的方式活跃在设计舞台。富有创造力的动效设计可以使信息更快更准确地传达给受众、强化用户的视觉感受魔性的循环动效，非常符合当下的传播特性。对于运营、品牌广告而言，循环动效能赋予其趣味性，让用户更加沉浸地去了解相关信息。

 十二条动效设计原则 

接下来带大家了解一下动效设计的十二条动效设计原则

原则1：缓动（Easing）

当时间事件发生时，对象行为与用户期望保持一致。

缓动模仿真实世界对象随时间加速和减速的方式它适用于所有呈现运动的 UI元素 ，与缓动相反的是线性运动。显示线性运动的 uI元素瞬间从静止变为全速，从全速变为静止。这种行为在物理世界中不存在，并且对用户来说似乎是停顿的。

 

原则2：偏移和延迟（Offset & Delay） 

在引入新元素和场景时定义对象关系和层次结构 

偏移和延迟在同时移动的 UI 元素之间创建层次结构，并传达它们相关但不同的信息。不是完全同步，而是元素的时间、速度和间距是交错的，从而产生一种微妙的“一个接一个”的效果。

 

在上面的例子中，浮动动作按钮（FAB）转换成由三个按钮组成的标题导航元素。换句话说，设计者是在利用时间本身，甚至在用户登录对象之前将对象分开。它的作用是从完全独立于视觉设计的角度，告诉用户界面中元素的本质。

原则3：子母关系（Parenting） 

与多个对象交互时创建空间和时间等级关系。也可以说是链接；

 

子母关系是一种强大的原则，可以在用户界面中“关联”对象。在上面的例子中，顶部的对象（子对象）的“大小”和“位置”因素与下面的对象（母对象）的“位置”因素有关。 

将一个 UI元素的属性链接到其他UI元素的属性。当父元素中的属性发生变化时，子元素的链接属性也会发生变化。所有元素属性都可以相互链接

原则4：转换（transformation）

当对象功能发生变化时，创建连续的叙事流程状态。 

 

转换是最明显的，主要是因为它可以从一系列视觉元素中脱颖而出。下面的例子中“提交”按钮将形状变为环形进度条，并最终再次改变形状成为“确认”标记，它成功抓住了我们的注意力并描述了一个完整的过程。 

当一个 UI 元素变成另一个UI元素时，就会发生转换。从UI的角度来看，转换是向用户展示其与目标相关的状态(系统状态的可见性)的有效方式。 

 

原则5：数值变化（Value Change） 

数值主体发生变化创造出一种动态和持续的过程。 

 

价值变化传达了数据表示的动态性质，并告知用户数据是交互式的，并且可能会在一定程度上受到影响。当基于值的界面对象加载时没有“值更改”，这向用户传达的是数字是静态对象。它们就像显示限 55 英里/小时的彩绘标志

原则6：遮罩（Masking） 

功能由部分对象（或组）显示或隐藏来确定，在对象（或组）中创建连续性。 

 

动效

 

对 UI 元素的部分进行战略性显示和隐藏。通过改变元素周长的形状和比例，掩蔽表示效用的变化，同时允许元素本身保持可识别性。
通过对对象的显示和隐藏区域的临时使用，效用以连续和无缝的方式过渡。这也具有保持叙事流的效果 

原则7：覆盖（Overlay） 

不同层级对象的位置相关联时，在视觉平面中创建叙事性和对象间的空间联系。 

 

原则8：克隆（Cloning） 

克隆是一种运动行为，其中一个 ul元素分裂成其他元素。这是一种突出重要信息或交互选项的巧妙方法 

 

原则9：蒙层（Obscuration） 

允许用户在空间上定位自己与交互对象或场景的关系，而不是在简单的平面层级上 

 

原理10：视差（Parallax） 

当用户滑动界面时，在视觉平面中创建空间层次。

 

当两个(或更多) UI元素同时移动但速度不同时，会显示视差。再次目的是建立层次结构。 

原则11：维度（Dimensionality） 

当新物体产生和消失时提供空间叙事结构。 

 

维度使 UI元素看起来有多个交互面，就像物理世界中的对象一样。通过使元素看起来好像它们是可折叠的、可翻转的、浮动的或被赋予逼真的深度属性来实现该行为。 

原则12：镜头平移与缩放（Dolly & Zoom）

在进行对界面对象和空间的引导时，保持连续性和空间叙述。 

 

平移和缩放是电影概念，指的是物体移动与相机之间的关系以及图像本身的大小随着长镜头到近景镜头调节产生的变化。