Découvrez les nouvelles barres d’outils flottantes avec Material 3, qui transforment l’expérience utilisateur grâce à une interface expressive et une lisibilité optimisée. Ces évolutions visent à simplifier l’interaction tout en offrant une esthétique moderne. Préparez-vous à réinventer votre façon d’interagir avec les applications !

Les Barres d’outils Flottantes avec Material 3 Expressive

Avec Material 3 Expressive, Google met l’accent sur les contrôles en bas des applications à travers les barres d’outils. Ce nouveau composant permet d’afficher les "actions fréquemment utilisées pertinentes à la page actuelle".

Une nouvelle approche des barres d’outils

Google décrit cette barre comme un "conteneur avec plusieurs emplacements". Les développeurs ont la possibilité de la personnaliser de différentes manières, avec deux types principaux disponibles :

Barre d’outils fixée

La barre d’outils fixée "s’étend sur toute la largeur de la fenêtre". Elle est idéale pour les actions globales qui restent constantes à travers plusieurs pages. Elle remplace la barre d’application inférieure, qui était utilisée par Google Tasks avant la refonte de l’année dernière. Ce remplacement est crucial car la barre inférieure est désormais obsolète : "Elle doit être remplacée par la barre d’outils fixée, 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 destinée à des actions contextuelles qui sont pertinentes par rapport au contenu de la page ou à la page spécifique. Les applications peuvent associer une barre d’outils flottante avec un bouton d’action flottant (FAB).

Par exemple, la vue des albums de Google Photos utilise ce composant pour les boutons de partage, d’ajout et d’édition, ce qui permet une expérience plus immersive en plein écran en haut de la page. Les barres d’outils flottantes peuvent également être utilisées comme onglets entre des pages connexes dans la hiérarchie d’un produit, comme l’exemple de Fitbit qui propose un sélecteur pour le jour, la semaine, le mois et l’année.

Personnalisation et configurations de couleur

Ces barres d’outils peuvent être placées verticalement sur des écrans plus grands. Google préconise que "les barres d’outils flottantes ne devraient pas dépasser le bord de la fenêtre ou du panneau". Pour les applications avec de nombreuses actions, un menu de débordement peut être utilisé.

Concernant les configurations de couleur, deux options sont mises en avant :

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

Bonnes pratiques pour les barres d’outils

Il est conseillé de ne pas associer une barre d’outils avec une barre de navigation (barre inférieure) : "Affichez la barre de navigation sur les pages principales, et les barres d’outils sur les pages suivantes avec actions." Prenons l’exemple d’une application hypothétique de messagerie : il serait judicieux d’utiliser une barre de navigation pour l’écran d’accueil et une barre d’outils flottante pour les options spécifiques à chaque message.

Le futur des barres d’outils

À l’heure actuelle, il n’existe pas de composants de navigation flottante ou de barre inférieure dans Material 3 Expressive, même si on les trouve dans Google Chat. Un mockup de M3E montre une telle conception, et il est possible qu’elle soit intégrée dans une future expansion ou mise à jour de M3E.

En savoir plus sur Material 3 Expressive

Pour approfondir vos connaissances sur Material 3 Expressive, vous pouvez consulter la documentation officielle de Google. Cette ressource vous fournira des informations détaillées sur l’implémentation et les meilleures pratiques liées aux nouveaux composants de Material 3.