Personalizzazione del colore del materiale

1. Introduzione

Ultimo aggiornamento: 18/04/22

Le app possono assumere una serie di colori da schemi di base, colori dinamici generati dagli utenti o colori del brand.

Il precedente lab sui colori di Material You ha esplorato come visualizzare i colori dinamici all'interno dei mockup di progettazione, ma puoi anche utilizzare il tema Material per personalizzare la tua app con i colori del tuo brand. L'utilizzo del nuovo sistema di colori con i colori del tuo brand creerà una combinazione di colori accessibile che potrebbe assumere funzionalità più dinamiche.

Obiettivi didattici

Come creare un tema personalizzato con Material Theme Builder.
Applicare un tema personalizzato ai mockup di progettazione.
Possibilità di combinare colori dinamici e personalizzati.

Prerequisiti

Per questo lab ci baseremo su alcuni concetti di progettazione fondamentali.

Conoscenza dei concetti di progettazione fondamentali: tavolozze dei colori
Conoscenza delle combinazioni di colori e dei ruoli Android attuali
Conoscenza di Figma
(Facoltativo) Visualizzazione del colore dinamico nel codelab dell'app

Che cosa ti serve

2. Inizia

Configurazione

Per iniziare, devi accedere al file Designlab di Figma. Tutto ciò che ti serve per il lab è nel file Figma. Puoi scaricare e importare il file oppure duplicarlo dalla community di Figma.

Per prima cosa, accedi a Figma o crea un account.

Duplica dalla community di Figma

Vai al file Personalizzazione di Material o cerca Visualizzazione del colore dinamico nella tua app con Material Design nella community di Figma. Fai clic su Duplica nell'angolo in alto a destra per copiare il file nei tuoi file.

Layout dei file

Mentre esamini il file, noterai che è autonomo e inizia con un'introduzione. Ogni sezione è suddivisa in una riga di tavole da disegno collegate tra loro, con alcuni concetti di base per la sezione, seguiti da esercizi. Le sezioni e gli esercizi si basano l'uno sull'altro e devono essere completati in sequenza.

Questo codelab ti guida attraverso questi concetti ed esercizi in modo più dettagliato. Leggi il codelab per scoprire di più sulle nuove funzionalità di Material You.

A partire dalla tavola da disegno Introduzione, sono presenti pulsanti che collegano le tavole da disegno in ordine. Per accedere al link, fai clic sul pulsante.

Installa il plug-in Figma

Questo codelab si basa in gran parte su un nuovo plug-in Figma per generare combinazioni di colori e token dinamici. Installa il plug-in Figma direttamente dalla pagina della community di Figma o cerca "Material Theme Builder" nella community di Figma.

3. Combinazione di colori di Material

Per prima cosa, una panoramica di come viene utilizzato il colore in Material e di come funziona il nuovo sistema di colori.

Il colore viene utilizzato per esprimere lo stile e trasmettere il significato, sia che si tratti di un significato personale per l'utente, del brand o semantico. Il sistema di colori gestisce la variabilità delle combinazioni di colori che cambiano dinamicamente in base alle modifiche degli input dell'utente. La logica delle relazioni tonali e delle variazioni di tonalità e croma fornisce una base per l'applicazione flessibile dei colori.

Lo spazio colore fornisce un modo per generare combinazioni di colori chiari e scuri accessibili estratte da un colore di origine generando 5 colori chiave e poi tavolozze tonali, in cui vengono selezionati determinati passaggi tonali.

Questa tecnica di spostamento dei colori non solo fornisce una combinazione di colori accessibile, ma anche metodi per creare combinazioni di colori del brand accessibili e coerenti con le combinazioni di colori generate dagli utenti.

Le combinazioni di colori vengono generate da 5 colori chiave in tavolozze tonali per creare combinazioni accessibili

Tema del brand

M3 supporta le applicazioni sistematiche di parametri personalizzati per aiutarti a definire e mantenere gli stili che comunicano il tuo brand.

Uno schema personalizzato è una combinazione di colori che non deriva dallo sfondo del dispositivo dell'utente, ma dal creatore dell'app. Il sistema di colori M3 e le combinazioni personalizzate sono la base per abilitare il colore dinamico nelle app.

Lo schema personalizzato colmerà il divario tra M2 e M3 per una facile migrazione configurando i token necessari (slot di colore) e creando un'esperienza più brandizzata.

Aggiungere i colori del brand a Material Theme Builder

4. Combinazione di colori: colori di contrasto

La base di una combinazione di colori è l'insieme di cinque colori chiave che si riferiscono singolarmente a tavolozze tonali separate con 13 tonalità. Tonalità specifiche di ogni tavolozza tonale vengono assegnate ai ruoli di colore in un'interfaccia utente. Iniziamo aprendo il plug-in Material Theme Builder e configurando il nostro primo colore intenso: Primario.

Se inserisci solo il colore primario, questo verrà utilizzato come origine per generare un'intera combinazione di colori.

Nella finestra modale del plug-in, fai clic su Personalizzato. Il tema verrà impostato su un tema personalizzato. Per questo lab utilizzeremo il tema Material già generato, ma se vuoi puoi anche crearne uno nuovo. Scopri di più nella sezione Visualizzazione del colore dinamico.
Ora impostiamo un colore chiave primario. Il colore primario può essere il colore principale del tuo brand o il colore intenso primario più utilizzato. Gli altri colori chiave verranno compilati in base al colore primario. Ciò significa che non è necessario aggiungere altri colori se non ne hai bisogno.

5. Crea il resto del tema

Il colore primario viene utilizzato per generare il tema, ma potresti avere colori di contrasto a supporto del colore primario del brand.

Nella finestra modale del plug-in, aggiungi un colore secondario facendo clic sul colore secondario. I ruoli secondari vengono utilizzati per i componenti meno importanti dell'interfaccia utente, ampliando al contempo l'opportunità di espressione del colore. Il colore secondario verrà aggiornato nello schema dei colori e nell'interfaccia utente dell'app.
Fai lo stesso per il colore terziario. I ruoli terziari vengono utilizzati per i contrasti che possono essere utilizzati per bilanciare i colori primari e secondari o per attirare l'attenzione su un elemento. Il ruolo del colore terziario viene lasciato alla discrezione dei creatori e ha lo scopo di supportare un'espressione del colore più ampia nei prodotti.
Ora i ruoli neutri vengono utilizzati per le superfici e gli sfondi, nonché per il testo e le icone con enfasi elevata.

Fornisci colori secondari, terziari e neutri per personalizzare completamente la combinazione di colori.

I colori del tuo brand verranno ora inclusi nella combinazione di colori principale spostata in modo da corrispondere allo spazio colore M3, completamente accessibile e in grado di essere esportata e implementata nel codice come tema.

6. Applica il tema

Ruoli e token

Ogni colore intenso (primario, secondario e terziario) viene fornito in un gruppo di quattro colori compatibili di tonalità diverse per l'accoppiamento, la definizione dell'enfasi e l'espressione visiva. Il gruppo è composto dal colore intenso, dal colore, dal contenitore e dal contenitore.

I ruoli neutri vengono utilizzati per le superfici e gli sfondi, nonché per il testo e le icone con enfasi elevata.

I token di progettazione rappresentano le piccole decisioni di progettazione ripetute che compongono lo stile visivo di un sistema di progettazione. I token sostituiscono i valori statici, come i codici esadecimali per il colore, con nomi autoesplicativi. I token di progettazione collegano in modo significativo le scelte di stile che altrimenti non avrebbero una relazione chiara.

Il plug-in Figma crea token e inserisce i tuoi colori di origine sotto forma di stili Figma da collegare a mockup, guide di stile del brand e persino sistemi di progettazione esistenti.

I token di progettazione creano un linguaggio comune tra i ruoli di colore e l'implementazione.

Gerarchia dei colori

Quando applichi i ruoli di colore ai mockup, tieni presente l'ordine di importanza o la gerarchia degli elementi. Questo concetto ti aiuterà ad assegnare i colori del brand ai rispettivi ruoli, ma anche a mapparli all'interno dell'interfaccia utente. In genere, i colori più saturi o concentrati attirano prima l'attenzione di un utente. Per questo motivo, il ruolo del colore primario viene mappato ai componenti più incentrati sull'invito all'azione. Sebbene Material Theme Builder utilizzi il sistema di colori M3 per generare i colori appropriati, se fornisci colori secondari o terziari con una saturazione più elevata, i colori risulteranno più brillanti del colore primario. Tieni presente l'ordine in cui vuoi che gli utenti interagiscano con l'interfaccia utente e i contenuti per assegnare i ruoli di colore. Non tutti i componenti devono utilizzare il colore primario.

Il colore saturo e uniforme attira maggiormente l'attenzione.

7. Passa al tema

Per applicare il tema personalizzato che hai creato ai tuoi progetti, dovrai impostare il mockup sui token nel tema Material esistente.

I componenti Material sono dotati di ruoli pre-mappati e funzionano automaticamente con Material Theme Builder.

Passa al tema dalla finestra modale di Material Theme Builder.

Impostiamo tutti i token (stili Figma) nel layout a destra per utilizzare questo tema selezionando il frame del layout e facendo clic su Scambia. Vedrai il prefisso dello stile aggiornato nei colori di selezione.
Non è stato aggiornato tutto? I componenti personalizzati, come la scheda dei suggerimenti per la cura delle piante, dovranno prima applicare lo stile Figma. Seleziona il contenitore dei suggerimenti per la cura, quindi fai clic sull'icona con 4 punti per assegnare uno stile e scegli contenitore terziario. Fai lo stesso con i contenuti della scheda dei suggerimenti per la cura, tranne che per assegnare un contenitore terziario. Anche le piccole etichette nell'elenco sono componenti personalizzati, ma ci torneremo più avanti.
I componenti di Material Design utilizzano mappature predefinite, ma puoi sperimentare con le assegnazioni di stile per adattarle al meglio all'interfaccia utente. Prenditi un momento per giocare con diverse gerarchie di colori ed espressioni del brand.

(Nel file di esportazione per il codice è incluso solo il tema. Se lavori con un ingegnere, condividi i mockup per comunicare le mappature dei token, poiché non saranno inclusi nell'esportazione)

Se apri il plug-in senza un tema, verrà visualizzata una schermata di configurazione per iniziare. L'opzione "Inizia" genererà il tema di base predefinito "material-theme" come gruppo di stili Figma da collegare ai mockup o da utilizzare con il kit di Material Design.

8. Estendi oltre la combinazione di colori principale

Ora hai un tema cromatico del brand mappato ai componenti e al mockup di progettazione, ma potresti avere altri colori da includere. È qui che entra in gioco una combinazione di colori estesa per consentire l'aggiunta di colori personalizzati.

Questi possono essere colori semantici, specifici del brand o persino specifici del prodotto, a cui devono essere assegnati ruoli e spostati tramite l'algoritmo dei colori o rimanere come input.

La combinazione di colori estesa introduce anche la possibilità di combinare colori dinamici (generati dagli utenti) con i colori del tuo brand. Consenti alla combinazione di colori principale di avere un'influenza personalizzata dell'utente, mentre i colori del brand vengono impostati nella combinazione di colori estesa. Ciò significa che gli elementi dell'interfaccia utente possono essere più personali per i tuoi utenti e i colori del tuo brand possono avere momenti di impatto più precisi nell'app.

La combinazione di colori principale può essere estesa per includere colori personalizzati.

9. Estendi e personalizza

L'estensione della combinazione di colori con colori personalizzati consente l'aggiunta di colori come colori semantici o colori di branding aggiuntivi.

Schema personalizzato con colori personalizzati aggiunti.

Nella finestra modale del plug-in, sotto i colori chiave, fai clic su Aggiungi un colore.
Il tema attuale verrà aggiornato con una nuova riga Custom0. Aggiorna questo colore facendo clic sul colore, quindi seleziona un nuovo colore.
Questi colori estesi sono disponibili come stile all'interno degli stili di sola lettura come Custom0. Sono presenti sia la tavolozza tonale sia la combinazione di colori. Mappiamo alcune delle etichette dell'elenco con il nuovo colore selezionando lo sfondo dell'etichetta e assegnando uno dei ruoli del colore aggiunto (contenitore on-custom0).

Impostazione del colore personalizzato nei colori selezionati.

Material Theme Builder genera automaticamente i colori come Custom#. Per rinominare un colore personalizzato aggiunto, espandi il gruppo di stili del tema nel riquadro degli stili (viene visualizzato quando non è selezionato nulla). Quindi cerca Custom0 all'interno del sottogruppo di origine. Se rinomini l'origine qui, il colore verrà rinominato nella finestra modale del plug-in.

Gli stili di colore personalizzati sono disponibili nel riquadro degli stili.

L'eliminazione del colore aggiunto può essere eseguita in modo simile facendo clic con il tasto destro del mouse ed eliminando lo stile. La prossima volta che aprirai il plug-in, il colore aggiunto verrà rimosso. La ridenominazione e l'eliminazione potrebbero non essere riflesse nel diagramma dei colori.

10. Complimenti

Ottimo lavoro per aver imparato a creare un tema cromatico personalizzato utilizzando Material Theme Builder, ad applicarlo ai mockup di progettazione e ad aggiungerlo alla combinazione di colori. Il nuovo sistema di colori Material 3 offre colori accessibili, flessibili e coerenti per i progetti e non vediamo l'ora di vedere come li utilizzerai.

Se hai domande, non esitare a contattarci in qualsiasi momento utilizzando @MaterialDesign su Twitter.

Continua a seguirci per altri contenuti e tutorial di progettazione su youtube.com/MaterialDesign