Découvrez la nouvelle fonctionnalité de Material 3 Expressive : l’indicateur de chargement, désormais actif dans Android 16. Cette innovation améliore la lisibilité et promet une expérience utilisateur plus fluide, renforçant l’engagement envers un design moderne et intuitif. Plongez dans cette évolution essentielle du paysage Android !

Le Nouvel Indicateur de Chargement de Material 3 Expressive

Animation d’Introduction

Le lancement du langage de design de Google débute avec une animation de "tirer pour actualiser". Cette animation transforme "Material 3" en "Material 3 Expressive", introduisant ainsi un nouvel indicateur de chargement captivant.

Description de l’Indicateur de Chargement

L’indicateur de chargement est un composant innovant de Material 3 Expressive. Il sert à afficher le "progrès pour un court temps d’attente", spécifiquement moins de cinq secondes. Google le recommande comme un "remplaçant des indicateurs de progrès circulaires indéterminés", lesquels ont été modernisés avec M3E pour être plus distincts.

Fonctionnement des Indicateurs de Progrès

Dans Material 3 (et M2), les indicateurs de progrès utilisés pour la fonction de tirer pour actualiser étaient relativement simples, affichant une boucle classique de chargement. L’indicateur de chargement M3E adopte une séquence de morphologie de forme en boucle composée de sept formes uniques de Material 3. Cela vise à capter l’attention de l’utilisateur et inclut un conteneur circulaire avec une couleur de fond plus claire lorsqu’il est utilisé pour tirer pour actualiser.

Utilisation en Dehors de la Fonction de Tirer pour Actualiser

Cet indicateur peut également être employé en dehors de cette fonction, sans le conteneur. Les utilisateurs de la version bêta d’Android 16 peuvent observer cet indicateur de chargement après le démarrage de l’appareil et lors de la saisie de leur code PIN, avant que le Pixel Launcher ou l’écran d’accueil ne se charge.

Placement des Indicateurs de Chargement

Les indicateurs de chargement ne se limitent pas à être centrés sur une page ou un conteneur. Ils peuvent être intégrés dans d’autres composants, tels que les boutons, pour signaler qu’une action est en cours, par exemple, lors de la validation d’un formulaire ou de la vérification de mises à jour.

Exemple d’Utilisation

Un autre exemple d’application de l’indicateur de chargement se trouve dans la barre d’adresse d’un navigateur lorsque la page est en cours de chargement.

Recommandations de Google

Google recommande cet indicateur pour "afficher le progrès des chargements de moins de cinq secondes". Pour des interactions plus longues, Material 3 Expressive a mis à jour les indicateurs de progrès linéaires et circulaires. Cette mise à jour leur permet d’être plus épais et d’avoir une forme ondulée, contrairement à la forme plate. "La forme ondulée peut rendre les processus plus longs moins statiques et est préférable lorsqu’un style plus expressif est approprié." En conséquence, cet indicateur peut être très proéminent.

Ressources Supplémentaires

Pour plus d’informations sur les composants de Material 3, vous pouvez consulter le site officiel de Material Design.