Durante siglos, la gente ha prestado atención instintivamente a los objetos en movimiento. En el mundo moderno, los diseñadores utilizan la animación para captar la atención de los usuarios con movimiento. La animación en las aplicaciones puede servir para diferentes funciones. Por ejemplo, puede mejorar la identidad de marca con su propio estilo de animación. Más importante aún, el movimiento y la animación pueden funcionar como una forma de retroalimentación sutil para las microinteracciones. Por ejemplo, un menú de navegación que se abre cuando se toca un icono de hamburguesa.
<aside> 💡 Pero, ¿hay una receta mágica para crear animaciones hermosas y naturales? En 1981, los animadores Ollie Johnston y Frank Thomas lanzaron un libro The Illusion of Life: Disney Animation. En su libro, introdujeron los 12 principios de animación de Disney. Afortunadamente, esos principios resultaron ser atemporales y también relevantes para la animación de la interfaz de usuario. Aplicar estos principios en el diseño puede mejorar en gran medida la experiencia del usuario.
</aside>
Nada en el mundo que nos rodea se mueve a una velocidad constante. Por ejemplo, cuando una manzana cae de un árbol, su velocidad aumenta con el tiempo debido a cómo funciona la gravedad. Para crear tales animaciones naturales, los diseñadores utilizan la flexibilización, una aceleración o desaceleración. Puede hacer que un elemento se mueva lentamente al principio y luego acelerarlo o viceversa. La flexibilización hace que los objetos en movimiento se vean menos artificiales y robóticos.
El principio de compensación y retraso define la relación entre los elementos y la jerarquía. En el ejemplo correcto, podemos ver que los elementos aparecen uno por uno, lo que crea la impresión de que estos elementos son parte de un todo.
Los diseñadores pueden usar offset y delay para definir los roles y la importancia de los elementos. Por ejemplo, si estás animando una tarjeta que aparece en la pantalla, configura la animación para que muestre primero el encabezado y la imagen, y el botón en el retraso. Llamarás la atención de los usuarios sobre el último elemento que aparecerá, el botón interactivo.
Junto con el desplazamiento y el retraso, la crianza ayuda a definir las relaciones entre los elementos. La crianza vincula las propiedades de un objeto a otro objeto, estableciendo una conexión directa. En el ejemplo, el tamaño y la posición del elemento secundario dependen de la posición del padre.
A medida que los usuarios interactúan con un elemento padre, sus elementos secundarios deben moverse en consecuencia. Por ejemplo, cuando los usuarios deslizan el dedo a través de un carrusel de imágenes, las imágenes deben moverse junto con el control deslizante y desplazarse.
¿Alguna vez has visto fascinantes lapsos de tiempo de orugas transformándose en hermosas mariposas? Existe un tipo similar de transformación en la animación. De hecho, es uno de los principios fundamentales del movimiento. En pocas palabras, la transformación es el proceso de que un elemento se transforma en otra forma a medida que cambia de estado.
Un ejemplo común es una variación del botón Enviar. Probablemente hayas visto botones que cambian a barras de progreso a medida que se cargan y terminan como marcas de verificación de confirmación. Es una excelente manera de proporcionar comentarios inmediatos del sistema a las acciones de los usuarios.
El cambio de números a medida que se carga el indicador de progreso se llama cambio de valor. El cambio indica a los usuarios que algo está sucediendo entre bastidores, una importante retroalimentación que les permite saber que sus acciones han tenido un efecto.