CoderTaskAndroid开发经验谈Android开发

Material Design之Motion

2017-08-28  本文已影响313人  XiMiMax

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


运动的作用

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

如何运动

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

  1. 响应


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


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


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


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

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

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

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

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

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

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

标准曲线

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

减速曲线

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

加速度曲线

加速度曲线

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

锋利的曲线

锋利的曲线

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

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

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

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

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

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

上一篇下一篇

猜你喜欢

热点阅读