Interface Material et couleurs dynamiques en fonction de votre arrière-plan

Android s'est engagé depuis des années en faveur de Material Design, mais avec Material You, il a franchi un cap important vers cette approche. Personnalisation poussée basée sur vos fonds d'écranIl ne s'agit plus seulement de changer quelques icônes ou de passer à un thème sombre, mais bien que l'ensemble du système s'adapte intelligemment aux couleurs que vous choisissez, tout en maintenant l'accessibilité et une conception cohérente.

Cette nouvelle philosophie de conception, présente depuis Android 12 et étendue dans Android 13, elle combine Couleurs dynamiques, mouvements fluides et widgets repensésIl en résulte une expérience visuelle plus humaine et émotionnelle, qui respecte en même temps le travail des designers, des développeurs et des marques qui doivent maîtriser leur identité visuelle.

Qu'est-ce que Material You ou Material Design 3 ?

Matériel Vous, également connu sous le nom de Conception de matériaux 3Il s'agit de la dernière évolution du système de conception de Google pour les interfaces UX/UI. Ce n'est pas seulement un style visuel, mais un ensemble de guides, composants et algorithmes qui permettent de créer des interfaces cohérentes sur les téléphones mobiles, les tablettes, les montres et autres appareils Android.

Contrairement aux versions précédentes de Material Design, Material You se concentre sur expression personnelle et adaptation à l'utilisateurL'idée est que deux personnes possédant le même téléphone portable puissent avoir une interface très différente, tout en restant utilisables, accessibles et compatibles avec l'écosystème Android.

Esthétiquement, cette itération opte pour une approche plus minimaliste et douxDes ombres moins marquées, une typographie moins diversifiée, des formes plus arrondies et un rendu plus épuré. Le tout s'accompagne d'un système de couleurs bien plus sophistiqué, capable de générer des palettes entières à partir d'une seule couleur source.

Ce qui est intéressant, c'est que Material You ne se limite pas à… Google PixelLa logique de couleur dynamique et les directives de conception ont été étendues à de nombreux niveaux de personnalisation, tels que : Une interface utilisateur, OxygenOS, ColorOS, OriginOS ou MIUI, avec le soutien spécifique de Google pour garantir une expérience cohérente sur la plupart des appareils fonctionnant sous Android 12 et versions ultérieures.

Comment créer des fonds d'écran avec l'IA sur Android

Émotion, individualité et changement de paradigme

Material You découle également d'une réflexion sur notre conception du design numérique. Google affirme que l'interface ne doit pas seulement répondre à la fonction, mais aussi à… le sentiment de l'utilisateur, son émotionD’où le jeu de mots dans « Material You » : l’appareil doit être aussi unique que vous, et non un clone identique à celui de millions de personnes.

Pendant des années, iOS et Android sont restés relativement rigides en termes de Personnalisation réelle de l'interface utilisateurHormis la modification du fond d'écran, l'ajout d'un widget ou l'installation d'un lanceur d'applications, les options étaient limitées. Avec Android 12 et Material You, Google renoue en partie avec l'esprit de son ancien slogan, « Ensemble, mais différents », en misant sur un écosystème commun, mais avec des interfaces personnalisées pour chaque utilisateur.

Cette philosophie contraste avec la stratégie d'Apple, qui est davantage axée sur… écosystème fermé et hautement contrôlé L'expérience visuelle y est globalement similaire d'un utilisateur à l'autre. Google, en revanche, offre une personnalisation bien plus fine de l'apparence sans pour autant compromettre le bon fonctionnement des applications sur différentes marques et modèles.

Principales nouveautés de Material You

Material You introduit plusieurs axes d'innovation qui s'entremêlent pour construire une expérience complète : Personnalisation poussée, couleurs dynamiques, adaptabilité et mouvements significatifsTout ceci est pris en charge par un système technique robuste qui peut être utilisé aussi bien par les fabricants que par les concepteurs et les développeurs.

Personnalisation approfondie de l'interface

L'un des changements majeurs réside dans la possibilité pour l'utilisateur de personnaliser l'apparence du système avec une bien plus grande précision. Android est capable de Réorganiser les couleurs, les surfaces, les boutons et les commandes afin qu'elles correspondent à la palette générée à partir du papier peint ou à une couleur choisie manuellement.

Cette personnalisation s'étend aux barres d'état, aux notifications, aux menus, au panneau de configuration rapide, aux paramètres, aux applications Google et, progressivement, aux applications tierces intégrant Material Design 3. L'objectif est que l'utilisateur perçoive une interface utilisateur intuitive et agréable. expérience visuelle cohérente de bout en bout, sans rupture brutale de couleur entre le système et les applications.

Adaptabilité aux écrans et aux facteurs de forme

Le matériau que vous utilisez renforce également le adaptabilité des interfaces aux différents formats d'écranCela inclut les téléphones mobiles classiques, les tablettes, les montres connectées et les appareils pliables. La même logique de couleurs, de typographie et d'espacement est adaptée pour garantir une interface confortable en toutes circonstances.

Dans le cas des téléphones pliables, Google a défini des directives spécifiques sur des aspects tels que : l'accessibilité des éléments, la charnière centrale et les agencements les plus complexesPar exemple, les 25 % supérieurs de l'écran ouvert sont considérés comme difficiles d'accès ; il est donc recommandé de ne pas y placer les actions principales, et les informations cruciales ne doivent pas être placées directement au-dessus de la charnière.

Retour de mouvement et tactile

Les mouvements dans Material You ne sont pas qu'esthétiques. Android 12 introduit un effet de Déplacement excessif dû à l'étirement élastiqueLorsque l'utilisateur tente de faire défiler au-delà de la fin d'une liste, la surface s'étire en douceur au lieu d'afficher l'effet de luminosité rebondissant typique des modèles précédents.

De plus, les animations d'ondulation au toucher ont été repensées pour offrir une expérience visuelle plus agréable. retour haptique plus subtil et fluideGoogle encourage les fabricants à maintenir ces comportements aussi proches que possible de la norme, afin que les applications se comportent de manière prévisible quelle que soit la couche de personnalisation.

Couleurs dynamiques : au cœur de Material You

L'élément clé de cette nouvelle étape est le système de couleurs dynamiques, connu en interne sous le nom de MonetÀ partir d'Android 12, le système peut extraire une couleur dominante de votre écran. fond d'écran ou une couleur de base définie et générer automatiquement une palette complète qui est appliquée au système et aux applications compatibles.

Ce système repose sur une approche technique relativement sophistiquée qui combine l'espace colorimétrique CAM16, palettes tonales et rôles des couleursL’objectif est de maintenir une bonne lisibilité, un contraste suffisant et une esthétique soignée en modes clair et sombre, même si l’utilisateur choisit des fonds d’écran relativement complexes.

Comment fonctionne la génération de palettes dans Material You

El processus de création L'utilisation des couleurs dynamiques peut se résumer en plusieurs étapes bien définies, même si elle repose sur de nombreux calculs mathématiques de couleurs :

Extraction d'une couleur de graine en fonction du fond d'écran, du contenu de l'application ou d'une couleur fixe choisie par l'utilisateur ou la marque.
Conversion et analyse dans l'espace CAM16 pour obtenir la tonalité, la saturation et d'autres paramètres perceptifs.
Génération de cinq palettes tonales clés (accent1, accent2, accent3, neutral1 et neutral2) à partir de la couleur source et des ajustements de chrominance et de tonalité.
Création de 13 nuances par palette, avec différents niveaux de luminance (0, 10, 50, 100, 200, 300… jusqu'à 1000), ce qui donne un total de 65 couleurs dynamiques.
Associer ces tons à des rôles de couleur d'interface utilisateur, tels que primaire, secondaire, surface, arrière-plan, texte, conteneurs, etc.

Comment tester Android 16 avant tout le monde

Styles de thèmes dans Android 13

Avec Android 13, le système franchit une nouvelle étape et vous permet de choisir entre six styles de thèmes différentsqui modifient la façon dont cette couleur d'origine est interprétée pour générer la palette finale :

TONAL_SPOT: est le thème par défaut de Material You, avec une vibration moyenne et un traitement équilibré des accents.
VIBRANT: optez pour une palette plus intense mais avec des transitions douces entre les couleurs, idéale pour des interfaces plus attrayantes.
EXPRESSIF: génère des combinaisons de couleurs d'accentuation plus inattendues et uniques, avec une intensité chromatique élevée.
VAPORISATEUR: réduit la saturation au minimum, recherchant un effet presque monochrome et très doux.
RAINBOW: associe des accents colorés à des surfaces neutres pour un résultat plus discret, recommandé pour les schémas statiques plutôt que pour le détourage.
SALADE DE FRUITS: associe des couleurs bicolores pour une plus grande expressivité, et convient mieux aux palettes fixes qu'aux arrière-plans dynamiques.

Le système prend un JSON stocké dans Paramètres.Sécurisé.PACKAGES_DE_SUPERPERSONNALISATION_DE_THÈME où la couleur source est spécifiée (par exemple, « 746BC1 ») et, éventuellement, le style du thème (par exemple, « EXPRESSIVE »). Android génère alors automatiquement les 65 variations de couleurs que les applications utiliseront.

D'où viennent les couleurs de base ?

Le document « Material You » examine trois voies principales pour obtenir le couleur d'origine qui servira de point de départ à l'algorithme :

À partir du fond d'écran de l'utilisateurC’est le cas le plus fréquent. Le système analyse l’image par quantification des couleurs, extrait plusieurs candidats et en sélectionne un qui répond à des critères de chrominance minimaux (par exemple, une valeur CAM16 ≥ 5) afin d’éviter un résultat trop terne.
À partir du contenu de l'application ou du site webL'application elle-même peut décider que la couleur principale de l'interface est dérivée de son contenu, conservant ainsi une esthétique dynamique tout en restant en harmonie avec le produit.
À partir d'une couleur sélectionnée manuellementLa marque ou l'utilisateur sélectionne une couleur spécifique, et le système construit la palette entière à partir de cette couleur, sans avoir besoin de dépendre de l'arrière-plan.

Dans tous les cas, l'objectif est que la couleur d'entrée unique devienne un schéma de couleurs complet, accessible et cohérentéviter les combinaisons qui entravent la lecture ou rompent le sentiment d'unité visuelle.

Contrôle pour les marques, les designers et les développeurs

Une question logique se pose pour toute personne travaillant dans la conception de produits numériques : ce système dynamique « remplace-t-il » les identités visuelles de la marque ? Après tout, on passe des heures à peaufiner son système de conception pour ensuite le voir disparaître. Android change de couleur en fonction du fond d'écran de l'utilisateur.

La réponse est que Material You offre un équilibre raisonnable : que vous soyez concepteur ou développeur. Vous ne perdez pas le contrôle, car vous pouvez décider dans quelle mesure vous souhaitez adopter les couleurs dynamiques.Le système est conçu pour être flexible, et non pour supplanter l'identité de chaque produit.

Thèmes personnalisés et chartes graphiques

Material Design 3 intègre l'idée de schémas personnalisés ou de marqueCes couleurs ne proviennent pas du fond d'écran de l'utilisateur, mais de couleurs définies par l'application elle-même. L'utilisation d'outils tels que Générateur de thèmes matériels Dans Figma, vous pouvez saisir les couleurs de votre marque (primaires, secondaires, tertiaires, neutres) et laisser le système générer un schéma complet aligné sur M3.

Ces thèmes personnalisés configurent le jetons de couleur requis et permettre à votre application de :

Il devrait être cohérent avec le reste de l'écosystème Material You.
Maintenir une accessibilité adéquate en modes clair et sombre.
Facilitez les futures combinaisons avec les couleurs dynamiques du système si vous le souhaitez.

En outre, vous pouvez associer les couleurs de la marque à des couleurs dynamiquesLe schéma de base peut hériter de certaines personnalisations de l'utilisateur, tandis qu'un ensemble étendu de couleurs (par exemple, pour des états sémantiques très spécifiques ou des accents de marque) reste statique.

jetons de conception et rôles de couleur

Le matériel que vous utilisez encourage fortement l'utilisation de jetons de conceptionAutrement dit, des noms sémantiques remplacent les valeurs directes, comme les codes hexadécimaux. Au lieu d'utiliser simplement « #6200EE », on utilise des jetons, tels que : couleurPrimaire, sur la surface, Conteneur principal, etc.

Ces jetons se connectent à palettes tonales dynamiques (system_accent1_600, system_neutral1_10, etc.) permettent à l'application de mettre à jour son apparence sans avoir à réécrire tout le code. Le Design Kit et le plugin Figma génèrent ces jetons et les associent à des styles dans les fichiers de conception, ce qui simplifie considérablement la transition vers le développement.

Hiérarchie visuelle et accessibilité

Lors de l'application des rôles de couleur à votre interface utilisateur, il reste essentiel de respecter les hiérarchie d'importanceLes couleurs les plus saturées doivent être réservées aux appels à l'action et aux éléments prioritaires ; les couleurs neutres et les variations plus douces sont réservées aux arrière-plans et au contenu secondaire.

Material You garantit que, sur la base des couleurs que vous fournissez, le système générera des variations avec contrastes appropriés pour le texte et les icônesen modes clair et sombre. Il est toutefois recommandé de tester les combinaisons en situation réelle, surtout si vous utilisez des couleurs secondaires ou tertiaires très vives qui pourraient concurrencer la couleur principale.

Couleur dynamique dans l'écosystème Android

Au départ, le système de couleurs dynamiques ne faisait pas partie d'AOSP, ce qui a suscité des doutes quant à son exclusivité sur les téléphones Pixel. Au fil du temps, Google a… intégration de la logique d'extraction et de génération de palettes dans Android 12 et 13Nous proposons des correctifs et une documentation pour aider les équipementiers à l'adopter de manière cohérente.

Des marques comme Samsung, OnePlus, Oppo, Vivo, realme ou Xiaomi Ils ont déjà annoncé la prise en charge des couleurs dynamiques dans leurs couches basées sur Android 12+, afin que des applications comme Gmail puissent adapter leur apparence tout en respectant la même palette sur différents appareils.

Exigences pour les fabricants (OEM)

Pour offrir un alignement avec le matériel VousLes partenaires Android doivent :

Utilisez le même logique d'extraction des couleurs que AOSP pour obtenir la couleur d'origine du papier peint.
Développez cette couleur dans le 65 API de couleur officiel (palettes d'accent et neutres avec 13 teintes chacune).
Appliquez ces palettes à la fois dans le L'interface utilisateur du système est la même que dans ses propres applications.afin que les développeurs tiers aient un comportement cohérent.
Offrir une expérience de sélecteur de thèmes et de fonds d'écran où l'utilisateur peut visualiser et choisir des combinaisons de couleurs en fonction de l'arrière-plan ou des couleurs de base.

De plus, si un appareil ne prend pas en charge l'extraction de la couleur d'arrière-plan (en raison de limitations techniques ou de choix de conception), une autre option peut être choisie. palette statique, type de matériau par défaut, tout en conservant une certaine cohérence visuelle malgré la perte de la partie dynamique.

Fonds d'écran, sélecteur de thèmes et palettes statiques

Le flux de couleurs dynamique standard commence par sélecteur de fond d'écran ou de thèmeLorsque l'utilisateur modifie l'arrière-plan ou choisit un ensemble de couleurs, le système :

Calculez les couleurs d'arrière-plan dominantes (ou lisez la couleur de base choisie).
Filtrez ces couleurs en fonction de leur saturation et d'autres règles pour en sélectionner une valide.
Générez les cinq palettes tonales et remplissez les 65 API de couleur.
Mettez à jour l'interface utilisateur du système et exposez ces couleurs pour que les applications puissent les utiliser.

Pour les couleurs de base fixes, les fabricants peuvent définir APK stub avec des palettes de couleurs et des noms descriptifs (par exemple, Bleu, Rouge, Jaune, Vert), qui apparaissent dans le sélecteur comme options prédéfinies. Chaque entrée comprend des valeurs primaires et secondaires que le système utilisera comme point de départ pour les palettes tonales.

Outils pour les designers : Material Theme Builder et kits de conception

Pour faciliter l'adoption de Material You dans le monde du design, Google a créé plusieurs outils spécifiques, principalement axés sur Figma. Le plus important est… Plugin Material Theme Builderce qui vous permet de générer des schémas de couleurs dynamiques et personnalisés sans avoir à vous débattre avec les mathématiques des couleurs.

Avec cet outil tu peux:

Charger un sujet de référence ou en créer un de toutes pièces.
Définir les couleurs clés (primaire, secondaire, tertiaire, neutre) et observez comment ils se répartissent dans l'interface utilisateur.
Appliquer les schémas générés à composants du kit Material Design inclus dans le fichier Figma.
Étendre le schéma avec couleurs personnalisées supplémentaires (Custom0, Custom1…) pour des besoins spécifiques en matière de marque ou de sémantique.

Le plugin génère automatiquement des styles Figma qui servent de jetons de couleur, et ce sont : lien vers les modèlesAinsi, changer de thème (par exemple, d'un thème neutre à un thème de marque) consiste pratiquement à appuyer sur un bouton et à attribuer le nouvel ensemble de styles.

Au-delà du mobile : widgets, icônes et lanceurs

L'impact de Material You ne se limite pas aux applications système. Widgets Android 12 Elles ont été mises à jour pour respecter les nouvelles API concernant la taille, les coins arrondis et la couleur, et les développeurs sont encouragés à mettre à jour leurs propres widgets pour tirer parti de ces fonctionnalités.

Par ailleurs, la communauté des lanceurs et des packs d'icônes l'a également remarqué. Il existe des packs d'icônes dynamiques qui Leur couleur change en fonction du papier peint ou de la couleur d'accentuation du système.et ils s'adaptent aux modes clair et sombre. Pour les faire fonctionner, vous devez utiliser des lanceurs compatibles (Lanceur de la Nouvelle-, Lawnchair, Hyperion, Niagara, Smart Launcher, etc.) et, après avoir changé l'arrière-plan ou le thème, réappliquez le pack d'icônes pour régénérer la palette.