Направление и сила притяженияDirectionality and gravity

Направленные сигналы помогают закрепить ментальную модель пути, который пользователь проделывает в интерфейсе.Directional signals help to solidify the mental model of the journey a user takes across experiences. Очень важно, чтобы направление любого движения поддерживало и непрерывность пространства, и целостность объектов в пространстве.It is important that the direction of any motion support both the continuity of the space as well as the integrity of the objects in the space.

Направленное движение подвержено воздействию таких сил, как сила притяжения.Directional movement is subject to forces like gravity. Приложение силы к движению усиливает естественное восприятие движения.Applying forces to movement reinforces the natural feel of the motion.

ПримерыExamples

XAML controls gallery

Если у вас установлено приложение галереи элементов управления XAML, щелкните, чтобы открыть приложение и увидеть эффект движения в действии.If you have the XAML Controls Gallery app installed, click here to open the app and see Motion in action.

Направление движенияDirection of movement

Направление движения соответствует физическому перемещению.Direction of movement corresponds to physical motion. Так же, как в природе, объекты могут перемещаться по любой оси — X, Y, Z.Just like in nature, objects can move in any world axis - X,Y,Z. Так мы воспринимаем движение объектов на экране.This is how we think of the movement of objects on the screen. При перемещении объектов Избегайте неестественных конфликтов.When you move objects, avoid unnatural collisions. Помните о том, когда объекты берутся из и используются, и всегда поддерживают конструкции более высокого уровня, которые могут использоваться в сцене, такие как направление прокрутки или иерархия макета.Keep in mind where objects come from and go to, and alway support higher level constructs that may be used in the scene, such as scroll direction or layout hierarchy.

Короткое видео, показывающее круг, а затем добавить ось X, ось Y и ось Z.

Направление навигацииDirection of navigation

Для направления навигации между сценами в приложении характерна концептуальность.The direction of navigation between scenes in your app is conceptual. Пользователи переходят вперед и назад.Users navigate forward and back. Сцены появляются в поле зрения и уходят из него.Scenes move in and out of view. Эти концепции в сочетании с физическим перемещением помогают пользователю.These concepts combine with physical movement to guide the user.

Когда навигация вызывает перемещение объекта из предыдущей сцены в новую, объект просто перемещается из точки A в точку B.When navigation causes an object to travel from the previous scene to the new scene, the object makes a simple A-to-B move on the screen. Чтобы повысить реалистичность перемещения объекта, добавляется стандартная анимация, а также ощущение силы притяжения.To ensure that the movement feels more physical, the standard easing is added, as well as the feeling of gravity.

При переходе назад перемещение отображается в обратном порядке (из точки B в точку A).For back navigation, the move is reversed (B-to-A). Когда пользователи переходят назад, они рассчитывают как можно быстрее вернуться к предыдущему состоянию.When the user navigates back, they have an expectation to be returned to the previous state as soon as possible. Движение происходит быстрее, более прямолинейно и с замедлением в анимации.The timing is quicker, more direct, and uses the decelerate easing.

Здесь эти принципы применяются, когда выбранный элемент остается на экране при переходе вперед и обратно.Here, these principles are applied as the selected item stays on screen during forward and back navigation.

Пример непрерывного движения в пользовательском интерфейсе

Когда навигация вызывает вымещение расположенных на экране элементов, важно показать, куда уходит старая сцена и откуда появляется новая.When navigation causes items on the screen to be replaced, its important to show where the exiting scene went to, and where the new scene is coming from.

Это дает ряд преимуществ.This has several benefits:

  • Закрепление ментальной модели пространства у пользователя.It solidifies the user's mental model of the space.
  • Показ исчезающей сцены предоставляет больше времени для подготовки содержимого для анимации в появляющейся сцене.The duration of the exiting scene provides more time to prepare content to be animated in for the incoming scene.
  • Зрительное повышение производительности приложения.It improves the perceived performance of the app.

Существует 4 отдельных направления навигации, которые необходимо учитывать.There are 4 discreet directions of navigation to consider.

Пересылка Попраздновать содержимое, поступающее в сцену так, чтобы не конфликтовать с исходящим содержимым.Forward-In Celebrate content entering the scene in a manner that does not collide with outgoing content. Содержимое замедляется в сцене.Content decelerates into the scene.

направление вперед

Пересылка Содержимое быстро завершается.Forward-Out Content exits quickly. Объекты ускоряются с экрана.Objects accelerate off screen.

направление перенаправления

Назад То же, что и пересылка, но в обратную.Backward-In Same as Forward-In, but reversed.

Короткое видео, показывающее круг, который вводится справа от кадра и останавливается в середине рамки.

Назад То же, что и для перенаправления, но в обратную.Backward-Out Same as Forward-Out, but reversed.

направление назад

Сила тяготенияGravity

Сила тяготения делает процессы более естественными.Gravity makes your experiences feel more natural. Объекты, перемещающиеся по оси Z и не привязанные к сцене каким-либо экранным элементом, могут быть подвержены воздействию силы тяготения.Objects that move on the Z-axis and are not anchored to the scene by an onscreen affordance have the potential to be affected by gravity. Когда объект отрывается от сцены и до достижения им скорости ухода с экрана, сила тяготения тянет объект вниз, что обеспечивает более естественную траекторию перемещения объекта.As an object breaks free of the scene and before it reaches escape velocity, gravity pulls down on the object, creating a more natural curve of the object trajectory as it moves.

Сила тяготения обычно проявляется, когда объекту требуется перейти из одной сцены в другую.Gravity typically manifests when an object must jump from one scene to another. Поэтому в приведенной здесь анимации используется концепция силы тяготения.Because of this, connected animation uses the concept of gravity.

Здесь на элемент в верхней строке сетки воздействует гравитация, что вызывает его небольшое падение по мере отрыва от своего места и перемещения на передний план.Here, an element in the top row of the grid is affected by gravity, causing it to drop slightly as it leaves its place and moves to the front.

Короткое видео, показывающие прямоугольный элемент, который выходит из верхней строки сетки, отбрасывается нелегко, а затем масштабируется до начала окна.