Interfície Material You i colors dinàmics segons el teu fons

Android fa anys que aposta per Material Design, però amb Material You ha fet un salt important cap a la personalització profunda basada en els teus fons de pantalla. Ja no es tracta només de canviar unes icones o posar un tema fosc, sinó que tot el sistema s'adapti de manera intel·ligent als colors que tries, mantenint l'accessibilitat i el disseny coherent.

Aquesta nova filosofia de disseny, present des de Android 12 i ampliada en Android 13, combina colors dinàmics, moviment fluid i ginys renovats. El resultat és una experiència visual que se sent més humana i emocional, però alhora respecta el treball de dissenyadors, desenvolupadors i marques que necessiten mantenir la seva identitat visual sota control.

Què és Material You o Material Design 3?

Material You, també conegut com Disseny de materials 3, és la darrera evolució del sistema de disseny de Google pensat per a interfícies UX/UI. No és només un estil visual, sinó un conjunt de guies, components i algorismes que permeten construir interfícies coherents a mòbils, tablets, rellotges i altres dispositius Android.

A diferència de les versions anteriors de Material Design, Material You posa el focus a la expressió personal i ladaptació a lusuari. La idea és que dues persones amb el mateix mòbil puguin tenir una interfície molt diferent, però que totes dues segueixin sent usables, accessibles i consistents amb l'ecosistema Android.

A nivell estètic, aquesta iteració aposta per un enfocament més minimalista i suau: menys ombres molt marcades, menys estils de tipografia diferents, formes més arrodonides i una aparença més neta. Tot això es combina amb un sistema de color molt més sofisticat, capaç de generar paletes completes a partir dun sol color dorigen.

El més interessant és que Material You no es limita als Google Pixel. La lògica de color dinàmic i les guies de disseny shan estès a moltes capes de personalització com One UI, OxygenOS, ColorOS, OriginOS o MIUI, amb suport específic per part de Google perquè lexperiència sigui coherent en gran part dels dispositius basats en Android 12 i posteriors.

Article relacionat:

Com generar els teus propis fons de pantalla amb IA per a Android

Emoció, individualitat i canvi de paradigma

Material You també neix d'una reflexió sobre com entenem el disseny digital. Google planteja que la interfície no només ha de respondre a la funció, sinó també al sentir de l'usuari, a la seva emoció. Per això el joc de paraules de “Material You”: el dispositiu hauria de ser tan únic com tu, no un clon idèntic al de milions de persones.

Durant anys, tant iOS com Android han estat relativament rígids quant a personalització real de la UI. Més enllà de canviar el fons, algun giny o instal·lar un launcher, el marge era limitat. Amb Android 12 i Material You, Google recupera en part l'esperit del seu antic eslògan Be together, not the same, apostant per un ecosistema comú, però interfícies adaptades a cada persona.

Aquesta filosofia contrasta amb l'estratègia d'Apple, més centrada en un ecosistema tancat i molt controlat on l'experiència visual varia poc entre usuaris. Google, en canvi, permet afinar molt l'aparença sense renunciar que les apps funcionin igual de bé en diferents marques i models.

Principals novetats de Material You

Material You introdueix diverses línies d'innovació que s'entrellacen per construir l'experiència completa: personalització profunda, colors dinàmics, adaptabilitat i moviment significatiu. Tot això es recolza en un sistema tècnic robust que poden aprofitar tant fabricants com a dissenyadors i desenvolupadors.

Personalització profunda de la interfície

Un dels grans canvis és que lusuari pot ajustar laparença del sistema a un nivell molt més fi. Android és capaç de reorganitzar colors, superfícies, botons i controls perquè encaixin amb la paleta generada a partir del fons de pantalla o d'un color escollit manualment.

Aquesta personalització s'estén a barres d'estat, notificacions, menús, panell ràpid, ajustaments, apps pròpies de Google i, progressivament, a apps de tercers que integrin Material Design 3. La idea és que l'usuari en percebi una experiència visual coherent d'extrem a extrem, sense salts de color bruscos entre el sistema i les aplicacions.

Adaptabilitat a pantalles i factors de forma

Material You també reforça la adaptabilitat d'interfícies a diferents formats de pantalla. Això inclou mòbils tradicionals, tablets, rellotges intel·ligents i dispositius plegables. La mateixa lògica de color, tipografia i espaiat s'ajusta perquè la interfície sigui còmoda de fer servir en cada context.

En el cas dels plegables, Google ha definit guies específiques en aspectes com ara assequibilitat d'elements, la frontissa central i els layouts més complexos. Per exemple, es considera que el 25% superior de la pantalla oberta és difícil d'assolir, per la qual cosa es recomana no col·locar-hi accions primàries, i s'evita situar informació crucial just a sobre de la frontissa.

Moviment i feedback tàctil

El moviment a Material You no és pur adorn. Android 12 introdueix un efecte de desplaçament excessiu basat en estirament elàstic: quan l'usuari intenta fer scroll més enllà del final d'una llista, la superfície s'estira suaument en lloc de mostrar la típica brillantor de rebot antic.

A més, les animacions d'ona en prémer (ripple) s'han redissenyat per oferir una retroalimentació tàctil més subtil i fluida. Google anima els fabricants a mantenir aquests comportaments el més semblants possible a l'estàndard, perquè les apps es comportin de forma predictible sense importar la capa de personalització.

Colors dinàmics: el cor de Material You

La peça clau d'aquesta nova etapa és el sistema de colors dinàmics, conegut internament com a Monet. A partir d'Android 12, el sistema pot extreure un color dominant de la teva fons de pantalla o d'un color base definit i generar automàticament una paleta completa que s'aplica al sistema ia les aplicacions compatibles.

Aquest sistema es recolza en un enfocament tècnic força sofisticat que combina l'espai de color CAM16, paletes tonals i rols de color. L'objectiu és mantenir una bona llegibilitat, prou contrast i una estètica cuidada tant en mode clar com en mode fosc, fins i tot encara que l'usuari esculli fons de pantalla una mica complicats.

Com funciona la generació de paletes a Material You

El procés de creació de colors dinàmics es pot resumir en diversos passos ben definits, encara que per sota hi hagi molta matemàtica del color:

• Extracció d'un color d'origen (seed color) a partir del fons de pantalla, de contingut de l'app o d'un color fix triat per l'usuari o la marca.
• Conversió i anàlisi a l'espai CAM16 per obtenir to, croma i altres paràmetres perceptuals.
• Generació de cinc paletes tonals clau (accent1, accent2, accent3, neutral1 i neutral2) a partir del color d'origen i ajustaments en croma i to.
• Creació de 13 tons per paleta, amb diferents nivells de luminància (0, 10, 50, 100, 200, 300… fins a 1000), cosa que dóna lloc a 65 colors dinàmics en total.
• Mapeig d'aquests tons a rols de color de la UI, com a primari, secundari, superfície, fons, text, contenidors, etc.

Article relacionat:

Android 16 i Material 3 Expressive: el renaixement visual que redefineix l'experiència en mòbils

Cadascuna de les cinc paletes té un comportament concret: per exemple, accent1 sol ser el color principal de la marca o tema de l'usuari, accent2 i accent3 serveixen com a accents complementaris, i neutral1/neutral2 es reserven per a fons, superfícies i elements menys cridaners.

Estils de tema a Android 13

Amb Android 13 el sistema fa un pas més i permet escollir entre sis estils de tema diferents, que varien com s'interpreta aquest color d'origen per generar la paleta final:

• TONAL_SPOT: és el tema per defecte de Material You, amb una vibració mitjana i un tractament equilibrat dels accents.
• VIBRANT: aposta per una paleta més intensa però amb transicions suaus entre colors, ideal per a interfícies més cridaneres.
• EXPRESSIVE: genera combinacions de color d'accent més inesperades i úniques, amb alta intensitat cromàtica.
• SPRAY: redueix la saturació al mínim, buscant un efecte gairebé monocromàtic i molt suau.
• ARC DE SANT MARTÍ: barreja accents colorits amb superfícies neutres per oferir un resultat més discret, recomanat per a esquemes estàtics més que per a extracció des de fons.
• FRUIT_SALAD: combina colors de dos tons per donar més expressivitat, també més indicat per a paletes fixes que per a fons dinàmics.

El sistema pren un JSON emmagatzemat a Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES on s'indica el color d'origen (per exemple, 746BC1) i, opcionalment, l'estil de tema (per exemple, EXPRESSIVE). Amb això, Android genera automàticament les 65 variants de color que després utilitzaran les apps.

D'on surten els colors base

Material You contempla tres camins principals per obtenir el color d'origen que servirà de punt de partida a l'algorisme:

• Des del fons de pantalla de l'usuari: és el cas més habitual. El sistema analitza la imatge mitjançant quantificació de color, n'extreu diversos candidats i en selecciona un que compleixi criteris mínims de croma (per exemple, un valor CAM16 ≥ 5) per assegurar-se que el resultat no sigui massa apagat.
• Des del contingut de l'app o del lloc web: la pròpia aplicació pot decidir que el color principal de la interfície es derivi del seu contingut, mantenint així una estètica viva però alineada amb el producte.
• Des d'un color escollit manualment: la marca o l'usuari seleccionen un color específic, i el sistema construeix tota la paleta a partir d'aquest, sense necessitat de dependre del fons.

En tots els casos, l'objectiu és que l'únic color d'entrada es converteixi en un esquema de color complet, accessible i coherentevitant combinacions que dificultin la lectura o trenquin la sensació d'unitat visual.

Control per a marques, dissenyadors i desenvolupadors

Un dubte lògic per a qualsevol que treballi en producte digital és si aquest sistema dinàmic «trepitja» o no els dissenys de marca. Al cap ia la fi, passes hores afinant el teu sistema de disseny perquè després Android canviï els colors en funció del fons de pantalla de l'usuari.

La resposta és que Material You ofereix un equilibri raonable: com a dissenyador o desenvolupador no perds el control, perquè pots decidir fins a quin punt vols adoptar els colors dinàmics. El sistema està pensat per ser flexible, no pas per imposar-se per sobre de la identitat de cada producte.

Temes personalitzats i esquemes de marca

Material Design 3 incorpora la idea de esquemes personalitzats o de marca, que no es deriven del fons de pantalla de l'usuari, sinó de colors definits per la pròpia aplicació. Usant eines com Material Theme Builder a Figma, pots introduir els teus colors de marca (primari, secundari, terciari, neutrals) i deixar que el sistema generi un esquema complet alineat amb M3.

Aquests temes personalitzats configuren els tokens de color necessaris i permeten que la teva app:

• Es vegi coherent amb la resta de l'ecosistema Material You.
• Mantingueu una accessibilitat correcta en mode clar i fosc.
• Faciliteu una futura combinació amb colors dinàmics del sistema si així ho decideixes.

A més, pots combinar colors de marca amb colors dinàmics: l'esquema central pot heretar part de la personalització de l'usuari, mentre que un conjunt estès de colors (per exemple, per a estats semàntics o accents de marca molt específics) es manté estàtic.

Tokens de disseny i rols de color

Material You empeny amb força l'ús de tokens de disseny, és a dir, noms semàntics que substitueixen valors directes com a codis hexadecimals. En lloc d'utilitzar «#6200EE» solt, es treballa amb tokens com colorPrimary, onSurface, primaryContainer, Etc

Aquests tokens es connecten amb les paletes tonals dinàmiques (system_accent1_600, system_neutral1_10, etc.) perquè l'app pugui actualitzar la seva aparença sense reescriure tot el codi. El Design Kit i el plugin de Figma generen aquests tokens i els mapegen a estils dins dels fitxers de disseny, de manera que el traspàs a desenvolupament sigui molt més directe.

Jerarquia visual i accessibilitat

Quan apliques rols de color a la teva UI, segueix sent clau respectar la jerarquia d'importància. Els colors més saturats s'han de reservar per a trucades a l'acció i elements prioritaris; els neutrals i variants més suaus es queden per a fons i contingut secundari.

Material You garanteix que, partint dels colors que proporcionis, el sistema generarà variants amb contrastos adequats per a text i icones, tant en mode clar com fosc. Tot i així, es recomana provar les combinacions en contextos reals, especialment si introdueixes colors secundaris o terciaris molt vius que puguin competir amb el primari.

Color dinàmic a l'ecosistema Android

Inicialment, el sistema de color dinàmic no formava part d'AOSP, cosa que va generar dubtes sobre si seria exclusiu dels Pixel. Amb el pas del temps, Google ha anat integrant la lògica d'extracció i generació de paletes a Android 12 i 13, oferint pegats i documentació perquè els OEM ho adoptin de forma coherent.

marques com Samsung, OnePlus, Oppo, Visc, realme o Xiaomi ja han anunciat suport per als colors dinàmics a les seves capes basades en Android 12+, de manera que apps com Gmail puguin ajustar el seu aspecte respectant la mateixa paleta en diferents dispositius.

Requisits per a fabricants (OEM)

Per oferir una alineació amb Material You, els socis d'Android han de:

• Utilitza la mateixa lògica dextracció de color que AOSP per obtenir el color dorigen del fons de pantalla.
• Expandir aquest color a les 65 APIs de color oficials (paletes accent i neutral amb 13 tons cadascuna).
• Aplicar aquestes paletes tant a la IU del sistema com a les seves apps pròpies, perquè desenvolupadors de tercers tinguin un comportament consistent.
• Proporcionar una experiència de selector de temes i fons de pantalla on lusuari pugui veure i triar combinacions de color basades en el fons o en colors bàsics.

A més, si un dispositiu no admet extracció de color del fons (per limitacions tècniques o decisió de disseny), es pot optar per una paleta estàtica tipus Material per defecte, mantenint certa coherència visual encara que es perdi la part dinàmica.

Fons de pantalla, ThemePicker i paletes estàtiques

El flux estàndard de color dinàmic parteix del selector de fons de pantalla o de temes. Quan l'usuari canvia el fons o tria un conjunt de colors, el sistema:

1. Calcula els colors dominants del fons (o llegeix el color bàsic escollit).
2. Filtra aquests colors en funció del seu croma i altres regles per seleccionar-ne un de vàlid.
3. Genera les cinc paletes tonals i omple les 65 APIs de color.
4. Actualitza la UI del sistema i exposa aquests colors perquè les apps els utilitzin.

Per a colors bàsics fixos, els fabricants poden definir APK de stub amb arrays de colors i noms descriptius (per exemple, Blau, Vermell, Groc, Verd), que apareixen al selector com a opcions predefinides. Cada entrada inclou valors primaris i secundaris que el sistema utilitzarà com a punt de partida per a les paletes tonals.

Eines per a dissenyadors: Material Theme Builder i Design Kits

Per facilitar l'adopció de Material You al món del disseny, Google ha creat diverses eines específiques, centrades sobretot en Figma. La més important és el plugin Material Theme Builder, que permet generar esquemes de color dinàmics i de marca sense necessitat de barallar-se amb la matemàtica del color.

Amb aquesta eina pots:

• Carregar un tema de referència o crear-ne un des de zero.
• Definir colors clau (primari, secundari, terciari, neutrals) i veure com es propaguen a tota la UI.
• Aplicar els esquemes generats a components del kit Material Design inclòs a l'arxiu de Figma.
• Estendre l'esquema amb colors personalitzats addicionals (Custom0, Custom1…) per a necessitats específiques de marca o semàntica.

El plugin genera automàticament estils de Figma que actuen com a tokens de color, i aquests es vinculen les maquetes. D'aquesta manera, canviar de tema (per exemple, d'un de neutre a un de marca) consisteix pràcticament a prémer un botó i assignar el nou conjunt d'estils.

Més enllà del mòbil: ginys, icones i launchers

L'impacte de Material You no es queda a les apps de sistema. Els ginys d'Android 12 s'han actualitzat per respectar les noves API de mida, cantonades arrodonides i color, i s'anima els desenvolupadors a actualitzar els seus propis ginys per aprofitar aquestes capacitats.

D'altra banda, la comunitat de launchers i icon packs també n'ha pres nota. Hi ha paquets d'icones dinàmics que canvien de color en funció del fons de pantalla o de l'accent del sistema, i s'adapten tant a manera clara com fosca. Perquè funcionin, cal utilitzar launchers compatibles (Nova Llançadora, Lawnchair, Hyperion, Niagara, Smart Launcher, etc.) i, després de canviar de fons o tema, tornar a aplicar el paquet d'icones perquè es regeneri la paleta.

Article relacionat:

Material 3 Expressive: revolució visual i personal a l'experiència Google

Material You ha transformat Android en una plataforma on el color i la forma s'adapten amb intel·ligència a cada usuari, sense deixar tirats dissenyadors, marques ni desenvolupadors. Gràcies al sistema de colors dinàmics, paletes tonals i tokens de disseny, és possible tenir una interfície molt personal i alhora coherent, accessible i tècnicament predictible. Ja utilitzes un Pixel, un Samsung o un Xiaomi, la idea és que el teu mòbil s'assembli una mica més a tu, però que les apps segueixin funcionant i veient-se com esperen milions de persones a tot l'ecosistema Android. Comparteix la informació perquè més usuaris coneguin del tema.