Movimiento para las aplicaciones de Windows

El movimiento de Fluent tiene un propósito en la aplicación. Proporciona comentarios inteligentes basados en el comportamiento del usuario, mantiene dinámica la sensación de la interfaz de usuario y guía la navegación del usuario en tu aplicación. El movimiento de Fluent provoca una conexión emocional entre un usuario y su experiencia digital. Nos basamos en el movimiento natural que el usuario comprende del mundo físico y ampliamos nuestro sistema desde ahí.

Ejemplos

Si tienes instalada la aplicación WinUI 2 Gallery, haga clic aquí para abrir la aplicación y ver Motion en acción. Obtenga la aplicación WinUI 2 Gallery (Microsoft Store) Obtener el código fuente (GitHub)

Principios de movimiento de Fluent

Físico

Los objetos en movimiento muestran comportamientos de objetos en el mundo real. El movimiento fluido y dinámico hace que la experiencia sea natural, creando así conexiones emocionales y agregando personalidad.

Al interactuar con la interfaz de usuario a través de la función táctil, el movimiento de la interfaz de usuario está relacionado directamente con la velocidad de la interacción. Y como la función táctil es manipulación directa, el objeto con el que interactúas afecta a los objetos que están a su alrededor.

Funcional

El movimiento tiene un propósito y es convincente. Guía al usuario a través de la complejidad y ayuda a establecer una jerarquía. El movimiento ofrece la sensación de rendimiento mejorado y optimiza la experiencia del usuario al ocultar la latencia percibida.

Las transiciones de página son específicas. Ofrecen sugerencias sobre cómo se relacionan las páginas entre sí. Se mueven de forma que se perciben como rápidas incluso cuando el rendimiento no es óptimo.

Continua

El movimiento fluido de punto a punto dibuja el ojo de forma natural y guía al usuario. Asimismo, une elegantemente la tarea del usuario, lo que hace que sea más fácil de consumir y de usar.

Los objetos pueden pasar de una escena a otra o alterar su morfología dentro de una escena para proporcionar continuidad y ayudar al usuario a mantener el contexto.

Contextual

El movimiento inteligente proporciona información al usuario de una manera que concuerda con cómo manipuló la interfaz de usuario. La interacción se centra en el usuario. El movimiento parece adecuado para el factor de forma y está diseñado en torno al escenario. Recuerde que debe ser cómodo para cada usuario.

La animación se debe vincular a la interacción del usuario. Se implementa un menú contextual desde un punto donde lo activó el usuario.

Artículos sobre movimiento

Sincronización y aceleración

La sincronización y la aceleración son elementos importantes para hacer que el movimiento resulte natural para los objetos que entran, salen o se mueven dentro de la interfaz de usuario.

Direccionalidad y gravedad

Las señales direccionales ayudan a proporcionar un sólido modelo mental del recorrido de un usuario a través de experiencias. El movimiento direccional está sujeto a fuerzas como la gravedad, lo que refuerza la sensación natural de movimiento.

Transiciones de página

Las transiciones de página sirven para que los usuarios se desplacen entre las páginas de una aplicación, proporcionando comentarios acerca de la relación entre ellas. Ayudan a los usuarios a entender dónde se encuentran en la jerarquía de navegación.

Animación conectada

Las animaciones conectadas le permiten crear una experiencia de navegación dinámica y atractiva al animar la transición de un elemento entre dos vistas distintas.