Diseño Normalizado de Trámites Electrónicos
Inicio
Primeros pasos
Primeros pasos
¿Qué es DINTEL?
Diseñadores
Desarrolladores
Recursos
Preguntas frecuentes
Fundamentos
Fundamentos
Color
Tipografía
Elevaciones
Espaciado
Retícula
Borde
Radio
Iconografía
Ilustraciones
Animación
Accesibilidad
Tokens de diseño
Contenidos digitales
Visualización de datos
Elementos de interfaz
Elementos de interfaz
Módulos
Plantillas
Componentes
Actualizaciones
Contacto
Fundamentos
Animación
Animación
El movimiento marca el comportamiento de los componentes del sistema, mejorando la retroalimentación y comprensión del usuario, evitando la ceguera visual al cambio, reduciendo la carga visual y mostrando qué sucederá cuando realice una acción o qué podrá hacer a continuación.
Principios
Apoyo
Facilita la experiencia del usuario llamando su atención sobre los detalles más importantes en cada momento.
Simplicidad
Se adapta a la experiencia sin crear distracciones. La animación debe transmitir la intención que se busca sin parecer exagerada.
Rapidez
Animaciones rápidas para que el usuario no tenga que esperar más de lo necesario.
Duración
Las animaciones deben sentirse rápidas lo que ayuda a lograr una sensación de respuesta rápida. Las duraciónes más cortas serán para los componentes más pequeños e irán aumentando progresivamente con su tamaño.
motion-duration-fast
Corta
150ms
Distancias de 25% o menos del ancho total de la vista. Pequeñas interacciones: buttons, radio , inputs, chekbox, switch, tooltips, tabs...
motion-duration-medium
Media
300ms
Distancias de 26% - 50% del ancho de vista. Elementos de tamaño medio: toast, dropdown, menu, accordeon, collapse, modales...
motion-duration-slow
Larga
500ms
Distancias de 51% - 100% del ancho de vista. Transiciones de elementos de tamaño grande como paneles laterales o página.
Aceleración
La aceleración dicta la velocidad a la que los objetos viajan por el espacio en el transcurso de una animación. Diferenciaremos entre aquellos elementos que aparecen, desaparecen o se mantienen en la pantalla durante su animación.
motion-ease-in
Desvanecimientos
cubic-bezier(0.3, 0, 0.7, 0)
Al eliminar elementos a pantalla: menu, modal, dropdown, toast, panel lateral, dropdown, buttons, radio , inputs, chekbox, switch, tooltips, tabs...
motion-ease-out
Apariciones
cubic-bezier(0.3, 1, 0.7, 1)
Al agregar elementos a pantalla: menu, modal, dropdown, toast, panel lateral, dropdown, buttons, radio , inputs, chekbox, switch, tooltips, tabs...
motion-ease-inout
Pantalla constante
cubic-bezier(0.6, 0, 0.3, 1)
Elementos que se mantienen en pantalla y se trasladan de un lado a otro: accordeon, collapse, carousel,
Efectos
Los efectos son la aplicación de estilos de duración y aceleración a casos concretos para dar vida al sistema.
motion-fx-fade-in
Aparición grande
motion-duration-medium
Modales
motion-fx-fade-out
Desvanecimiento grande
motion-duration-medium, motion-ease-in
Modales
motion-fx-show
Aparición pequeña
motion-duration-medium, motion-ease-out
Apariciones y desvanecimientos de toast, dropdown, tooltip, popover
motion-fx-hide
Desvanecimiento pequeño
motion-duration-medium, motion-ease-in
Apariciones y desvanecimientos de toast, dropdown, tooltip, popover
motion-fx-slide-in
Aparición por desplazamiento
motion-duration-slow, motion-ease-out
Paneles laterales, carrusel
motion-fx-slide-out
Desaparición por desplazamiento
motion-duration-slow, motion-ease-out
Paneles laterales, carrusel
motion-fx-hover-in
Entrar en zona
motion-duration-fast, motion-ease-out
Elementos interactivos con estados: Botones, miga de pan, checkbox y radiobutton, input, tabs
motion-fx-hover-out
Salir de zona
motion-duration-fast, motion-ease-out
Elementos interactivos con estados: Botones, miga de pan, checkbox y radiobutton, input, tabs
motion-fx-pressed-in
Añadir presión
motion-duration-fast, motion-ease-out
Elementos interactivos con estados: Botones, miga de pan, checkbox y radiobutton, input, tabs
motion-fx-pressed-out
Eliminar presión
motion-duration-fast, motion-ease-in
Elementos interactivos con estados: Botones, miga de pan, checkbox y radiobutton, input, tabs
motion-fx-expansion
Expansión
motion-duration-slow, motion-ease-inout
Acordeón, Collapse
motion-fx-collapse
Contracción
motion-duration-slow, motion-ease-inout
Acordeón, Collapse
Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.
