一、可用性价值
动效很容易被象成某种增强愉悦的东西，自身并具备么值。被当做可有可无分，通作为最后一步点缀。实际上，效是一种更级的设计展现形式：表达界面元素在交互事件的行为作。它在用户体验中的价值以分为：信息互、操反馈、缓负面情绪、创造个优雅的愉悦验。
1. 信息交互
元素的状态生变化时衔接的动效，使渡更自。同时，引导用户在视图中的视焦点，暗示元素之间的级关系。
△ 反馈操作&反馈状
2. 操作反馈
用户交互素变化，为操作提供可视化的实反馈。建立起虚拟素真实界之间的认知系，让操作符用户的直觉。
△ 反馈操作&反馈状态
3. 缓解负面情绪
等待，让用户感到焦虑；报，让用户感到挫败。加入有趣动画可以缓解负情绪，提高用户品容忍度。
△ 缓解待&错误焦虑
4. 创造个性优雅的体验
产品中展示品牌调性的趣性动效，可以强化品牌的认知，创造愉悦的使用体验，加深用户对产品的认可度。
△ 动效创造性优的体验
二、设计原则
动效通过模拟真实世界的运动，建立起用户与手机屏幕内虚拟世界的认知连续，从创造出符合用户认知习惯的操作体验，使 APP 的操作自然流畅。
时，品不特性所表现出来为和动作也不尽相。所以，品特性亦会动效设计有所影响，并生指导和约束。
△ 品关键词和动效原则
安全、专业、赖、便捷、想象力是支付宝品特性五个关键词，从这五个关键词我们挖掘和导出动效设计的四基本原则：真实自然、速响应、简单明了、刻意编排。
1. 真实自然
动效蕴含了元素的运动规律、质特性、空间关系、属性变化，这些应该符合真实世界的理规律，不能增加用户的理解认知本。
运动律
真实世界的运动遵循基本的理规律。体受力发变化时，运动状态会发变化。根据牛顿的力学律，我们可以得到了符合运动规律的两条二维曲线。
曲线一：匀速运动
根据顿第定律——惯性定律，「任何物体都要保持静止状态或匀速线运动状态，到力迫使它改变运动状态。」
下面的动画展示了物体达目的地的过程是「静止 – 匀速运动 – 达」，没有加速和减速的过程。由于阻力的存在，模拟出来的匀速直线运动在真实界中是基本不存在的，所以动画效果起生硬不然。计中一定要避免这种生硬的动效。
△ 匀速直线运动
曲二：匀加减速运动。
根据牛顿第二定律：「物体速的大小跟作成正，跟物体的质量成反，且与物体质量的倒数成正；速的方向跟作的方向相同。」
下面的动画展示了体到达目的的过程「静止 – 加速运动 – 减速运动 – 到达」，静止运动状态的转换过程中加入了加速减速的过程，这符合自然的基本规律，所以动画看起自然了很多。
△ 匀加减速运动
质特征
好的动效满足了基本的理原则之后还很多「质」的细节补充，质特征影响到体的质弹性。
前运动规律讲到物体加速度和质量成反比，所以材质特征会影响到运动曲线具体曲率，下图曲线描述了和轻两材质物体运动曲线。
△ 不材质物体运动曲线
曲线一：加速度<减速度
相同境，一样的正向力，同等的位移，重的物加速度小，需要更长的加速时间和更短的减速时间。
△ 厚重迟缓的运动
曲线二：速>减速
相同环境，一样的向力，同的移，较轻的体加速度较，需短的加速时间的减速时间
△ 轻盈敏捷的运动
我们实体验下两运动曲线下动效感受，发现用曲线动效感觉厚迟缓，曲线动效感觉轻盈敏捷。
综安全、专业、赖、便捷、想象力的征，可以推导出品牌征对材质方面的要求：牢固坚韧、准可靠、敏捷轻盈、灵性活力。所以，支付品牌的动效材质应该是偏轻和偏硬。
为表现品牌便捷、想象力的特征，我们一般情况应该选择看来轻盈便捷的动效曲。
空间关系
手机的屏幕空间有，但是元素运动的却不一定仅屏幕以内。所以有运动是用户见的，有运动是用户不见的。
△ 屏幕空间外的运动
从上图我们可看到：当元素离开屏幕时，后半的减速过程可见；当元素进入屏幕时，前半的速过程可见。，这两种场景应该分别使速、减速两条同的曲线。
△ 速曲线&减速曲线
2. 快速响应
我们的效应该快速准确地对户的操作做响应。效的时间一般宜过长，过长的效反而户感觉拖沓干脆。面的效分别了600ms 和300ms，我们可明显的感觉到时间太长会给人拖沓的感觉。
△ 快速敏捷 VS 冗长拖沓
人的反应分种：条件反射 – 50ms，僵尸反射 – 100ms，意识处反射 – 200ms 上。
了让我们的动效看起不那么仓促硬，动效的短时间建议250ms 以。另外根据人眼的视觉停留特性，50ms 的以的时间度变化用户可感知的。所以，我们应该以250ms 基数，以50ms 的倍数梯度，义划分动效的时。
3. 简单明了 & 刻意编排
动效简单明了，并保持连贯，避免同时加入太多效果。动效的编排目的，么提升可用性，么加强品牌感知。
1. 唯一的动效主体
用户交互出发的动效应该对应唯一的动效主体，以便对应操作触发点动效反馈之间的对应关系，避免眼花缭乱的感觉。
页发生变化时，需考虑元素进⼊序和进⼊逻辑，保证信息有效被传，时符合用户阅读规则。在设计过程需考虑元素主，进有效划分，从而使动效自然、流畅。
2. 近原则
用户触发动作展开，弹出元素时，应告知⽤户元素来及从属关系，明确触发区域和反馈区域关系，时应避免动效幅度过⼤，影响⽤户阅读内容。
三、动效规范
前讲了我们动效设计应该遵循大原则，这些大原则落实到具体设计会以更详细参数规范指导我们动效设计。动效设计参数括：缓动曲线、时长度、弹性系数。
1. 缓动曲线
为了让动效真实自然，个动效都应该设缓动曲线。并根据不运动场景选择统曲线。
△ 运动曲线
2. 时间长度
动效既要快速响应，要优雅从容，所以，我们以大脑反应时为基准（250ms），以眼分辨能力为梯度（50ms），统定义不场景动效时长规范。
△ 动效时长表
- 色变、透明度：icon、文字渐隐渐，250ms；
- 弹出：弹框、Toast、Tips，荐350ms，可根据体积选择时梯度；
- 屏幕范围的位移：屏幕横向距离300ms，纵向距离600ms，中等距离350ms，距离250ms；
- 移屏幕：根据对象的积选择时间梯度，推荐350ms；
- 移屏幕：根据对象的体积择时间梯，推荐300ms；（表示「抛弃」的画需要抛快一点，同时户对退之后的页面一般是有心准备的）
- 黑色遮罩层出：时间度配合界面其他元素；
- 黑色遮罩层消失：时长度配合界其他元素；
- 呼吸循环类：1500ms。
3. 回弹次数
一些特殊场景：Tips 弹出、缩小……较小元素需重点突出，或者发弹性形变的时候，动效需一回弹的过程。我们统一义回弹的次数一次，回弹的变目标变的10%。
△ 弹性曲线
4. 输出标准
动效设的实很程度涉及到发。如果我们只给发一段视频或者动画效果，他们不能完全符合我们的望。所以，我们应该按照程化的语言将动效标注给发，注明元素的变化状态、变化数、持续时间。
动效输出模版.sketch
浙公网安备33011002017549号