本文微交互动效设计描绘的方向属于功能性动效,适用于UI界面的交互动效设计。具有清晰的逻辑目的,着重帮助用户理解和有效的度过当前所处的状态。动效涵盖范围有入场/出场动效(enterexit)、过渡动效(transition)、通知动效(notice)和加载动效(loading)。
Web、App中添加动效设计所遵循的12条原则
缓动(Easing)、偏移量和延迟(OffsetDelay)主要与时间相关。
父子关系(Parenting)用于阐述元素之间的关系。
变形(Transformation)、数值变化(ValueChange)、遮罩(Masking)、覆盖(Overlay)、生成(Cloning)多作用于加强元素自身的延续性。
视差(Parallax)多作用于表明元素的层级关系。
蒙层(Obscuration)、多维化(Dimensionality)、镜头平移与缩放(DollyZoom)作用于表明元素与空间的关系。
1.缓动(Easing)
当运动发生的时候,元素运动速率的变化符合用户的预期。自然界之中是很少存在完全线性的运动的,没有任何东西能够完美的保持匀速运动,缓动效果能够让运动看起来更加接近自然,符合用户的认知,达到用户的预期。
例子:你手机里面几乎所有动态效果都是缓动的,看起来是不是非常舒服和谐呢?
2.偏移量和延迟(OffsetDelay)
利用偏移和延迟来错开元素的运动时间,表明元素之间的层级与关系。设计师利用错开运动时间的方法,让信息或界面元素按照有所区别的秩序进退场,利用明显的错序运动暗示用户信息与界面元素之间或许存在某些区别,或利用错序的方法吸引用户的注意。但一般情况设计师不应该使用太多的延时效果,因为譬如说网络的加载本身就已经需要时间,所以延迟效果的使用最好只用于服务于技术。
例子:苹果