Avec l’arrivée de Material 3, les barres d’outils flottantes révolutionnent l’expérience utilisateur. Optimisées pour la lisibilité, elles offrent une interface plus expressive et intuitive. Ces améliorations sont essentielles pour les développeurs cherchant à créer des applications attrayantes tout en respectant les normes de design modernes de Google.

Les Barres d’Outils Flottantes avec Material 3 Expressif

Avec Material 3 Expressif, Google met en avant des contrôles situés en bas des applications à l’aide de barres d’outils. Ce nouveau composant affiche des "actions fréquemment utilisées pertinentes pour la page actuelle". Les développeurs ont désormais la possibilité de personnaliser leur utilisation de plusieurs façons.

Types de Barres d’Outils

Il existe deux types principaux de barres d’outils :

Barre d’Outils Fixe

La barre d’outils fixe "s’étend sur toute la largeur de la fenêtre. Elle est particulièrement adaptée pour des actions globales qui restent les mêmes à travers plusieurs pages". Cette barre remplace l’ancienne barre d’application de bas, comme celle utilisée par Google Tasks avant la refonte de l’année dernière. Google conseille de la remplacer par la barre d’outils fixe, qui est très similaire mais plus flexible.

Barre d’Outils Flottante

La barre d’outils flottante "flotte au-dessus du contenu principal. Elle est idéale pour des actions contextuelles en rapport avec le contenu du corps ou une page spécifique". Cette option permet aux applications d’associer une barre d’outils flottante et un bouton d’action flottant (FAB) pour une meilleure expérience utilisateur.

Par exemple, la vue des albums dans Google Photos utilisera cette composante pour les boutons de partage, d’ajout et d’édition. Cela permet une expérience plus immersive en plein écran au sommet de la page. De plus, les barres d’outils flottantes peuvent servir de tabs entre les pages liées dans la hiérarchie du produit, comme on l’observe dans Fitbit avec les sélecteurs de jour, de semaine, de mois et d’année.

Considérations de Design

Les barres d’outils peuvent être placées verticalement sur des écrans plus larges. Google souligne que "les barres d’outils flottantes ne doivent pas dépasser le bord de la fenêtre ou du panneau". Les applications avec plusieurs actions peuvent utiliser un menu de débordement pour gérer cela efficacement.

Configurations de Couleurs

Les configurations de couleurs comprennent :

• Standard : "Un schéma de couleur à faible emphase, idéal pour concentrer l’attention sur le contenu principal".
• Vibrant : "Un schéma de couleur à forte emphase qui attire l’attention sur les contrôles. Il peut également indiquer un changement temporaire dans le comportement de la page, comme l’entrée en mode d’édition".

Recommandations d’Utilisation

Google recommande de ne pas combiner une barre d’outils et une barre de navigation (barre inférieure) ensemble. Il est conseillé d’afficher la barre de navigation sur les pages principales, et les barres d’outils sur les pages suivantes avec des actions. Par exemple, dans une application hypothétique de messagerie, cela pourrait permettre une meilleure organisation et une navigation plus fluide.

Absence de Barres de Navigation Flottantes

Actuellement, une telle composante n’existe pas dans Material 3 Expressif, malgré sa présence continue dans Google Chat. Cependant, un modèle M3E suggère qu’un tel design pourrait faire son apparition dans une future mise à jour ou expansion de M3E.

Pour en savoir plus sur Material Design et ses composantes, vous pouvez consulter le site officiel de Material Design.