Design Point

Point 1. Easy Curves缓动曲线

以下图为例，大家可以观察到基础缓动曲线的速度变化，更多的缓动曲线可以查看：（如无法打开，请复制链接到浏览器打开）https://easings.net/zh-cn

一般而言，物体点到点之间的运动使用Ease-in-out，物体进场的运动使用Ease-out，物体出场的运动Ease-in。

Point 2. Response Time & Duration 响应时间及持续时长

动效本身是服务于产品影响用户体验的，且后期需要研发人员的开发，并非设计师的自娱自乐，每一帧都需非常严谨，每一个小元素的变化都需遵循一定的规律。

Response Time

响应时间指从用户执行操作到反馈出现的间隔时间。

触发机制不同，响应时间的限制也不同：
对于由用户操作直接触发的反馈，理想的响应时间应该控制在 100毫秒内；
对于由用户操作间接触发的反馈，响应时长可允许达到 1秒左右，不可超过2秒无反馈；
当超过2秒才能获取反馈结果时，须设计加载动效（loading）；
当反馈时间为 2-9秒时，可使用循环的加载样式（如常见的菊花转）；
当反馈时间超过10秒时，须使用带有进度指示的加载样式（如已加载了60%，还剩30秒）。

为了兼顾动效的效率、理解的便捷以及用户体验，动效应该在用户触发之后的0.1s内开始，在300ms 内结束，这样不会浪费用户的时间，还恰到好处。

参考：
Robert B Miller《人机对话的响应时间》：用户应当在0.1s内获得控件操作反馈，因为人类一次眨眼平均持续时间是0.1-0.15s，即0.1s的感觉就是瞬间。
Jackob Nielsen《响应时间：3个重要限制》：在完成一项操作1s左右的时间，用户会短暂进入心流状态，专注于获取响应，而超过2s用户会觉得失去了控制权。

Duration

交互微动效的持续时间一般不超过500毫秒 ( 加载动效除外 )。若你希望用户能清晰地捕捉到元素的渐进变化，持续时须大于200毫秒；若你不介意用户认为元素的改变是瞬间的，希望尽量节省用户时间，持续时间也可设计在 200毫秒以内（如hover到按钮上颜色瞬间发生微妙改变）。

小元素的轻微变化效果（如渐隐渐现、大小变化等小范围变化），一般在 200~300毫秒以内；较大元素的复杂变化效果（如包含大范围缓动位移），可长达 400-500毫秒。

在移动设备上的长动效大约是300-400ms，短动效大概是150-200ms。

平板设备上动效的持续时间应该比移动设备长30%左右。移动设备上300ms的持续时间，在平板设备上应该是390ms左右。

可穿戴设备上的动效时间应该比移动设备上短30%左右。移动设备上300ms的持续时间，在可穿戴设备上应该是210ms左右。

桌面动效应该比移动设备上的动效更快、更简单。通常只会持续150ms到200ms。

物体进入屏幕的持续时间大概是225ms，物体离开屏幕的持续时间大概是195ms。
动效超过400ms会显得慢而拖沓。

参考：
Vaihead《UI动效应该多快》：好的动效持续时间一般在0.2s-0.5s之间，因为在人脑处理模型中，捕捉到一个图像平均需要0.23s。

Point 3. Frame Rate 帧率

Frame Rate=60fps（基于当今主流趋势）
如需计算动效持续时长(ms) 首先需确定帧速率：
Duration =（1000/帧率）x帧数

参考：
视觉暂留：当人眼所看到的影像消失后，人眼仍能继续保留其影像约0.1-0.4s，要达成最基本的视觉暂留至少需要10fps；
传统电影帧率为24fps，已逐步向48fps甚至120fps发展；
游戏帧率为60fps，才能保障其顺畅不卡顿；
Android、iOS均使用60fps帧率，明显提升交互品质感，超过75fps则不易感知其差异；
电脑显示器刷新频率在60-75Hz。

Point 4. software 软件

如今制作动效设计软件种类较多成熟度较高，不同软件的侧重点不同，设计师根据具体项目的侧重点使用自己习惯顺手的软件即可。下面讲下我自己使用的动效设计软件供大家参考：

After Effects
首先是使用最多的Adobe的AE，顾名思义After Effects后期特效， AE其实是一款视频特效软件，很多大片的后期合成都是AE制作的，功能非常强大，可以做出超高精度的动效，普通的UI动效制作用到的基础功能对于AE来讲只是一小部分，几乎任何你想要的效果AE都可以制作。网上很多帖子说AE上手比较困难，个人感觉只要做过动画，有K帧的思维，大部分动效软件其实大同小异，但相较而言其他软件无法做的效果AE却可以实现，可玩性很强，很多Behance、Dribbble的一些概念稿都是用AE制作。但是AE在最终输出动效标注文档的时候比较繁琐，持续时长要用帧数自己计算，在研发人员开发时一起微调方案需要再次计算，贝塞尔曲线要使用插件（AE的缓动曲线插件FLOW，有兴趣的可以试下，效率利器）或者自己设置，自己设置的话输出很容易不准确。

Principle
Principle界面和Sketch类似，Sketch 的最佳拍档。在做页面间的过渡转场、元素切换等动效的功能十分强大。操作简单，效率高，内置了6种常用的缓动曲线（默认，线性linear、缓入ease-in、缓出ease-out、缓入缓出ease-in-out，弹性spring，默认曲线即Material Design定义的标准缓动曲线），联动功能也非常强大可以做出非常细微精致的动效，如果你做一些常规的动效设计使用principle制作demo简直太适合不过。同时Principle的动画参数可以直接获取，微调方案后输出也很方便，这些极大方便了与研发人员的沟通，相较AE省时省力，效率五颗星~

Flinto

Flinto界面也和Sketch类似，上手快，功能强大，可以支持整套整个产品的交互演示，支持Android。关于Flinto与Principle的区别，我做了以下总结：

本文转载自 DataFunTalk公众平台。

原文链接：https://mp.weixin.qq.com/s/uIH6QFjkHm10IEe6Nq0ZMQ

创作场景

流动之美·提升用户体验的交互动效（四）