发布时间：2020-12-28 分类： 行业资讯
微交互动力学设计的方向是功能动力学效应，适用于UI界面的交互式动力学设计。凭借明确的逻辑目的，它专注于帮助用户理解并有效地利用他们当前的状态。运动效果的范围是输入/amp;退出，转换，通知和加载。
Web、App中添加动效设计所遵循的12条原则
缓和，偏移和延迟（偏移和延迟）主要取决于时间。
育儿用于说明元素之间的关系。
转换，值更改，屏蔽，叠加和克隆对增强元素本身的连续性起作用。
视差更多地表示元素的层次关系。
遮挡，尺寸，镜头移位和缩放（Dolly& Zoom）用于指示元素和空间之间的关系。
1. 缓动(Easing)
当运动发生时，元件的运动速率的变化满足用户的期望。自然界中几乎没有线性运动。没有什么能够完美地保持匀速运动。缓动效果可以使运动看起来更自然，满足用户的感知并满足用户的期望。
示例：手机中的几乎所有动态效果都很慢，看起来非常舒适和谐吗？
2. 偏移量和延迟(Offset & Delay)
使用偏移和延迟来交错元素的运动时间，指示元素之间的级别和关系。设计者使用交错运动时间的方法让信息或界面元素根据不同的顺序进入和退出。明显的错误运动表明用户信息和界面元素之间可能存在一些差异，或者使用错误的顺序方法来吸引用户的注意力。但是，一般情况设计者不应该使用太多的延迟效应，因为例如，网络本身的加载已经需要时间，因此使用延迟效果最好用于服务该技术。
示例：Apple的官方代购源码网站上有大量的产品详细信息页面。
3. 父子关系(Parenting)
父子元素可以帮助用户更好地理解它们之间的层次关系，并在用户工作时提供更合理的操作反馈。如上面的动画所示，下方的方块左右移动，而上方的方块跟随下方的方块左右移动，同时执行自己的缩放动作，形成父子关系。简单地说，父子关系是子元素的属性的值，该元素随父元素的属性参数的值的某个比例而变化。
示例：Google Allo按住“发送”按钮向上滑动，内容字体将变大。
4. 变形(Transformation)
变形用于通知用户元素的状态或效果已经改变。人们对物理变形很敏感，合理的变形可以以最有效和最愉快的方式清晰有效地向用户传递正确的信息。注意，这里提到的变形不必与上述要变形的运动图一样大。也许它是颜色的变化，或者它可能是角度的变化，这可以达到我们想要的效果。
示例：了解赞助金额的实时动画。
5. 数值变化(Value Change)
连续数值变化的动态效果允许用户清楚地看到值是增加还是减少。在这一点上，我想再使用两个动画。您可以看到，具有连续动态效果的数值变化更能说明数字是变得更多还是更少？想象一下，如果你在Money App中，如果这个值是你的钱，那么增加和减少信息量对用户来说非常重要。
示例：京东金融移动应用程序，“ldquo;总资产”和“ White Strips”页面值更改。
6. 遮罩(Masking)
蒙版型动画是一种在界面元素进场或退出时创建连续效果的选项。这种类型的动画在Material Design中似乎更常见，因此未使用原生Android系统的合作伙伴可能不熟悉。
示例：原生Android系统（5.0或更高版本7.0版本可见，7.0取消菜单按钮，上面的操作被替换。）单击菜单按钮调出菜单的动画效果。美图修秀移动应用程序是点击主页上的每个功能按钮后的过渡效果。
7. 覆盖(Overlay)
覆盖层用于照亮平坦（无厚度）设计界面上两个相互独立元件的位置关系。在没有厚度且没有深度概念的平面设计的情况下，使用叠加动画可以使得已经非常有限的屏幕空间被更好地利用。
示例：WeChat横切删除聊天记录。
8. 蒙层(Obscuration)
该层与封面非常相似，并且在没有深度概念的平面设计中很深。它并不完全覆盖下面的元素，但通常下面的元素由高斯模糊或变暗保持。视觉。
示例：iOS中随处可见的磨砂玻璃效果。
9. 生成(Cloning)
生成元素时，它表示元素与元素连续性之间的关系。这种动画可以非常清楚地表达由于操作和它们之间的关系而导致的一个或多个事件的发生。
示例：Apple的消息发送消息的效果。
10. 视差(Parallax)
界面元素同时开始移动，但是移动的效率不同，这构成了视差效果。当用户执行滚动操作时，视差效果可以表示平面界面中的空间中的元素的位置和层次关系。这种效果也非常漂亮和高端，这使整个页面看起来更加生动。通过视差的特点，我可以引导用户注意应该关注的地方。高效率的元素通常表达更接近用户，适合携带更有用意义的重要信息，而效率较低的元素通常表示它远离用户，可能不携带任何重要信息。
示例：Apple的官方代购源码网站详细信息页面。
11. 多维化(Dimensionality)
扁平化的界面元素是多维的，以表示空间中元素的位置和层次关系。事实上，平坦度不符合人类的认知逻辑（并且符合人类认知逻辑几乎是可用性的第一原则），因此人们在平面界面中努力工作以在界面中表达而没有深度和厚度。深度和厚度，这句话非常易读，但实际上就是这样。多维的使用相对较小，因为有许多方法可以增加深度（覆盖，遮蔽，阴影等），并且多维的开发成本相对较高。
示例：iBooks的页面翻转效果和Flipboard的页面翻转效果，用于将出租车停在出口呼叫状态的Appbar动画。
12. 镜头平移与缩放(Dolly & Zoom)
镜头移位和缩放听起来像是一回事，实际上它完全不同。镜头移位是射击的术语。镜头移动时镜头保持静止或镜头保持静止，同时镜头前后移动或远离镜头。变焦是镜头，拍摄对象在该位置保持静止，拍摄对象本身变焦。镜头移位和缩放效果显示元素和空间之间的关系，也可以显示深度感。
示例：iOS的解锁动画是典型的镜头平移效果，双击放大图像动作的是典型的缩放效果。
优秀的微动效，归纳成三个核心原则
克制有度：控制发生的频率和发生的持续时间，无需添加额外的操作，不会打扰用户并给予用户足够的理解时间。
清晰聚焦：逻辑，专注，为用户提供足够清晰的阅读时间。
自然流畅：保持基本的视觉连续性，缓冲区转换，并一次完成。
我记得—一个关于回忆的代购源码网站，在您打开它时为您提供清爽的浏览体验。
简介
结语
交互式微动作主要是功能性的，必须遵循约束，清晰的焦点和自然流畅的三个核心设计原则。在设计之前，请考虑如何影响用户的注意力，动态效果的目标是什么，动态效果发生的频率以及触发机制。选择适当的操作类型和持续时间，并注意反馈的响应时间。它有充分的理由和说服力。
译者：L_Lainey
自译自译：https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
