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

阅读数:1 2020 年 1 月 6 日 18:22

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

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

评论

发布