新版MATERIAL DESIGN 官方动效指南(二)

Material Design的动效设计 是响应式的,自然的。使用缓动曲线和持续时间模式可以创建平滑、一致的动效。

Material Design的动效设计是响应式的,自然的。使用缓动曲线和持续时间模式可以创建平滑、一致的动效。

速度

某个元素移动或者改变状态的时候,运动速度应该足够快,使用户不用等待。出现频率高的转场动画应该短一点,而有些转场动画要慢一点,来保证用户能理解它。

新版MATERIAL DESIGN 官方动效指南(二)

正确:动效应该足够快,让用户不用等待动画完成。

新版MATERIAL DESIGN 官方动效指南(二)

错误:不要做无意义的拖延。

动态持续时间

应该调整每个持续时间,来适应不同的移动距离、每个元素的速度、和表面的变化。而不是所有动画都用同样的持续时间。物体离开屏幕应该是一个很短的持续时间,这样用户就会减少对他的注意力。

新版MATERIAL DESIGN 官方动效指南(二)

当物体需要移动较大位移,或有很巨大的变化时,应该占用更长的持续时间。

新版MATERIAL DESIGN 官方动效指南(二)

当物体移动较小距离,或者有很微小的变化时,应该减少持续时间,这样就不会使动效看起来很慢很迟钝。

通用持续时间

移动设备

移动设备上,动画通常会持续300ms左右:

大而复杂的全屏移动设备上,通常需要更长的持续时间,375ms左右。

物体进入屏幕的持续时间大概是225ms。

物体离开屏幕的持续时间大概是195ms。

动画超过400ms会显得慢而拖沓。

大屏幕移动设备

在大屏幕移动设备上,同一时间段内,物体移动较长的距离速度比移动较短的距离更快。越大的屏幕物体移动的持续时间应该更长,这样动效不会显得太快。

平板设备

平板设备上动效的持续时间应该比移动设备长30%左右。移动设备上300ms的持续时间,在平板设备上应该是390ms左右。

可穿戴设备

可穿戴设备上的动效时间应该比移动设备上短30%左右。移动设备上300ms的持续时间,在可穿戴设备上应该是210ms左右。

新版MATERIAL DESIGN 官方动效指南(二)

动效元素在大屏幕设备上会移动很大的距离,动画可能会比小屏幕设备上看起来略为放缓。

桌面

桌面动画应该比移动设备上的动画更快、更简单。通常只会持续150ms到200ms。

由于桌面动画可能不太引人注目,他们的响应应该更敏捷、更迅速。

复杂的网页动画肯能会导致掉帧(除非他们专门为GPU加速)。更短的持续时间可以让动效快速完成,减少注意。

新版MATERIAL DESIGN 官方动效指南(二)

桌面动效明显看起来更快。

自然的缓动曲线

缓动曲线可以对物体的速度、透明度、大小产生效果。

新版MATERIAL DESIGN 官方动效指南(二)

加速和减速变化应该是应该是平滑的贯穿于动画的持续时间之中的,使动效看起来不会那么机械化。(红色无缓动,蓝色有缓动)

新版MATERIAL DESIGN 官方动效指南(二)

当加速和减速不对称时,动效会看起来更自然,更令人愉悦。(红色对称,蓝色不对称)

缓动曲线

缓动曲线可能会在不同的平台或者软件上有所不同。不同平台上的缓动曲线准则会涉及到普通缓动曲线、减速缓动曲线、加速缓动曲线,和急转缓动曲线。

标准缓动曲线

这是最常见的缓动曲线。物体可以根据在屏幕上的位置迅速加速或缓慢减速。这个曲线适用于增加或减少元素,和其他属性的变化。

新版MATERIAL DESIGN 官方动效指南(二) 新版MATERIAL DESIGN 官方动效指南(二)

减速曲线(“缓出”)

物体全速进入进入屏幕时,然后慢慢减速静止在屏幕上的某个点。

在减速过程中,物体可能从很小变到正常大小,也可能从透明变到不透明。有时候,当物体透明进入屏幕,可能从稍大的大小缩小到正常的大小。

新版MATERIAL DESIGN 官方动效指南(二) 新版MATERIAL DESIGN 官方动效指南(二)

加速曲线(“缓进”)

物体离开屏幕是以全速离开,他们离开屏幕时不会减速。

新版MATERIAL DESIGN 官方动效指南(二) 新版MATERIAL DESIGN 官方动效指南(二)

急转曲线

急转曲线被用于随时离开屏幕随时回到屏幕的情况。

物体可能会在屏幕上某一点迅速加速,然后以一个对称的曲线快速减速运动到屏幕外的某一点。减速会稍快于标准曲线,因为他们不会尊循于一个准确的路径到屏幕外的某一点。物体可能会随时回到原点。

新版MATERIAL DESIGN 官方动效指南(二) 新版MATERIAL DESIGN 官方动效指南(二)

本章到此结束,如果想提前阅读可到:https://www.google.com/design/spec/motion 查看。

 

译文来自:优设

原文地址:google.com

译者:@平行煎餅

 

系列文章直达电梯

1)新版Material Design 官方动效指南

2)新版MATERIAL DESIGN 官方动效指南(二)

3)新版MATERIAL DESIGN 官方动效指南(三)

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/29209/

(0)
CatherineCatherine
上一篇 2017-05-23 13:34
下一篇 2017-05-23 15:33

相关推荐

  • 十二条动效体验原则

    如果你想要了解更多背景信息,建议先阅读我的前一篇译文《动效的基本常识》,其中介绍了动画与动效的差异、即时与非即时的定义、动效提升可用性的四种方式(可预期、连续性、表述性、关联性)、以及理论、手段、属性与值之间的关系。

    2017-04-28
  • 如何才能读懂甲方给出的设计需求?

    转到交互岗已经有一阵子了。原来在做产品的几个月里没少和技术、设计进行沟通,每当自己把意思想法传达下去的时候,反馈回来的结果基本都要进行进一 步的修改,这种返工和修改在产品快速迭代的过程中很浪费时间。当时自己没有觉得表达有问题,已经把需求的目的结果都表达清楚了。可能是自己没写过代码、没 做过设计所以在一些专业的术语的表达上,方案实现方式的选择上存在偏差,导致技术、设计没有完全按照自己设想的预期做出结果。

    2017-05-24
  • 看了都说好!如何建立交互设计自查表?

    强烈推荐!很多同学做设计的时候经常会漏掉这个漏掉那个,等到开发来问的时候才想到。现在有了网易同学自创的自查表,可以把一些问题提前预防起来,文章系统全面,条理性强,是不可多得的实用好文呦。飞灵:对于移…

    2017-08-01
  • 【用户体验.春节特辑】一本相册(总第269期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第269期我的发小蔡廷是我们这座江南古镇的一位”达人”,这并非他有什么才气,而是他的行为举止与这座千年古镇淳朴温和的民风相违和。天气刚有点热他便剃了个秃瓢,赤裸着上身,永远穿着条军裤,再热也不换装。腹部有两条贯腹的伤疤,象两条粗大赤红的蜈蚣僵卧其上。他从不拉帮结派,依附于任何人,不欺行霸市,不欺凌老弱,但是蛮不讲理。他...

    2018-02-20
  • 思路总结:从体验设计角度做有效竞品分析

    本文作者总结了自己在实践中学习和应用过的竞品分析思路,一起来看看~

    2017-05-05
  • 【笔记】对话十五年设计老兵问答实录

    2017年10月28日,UXRen深圳分舵举办了《对话十五年设计老兵:提问&分享&讨论》的分享活动,本文基于嘉宾刘云天设计总监的问题回答整理而成。   活动笔记(by A.King & 绿宝): 问题1:你在腾讯10年的…

    交互专题 2017-11-13
  • 交互设计七大定律之Occam's Razor 奥卡姆剃刀原理(简单有效原理)

    最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。 最近在整理交互设计七大定律,文章要系统的看。 目录:【交互设计七大定律】关于交互设计法则“除非有更好的选择,否则就遵从标准——交…

    交互设计 2015-08-27
  • 《破茧成蝶》读书笔记——修炼用户体验设计师的技能

    【文章摘要】本篇为我的部分读书笔记,所以看到什么,觉得还比较有用就顺便写了下来,内容并不一定适合所有人。 作者:iamzhaowr 完整读书笔记请去我的简书页面阅读 关于《破茧成蝶》 推荐京东购买:链接 本书由资…

    2016-04-08
  • 用户体验丨有一点,我特别不服:我一向健康,这本“生命说明书”却告诉我,风险无处不在!

    我与优福的故事聚 集 幸 福 之 因[图片]癌症,是人们的恐惧中心。很多人平时身体棒棒,突然就倒下了,永远的离开。比如我婆家的姑爷,发现时已经晚了,无力回天[图片][图片][图片]。2013年,安吉丽娜·朱莉检测了自己的基因,发现乳腺癌症易感基因患癌率是87%!她提前知道,提前预

    微信热点 2018-02-01
  • 7个未来网页设计的发展

    太多的文章会告诉你什么是酷的在网页设计中。 我要带你做一些真正的预测。 1. 手势是新的点击 我们忘记了滚动网页曾经是多么困难。 大多数用户会刻意将鼠标移动到屏幕的右边缘,使用一些“古代”称为“滚动条”: 作为一…

    2015-08-19