El diseño de movimiento no tiene que ser difícil

En las áreas más importantes para una interfaz de usuario, el diseño de movimiento puede y debe ser simple

Motion ayuda a que las IU sean expresivas y fáciles de usar. A pesar de tener tanto potencial, el movimiento es quizás la menos comprendida de todas las disciplinas de diseño. Esto puede deberse a que es uno de los miembros más nuevos de la familia de diseño de UI. El diseño visual y de interacción se remonta a las primeras GUI, pero el movimiento tuvo que esperar a que el hardware moderno procesara la animación sin problemas. La superposición entre el movimiento de la interfaz de usuario y la animación tradicional también enturbia las aguas. Se puede pasar toda una vida dominando los 12 principios básicos de Disney, ¿significa esto que el movimiento de la interfaz de usuario es igualmente complejo? La gente a menudo me dice que diseñar movimiento es complicado o que elegir los valores correctos es ambiguo. Sostengo que en las áreas más importantes para una interfaz de usuario, el diseño de movimiento puede y debe ser simple.

Donde empezar

El trabajo principal de Motion es ayudar a los usuarios a navegar por una aplicación ilustrando la relación entre los elementos de la interfaz de usuario. Motion también tiene la capacidad de agregar personajes a una aplicación con íconos animados, logotipos e ilustraciones; sin embargo, establecer la usabilidad debería tener prioridad sobre agregar expresividad. Antes de flexibilizar sus habilidades de animación de personajes, comencemos por diseñar una base sólida de movimiento enfocándose en las transiciones de navegación.

Patrones de transición

Al diseñar una transición de navegación, la simplicidad y la coherencia son clave. Para lograr esto, elegiremos entre dos tipos de patrones de movimiento:

  1. Transiciones basadas en un contenedor
  2. Transiciones sin contenedor.

Transiciones basadas en un contenedor

Elementos como texto, iconos e imágenes se agrupan dentro de contenedores

Si una composición involucra un contenedor como un botón, tarjeta o lista, entonces el diseño de transición se basa en animar el contenedor. Los contenedores son generalmente fáciles de detectar en función de sus bordes visibles, pero recuerde que también pueden ser invisibles hasta que comience la transición, como un elemento de lista sin divisores. Este patrón se divide en tres pasos:

1. Anime el contenedor utilizando el suavizado estándar del Material (lo que significa que se acelera rápidamente y luego se desacelera suavemente para descansar). En este ejemplo, las dimensiones del contenedor y el radio de las esquinas se animan desde un botón circular hasta un rectángulo que llena la pantalla.

2. Escale los elementos en el contenedor para ajustarlos al ancho. Los elementos se fijan a la parte superior y se enmascaran dentro del contenedor. Esto crea una conexión clara entre el contenedor y los elementos en su interior.

* La animación se ralentizó para ilustrar cómo los elementos se escalan y enmascaran dentro de un contenedor

3. Los elementos que salen durante la transición se desvanecen a medida que el contenedor se acelera. Los elementos que ingresan se desvanecen a medida que el contenedor se desacelera. Un efecto de juego de manos perfecto se logra al desvanecer elementos a medida que se mueven rápidamente.

* La animación se ralentizó para ilustrar cómo los elementos salen y entran usando desvanecimientos

La aplicación de este patrón a todas las transiciones que involucran un contenedor establece un estilo consistente. También aclara la relación entre las composiciones inicial y final, ya que están vinculadas por el contenedor animado. Para mostrar la flexibilidad de este patrón, aquí se aplica a cinco composiciones diferentes:

* La animación se ralentizó para ilustrar cómo el contenedor vincula las composiciones de inicio y final

Algunos contenedores simplemente se deslizan desde fuera de la pantalla utilizando la flexibilización estándar del material. La dirección desde la que se desliza depende de la ubicación del componente al que está asociado. Por ejemplo, al tocar el icono de un cajón de navegación en la parte superior izquierda, se deslizará el contenedor desde la izquierda.

Si un contenedor ingresa dentro de los límites de la pantalla, se desvanece y se amplía. En lugar de animar desde una escala del 0%, comienza en el 95% para evitar llamar demasiado la atención sobre la transición. La animación de escala utiliza la aceleración de desaceleración del material, lo que significa que comienza a la velocidad máxima y disminuye lentamente para descansar. Para salir, el contenedor simplemente se desvanece sin escalar. Las animaciones de salida están diseñadas para ser más sutiles que las entradas para centrar la atención en el nuevo contenido.

* La animación se ralentizó para ilustrar cómo los contenedores pueden ingresar con una animación de desvanecimiento y escala

Transiciones sin contenedor

Algunas composiciones no tendrán un contenedor en el que basar el diseño de transición, como tocar un icono en una navegación inferior que lleva al usuario a un nuevo destino. En estos casos, se utiliza un patrón de dos pasos:

  1. La composición inicial sale desvaneciéndose, luego la composición final entra desvaneciéndose.
  2. A medida que la composición final se desvanece, también se amplía sutilmente con la reducción de desaceleración del material. Nuevamente, la escala solo se aplica a la composición entrante para enfatizar el contenido nuevo sobre el antiguo.
* La animación se ralentizó para ilustrar cómo las transiciones sin un contenedor usan desvanecimiento y escala

Si las composiciones de inicio y finalización tienen una relación espacial o secuencial clara, se puede utilizar el movimiento compartido para reforzarla. Al navegar por un componente paso a paso, por ejemplo, las composiciones de inicio y final comparten un movimiento deslizante vertical a medida que se desvanecen. Esto refuerza su disposición vertical. Al tocar el botón siguiente en un flujo de incorporación, las composiciones comparten un movimiento deslizante horizontal. Moverse de izquierda a derecha refuerza la noción de progresar en una secuencia. El movimiento compartido utiliza la relajación estándar de Material.

* La animación se ralentizó para ilustrar el movimiento compartido vertical y horizontal

Mejores prácticas

Mantenlo simple

Dada su alta frecuencia y sus estrechos vínculos con la usabilidad, las transiciones de navegación generalmente deberían favorecer la funcionalidad sobre el estilo. Esto no quiere decir que nunca deberían estilizarse, solo asegúrese de que la marca justifique las elecciones de estilo. El movimiento llamativo generalmente se reserva mejor para elementos como iconos pequeños, logotipos, cargadores o estados vacíos. El simple ejemplo a continuación puede no llamar tanto la atención sobre Dribbble, pero hará que la aplicación sea más útil.

* La animación se ralentizó para mostrar diferentes estilos de movimiento

Elija la duración y el alivio correctos

Las transiciones de navegación deberían usar duraciones que prioricen la funcionalidad al ser rápidas, pero no tan rápidas que se vuelvan desorientadoras. Las duraciones se eligen en función de la cantidad de pantalla que ocupa la animación. Dado que las transiciones de navegación generalmente ocupan la mayor parte de la pantalla, una buena regla general es una larga duración de 300 ms. En contraste, los componentes pequeños como un interruptor usan una corta duración de 100 ms. Si una transición se siente demasiado rápida o lenta, ajuste su duración en incrementos de 25 ms hasta que alcance el equilibrio correcto.

La suavización describe la velocidad con la que las animaciones se aceleran y ralentizan. La mayoría de las transiciones de navegación utilizan la aceleración estándar de Material, que es un tipo de aceleración asimétrica. Esto significa que los elementos se aceleran rápidamente y luego se ralentizan suavemente para enfocar la atención al final de la transición. Este tipo de relajación proporciona a las animaciones una calidad natural, ya que los objetos en el mundo real no comienzan o dejan de moverse instantáneamente. Si una transición parece rígida o robótica, es probable que la flexibilización simétrica o lineal se haya elegido por error.

* La animación se ralentizó para ilustrar diferentes tipos de relajación

Los patrones y las mejores prácticas descritos en este artículo están destinados a establecer un estilo de movimiento práctico y sutil. Esto es adecuado para la mayoría de las aplicaciones, sin embargo, algunas marcas pueden exigir expresiones de estilo más intensas. Para obtener más información sobre el movimiento de estilización, lea nuestras pautas de personalización aquí.

Una vez que se solucionan las transiciones de navegación, comienza el desafío de agregar carácter a su aplicación. Aquí es donde los patrones simples son inadecuados y el arte de la animación realmente brilla.

La animación de personajes puede agregar ligereza a un error frustrante

Si está interesado en obtener más información sobre el potencial del movimiento, asegúrese de leer nuestras pautas de movimiento de materiales.