写点什么

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

  • 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:221163

评论

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

京东购物车分页方案探索和落地 | 京东云技术团队

京东科技开发者

京东云 京东商城 企业号 6 月 PK 榜 6 月 优质更文活动

构建系列之新一代利器Esbuild(上)

江湖修行

cli 构建 esbuild 前端‘’

一些对程序员有用的网站

小万哥

程序员 程序人生 运维 前端 后端

架构师日记-从技术角度揭露电商大促备战的奥秘 | 京东云技术团队

京东科技开发者

京东云 企业号 6 月 PK 榜 京东618

Amazon CodeWhisperer 编程助手试用总结

Hanson

短视频云端批量混剪实操指南

阿里云视频云

云计算 短视频 视频云 云剪辑

浪潮 KaiwuDB x 大数据中心 | 数据驱动政府治理能力快速提升

KaiwuDB

KaiwuDB 大数据中心建设

软件测试 | Selenium-RC工作原理

测吧(北京)科技有限公司

测试

C语言编程—递归

夜猫西街

想要更好地理解大模型架构?从计算参数量快速入手

Baihai IDP

人工智能 Transformer 大模型 白海科技 企业号 6 月 PK 榜

Flink实现高效实时处理百万级数据:实践与优化

xfgg

flink 6 月 优质更文活动

PoseiSwap的趋势性如何体现?

威廉META

深度学习应用篇-计算机视觉-视频分类[8]:时间偏移模块(TSM)、TimeSformer无卷积视频分类方法、注意力机制

汀丶人工智能

人工智能 深度学习 计算机视觉 视频分类 6 月 优质更文活动

PoseiSwap的趋势性如何体现?

鳄鱼视界

Docker化Spring Boot应用

越长大越悲伤

Docker Docker Swarm

PoseiSwap的趋势性如何体现?

西柚子

直播回顾 | 一体化智能可观测平台如何保障电商节大促

博睿数据

可观测性 智能运维 博睿数据 618 电商行业

STM32通过ADC1读取光敏电阻的值转换光照强度

DS小龙哥

6 月 优质更文活动

在 Go 中如何使用 database/sql 来操作数据库

江湖十年

MySQL 后端 Go 语言

【Netty】「萌新入门」(一)Hello, World!

sidiot

Java 后端 Netty 6 月 优质更文活动

C语言编程—递归

芯动大师

递归 C语言 6 月 优质更文活动

“全球金牌课程”8月5-6日 · CSM认证在线周末班【提前报名特惠】CST导师亲授

ShineScrum捷行

敏捷教练 Scrum Master CSM 敏捷项目管理

【差分隐私】基本原理与入门级应用 | 京东云技术团队

京东科技开发者

京东云 差分隐私算法 企业号 6 月 PK 榜

KaiwuDB 受邀亮相山东省数字化转型论坛

KaiwuDB

数字化转型 KaiwuDB

HummerRisk获中国开源创新大赛优秀奖

HummerCloud

开源 云安全

Java线程池三、调优和性能优化

echoes

Java 线程池

2023-06-11:redis中,如何在100个亿URL中快速判断某URL是否存在?

福大大架构师每日一题

redis 福大大架构师每日一题

深度学习应用篇-计算机视觉-OCR光学字符识别[7]:OCR综述、常用CRNN识别方法、DBNet、CTPN检测方法等、评估指标、应用场景

汀丶人工智能

人工智能 深度学习 计算机视觉 OCR 6 月 优质更文活动

微服务之负载均衡

Disaster

微服务

Service Mesh的主要实现原理

穿过生命散发芬芳

Service Mesh 6 月 优质更文活动

Sparkplug 规范中涉及 MQTT Broker 的 5 个关键概念

EMQ映云科技

通信协议 mqtt 工业物联网

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