Romper la simetría proporciona contraste y atractivo a tus proyectos. Obtén información sobre cuándo y cómo aplicar esto a tus proyectos.
El tiempo de animación asimétrico mejora la experiencia del usuario, ya que te permite expresar tu personalidad y, al mismo tiempo, responder rápidamente a las interacciones del usuario. También proporciona contraste a la sensación, lo que hace que la interfaz sea más atractiva a la vista.
- Usa tiempos de animación asimétricos para agregar personalidad y contraste a tu trabajo.
- Siempre prioriza la interacción del usuario. Usa duraciones más cortas cuando respondas a toques o clics, y reserva duraciones más largas para los momentos en los que no lo hagas.
Al igual que con la mayoría de las "reglas" de la animación, debes experimentar para descubrir qué funciona para tu aplicación, pero cuando se trata de la experiencia del usuario, los usuarios son notoriamente impacientes. La regla general es responder siempre rápidamente a la interacción del usuario. Dicho esto, la mayoría de las veces, la acción del usuario es asimétrica y, por lo tanto, la animación también puede serlo.
Por ejemplo, cuando un usuario presiona para mostrar una navegación en la barra lateral, debes mostrarla lo más rápido posible, con una duración de alrededor de 100 ms. Sin embargo, cuando el usuario descarta el menú, puedes animar la vista un poco más lentamente, por ejemplo, alrededor de los 300 ms.
Por el contrario, cuando se muestra una vista modal, por lo general, es para mostrar un error o algún otro mensaje importante. En esos casos, te recomendamos que muestres la vista un poco más lentamente, nuevamente alrededor de la marca de 300 ms, pero la eliminación, que activa el usuario, debe ocurrir muy rápido.
La regla general, entonces, es la siguiente:
- En el caso de las animaciones de la IU activadas por la interacción de un usuario, como las transiciones de vista o la visualización de un elemento, incluye una introducción rápida (duración corta) y un final lento (duración más larga).
- En el caso de las animaciones de la IU activadas por tu código, como errores o vistas modales, usa una introducción más lenta (duración más larga), pero un final rápido (duración corta).