用过去的智慧引导 AI 变革,《架构师 2024 年(第二季)》开放下载。 了解详情
写点什么

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

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

    阅读完需:约 7 分钟

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

6 月 17 日,极客时间《企业级 Agents 开发实战营》正式上线,10 周掌握企业级 Agents 从设计、开发到部署全流程。

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:221033

评论

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

项目管理变更之交付目标的变化

L3C老司机

【盘点2020】机房网络性能哪家强?年度冠军揭晓

博睿数据

机房 评测

直播预告丨NLP领域的2020年大事记及2021展望

京东科技开发者

机器学习 AI nlp

看懂2020年智能浪潮,我们从百度和谷歌的AI足迹出发

脑极体

大数据知识专栏 - MapReduce的Combiner实现shuffle调优

小马哥

大数据 hadoop mapreduce 七日更

观看辽篮比赛,思考团队管理——关于团队的灵魂拷问,你中了几个?

伯薇

团队管理 团队建设 团队 赋能 激励

大数据知识专栏 -MapReduce 自定义排序技术

小马哥

大数据 hadoop mapreduce 七日更

京东架构师分享的 Redis学习笔记手抄版;

Java架构师迁哥

HTML(四)——建立超链接

程序员的时光

html 程序员 28天写作

重学JS | Web Workers让JS存在多线程环境

梁龙先森

编程 大前端 28天写作

程序员生产环境-软件篇

ITCamel

程序员 效率工具 工作效率

28天瞎写的第二百二十四天:食品专业的编程高手

树上

28天写作

HDFS中的常用压缩算法及区别

王知无

大数据 hdfs

1000公里续航动力电池背后的迷雾与真相

脑极体

管理者掌握这5个提问技巧,秒变提问高手

一笑

团队管理 管理 团队建设 提问的艺术 28天写作

Orleans 知多少 | .NET分布式框架

圣杰

dotnet actor orleans

LKA是如何实现的(28天写作 Day13/28)

mtfelix

自动驾驶 28天写作

Windows DHCP最佳实践(三)

BigYoung

windows Windows Server 2012 R2 DHCP

【并发编程的艺术】JAVA并发机制的底层原理

程序员架构进阶

Java 架构 并发编程 内存模型 28天写作

两层和三层网络架构差异

Android面试(二)

我就感觉到快

企业短信服务质量与用户体验如何监控?短信监测技术震撼来袭

博睿数据

短信 数据监测

【我给面试官画饼】软件测试理论基础、质量保证常见面试题——会被面试官赶出来吗?

程序员阿沐

面试 软件测试 测试工程师 质量保证

从烟酒茶说系统化学习

张老蔫

28天写作

数据倾斜?Spark 3.0 AQE专治各种不服

王知无

大数据 spark

基础不牢,地动山摇;自学进大厂的第18天!

Java架构师迁哥

JVM的内存分代,这篇文章帮你理一理

Java鱼仔

Java 面试 JVM

技术分享 | 漫谈音视频中的拥塞控制

拍乐云Pano

基于Prometheus+Grafana打造企业级Flink监控系统

王知无

大数据 flink 监控

Spring Boot 中使用拦截器

武哥聊编程

Java springboot SpringBoot 2 拦截器 28天写作

蔡超:这八点架构师感悟,真的很干货 | 大道至简

李忠良

28天写作

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