Direccionalidad y gravedad

  • Artículo

Las señales direccionales ayudan a solidificar el modelo mental del recorrido que un usuario toma en todas las experiencias. Es importante que la dirección de cualquier movimiento admita tanto la continuidad del espacio como la integridad de los objetos en el espacio.

El movimiento direccional está sujeto a fuerzas como la gravedad. La aplicación de fuerzas al movimiento refuerza la sensación natural del movimiento.

Ejemplos

Galería de WinUI

Si tienes instalada la aplicación WinUI 2 Gallery, haga clic aquí para abrir la aplicación y ver Motion en acción.

Dirección del movimiento

La dirección del movimiento corresponde al movimiento físico. Al igual que en la naturaleza, los objetos pueden moverse en cualquier eje del mundo : X,Y,Z. Así es como pensamos en el movimiento de objetos en la pantalla. Al mover objetos, evite colisiones no naturales. Tenga en cuenta dónde proceden y van los objetos 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.

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ón

La dirección de navegación entre escenas de la aplicación es conceptual. Los usuarios navegan hacia delante y hacia atrás. Las escenas se mueven y salen de la vista. Estos conceptos se combinan con el movimiento físico para guiar al usuario.

Cuando la navegación hace que un objeto viaje desde la escena anterior a la nueva escena, el objeto hace que un movimiento A-a-B simple en la pantalla. Para asegurarse de que el movimiento se siente más físico, se agrega la aceleración estándar, así como la sensación de gravedad.

Para la navegación hacia atrás, el movimiento se invierte (B a A). Cuando el usuario navega hacia atrás, tiene una expectativa de volver al estado anterior lo antes posible. El tiempo es más rápido, más directo, y usa la aceleración de la aceleración.

Aquí, estos principios se aplican cuando el elemento seleccionado permanece en pantalla durante la navegación hacia delante y atrás.

Ejemplo de interfaz de usuario de movimiento continuo

Cuando la navegación hace que los elementos de la pantalla se reemplacen, es importante mostrar dónde se ha ido la escena de salida y de dónde procede la nueva escena.

Esto tiene varias ventajas:

  • Solidifica el modelo mental del usuario del espacio.
  • La duración de la escena de salida proporciona más tiempo para preparar el contenido en el que se va a animar para la escena entrante.
  • Mejora el rendimiento percibido de la aplicación.

Hay 4 indicaciones discretas de navegación que se deben tener en cuenta.

Reenvío Celebra el contenido que entra en la escena de una manera que no entra en conflicto con el contenido saliente. El contenido se desacelera en la escena.

dirección hacia delante en

Reenvío hacia fuera El contenido se cierra rápidamente. Los objetos aceleran fuera de la pantalla.

dirección hacia fuera hacia fuera

Hacia atrás Igual que el reenvío, pero invertido.

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

Hacia atrás Igual que el reenvío, pero invertido.

dirección hacia atrás hacia fuera

Gravity

La gravedad hace que tus experiencias se sientan más naturales. 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 verse afectados por la gravedad. Cuando un objeto se libera de la escena y antes de alcanzar la velocidad de escape, la gravedad se desplaza hacia abajo en el objeto, creando una curva más natural de la trayectoria del objeto a medida que se mueve.

La gravedad se manifiesta normalmente cuando un objeto debe saltar de una escena a otra. Debido a esto, la animación conectada usa el concepto de gravedad.

Aquí, un elemento de la fila superior de la cuadrícula se ve afectado por la gravedad, lo que hace que caiga ligeramente mientras sale de su lugar y se mueve hacia el frente.

Vídeo corto en el que se muestra un elemento rectángulo que deja la fila superior de una cuadrícula, se coloca ligeramente y, a continuación, se acerca al frente de la ventana.