【AICon】探索RAG 技术在实际应用中遇到的挑战及应对策略!AICon精华内容已上线73%>>> 了解详情
写点什么

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

  • 2020-01-06
  • 本文字数:2239 字

    阅读完需:约 7 分钟

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

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


2020-01-06 18:22993

评论

发布
暂无评论
发现更多内容

Spring经典面试题,帮你整理好了!(1),一个星期4轮面试终拿下offer

Java 程序员 后端

Web开发基础:HTML,java面试没问技术问题

Java 程序员 后端

windows下快速安装nginx 并配置 开机自启动,基础+底层+算法+数据库

Java 程序员 后端

《深入理解Java虚拟机 3》类加载机制与字节码执行引擎

Java 程序员 后端

Spring入门后半部分----JDBCTemplate和事务控制

Java 程序员 后端

Spring总结以及在面试中的一些问题,java面试笔试题代码

Java 程序员 后端

Tomcat服务器搭建及测试教程,java技术路线规划

Java 程序员 后端

zookeeper之java API使用,zookeeper学习

Java 程序员 后端

《恋上数据结构第1季》B树,java基础案例教程第二版答案

Java 程序员 后端

VIVO一面竟然翻车,含泪整理了这些Java面经,看完我悟了

Java 程序员 后端

YYDS,瞬间秒杀全网,这套Java面试笔记可以解决90

Java 程序员 后端

Spring中的循环依赖及解决,springboot入门与实践PDF

Java 程序员 后端

Spring经典面试题,帮你整理好了!,阿里P8大牛亲自教你

Java 程序员 后端

T-SQL——数据透视和逆透视,java架构师面试答案

Java 程序员 后端

[译] 微服务的设计模式,java后端面经

Java 程序员 后端

“我骑着我心爱的小摩托,他又在这里翻车了,mybatisdao接口工作原理

Java 程序员 后端

《JVM系列》 第六章 -- 对象的实例化与内存布局

Java 程序员 后端

《码出高效:Java开发手册,java基础编程视频

Java 程序员 后端

Spring动态代理时是如何解决循环依赖的?为啥用三级缓存?

Java 程序员 后端

super与this在成员变量,成员方法,构造方法方面的作用

Java 程序员 后端

VirtualBox虚拟机网络设置(四种方式),java高级程序员简历

Java 程序员 后端

Vue 脚手架结合 SpringBoot 构建前后端分离入门项目(实现增删改查)

Java 程序员 后端

《深入理解Java虚拟机 1》Java内存区域与内存分配策略

Java 程序员 后端

“三次握手,四次挥手,java程序设计教程第三版雍俊海pdf

Java 程序员 后端

《恋上数据结构第1季》二叉树代码实现,mongodb持久化原理

Java 程序员 后端

《Spring实战》读书笔记-第2章 装配Bean,kafka调优面试

Java 程序员 后端

Spring源码学习~循环依赖(面试必问系列,学java基础的心得体会

Java 程序员 后端

Spring源码解析(一)IOC,终于找到一个看得懂的JVM内存模型了

Java 程序员 后端

Threadtear:一款多功能Java代码反混淆工具套件

Java 程序员 后端

Tomcat是如何运行的?整体架构又是怎样的?,java面试经验技巧

Java 程序员 后端

“打工人”都在用的邮件使用规范,springcloud架构源码

Java 程序员 后端

流动之美·提升用户体验的交互动效(四)_文化 & 方法_Think体验设计_InfoQ精选文章