Movimiento en Windows 11

Movimiento describe la forma en que la interfaz anima la interacción del usuario y responde a esta. El movimiento en Windows es reactivo, directo y adecuado al contexto. Proporciona comentarios a la entrada del usuario y refuerza los paradigmas espaciales que admiten la búsqueda de métodos.

Principios de movimiento

Estos principios guían el uso del movimiento en Windows.

Conectado: los elementos de las acciones se conectan sin problemas

Los elementos que cambian la posición y el tamaño deben conectarse visualmente de un estado a otro, incluso si no están conectados debajo del capó. Los usuarios se guían para seguir los elementos que van de punto a punto, lo que reduce la carga cognitiva de los cambios de estado estático.

Ejemplo: Cuando una ventana cambia entre flotante, acoplada y maximizada, siempre se siente como la misma ventana.

Sugerencia

Para mejorar la accesibilidad y la legibilidad, esta página usa imágenes fijas en la vista predeterminada. Puede hacer clic en una imagen para ver la versión animada.

Coherente: los elementos deben comportarse de maneras similares al compartir puntos de entrada

Las superficies que comparten el mismo punto de entrada de la interfaz de usuario deben invocar y descartar la misma manera de aportar coherencia a las interacciones. Cada transición debe respetar el tiempo, la aceleración y la dirección de otros elementos para que una superficie se sienta cohesiva.

Ejemplo: Todos los controles flotantes de la barra de tareas se deslizan hacia arriba cuando se invocan y se deslizan hacia abajo cuando se descartan.

Haga clic en la imagen para verlo animado.

Capacidad de respuesta: el sistema responde y se adapta a la entrada y las opciones del usuario.

Los indicadores claros muestran que el sistema reconoce y se adapta correctamente a diferentes entradas, posturas y orientaciones. Las aplicaciones deben basarse en comportamientos del sistema operativo para sentirse dinámicos, activos y ayudar al uso en función de los métodos de entrada.

Ejemplo: Los iconos de la barra de tareas se extienden cuando se desasocian los teclados. Los bordes de la ventana invocan un objeto visual diferente según el cursor o la entrada táctil.

Haga clic en la imagen para verlo animado.

Encantador: Momentos inesperados de alegría con propósito

El movimiento añade personalidad y energía a la experiencia con el fin de transformar acciones simples en momentos de deleite. Estos momentos siempre son breves y flotantes, y ayudan a reforzar las acciones del usuario.

Ejemplo: Minimizar una ventana hace que un icono de aplicación rebote hacia abajo, mientras que la restauración rebota un icono de aplicación hacia arriba.

Haga clic en la imagen para verlo animado.

Resourceful: utiliza los controles existentes para proporcionar coherencia siempre que sea posible.

Evite animaciones personalizadas siempre que sea posible. Usa recursos de animación como controles WinUI para transiciones de página, foco en página e interacciones micro. Si no puedes usar controles WinUI, imita los comportamientos existentes del sistema operativo en función de dónde reside el punto de entrada de la aplicación.

Ejemplo:Las transiciones de página, las animaciones conectadas y los iconos animados son los controles de WinUI recomendados que agregan un movimiento delicioso y necesario a las aplicaciones.

Haga clic en la imagen para verlo animado.

Uso

Propiedades de animación

El movimiento de Windows es rápido, directo y adecuado para el contexto. Las curvas de tiempo y aceleración se ajustan en función del propósito de la animación para crear una experiencia coherente.

Propósito	Definición	Aflojar	Control de tiempo	Se usa para
Entrada directa	Rápido: en	Cubic-bezier(0,0,0,1)	167, 250, 333	Posición, escala, rotación
Elementos existentes	Punto a punto	Cubic-bezier(0.55,0.55,0,1)	167, 250, 333 ms	Posición, escala, rotación
Salida directa	Rápido: out	Cubic-bezier(0,0,0,1)	167 ms	Posición, escala, rotación (combinación ALWAYS con atenuación)
Salida suave	Suave: out	Cubic-bezier(1,0,1,1)	167 ms	Posición, escala
Mínimo	Atenuación: entrada y salida	Lineal	83 ms	Opacidad
Entrada fuerte	Elastic In (3 fotogramas clave)	(3 valores a continuación)	(3 valores a continuación)	Posición, escala
	Fotograma clave 1	Cubic-Bezier(0.85, 0, 0, 1)	167 ms
	Fotograma clave 2	Cubic-Bezier(0.85, 0, 0.75, 1)	167 ms
	Fotograma clave 3	Cubic-Bezier(0.85, 0, 0, 1)	333 ms

Controles

Esta versión de Windows presenta micro interacciones intencionadas en los controles WinUI . Agregue estos controles a la aplicación para ayudar a organizar mejor la información y ayudar a los usuarios de la aplicación a pasar de la página a la página, la capa a la capa y el estado de una interacción.

Transición de página: transiciones de página a página dentro de la misma superficie

Usa transiciones de página para realizar la transición sin problemas de la página a la página y configurar indicaciones de animación para respetar el flujo de una aplicación.

Las transiciones de página guían los ojos del usuario al contenido entrante y saliente, lo que reduce la carga cognitiva.

Haga clic en la imagen para verlo animado.

Animación conectada: transiciones de capa a capa dentro de la misma página

Usa animaciones conectadas para resaltar partes específicas de información dentro de una página o superficie, a la vez que conservas el contexto.

Las animaciones conectadas dan foco a los elementos seleccionados y pasan perfectamente entre los estados centrados y no centrados.

Haga clic en la imagen para verlo animado.

Icono animado: agrega deleite y revela información a través de micro interacciones

Use iconos animados para implementar iconos ligeros, basados en vectores, iconos e ilustraciones con movimiento mediante animaciones de Lottie .

Los iconos animados atraen la atención a puntos de entrada específicos, proporcionan comentarios del estado al estado y agregan deleite a una interacción.

Haga clic en la imagen para verlo animado.