上一章 概述

缓动和持续时间

UX百科编辑部2024-07-04 发布
201人在学·0条笔记
收藏

建议缓动和持续时间对照表

选择合适的缓动和持续时间组合可能很复杂。作为一个简单的起点,这些是适用于大多数过渡的合理默认值。

缓动类型

在物理世界中,物体不会瞬间开始或停止。相反,它们需要时间来加速和减速。没有缓和的过渡看起来僵硬而机械,而有缓和的过渡看起来更自然。

1:有缓动的变化 2:无缓动的变化

与 M2 的实用风格相比,M3 的缓和更具表现力。过渡具有快速的起跳和非常柔和的着陆。

与 M2 相比,持续时间略长。这让过渡有时间平稳地结束,而不会让人感觉突然。

1:M2的缓动和持续 2:M3的缓动和持续

选择缓动设置

建议在大多数过渡中使用强调缓和设置来捕捉 M3 的风格。

标准缓动集可用于需要快速执行的小型实用过渡。标准缓动集也是不支持强调缓动的平台(如 iOS 和 Web)的后备选项。

在全屏过渡中使用了强调缓和效果
网页上的文本字段转换使用了标准的缓和效果。简洁的风格符合该组件的实用性。

选择缓动类型

缓动类型的选择基于屏幕上的移动关系。

在屏幕上开始和结束

这些过渡使用了强调缓和。它快速加速,然后缓慢停止,以强调过渡的结束。

进入屏幕

这些过渡使用强调减速缓动。它以峰值速度开始,然后缓慢地停止。

永久退出屏幕

这些过渡采用强调加速缓动。它从静止开始,以峰值速度结束。以峰值速度结束时,会给人一种无法收回退出部分的印象。

暂时退出屏幕

这些过渡使用了强调缓动。通过在屏幕外静止结束,给人一种可以检索现有组件的印象。

持续时间

过渡不应太快或太慢,以免用户感觉像在等待。持续时间和缓和的正确组合可实现顺畅且响应迅速的过渡。

过渡时长调整得恰到好处,既快速又方便
避免转场时间过短,造成生硬感

选择持续时间

持续时间是根据以下标准选择的:

过渡尺寸

覆盖屏幕小区域的过渡持续时间较短。覆盖大区域的过渡持续时间较长。根据过渡区域的大小缩放持续时间可带来一致的速度感。

这一小块区域的过渡效果,持续时间短至 200 毫秒
这一大片区域的过渡效果,持续时间长达 500 毫秒

进入与退出转换

退出、关闭或折叠元素的过渡持续时间较短。退出过渡速度较快,因为它们所需的注意力比用户的下一个任务更少。

进入或停留在屏幕上的过渡会使用较长的持续时间。这有助于用户将注意力集中在屏幕上的新内容上。

1:输入转换的持续时间较长,为 500 毫秒 2:退出过渡的持续时间很短,为 200 毫秒

Tokens 和 specs

设计资源:Tokens

缓动

强调缓动设置

这个系列是最常见的,因为它展现了 M3 的风格。

强调
强调减速
强调加速

设计资源

标准缓和设置

该集合用于简单、小型或以实用为中心的过渡。

标准
标准减速
标准加速

设计资源

持续时间

短持续时间

这些用于以小型控件为重点的过渡。

200ms的标准缓动

中等持续时间

这些用于中型控件的过渡。

FAB使用是400ms强调缓动

长持续时间

这些持续时间通常与强调缓动相结合。它们用于大型富有表现力的过渡。

一张扩展到全屏的卡片使用了长达 500ms 的持续时间和强调缓动效果

超长持续时间

虽然很少见,但有些过渡的持续时间超过 600 毫秒。这些通常用于不涉及用户输入的环境过渡。

旋转木马轮播过渡使用了 1000 毫秒的超长持续时间,并使用了强调缓动效果
201人在学·0条笔记
收藏
已学会
1人已学会
下一篇转场动画
转场动画模式 转场动画是连接应用程序各个元素或全屏视图的简短动画。它们是优秀用户体验的基础,因为它们可以帮助用户了解应用程序的工作原理。设计精良的转场动画能让用户感受到高品质的体验和丰富的表现力。对于一个强大的动作执行来说,它们应该是重中之重。 以下是六种常见的转换模式: 容器转换 向前和向后 横向...
本章笔记
仅看自己
logo