Web、App中添加动效设计所遵循的12条原则

1.缓动

当运动发生时,元素运动速率的变化满足用户的期望.自然界很少有完全线性的运动,没有什么能完美地保持匀速运动.慢动作可以让动作看起来更贴近自然,符合用户认知,满足用户期望.

例子:你手机里几乎所有的动态效果都很慢.看起来是不是很舒服很和谐？

2.偏移量和延迟（Offset &Delay）

偏移和延迟用于错开元素的移动时间,表示元素之间的层次和关系.设计者使用错开移动时间的方法,使信息或界面元素按照不同的顺序进出,使用明显的乱序移动来暗示用户信息和界面元素之间可能存在一些差异,或者使用乱序的方法来吸引用户的注意力.但是,一般来说,设计人员不应该使用太多的延迟效果,因为,例如,网络本身的加载需要时间,所以最好只使用延迟效果来服务于技术.

例子:苹果官网产品详情页应用广泛.

3.父子关系（Parenting）

用户操作时,具有父子关系的元素帮助用户更好的理解他们的层次关系,带来更理性的操作反馈.就像上面给的动图,下块左右移动,上块随着下块左右移动,同时缩放,构成父子关系.简单来说,父子关系就是子元素的一个属性值与父元素的一个属性参数的值按照一定的比例变化.

示例:GoogleAllo按住“发送”按钮并向上滑动,这样发送的内容的字体会变大.

4.变形（Transformation）

使用变形来通知用户元素的状态或功能已经改变.人对物理物体的变形是敏感的,合理的变形能够以最高效、最愉悦的方式清晰、高效地向用户传递正确的信息.注意这里说的变形不一定要有上面动画那么大才算变形.可能是颜色的变化,也可能是角度的变化,都能达到想要的效果.

举例:了解Live选择赞助金额的动画效果.

5.数值变化（Value Change）

连续数值变化的动态效果使用户能够清楚地看到数值是增加还是减少.关于这一点,我想用两张动图来呈现一下.如你所见,数字变化的连续动态效应是否能更好地让你知道数字是在增加还是减少？试想一下,如果这个值是你在某个金融App里的钱,那么增减数量的信息对用户来说是非常重要的.

举例:京东金融手机App的数值变化效果,“总资产”、“白条”页面.

6.遮罩（Masking）

当界面元素进入或退出时,遮罩动画是创建连续效果的一种选择.这种类型的动画在MaterialDesign中似乎比较常见,所以没有使用过原生Android系统的合作伙伴可能不太熟悉.

例子:原生Android系统(5.0以上7.0以下版本可见,7.0取消菜单按钮,代之以上述操作.咨询菜单按钮调出菜单的动画效果.美图秀秀手机App在首页咨询各个功能按钮后处于过渡效果.】

7.覆盖（Overlay）

叠加用于阐明平面(无厚度)设计界面上两个独立元素之间的位置关系.在没有厚度和深度概念的平面设计中,使用叠加动画可以更好地利用已经有限的屏幕空间.

例子:微信横向删除聊天记录.

8.蒙层（Obscuration）

遮盖和遮盖很像,在没有深度概念的平面设计中表现出深度.它没有完全覆盖底层元素,但通常通过高斯模糊或变暗的方式保持底层元素可见.

例子:iOS中毛玻璃效果随处可见.

9.生成（Cloning）

当元素产生时,它们表达了元素之间的连续关系.这种动画可以清晰地展现一个操作导致的一个或几个事件的发生以及它们之间的关系.

例子:苹果的Messages发送消息的效果.

10.视差（Parallax）

界面元素同时开始移动,但是移动的效率不同,构成了视差效果.当用户执行滚动操作时,空间中元素的位置和层次关系可以通过视差效应在平面界面中表达.这种效果也很美观高端,可以让整个页面看起来更生动.通过视差的特点,我可以引导用户关注应该关注的地方.运动效率高的元素通常表达的是离用户更近的,适合承载更多有用含义的重要信息,而运动效率低的元素通常表达的是离用户很远的,可能不承载任何重要信息.

例子:苹果官网产品详情页面.

11.多维化（Dimensionality）

多维的平面界面元素表达了元素在空间中的位置和层次关系.其实扁平化并不符合人类的认知逻辑(而符合人类的认知逻辑几乎是可用性的第一原则),所以人们在没有深度和厚度的扁平化界面中,努力表达深度和厚度.这句话读起来很难听,其实是这样的.多维使用较少,因为添加深度的方式很多(覆盖、阴影、阴影等).),而且多维的开发成本比较高.

例子:iBooks翻页效果和Flipboard翻页效果,滴滴打车退出通话状态的Appbar动画.

12.镜头平移与缩放（Dolly &Zoom）

翻译和缩放听起来是一回事,但实际上是完全不同的事情.镜头翻译是拍摄术语.镜头移动或保持静止时,镜头保持静止,镜头远离或靠近镜头来回移动.缩放意味着镜头和镜头保持静止,而镜头本身缩放.镜头平移和变焦的效果表现出元素与空间的关系,也表现出深度感.

交互微动效应主要是功能性的,必须遵循克制、焦点清晰、自然流畅三个核心设计原则.在设计之前,思考如何影响用户的注意力,动态效果的目标是什么,动态效果的频率和触发机制是什么.设计时选择合适的动态效果类型和持续时间,注意反馈的反应时间,做到合理有说服力.