Direccionalidad y gravedadDirectionality and gravity

Las señales direccionales ayudan a solidificar el modelo mental del viaje que un usuario toma entre las experiencias.Directional signals help to solidify the mental model of the journey a user takes across experiences. Es importante que la dirección de cualquier movimiento admita tanto la continuidad del espacio como la integridad de los objetos en el espacio.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.

El movimiento direccional está sujeto a fuerzas como la gravedad.Directional movement is subject to forces like gravity. Aplicar fuerzas al movimiento refuerza el funcionamiento natural del movimiento.Applying forces to movement reinforces the natural feel of the motion.

EjemplosExamples

XAML controls gallery

Si tienes instalada la aplicación Galería de controles XAML, haz clic aquí para abrir la aplicación y ver Motion en acción.If you have the XAML Controls Gallery app installed, click here to open the app and see Motion in action.

Dirección del movimientoDirection of movement

La dirección del movimiento corresponde al movimiento físico.Direction of movement corresponds to physical motion. Al igual que en la naturaleza, los objetos pueden moverse en cualquier eje mundial (X, Y, Z).Just like in nature, objects can move in any world axis - X,Y,Z. Así es como pensamos en el movimiento de objetos en la pantalla.This is how we think of the movement of objects on the screen. Cuando mueva objetos, evite colisiones no naturales.When you move objects, avoid unnatural collisions. Tenga en cuenta que los objetos proceden de y van a, y siempre admiten construcciones de nivel superior que se pueden usar en la escena, como la dirección de desplazamiento o la jerarquía de diseño.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.

Vídeo corto que muestra un círculo y, a continuación, la adición de un eje X, un eje Y y un eje Z.

Dirección de navegaciónDirection of navigation

La dirección de navegación entre las escenas de la aplicación es conceptual.The direction of navigation between scenes in your app is conceptual. Los usuarios navegan hacia delante y hacia atrás.Users navigate forward and back. Las escenas se mueven y salen de la vista.Scenes move in and out of view. Estos conceptos se combinan con el traslado físico para guiar al usuario.These concepts combine with physical movement to guide the user.

Cuando la navegación hace que un objeto viaje de la escena anterior a la nueva escena, el objeto hace que se mueva una simple a B en la pantalla.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. Para asegurarse de que el movimiento es más físico, se agrega la aceleración estándar, así como la sensación de gravedad.To ensure that the movement feels more physical, the standard easing is added, as well as the feeling of gravity.

Para la navegación hacia atrás, se invierte el movimiento (de B a a).For back navigation, the move is reversed (B-to-A). Cuando el usuario se desplaza hacia atrás, se espera que se devuelva al estado anterior lo antes posible.When the user navigates back, they have an expectation to be returned to the previous state as soon as possible. El tiempo es más rápido, más directo y usa la aceleración de deceleración.The timing is quicker, more direct, and uses the decelerate easing.

En este caso, estos principios se aplican cuando el elemento seleccionado permanece en pantalla durante la navegación hacia delante y hacia atrás.Here, these principles are applied as the selected item stays on screen during forward and back navigation.

Ejemplo de interfaz de usuario de movimiento continuo

Cuando la navegación hace que se reemplacen los elementos de la pantalla, es importante mostrar dónde salió la escena de salida y de dónde procede la nueva escena.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.

Esto presenta varias ventajas:This has several benefits:

  • Solidifica el modelo mental del usuario del espacio.It solidifies the user's mental model of the space.
  • La duración de la escena de salida proporciona más tiempo para preparar el contenido que se animará en para la escena entrante.The duration of the exiting scene provides more time to prepare content to be animated in for the incoming scene.
  • Mejora el rendimiento percibido de la aplicación.It improves the perceived performance of the app.

Hay 4 instrucciones discretas de navegación que se deben tener en cuenta.There are 4 discreet directions of navigation to consider.

Hacia delante Celebre el contenido que entra en la escena de manera que no entre en conflicto con el contenido saliente.Forward-In Celebrate content entering the scene in a manner that does not collide with outgoing content. El contenido se ralentiza en la escena.Content decelerates into the scene.

dirección hacia delante en

Reenvío El contenido se cierra rápidamente.Forward-Out Content exits quickly. Los objetos se aceleran en pantalla.Objects accelerate off screen.

Dirección remitir hacia fuera

Hacia atrás Igual que hacia delante, pero invertido.Backward-In Same as Forward-In, but reversed.

Vídeo corto en el que se muestra un círculo que entra a la derecha del fotograma y se detiene en medio del marco.

Hacia atrás Igual que el reenvío, pero invertido.Backward-Out Same as Forward-Out, but reversed.

dirección hacia atrás hacia atrás

PesoGravity

La gravedad hace que las experiencias parezcan más naturales.Gravity makes your experiences feel more natural. Los objetos que se mueven en el eje Z y que no están anclados a la escena por una prestación en pantalla tienen la posibilidad de que se vea afectado por la gravedad.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. A medida que un objeto se rompe sin la escena y antes de que llegue a la velocidad de escape, la gravedad se extrae del objeto, lo que crea una curva más natural de la trayectoria del objeto a medida que se mueve.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.

Normalmente, la gravedad se manifiesta cuando un objeto debe saltar de una escena a otra.Gravity typically manifests when an object must jump from one scene to another. Debido a esto, la animación conectada utiliza el concepto de gravedad.Because of this, connected animation uses the concept of gravity.

Aquí, la gravedad afecta a un elemento de la fila superior de la cuadrícula, lo que hace que se coloque ligeramente mientras deja su lugar y se desplaza hacia delante.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.

Vídeo corto en el que se muestra un elemento de rectángulo que sale de la fila superior de una cuadrícula, se quita ligeramente y, a continuación, se hace zoom en la parte frontal de la ventana.