Motion-Material motion

Motion in the world of material design is used to describe spatial relationships, functionality, and intention with beauty and fluidity.
用material design世界中的移动来描述空间关系,功能和完美流畅的动作。

Contents
Why does motion matter?
How does material move?
What makes a good transition?
Implications of motion

**Why does motion matter? **为什么motion很重要
Motion shows how an app is organized and what it can do.
Motion显示了应用程序的组织方式,以及它可以做什么

Motion provides:

  • Guided focus between views
    引导view之间的焦点
  • Hints at what will happen if a user completes a gesture
    提示如果用户完成一个手势会发生什么
  • Hierarchical and spatial relationships between elements
    元素之间的等级和空间关系
  • Distraction from what’s happening behind the scenes (like fetching content or loading the next view)
    分心于幕后发生的事情(比如获取内容或者加载下一个界面)
  • Character, polish, and delight
    特征,优雅和趣味

Related 相关内容
Making Motion Meaningful

How does material move?
material是如何移动的?
The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other.
material环境从现实世界的力量中吸取灵感,比如重力和摩擦。这些力量反映在用户输入影响屏幕上的元素以及元素如何相互响应的方式。

Material in motion has the following characteristics:
material的移动遵循以下特点
****Responsive****
Material is full of energy. It quickly responds to user input precisely where the user triggers it.
material是充满活力的,它能很快地在用户触发的地方响应用户的输入。

Larger animations on mobile devices are 300-400ms long. Smaller animations can be as short as 150-200ms. Animations longer or shorter than these can feel sluggish or difficult to follow.
移动设备上的较大的动画持续300-400ms.较小的动画就像150-200ms一样短。比这些更长或更短的动画可能会让人感到迟钝或难以感触到。
See more in Common Durations.

Ink ripples confirm user input by immediately expanding outward from the point of touch. The card lifts to indicate an active state.
油墨波纹通过立即从触摸点向外扩展的动画来确认用户输入。
See more in Radial reaction.

Show the connection between new surfaces and the element or action that creates them.
显示新界面与创建它们的元素或动作之间的关系。
See more in Creation.

****Natural**** 自然
Material depicts natural movement inspired by forces in the real world.
material描绘了由现实世界中的力量启发的自然运动
In the real world, an element’s ability to speed up or slow down quickly is affected by weight and surface friction. In a similar way, starts and stops do not occur instantaneously in material design.
在显示世界中,元素的快速加速或减速的能力受重量和表面摩擦力的影响。在相似的方法中,开始和结束
不会再material中瞬间发生。
See more in Natural easing curves.

Real-world forces, like gravity, inspire an element’s movement along an arc rather than in a straight line.
现实世界的力量,如重力,激发元素沿弧线而不是直线的运动
See more in Movement.

Material transformations follow an arc of movement.
material变换遵循运动弧。它可以吸引到元素,并适当地响应用户的意图
See more in Transforming material.

Aware
Material is aware of its surroundings, including the user and other material around it. It can be attracted to elements and respond appropriately to user intent.
material知道他的周围环境,包括用户和周围其他的material。
See more in Choreography.

As elements transition into view, they and their surroundings are choreographed in a way that defines their relationships.
一旦元素转换为view,他们和他们的周围环境是以一种定义他们的关系的方式进行编排的。

Material can push other material out of the way.
material能够把其他的material推出去。

Elements may attract other elements and join with them as they approach one another.
元素可以吸引其他元素,并且一个挨着一个地连在一起。

****Intentional****
Material in motion guides focus to the right spot at the right time.
运动指南中的material在正确的时间将焦点集中到正确的位置。
See more in Continuity.

A transition helps guide the user to the next step of an interaction.
过渡动画有助于指导用户进行交互的下一步

Movement can communicate different signals, such as whether an action is unavailable.
运动可以传达不同的信号,例如一个动作是否不可用

Animation can bring focus to elements that need user attention.
动画可以将重点放在需要用户关注的元素上

What makes a good transition?什么是一个很好的过渡
Successful motion design possesses the following characteristics:
成功的运动设计具有以下特点:
****Motion is quick****
An interaction shouldn't keep the user waiting longer than necessary.
互动不应该让用户等待更长的时间。

Do. 官网视频
Animate quickly so that the user never has to wait for the animation to finish.
快速的动画可以让用户不必再去等待动画完成。
Don't. 官网视频
Staggering and slowing the movement of many elements can lengthen the duration.
不稳当的滑动和减速的运动可以延长持续时间。

****Motion is clear****
Transitions should be clear, simple, and coherent. They should avoid doing too much at once.
移动应该是清晰,简单和连贯的。他们应该避免一次做太多事情。

Do. 官网视频
Maintain a clear path into the next view, even while elements are choreographed as a group.
即使元素被编排为一组,也要保持明确的路径进入下一个view。
Don't.
Transitions can get confusing when multiple items need to move in different directions or cross paths.
当多个元素需要移动到不同的方向或者通过不同的路径,过渡动画可能被拒绝。

****Motion is cohesive****
Motion是有凝聚力的
Material elements are unified by their speed, responsiveness, and intention. Any customizations to your app's motion experience should be consistent throughout the app.
material元素由速度,响应性和意图统一起来。对应用motion体验的任何自定义都应在整个应用程序中保持一致

While these apps have different functions, their similar animation experiences make them feel related.
虽然这些应用程序具有不同的功能,但它们类似的动画体验使他们看起来相关联。

Implications of motion
motion的意义
The benefits of these motion patterns are observable in the following two examples, in which an app that follows these patterns is compared with an app that does not.
在以下两个示例中可以看到这些运动模式的好处,其中将遵循这些模式的应用程序与不具有这些模式的应用程序进行比较。

Do. 官网视频
During the transition, the user is guided to the next view. The surface transforms to communicate hierarchy. Loading occurs behind the scenes to reduce perceived latency.
在过渡期间,用户被引导到下一个view。平面转换为通信层次结构。后台加载会降低感知延迟。
Don't. 官网视频
It is unclear how the new view is related to the old because no transition occurs and there isn’t a clear focal point. Any sense of hierarchy isn’t communicated, and loading is more apparent by the display of a circular spinner.
目前还不清楚新观点如何与旧的相关,因为没有过渡发生,没有明确的焦点。任何层次感都不会传达出来,而通过显示圆形微调器,加载更加明显。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,319评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,801评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,567评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,156评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,019评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,090评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,500评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,192评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,474评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,566评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,338评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,212评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,572评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,890评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,169评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,478评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,661评论 2 335

推荐阅读更多精彩内容