Creación de animaciones de UI: tutorial, herramientas y mejores prácticas

Desde los inicios de internet, las animaciones se usaron con frecuencia en forma de diálogos emergentes intermitentes y GIFs extravagantes. Puede que no fueran bonitos, pero sin duda captaban la atención del espectador. A medida que los estilos de diseño han evolucionado, también lo han hecho las animaciones.

Se han adoptado diversas técnicas para animar una interfaz de usuario (UI) como una forma atractiva de añadir atractivo a un sitio web o aplicación. Piense en un indicador de carga o en un botón al presionarse. Estas interacciones sencillas se pueden animar de muchas maneras diferentes para mejorar la experiencia del usuario.

En este artículo, aprenderá sobre algunos tipos diferentes de animaciones de UI, cómo se diferencian de los gráficos en movimiento, algunos principios de animación a seguir, así como algunas herramientas para comenzar a crear sus propias animaciones de UI.

Comprensión de las animaciones de la interfaz de usuario

Las animaciones de interfaz de usuario (UI) se utilizan para mejorar la comunicación y la interacción entre el usuario y la interfaz de un sitio web o aplicación. También conocidas como microinteracciones, se utilizan para proporcionar retroalimentación al usuario al interactuar con elementos de la UI, como la carga de páginas, los menús de navegación o los iconos. Existen diferentes tipos de animaciones de UI que probablemente ya hayas visto.

Estado de carga

Un ejemplo de animación de interfaz de usuario es el estado de carga. Cuando un proceso o tarea se está cargando, a los usuarios no les gusta quedarse en una pantalla sin saber el estado de carga. Las animaciones de interfaz de usuario se han utilizado durante mucho tiempo para animar las barras de carga y los indicadores giratorios y crear la ilusión de progreso. Esto facilita la espera, ya que la animación indica el tiempo restante o que la tarea está en curso y no se ha detenido.

Esta animación de descarga de los inicios de internet muestra un trozo de papel que se transfiere del globo terráqueo de la izquierda a la carpeta de la derecha para indicar que se está guardando un archivo. La barra de progreso inferior se llenaba a medida que la tarea avanzaba, informando al usuario del tiempo restante estimado.

Navegación

Las animaciones también se utilizan al interactuar con elementos de navegación de la interfaz de usuario, como menús, pestañas o tarjetas. El movimiento de una página o elemento puede ayudar a los usuarios a orientarse dentro del sitio web o la aplicación y a comprender la ubicación de la página o sección anterior en relación con su ubicación actual.

En este ejemplo de Material Design , el borde alrededor de las pestañas se mueve de una a otra al seleccionarlas. La información del panel inferior se mueve de izquierda a derecha para ayudar al usuario a comprender la dirección en la que navega y dónde encontrar el contenido anterior. Sin esta animación de la interfaz de usuario, el usuario no vería con claridad cómo se mueve dentro de la aplicación y la experiencia de usuario sería menos atractiva.

Iconos

Un elemento de la interfaz de usuario simple pero importante es el icono. Estos elementos visuales se utilizan para ayudar a los usuarios a reconocer y recordar la función de los diferentes elementos interactivos. Pueden usarse en cualquier elemento de la interfaz de usuario que tenga una etiqueta, como un botón, una pestaña o un campo de formulario; a veces, en el caso de los iconos universales, se usan sin etiqueta.

Si bien los íconos estáticos pueden añadir interés visual a una interfaz, animarlos puede llevar esto al siguiente nivel. Animar íconos no solo crea una experiencia de usuario más atractiva, sino que también puede ayudar a comunicarle las diferencias en los estados, como éxito y error, bloqueo y desbloqueo, o activo y deshabilitado. Un elemento de interfaz de usuario animado también puede captar la atención del usuario en el momento oportuno.

En este ejemplo de Material Design, cada ícono pasa sin problemas del estado activo al deshabilitado, formando una conexión entre los dos al seleccionarlo:

Los íconos también pueden animarse simplemente para realzar una interfaz o explicar un proceso al usuario. En este ejemplo de la app de UberEats , cada ícono está animado para comunicar el tipo de cumplido que el usuario puede enviar a su repartidor. Las animaciones no solo son atractivas, sino que también ayudan al usuario a comprender el contexto.

Diferencia entre animaciones de UI y gráficos en movimiento

Las animaciones y los gráficos en movimiento suelen denominarse sinónimos, ya que ambos aplican movimiento a los elementos visuales, pero existen algunas diferencias clave entre ambos. Si bien la animación es un término amplio que se refiere a la creación de imágenes en movimiento, los gráficos en movimiento se utilizan a menudo para marketing, mientras que las animaciones de interfaz de usuario (UI) son elementos de interfaz de usuario animados dentro de un sitio web o aplicación para mejorar la experiencia del usuario.

Los gráficos en movimiento aplican movimiento al diseño gráfico y se encuentran habitualmente en branding y publicidad, como logotipos o vídeos promocionales. Un ejemplo de gráficos en movimiento en branding es el vídeo de Airbnb que presenta su logotipo “Bélo” . El movimiento se utiliza para animar el logotipo y el texto, creando una experiencia de marca memorable para el público. También se utiliza para animar el logotipo en diferentes gráficos que ayudan a explicar su significado, lo que fortalece aún más la marca.

Otro ejemplo de gráficos en movimiento se encuentra en los videos de productos. Estos suelen crearse cuando una empresa presenta un nuevo producto y quiere explicar sus características principales a sus usuarios. El video aplica movimiento a gráficos como ilustraciones, texto, números o maquetas de diseño para contar la historia.

Los gráficos en movimiento también se pueden aplicar a personajes 2D o 3D para animar una mascota. Tableau usa gráficos en movimiento con su logotipo y la mascota de Einstein durante una presentación en video. Esto crea una forma divertida de incorporar la personalidad de su marca a su logotipo:

Conceptos básicos de la animación de UI

Los diseñadores deben seguir las leyes de la física, como la gravedad, la fricción y la inercia, al animar elementos de la interfaz de usuario. Para que las animaciones o transiciones resulten naturales e intuitivas para el usuario, deben comportarse como este esperaría según las leyes físicas. Para lograr efectos realistas, existen algunas técnicas que puedes aplicar a la animación de tu interfaz de usuario.

Entrada y salida fáciles

La primera técnica es la suavización, pero para entender cómo aplicarla a una animación, primero debemos hablar de los fotogramas clave. Si alguna vez has creado una animación de flipbook, cada ilustración de una página representa un fotograma clave de la animación. Al pasar las páginas del libro, tus ojos ven cada fotograma clave en una fracción de segundo, creando la ilusión de una animación.

Las animaciones de interfaz de usuario funcionan de la misma manera: tienen fotogramas clave y una duración. Si la animación avanzara por cada fotograma clave al mismo ritmo, tendría una función de aceleración lineal.

Al cambiar la velocidad a la que la animación se mueve a través de los fotogramas clave, se puede crear un efecto de aceleración. Una animación con un inicio lento utiliza una función de aceleración, lo que significa que la animación se mueve lentamente a través de los fotogramas clave al principio y luego se acelera. Una función de aceleración reduciría la velocidad hacia el final de los fotogramas clave.

Fundido de entrada y salida

Otra técnica para que las animaciones de la interfaz de usuario se vean menos discordantes y más agradables es el desvanecimiento. Un efecto de entrada o salida gradual puede hacer que las transiciones se vean fluidas. En lugar de un modal que aparece repentinamente sobre el contenido que se está visualizando, el desvanecimiento gradual puede ayudar al usuario a desplazar su vista del fondo al modal en primer plano.

Aplastar y estirar

Esta técnica añade realismo a una animación, dotando a un objeto de peso y flexibilidad al encontrarse con una fuerza opuesta. Un ejemplo clásico de aplastamiento y estiramiento es una pelota que se deja caer al suelo. Observe que la pelota no cambia de volumen al aplastarse o estirarse. Simplemente se alarga o ensancha para darle una sensación de elasticidad.

En la interfaz de usuario, se pueden usar comprimir y estirar botones, conmutadores u otros elementos que se deseen atraer la atención del usuario mediante animación. También se pueden usar para añadir un elemento divertido a la interfaz cuando el usuario hace clic en el botón o activa un conmutador. Tenga cuidado de no comprimir ni estirar demasiado el elemento, ya que esto puede convertir una microinteracción elegante en un comportamiento inesperado que no se adapta a la experiencia del producto.

Herramientas de animación de UI

Existen innumerables herramientas para empezar a crear animaciones de interfaz de usuario, pero algunas requieren un aprendizaje más complejo. Elegir la herramienta adecuada depende de las funciones que busques y del control que desees para crear las animaciones perfectas. Veamos tres herramientas de animación que deberías probar.

Figma

Para la mayoría de los diseñadores de productos que ya usan Figma para crear diseños, sus funciones integradas de prototipado permiten añadir animaciones a las interacciones. Se pueden configurar detalles de la interacción, como el disparador, por ejemplo, al hacer clic, al pasar el cursor o incluso después de un retardo. En cuanto a los tipos de transición, Figma ofrece opciones como disolver, mover hacia adentro y hacia afuera, empujar, deslizar hacia adentro y hacia afuera, o su transición animada inteligente.

En cada una de estas transiciones, puedes configurar el tipo de animación que desees: lineal, con entrada y salida suaves o con rebote. Figma aplicará la animación a tu transición utilizando los fotogramas inicial y final como fotogramas clave. Incluso puedes definir la velocidad de tu animación:

Pedernal

Aunque Figma ofrece excelentes transiciones y efectos para prototipado, sus funciones son algo limitadas. Puede ser suficiente para quienes no necesitan transiciones sofisticadas, pero si buscas añadir un toque de estilo a tus prototipos, prueba Flinto . El diseñador de transiciones y comportamientos de la herramienta te permite diseñar transiciones animadas y microinteracciones sin necesidad de programar.

Ya sea que quieras añadir un resorte a una transición o alternar entre diferentes estados de un elemento en cámara lenta, Flinto te ayuda. Para una transición sencilla del diseño al prototipado, puedes importar tus diseños desde Figma o Sketch directamente a Flinto:

Principio

Esta herramienta es más avanzada que las dos anteriores, ya que proporciona un mayor control sobre las propiedades de las animaciones de la interfaz de usuario. Los diseñadores tienen acceso a numerosas interacciones, como el desplazamiento y el deslizamiento, así como a transiciones como la aceleración o el resorte. Sin embargo, también se pueden crear animaciones personalizadas, ya que Principle permite definir las propias curvas de aceleración.

Esto resulta útil si no puede encontrar el estilo de animación adecuado con las funciones integradas de otras herramientas:

También usa una línea de tiempo para mostrarte una descripción general de todas las animaciones de tu aplicación o sitio web. Puedes usarla para apilar capas de animación y ajustar su orden y duración en relación con las demás. Y, al igual que con Flinto, puedes importar tus diseños de Figma o Sketch a Principle para crear animaciones avanzadas que no se pueden crear con otras herramientas.

Conclusión

Los humanos somos criaturas animadas, no robóticas. El mundo en el que vivimos no es estático, sino que se mueve a nuestro alrededor. Por lo tanto, nuestros productos digitales tampoco deberían serlo. El diseño de tu interfaz de usuario determina si tus usuarios se conectarán emocionalmente con tu sitio web o aplicación.

Una excelente manera de enriquecer la experiencia de usuario de tu producto es animar la interfaz de usuario (IU). Las animaciones de la IU no solo contribuyen a crear experiencias divertidas, sino que también ayudan a comunicar el progreso de la carga de las páginas, orientarse en la navegación y comprender la conexión entre los diferentes estados de un elemento.

Algunas de las técnicas básicas de animación de UI incluyen suavizado, desvanecimiento, compresión y estiramiento. Estos efectos pueden añadir un toque especial a tu producto, aunque es necesario un enfoque equilibrado para no excederse. Demasiada animación puede empeorar la experiencia. Sin embargo, con herramientas como Principle, Flinto y Figma, existen numerosos recursos para llevar tus animaciones de UI al siguiente nivel.

Si quieres conocer otros artículos parecidos a Creación de animaciones de UI: tutorial, herramientas y mejores prácticas puedes visitar la categoría Herramientas.