Google a annoncé Material You à I/O 2021, et il est depuis arrivé à la grande majorité de ses applications Android. Sur le Web, Gmail est le principal exemple, mais vous pouvez également faire une démonstration de Material Design 3 sur Material.io.
Google considère Matériel.io être un « manuel en ligne » et c’était repensé ce mois-ci avec encore plus d’éléments Material Design 3 pour démontrer tout son potentiel :
Pour cette actualisation, l’équipe Material.io a présenté de nouvelles fonctionnalités et composants tout en démontrant comment les principes de Material 3 peuvent être étendus pour résoudre des cas d’utilisation spécifiques à un produit, dans notre cas, une riche bibliothèque d’informations pour aider les concepteurs et les développeurs à créer de beaux produits.
Au lieu de la couleur dynamique dérivée du papier peint, Material.io utilise Couleur dynamique basée sur le contenu qui tire parti d’un « ensemble d’images allant du style, de la couleur et du sujet ».
La transformation dynamique des couleurs crée une expérience visuelle holistique en faisant en sorte que le site reflète le contenu consommé par un lecteur et illustre le nouveau système de couleurs de Material Design 3 qui utilise une palette unique de tons et de compliments.
Vous pouvez le voir en action lors de la visualisation Articles sur les directives relatives aux composants matériels.
Pendant ce temps, Material.io a gagné un thème sombre (commutateur en bas à gauche) avec cette refonte, et Google a fait en sorte que les images clés répondent aux différents modes. Le site évite également le vert, étant donné le daltonisme rouge-vert, et utilise le bleu (Do) ou le rouge (Don’t) à la place.
En termes de navigation sur le site, Google « a combiné le nouveau rail de navigation avec le tiroir de navigation en utilisant une simple interaction de survol qui donne aux lecteurs une sensation de vitesse ergonomique et fournit rapidement un aperçu du contenu du site avec une relative facilité ». Les onglets et les tables des matières sont les autres principales formes de navigation.
Il convient de noter en particulier l’approche de Material.io pour les puces en forme de « cookie » :
L’application de ces formes à des puces à une si petite échelle et leur rotation aléatoire avec quelques CSS simples donne une impression d’iconoclasme discret, poussant l’expression visuelle pour l’expression, plutôt que pour une utilité stricte.
Sur le front du mouvement, il y a une page plein écran, une diapositive verticale et des transitions latérales. De la même manière:
Les icônes réagissent en augmentant de poids en survolant et en diminuant de poids lors de la pression ; cela donne à nouveau un sentiment d’énergie et d’utilité magiques. Pour les composants de navigation, les icônes se remplissent lorsqu’un élément est sélectionné.
FTC : Nous utilisons des liens d’affiliation automatique générateurs de revenus. Suite.
Découvrez 9to5Google sur YouTube pour plus d’informations :
