Material Design之Motion


在Material Design中,运动被用来描述空间的关系,功能,流动美的意图。


运动的作用

  1. 引导布局中的焦点轨迹
  2. 引导用户的手势操作
  3. 展示元素之间的层次结构和空间关系
  4. 分散在幕后的事情(比如抓取内容或加载下一个视图)
  5. 提升用户体验
  6. Related - Making Motion Meaningful

如何运动

物质环境从现实世界的力量中汲取灵感,比如重力和摩擦力。这些力量反映在用户输入影响屏幕上的元素以及元素如何相互作用的方式上。

  1. 响应


    快速响应用户输入,准确地响应用户的触发
  2. 自然


    自然运动的灵感来自于现实世界中的力学
  3. 意识


    材料可以感知周围的环境,包括用户和周围的其他材料。它可以被元素吸引,并对用户的意图作出适当的响应。
  4. 意向性


    在正确的时间,运动指南中的有意材料将焦点放在正确的地点。

如何做到更好的连贯
成功的运动设计具有以下特点:

  1. 运动是快速
    交互不应该让用户等待的时间超过必要的时间。
  2. 运动是清楚的
    过渡应该是清晰、简单和连贯的。他们应该避免做太多的事情。
  3. 运动要统一
    物质元素的速度、响应能力和意图是统一的。任何对应用程序的动作体验的定制都应该在整个应用程序中保持一致。

合适的时长&自然的过度曲线

运动中的物质是响应性和自然性的。使用这些放松曲线和持续时间模式来创建平滑和一致的运动。

  • 速度
    当元素在位置或状态之间移动时,移动速度应该足够快,不会导致等待,但速度足够慢,可以理解转换。在用户经常看到的情况下,保持简短的过渡。

  • 动态的持续时间
    与其为所有的动画使用一个单一的持续时间,不如调整每个持续时间来适应运动的距离,元素的速度和表面的变化。
    离开屏幕的对象可能会有更短的持续时间,因为它们需要较少的关注。

  • 一般时长设定
    移动端上常见的持续时间移动转换通常发生在300毫秒左右,在这种差异的范围内:大的、复杂的、全屏幕的转换可能有更长的持续时间,超过400ms的过渡可能感觉太慢。
    大屏幕上的大屏幕元素的距离较长,其峰值速度要高于在同一时间段内较短的距离。更大的屏幕应该有更长的时间,这样移动的速度就不会太快。
    平板电脑的持续时间应该比移动设备长约30%。例如,在平板电脑上,300毫秒的移动时间将增加到390ms。
    可穿戴设备上的持续时间应该比移动设备短约30%。例如,在可穿戴设备上,300毫秒的移动续航时间是210ms。由于材料必须在更大的设备上移动更大的距离,所以过渡的时间可能比小的设备要慢一些。
    桌面的动画应该比他们的移动设备更快更简单。这些动画的效果应该是150毫秒到200毫秒。因为桌面转换可能不那么引人注目,所以它们应该立即响应,并且比移动设备更快。
    复杂的web转换通常会导致掉帧(除非它们是为GPU加速而构建的)。较短的持续时间将使这些不太明显,因为动画完成得更快。

  • 自然缓和曲线

这些自然的放松曲线会影响一个元素的速度、不透明度和尺度。
在动画的持续时间内,加速和减速的变化应该是平滑的,这样运动才不会显得机械。
当加速度和减速不对称地发生时,运动显得更加自然和令人愉悦。

根据使用的平台或软件,可以根据不同的平台来命名不同的曲线。
这些指导方针将把它们称为标准、减速、加速和锐曲线。

标准曲线

标准曲线

标准曲线是最常见的曲线。
在屏幕上的位置之间,元素会迅速地加速和缓慢地减速。
它适用于不断增长和收缩的材料,以及其他的财产变化。

减速曲线

减速曲线

使用减速曲线,元素以全速进入屏幕,并缓慢减速到一个休息点。
在减速过程中,元素可以在大小(到100%)或不透明度(到100%)中进行扩展。
在某些情况下,当元素以0%的不透明度进入屏幕时,它们可能会在进入时稍微缩小一些。

加速度曲线

加速度曲线

使用加速曲线元素以完全速度离开屏幕。
在屏幕外,它们不会减速。
在动画开始的时候,它们会加速,并且可以缩小到任意大小(到0%)或者不透明度(到0%)。
在某些情况下,当元素以0%的不透明度离开屏幕时,它们可能也会稍微放大或缩小。

锋利的曲线

锋利的曲线

使用锋利的曲线,元素会迅速加速和减速。
它是由退出元素所使用的,这些元素可能在任何时候返回到屏幕上。
元素可以从屏幕上的起始点迅速加速,然后在对称的曲线上迅速减速,然后在屏幕外的休息点迅速减速。
减速比标准曲线要快,因为它没有沿着偏离屏幕的精确路径。
元素可以在任何时候从那个点返回。

亲爱的读者 您好,写到这里思路瞬间断了 本文皆翻译自官网,而官网所展示内容我无法完美演示,所以在此附上官网链接https://material.io/ 想深 入了解学习 请移步官网。
我也是在学习过程之中,后续如果有收获、有能力的情况下, 会考虑重写此文章,深表歉意。

顺便提一句我的个人主页就是Material Design风格的,不信点点看DuYang_ZXM(https://duyangs.github.io/)

每星期至少一篇跟新本系列,感兴趣可以关注。一起学习,一起进步。

声明本文图片多数取自官网https://material.io/,转载请注明

上一篇:Material Design你真的了解吗?

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

推荐阅读更多精彩内容