El movimiento debe aparecer con moderación en el contexto de la conducción para expresar conceptos, desarrollo de la marca y relaciones entre elementos. Solo debe usarse para ayudar a los conductores a informar sin distraer su atención.
Resumen:
- Evita distraer a los usuarios con movimientos innecesarios
- Usa el movimiento para aumentar la comprensión de los usuarios y desarrollar su dominio
- Haz que tu lenguaje en movimiento sea lo suficientemente flexible para todo el hardware relevante
- Usa el patrón de movimiento recomendado para tu situación
Patrones de movimiento
Para brindar una experiencia del usuario coherente en todas las apps, se aplican patrones de movimiento específicos a las siguientes interacciones:
- Alternar entre aplicaciones
- Cómo alternar entre las vistas de apps similares
- Cómo extender una acción existente
- Cómo minimizar y expandir una acción
- Interrumpir una acción
Estos patrones de movimiento se basan en la aceleración estándar, como se describe en Material Design, que se centra en el final de una transición, ya que acelera y acelera la transición gradualmente.
Alternar entre aplicaciones
Cuando cambies de app, usa una transición de encadenado, que aplica un fundido de entrada a un elemento mientras que otro se atenúa. Esta transición representa una salida de la app actual mientras se mueve rápidamente a otra.
Ejemplo
Cómo alternar entre las vistas de apps similares
Cuando cambies de una vista con el mismo nivel de jerarquía en una app (también denominadas "vistas entre pares"), como pestañas en la barra de una app o canciones en una lista de reproducción, usa una transición de eje compartido. Este movimiento horizontal de lado a lado refleja el estado de permanencia en el mismo nivel dentro de una aplicación.
Ejemplo
Cómo extender una acción existente
Cuando un usuario está en el proceso de ver o realizar una acción y, luego, realiza una acción secundaria relacionada, esa acción secundaria debe introducirse con un movimiento vertical (ya sea hacia arriba o hacia abajo). Esta acción secundaria se muestra en una superposición de pantalla completa, con un fondo de velo frente a la acción principal. La presencia de la acción principal a través de la malla refuerza que el usuario aún está realizando esa acción.
La acción secundaria se cierra en la dirección inversa del movimiento de apertura. Este movimiento inverso debería tardar menos que el original, ya que se realiza la acción.
Ejemplo
Cómo minimizar y expandir una acción
Las acciones en curso pueden minimizarse en un formato más pequeño. Este formato más pequeño permite que el usuario realice varias tareas mientras se ejecuta la acción en segundo plano.
Desplegable: Cuando el usuario presiona una acción minimizada, se expande y muestra la pantalla completa con una transición de atenuación gradual.
Minimización: Cuando minimices una acción en curso, usa lo opuesto de este movimiento. El movimiento para minimizar debe tomar menos tiempo que el movimiento desplegable, ya que el usuario está abandonando esta acción.
Ejemplo
Interrumpir una acción
Cuando una acción breve opcional debe aparecer repentinamente frente a una acción en curso, debe deslizarse (hacia arriba o hacia abajo) desde el borde de la pantalla, con una lámina parcial. Como alternativa, debería atenuarse en el centro de la pantalla, con una lámina completa. Inicia el movimiento desde la ubicación más cercana a donde quieres que aparezca la nueva acción.
Ejemplo
