Leer en inglés

Compartir a través de


Movimiento en Windows

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.

Imagen animada que muestra varios ejemplos de movimiento en la interfaz de usuario de Windows.

Sugerencia

En este artículo se describe cómo se aplica el lenguaje Fluent Design a las aplicaciones de Windows. Para obtener más información, consulte Fluent Design - Motion.

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 de posición y tamaño deben conectarse visualmente de un estado a otro, incluso si no están conectados bajo el 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 pasa entre flotante, acoplado y maximizado, siempre se siente como la misma ventana.

Imagen animada que muestra una ventana de Microsoft Edge que pasa entre vistas flotantes, acopladas y maximizadas.

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 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.

Imagen animada que muestra varias superficies de interfaz de usuario de Windows sucesivamente, como el menú inicio y el panel de búsqueda. Cada superficie se desliza hacia arriba desde la barra de tareas cuando se invoca y se desliza hacia abajo cuando se descarta, de forma coherente.

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 los comportamientos del sistema operativo para sentirse dinámicos, vivos 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 en función del cursor o de la entrada táctil.

Imagen animada. A la izquierda, los iconos de la barra de tareas se extienden cuando se desasocia un teclado. A la derecha, los bordes de la ventana tienen diferentes efectos visuales cuando se manipulan con 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 para transformar acciones simples en momentos de placer. Estos momentos siempre son breves y flotes, y ayudan a reforzar las acciones del usuario.

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

Imagen animada que muestra un icono de aplicación que se rebota cuando se minimiza la ventana y rebota cuando se restaura la ventana.

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 y micro interacciones. Si no puedes usar controles WinUI, imita los comportamientos del sistema operativo existentes 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 winUI recomendados que agregan movimiento encantador y necesario a las aplicaciones.

Imagen animada que muestra ejemplos de transiciones de página, animaciones conectadas e iconos animados en la interfaz de usuario de Windows.

Haga clic en la imagen para verlo animado.

Ejemplos

La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI 3. Obtenga la aplicación de Microsoft Store u obtenga el código fuente en GitHub.

Uso

Propiedades de animación

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

Fin Definición Aflojar Control de tiempo Se usa para
Entrada directa Rápido: en Bézier cúbico(0,0,0,1) 167, 250, 333 Posición, escala, rotación
Elementos existentes Apuntar a punto Cubic-bezier(0,55,0,55,0,1) 167, 250, 333 ms Posición, escala, rotación
Salida directa Rápido: salida Bézier cúbico(0,0,0,1) 167 ms Posición, escala, rotación (siempre combinar con atenuación)
Salida suave Suave: salida Cubic-bezier(1,0,1,1) 167 ms Posición, escala
Mínimo Fundido: entrada y salida Lineal 83 ms Opacity
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

Use transiciones de página para realizar la transición sin problemas de la página a la página y configurar instrucciones 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.

Imagen animada que muestra la navegación entre varias páginas en la aplicación Configuración de Windows. Las páginas de nivel superior se deslizan hacia arriba desde la parte inferior. Al navegar entre las páginas de nivel superior y las subpáginas, las páginas se deslizan a la izquierda y a la derecha.

Haga clic en la imagen para verlo animado.

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

Use animaciones conectadas para resaltar partes específicas de información dentro de una página o superficie, al tiempo que conserva el contexto.

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

Imagen animada de la aplicación de Microsoft Store que muestra una imagen en una página que anima a una vista ampliada de la imagen.

Haga clic en la imagen para verlo animado.

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

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

Los iconos animados señalan la atención a puntos de entrada específicos, proporcionan comentarios de estado a estado y agregan placer a una interacción.

Imagen animada que muestra una cuadrícula de varios ejemplos de controles de iconos animados.

Haga clic en la imagen para verlo animado.