Le mouvement est un outil puissant qui doit être utilisé avec parcimonie au volant. Il n'est approprié que lorsqu'il permet d'informer le conducteur sans détourner son attention de la route.
Conseils en bref (TL;DR) :
- Évitez de distraire les utilisateurs avec des mouvements inutiles.
- Utilisez le mouvement pour améliorer la compréhension des utilisateurs et développer leurs compétences.
- Rendez votre langage de mouvement suffisamment flexible pour tous les matériels pertinents.
- Utilisez le schéma de mouvement recommandé pour votre situation.
Principes du mouvement
Lors de la conception d'animations pour les interfaces Android for Cars, gardez à l'esprit trois principes de base : la sécurité, l'information et la flexibilité.
Sûr
La conduite est la priorité absolue de l'utilisateur ; tout le reste est secondaire. Considérez son attention comme une ressource limitée et évitez toute distraction inutile par le mouvement.
Informatif
Utilisez le mouvement pour transmettre des informations utiles aux utilisateurs. Par exemple, le mouvement peut améliorer leur compréhension du produit en illustrant les relations hiérarchiques et spatiales entre les éléments. Il peut également contribuer à développer leur maîtrise de l'interface en indiquant les interactions disponibles.
Flexible
Définir un langage de mouvement suffisamment évolutif et flexible pour s'adapter aux écrans de toutes tailles et formes, ainsi qu'à tous les types d'entrées utilisateur.
Modèles de mouvement
Pour garantir une expérience utilisateur cohérente sur toutes les applications, Android Automotive fournit des recommandations concernant les schémas de mouvement à utiliser dans les situations suivantes :
- Basculer entre des vues de même niveau
- Passer à une vue détaillée
- Prolonger une action existante
- Minimiser et étendre une action
- Perturber une action
Tous les modèles de mouvement de cette section sont basés sur l'interpolation standard, comme indiqué dans les recommandations d'interpolation de Material Design. Autrement dit, les mouvements s'accélèrent rapidement puis ralentissent progressivement, afin de mettre en valeur la fin de la transition.
Basculer entre des vues de même niveau
Pour passer d'une vue à une autre au sein d'une même hiérarchie dans une application, par exemple des onglets dans la barre d'outils ou des morceaux dans une playlist, effectuez un mouvement latéral. Ce déplacement horizontal confirme que vous restez toujours au même niveau hiérarchique dans l'application.
Exemple
Passer à une vue détaillée
Lors du passage d'une vue d'ensemble à une vue détaillée, utilisez un mouvement de profondeur (axe Z) qui agrandit la vue inférieure et la fait apparaître progressivement tandis que la vue d'ensemble disparaît. Ce mouvement renforce la relation parent-enfant entre la vue d'ensemble et la vue détaillée, attirant l'attention sur cette dernière.
Exemple
Prolonger une action existante
Lorsqu'un utilisateur effectue une action et en réalise une autre, utilisez un mouvement vertical (vers le haut ou vers le bas) pour afficher cette seconde action en plein écran, par-dessus l'action principale, sur un fond transparent. Le fait de pouvoir voir l'action principale à travers le fond transparent confirme à l'utilisateur qu'il est toujours en train de réaliser cette action.
Pour fermer l'action secondaire, utilisez le mouvement inverse. Ce mouvement inverse doit être plus rapide que le mouvement initial, car l'utilisateur a terminé l'action secondaire et est prêt à quitter.
