El movimiento ayuda a que las IU sean expresivas y fáciles de usar. A pesar de tener tanto potencial, el movimiento es quizás el menos comprendido 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 GUI anteriores, pero el movimiento tuvo que esperar a que el hardware moderno renderizara 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 IU es igualmente complejo? La gente a menudo me dice que diseñar el movimiento es complicado, o que elegir los valores correctos es ambiguo. Sostengo que en las áreas más importantes para una UI, el diseño de movimiento puede y debe ser simple.
Donde empezar
El trabajo principal de Motion es ayudar a los usuarios a navegar una aplicación ilustrando la relación entre los elementos de la interfaz de usuario. Motion también tiene la capacidad de agregar carácter a una aplicación con iconos animados, logotipos e ilustraciones; sin embargo, establecer la usabilidad debe tener prioridad sobre la adición de expresividad. Antes de mejorar sus habilidades de animación de personajes, comencemos con el diseño de una base de movimiento fuerte centrándonos en las transiciones de navegación.
Patrones de transicion
Al diseñar una transición de navegación, la simplicidad y la consistencia son claves. Para lograr esto, elegiremos entre dos tipos de patrones de movimiento:
- Transiciones basadas en un contenedor
- Transiciones sin contenedor.
Transiciones basadas en un contenedor
Si una composición involucra un contenedor como un botón, una tarjeta o una lista, entonces el diseño de transición se basa en animar el contenedor. Los contenedores suelen ser fáciles de detectar en función de sus bordes visibles, pero recuerde que también pueden ser invisibles hasta que se inicie la transición, como un elemento de la lista sin divisores. Este patrón se divide en tres pasos:
1. Anime el contenedor utilizando la flexión estándar de Material (lo que significa que se acelera rápidamente y luego se desacelera suavemente para descansar). En este ejemplo, las dimensiones del contenedor y los radios 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 que se ajusten al ancho. Los elementos se fijan en la parte superior y se enmascaran dentro del contenedor. Esto crea una conexión clara entre el contenedor y los elementos internos.
La aplicación de este patrón a todas las transiciones que involucran un contenedor establece un estilo consistente. También hace que la relación entre las composiciones iniciales y finales sea clara, ya que están vinculadas por el contenedor animado. Para mostrar la flexibilidad de este patrón, aquí se aplica a cinco composiciones diferentes:
Algunos contenedores simplemente se deslizan desde fuera de la pantalla utilizando la flexión estándar de Material. La dirección de la que se desliza es informada por la ubicación del componente con el que está asociada. 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 entra desde 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 un 95% para evitar atraer la atención excesiva a la transición. La animación a escala utiliza la aceleración de la desaceleración del material , lo que significa que comienza a la velocidad máxima y disminuye la velocidad suavemente 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 enfocar la atención en el contenido nuevo.
Transiciones sin contenedor
Algunas composiciones no tienen un contenedor en el que basar el diseño de transición, como tocar un ícono en una barra de navegación inferior que lleva al usuario a un nuevo destino. En estos casos, se utiliza un patrón de dos pasos:
La composición inicial sale al desvanecerse, luego la composición final ingresa al desvanecerse.
A medida que la composición final se desvanece, también se incrementa sutilmente utilizando la aceleració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.
Si las composiciones iniciales y finales tienen una relación espacial o secuencial clara, se puede usar el movimiento compartido para reforzarlo. Al navegar por un componente paso a paso, por ejemplo, las composiciones de inicio y final comparten un movimiento de deslizamiento vertical a medida que se desvanecen. Esto refuerza su disposición vertical. Al tocar el siguiente botón en un flujo de integració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 flexibilización estándar del material.
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 deben ser estilizados, solo asegúrese de que la marca justifique las opciones de estilo. El movimiento llamativo generalmente se reserva mejor para elementos como iconos pequeños, logotipos, cargadores o estados vacíos. Es posible que el ejemplo simple a continuación no reciba tanta atención en Dribbble, pero lo hará para una aplicación más útil.
Elige la duración correcta y la flexibilización.
Las transiciones de navegación deben utilizar 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. Como las transiciones de navegación suelen ocupar la mayor parte de la pantalla, una larga duración de 300 ms es una buena regla general. 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 encuentre el equilibrio adecuado.
La aceleración describe la velocidad a la que las animaciones se aceleran y disminuyen. La mayoría de las transiciones de navegación utilizan el suavizado estándar de Material, que es un tipo de suavizado asimétrico. Esto significa que los elementos se aceleran rápidamente y luego disminuyen la velocidad para enfocar la atención en el final de la transición. Este tipo de suavizado le da a las animaciones una calidad natural, ya que los objetos en el mundo real no comienzan ni dejan de moverse instantáneamente. Si una transición parece rígida o robótica, es probable que se haya elegido erróneamente la aceleración simétrica o lineal.
Los patrones y las mejores prácticas que se describen en este artículo pretenden establecer un estilo de movimiento práctico y sutil. Esto es adecuado para la mayoría de las aplicaciones, sin embargo, algunas marcas pueden requerir expresiones de estilo más intensas. Para obtener más información sobre el estilo de movimiento, lea nuestras pautas de personalización aquí .
Una vez que se resuelven 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.
Comentarios
Publicar un comentario
¿Deseas Comentar? Hazlo con toda libertad.