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.
目前還不清楚新觀點如何與舊的相關,因為沒有過渡發生,沒有明確的焦點。任何層次感都不會傳達出來,而通過顯示圓形微調器,加載更加明顯。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容