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

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