Material Design Speed 速度

这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。

速度的调节使过渡平稳并且保有反馈。

目录

控制速度时长缓动

控制速度

转换速度是UI改变状态时的可见速度。它主要通过调节时长来控制,也可以通过缓动(随时间加速)和元素移动的距离来控制。

在调整时长之前应使用恰当的缓动类型,因为缓动调节可能影响时长。

用法

适当的转换速度可帮助用户理解UI的变化,而不会将任务复杂化。使用的最短时长不应导致中断或不和谐。

p32gts2ggjf.png插图

转换迅速且容易理解。

tc4aewhaaja.png插图(1)

避免转换太快或太慢。

时长

无论动画风格如何,转换都不应该过快而导致不和谐或者太慢而让用户等候。时长和缓动的适当结合会形成清晰流畅的过渡。以下因素详细说明了应如何调整时长来适配每个动画。

复杂程度

完成简单动画比复杂动画所需的时间更少。

简单动画

选择控件的时长为100ms

对话框以淡入淡出动效来进入和退出淡入时长:150ms淡出时长:75ms

复杂动画

形状变化更为复杂,所以它们有较长的时长200ms。

带有细节动画的图标时长为500ms。

退出和关闭

关闭、撤销或折叠等转换使用时长较短,因为相比于用户的下一个任务,它们不需要引起太多的注意。

抽屉导航打开时间约为250ms,关闭时间约为200ms。

这个卡片扩展时间约为300ms,折叠时间约为250ms。

区域

跨越界面中小区域的转换比那些跨越大区域时长更短。

小区域

在界面中跨越小区域的动画元素持续时间较短,例如图标和选择控制器。

开关动画的时长为100ms

中等区域

跨越界面中较大区域的动画元素持续时间稍长,例如底部动作条和可扩展纸片。

底部动作条

扩展:250ms折叠:200ms

纸片

扩展:250ms折叠:200ms

大区域

跨越界面中大区域的动画元素具有最长的持续时间。

卡片

扩展:300ms折叠:250ms

固定动作条

伸展:300ms折叠:250ms

缓动

缓动是调节动画速度变化率的一种方式。缓动允许转换元素加速或减速,而非以恒定速度移动。

在现实世界里,事物不会立即开始或停止运动,它们需要时间来加速和减速。缓动使元素的移动就像受到自然界的力量(如摩擦力)一样。

没有缓动的转换看起来既僵硬又机械。

p32gts2ggjf.png插图

使用缓动让元素一起加速或减速。这些元素的加速是同步的,达到了一致的效果。

tc4aewhaaja.png插图(1)

避免加速那些应该要减速的元素,这会导致效果凌乱。

缓动类型

缓动类型可以跨平台以不同的方式命名。可将它们称作标准缓动、加速缓动和减速缓动。

标准缓动

标准缓动通过给减速更多的时间,微妙地强调了动画的结尾。这是最常用的缓动形式。

开始和结束都为静止的元素使用标准缓动。它们使用快速加速然后逐渐减速来强调转换结束。

标准缓动元素在接近轨道终点时开始减速。其中Y轴表示位置,X轴表示时间。

平台协议AndroidFastOutSlowInInterpolatoriOS[[CAMediaTimingFunction alloc] initWithControlPoints:0.4f:0.0f:0.2f:1.0f]CSScubic-bezier(0.4, 0.0, 0.2, 1);

减速缓动

进入界面的元素使用减速缓动动画,它从峰值速度(元素移动时最快的点)开始转换并以静止结束。

使用减速缓动的动画元素快速进入并以静止结束。其中Y轴表示位置,X轴表示时间。

平台协议AndroidLinearOutSlowInInterpolatoriOS[[CAMediaTimingFunction alloc] initWithControlPoints:0.0f:0.0f:0.2f:1.0f]CSScubic-bezier(0.0, 0.0, 0.2, 1);

加速缓动

元素使用加速缓动退出屏幕,它们从静止开始并以峰值速度结束。

使用加速缓动的元素启动缓慢并在其运动轨迹结束时快速离开。其中Y轴表示位置,X轴表示时间。

平台协议AndroidFastOutLinearInInterpolatoriOS[CAMediaTimingFunction alloc] initWithControlPoints:0.4f:0.0f:1.0f:1.0f]CSScubic-bezier(0.4, 0.0, 1, 1);

原文地址:Material Design

译者:招财鱼

人已赞赏
UI设计

生鲜类电商产品「加入购物车」功能讨论

2020-10-12 22:05:59

UI设计

如何使用Google的“HEART框架”衡量UX指标

2020-10-13 0:04:31

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索