动效设计也应该有的体验原则
来新的项目组后发现我司产品很喜欢加动效，动效需求很多，造成了端内各种互斥以及视觉焦点凌乱的情况出现。
站在交互的角度考虑，动效是用来辅助设计的一种形式，而不是作为一个需求来无脑添加的~
下面这句宝强哥哥说的话很恰当的说明动效的作用，就是要精准辅助设计在用户场景恰当使用的。
于是交互这边写了一套产品设计动效体验设计原则和规范
原则进而也可以演变为设计师自己的走查表。
以后再做动效类的需求时，设计师就可以利用原则进行自我走查，
也可以利用原则驳回产品的无理需求。
下面具体讲一下整体的产出过程。
因为能力有限，首先是看了下官方的原则参考作为整个产品的基础性原则。记录在此算是自己的设计笔记和知识积累。
第一个就是经典的iOS人机交互指南
第二个是新版Material Design原则，详细的可以点这里：
Material Design专门针对动效也产出了很多细致的内容，具体简单翻译如下
Motion－为什么要做动效
- 1 不同视图之间的焦点引导。
- 2 当用户完成了一个手势后，提示用户将会发生什么
- 3 明确元素之间的层级和空间关系
- 4 当程序在后台运行时，分散用户的注意力
- （例如获取内容或载入下一个视图）
- 5 润色整个app：个性化、令人愉悦
1 响应（Responsive）
迅速精确响应用户用户所触发的内容
在移动设备上的长动画大约是300-400ms，短动画大概是150-200ms。过长的动画让人感觉迟钝，过短的动画让人觉得难以看明白。
2 自然（Natural）
通过模仿真实世界的力，而展现了自然的运动过程。
真实世界的物体可以被重量、表面摩擦力影响很快的加速或减速。所以动效设计也是不会发生突然停止或启动，都是会有一个加速度或者减速度。（红色没缓动，蓝色有缓动）
3 可察觉的（Aware）
可以被周围环境察觉的，包括用户和周围其他的元素
作为过渡元素，和周围元素的运动是精心安排的，可以通过这个过程看出他们之间的关系。
4 有引导意向的（Intentional）
动效能使焦点在对的时间聚焦在对的点
转场动效有助于引导用户进行下一步的交互。
动效可以传递不同的信号，例如，一个操作是否不可用。
动效能使用户特定对象。
Material Design告诉我们，好的动效设计应该遵从以下3点：
1、速度——不应让用户不必要的等待。
2、明确——转场动画应该明确，简单，一致。应该避免一次有太多的元素动效。
3、统一——动效是由速度、响应性、和意向所统一的。在App中的任何动效体验都应保持一致。
同时，Material Design在动效的时间上也给出了参考
移动设备
移动设备上，动画通常会持续300ms左右：
大而复杂的全屏移动设备上，通常需要更长的持续时间，375ms左右。
物体进入屏幕的持续时间大概是225ms。
物体离开屏幕的持续时间大概是195ms。
动画超过400ms会显得慢而拖沓。
大屏幕移动设备
在大屏幕移动设备上，同一时间段内，物体移动较长的距离速度比移动较短的距离更快。越大的屏幕物体移动的持续时间应该更长，这样动效不会显得太快。
平板设备
平板设备上动效的持续时间应该比移动设备长30%左右。移动设备上300ms的持续时间，在平板设备上应该是390ms左右。
可穿戴设备
可穿戴设备上的动效时间应该比移动设备上短30%左右。移动设备上300ms的持续时间，在可穿戴设备上应该是210ms左右。
第三个参考原则是：Fluent Design System详细网址：https://fluent.microsoft.com
根据官方原则的盘点和详细阅读之后，我开始对端内的动效设计进行了总结和归纳
这里就不方便用我们自己的产品来举例了，就直接写出最后的整理总结。
当然除了基础功能动效还有一类就是英雄动效
是在基础功能部分都满足的情况下，辅助其他有趣的动画或功能。能让人眼前一亮，娱乐用户。并让他们一想到动画就能想到该产品或者反之。
这类动效，没有明确的划分，应该按照不同场景配合功能、品牌设计动效。
下面就开始讲述我自己最后产出的端内动效体验设计原则
第一个原则是基础原则，也就是在接到动效类需求时的最基础原则
“目的明确原则”
具体来说也就是明确需求背景，动效的商业价值以及预期目标，防止增加无关动效。
1、明确添加动效的产品背景
设计初期，明确需求，明确数据与业务背景。 综合衡量整个产品，不为设计而设计，不为创新而创新。
2、明确希望到达的预期目标
设计师能够对动效对用户带来的感知有一个大致的预期。 明确日后用何数据来考证动效的价值（如UV 点击率、留存率、满意度、认知度、舆情反馈）
3、明确是否有必要用动效来解决，同时也要明确产品的开发能力
4、明确需要传达的产品信息，
这里的信息会有很多可能，可以是：趋势、来源、去向、结构、情感、属性，等。运用合理的动效传递信息，能大大增强产品的表现力，同时也能减少用户的理解成本
第二个原则也属于基本设计的原则，就是“一致性原则”
动效属于整个产品组件的一部分，应该符合产品的一致性。
- 1、视觉一致性：动效中出现的组件样式、UI样式的一致性
- 2、交互一致性：逻辑原则、出现消失、用户点击、转场的一致性。
同时也应该紧随市场及设计规范发展，保证动效的适宜。当无法确保用户体验的动效可以采用实验的方法来验证，尝试创新。
以下的土豆视频，动效设计就充分的展示了品牌的一致性，品牌元素贯彻始终。
第三个原则是效果适宜原则，主要是由视觉设计师把控，完成对动画效果的呈现。
频率不过快或过慢， 动效能否复合用户预期，
动效涉及多个元素或者界面层级时，除了有效表现元素属性变化以外，还应将这些元素之前的关系传递出来：譬如：主次、联动、并列先后、因果，等。
在此基础上，给视觉同学充分发挥的空间，展示创意。
第四个原则是交互同学需要整体把控的，我把它定义为聚焦用户原则，也就是时刻要以用户视角来审视。
1、应顺应用户的操作路径与真实场景。
2、遵循真实的自然物理状态
这个原则上面官方原则也反复的提及过，符合真实物理状态才是符合用户预期和感知的动效。
在宏观物理世界（人类可观测）的所有的运动，都是符合经典物理定律的，动效的如果不自然，也就是源自运动方式并不是人们日常生活中常观察到的，用户就无法从运动想象其背后的物体属性及关系。
动效展现自然且复合物理现象 配合的交互手势自然友好 提示愉快而不突兀 保障多元素的自然衔接与过渡。
3、给用户以控制感
考虑动效能否被用户关闭且关闭后的场景体现，都是能够在用户把控范围内的。
4、无视觉干扰与障碍
我们客户端因为有多个PM，提的需求太多，累计起来就会出现动效互斥的情况，没有互斥也会出现视觉焦点凌乱，这时候交互要做的就是， 防止动效与其它功能操作发生干扰或冲突，同时也防止与其它动效发生干扰与冲突，在一些场景下多个动效出现时的时间间隔也需要控制。
最后一个原则是情感传达原则，也是动效能够发挥亮点作用的核心， 保持一致性与官方原则的基础上，考虑用户的心理情感，用动效创新体验。
例如：大众点评这个东西就有很强的感染力~~
UI中国
作者：下凡凡