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

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

速度

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


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


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

动态持续时间

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


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


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

通用持续时间

移动设备

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

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

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

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

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

大屏幕移动设备

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

平板设备

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

可穿戴设备

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


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

桌面

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

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

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


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

自然的缓动曲线

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


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


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

缓动曲线

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

标准缓动曲线

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



减速曲线(“缓出”)

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

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



加速曲线(“缓进”)

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



急转曲线

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

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


译文来自:优设

原文地址:google.com

译者:@平行煎餅

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容