1. Introduzione
Ultimo aggiornamento: 21/09/21
Le app possono assumere una serie di colori da schemi di base, colori dinamici generati dagli utenti o colori del brand.
Preparati a scoprire le nuove funzionalità di colore dinamico introdotte con Material You. In questo lab creerai tavolozze di colori dinamiche per scoprire come funziona il sistema di colori, i concetti guida che creano tavolozze di colori accessibili e i metodi per visualizzare l'app con colori dinamici utilizzando gli strumenti di progettazione più recenti.
Obiettivi didattici
- Novità nel colore di Material Design
- Come applicare il colore generato dagli utenti alla tua app
- Strumenti utili
Prerequisiti
Per questo lab ci baseremo su alcuni concetti di progettazione fondamentali.
- Conoscenza dei concetti di base del design: tavolozze dei colori
- Conoscenza degli schemi di colori e dei ruoli Android attuali
- Conoscenza di Figma
Che cosa ti serve
2. Inizia
Configurazione
Per iniziare, devi accedere al file Figma di Designlab. Tutto ciò che ti serve per il lab è contenuto nel file Figma. Puoi scaricare e importare il file o duplicarlo dalla community di Figma.
Per prima cosa, accedi a Figma o crea un account.
Duplicare dalla community di Figma
Vai al file Visualizing dynamic color in your app with Material Design o cerca Visualizing dynamic color in your app with Material Design all'interno di Figma Community. Fai clic su Duplica nell'angolo in alto a destra per copiare il file nei tuoi file.
Layout del file
Esplora il file. Noterai che il file è 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, quindi devono essere completati in sequenza.
Questo codelab ti guiderà attraverso questi concetti ed esercizi in modo più dettagliato. Ti consiglio di leggere il codelab per scoprire di più sulle nuove funzionalità di Material You.
A partire dal piano di lavoro Intro, sono presenti pulsanti che collegano i piani di lavoro in ordine. Per accedere al link, fai clic sul pulsante.
Installare il plug-in Figma
Questo codelab si basa in gran parte su un nuovo plug-in Figma per generare schemi di colori e token dinamici. Installa il plug-in Figma direttamente dalla pagina della community Figma o cerca "Material Theme Builder" nella community Figma.
3. Concetti sui colori
Che cos'è Dynamic Color?
Material You reinterpreta il colore come un'esperienza più personalizzata. Grazie all'estrazione dinamica dei colori, la gamma di possibili esperienze cromatiche è notevolmente più ampia.
Il colore dinamico è una parte fondamentale di Material You, in cui un algoritmo ricava colori personalizzati dallo sfondo di un utente da applicare alle sue app e all'UI di sistema.
Luminanza
Il colore dinamico è progettato per funzionare in contesti imprevedibili. Per gestire i rapporti di contrasto in vari contesti di visualizzazione, i livelli di luminanza sono l'attributo chiave che consente di combinare correttamente i colori anche senza che il team di prodotto testi ogni combinazione di colori specifica.
Gli elementi con una luminanza simile non avranno un contrasto adeguato per la leggibilità, mentre gli elementi con valori di luminanza diversi saranno più distinguibili.
Palette tonali
Una tavolozza tonale è la traduzione di una tonalità (un colore dinamico estratto) in uno spettro di tonalità correlate. La traduzione di un colore in 13 tonalità consente di applicare un gruppo di gamme tonali, chiamato tavolozza tonale, in diversi contesti, dai singoli elementi all'interno di un componente ai temi dell'intera app.
Il colore tradotto in una gamma tonale.
4. Estrazione dei colori
Seed to scheme
Vediamo come funziona il colore dinamico con Material Theme Builder.
- Apri Material Theme Builder. Con l'opzione Dinamico selezionata, inserisci un'immagine o selezionane una dal browser dei file. Nota che il colore seme verrà aggiornato in base all'immagine.
- I valori di colore vengono estratti da uno sfondo e viene assegnato un "tipo" che determina la relazione del colore con gli altri colori di uno schema. Questi "colori chiave" (a destra) sono stati aggiornati per riflettere questi valori.
- Vengono poi tradotti in tavolozze tonali basate sulla luminanza, generando cinque gamme di colori con tonalità chiare e scure. Le tavolozze tonali sono etichettate come tali nell'output del colore.
- Dalle cinque gamme tonali, i toni specifici (in base alla luminanza) vengono inseriti nei ruoli predefiniti che compongono uno schema. I colori vengono mappati a uno schema tramite i token di progettazione.
Ruoli dei colori terziari creati da una gamma tonale terziaria e mappati ai componenti.
5. Temi e token
I token di progettazione consentono flessibilità e coerenza in un prodotto, consentendo ai progettisti, ad esempio, di assegnare il ruolo di colore di un elemento in un'interfaccia utente, anziché un valore impostato. I token fungono da ponte tra il ruolo assegnato a un elemento e il valore di colore scelto per un ruolo. Progettare in base al ruolo di un colore anziché al colore specifico è più fondamentale con l'introduzione del colore dinamico.
I temi contengono token Material Design sia per il colore che per il tipo, garantendo che i progetti e il codice abbiano un'unica fonte di verità per rappresentare la base, insieme a tavolozze generate dagli utenti e valori personalizzati.
In Figma, il plug-in genera questi token come stili, il che significa che se utilizzi gli stili generati, utilizzerai i token MD.
I colori di una tavolozza tonale vengono mappati a uno schema chiaro o scuro tramite i token di progettazione.
Il sistema di mappatura assegna un tono a ogni elemento di un componente.
Token di configurazione
Per applicare il colore dinamico ai tuoi progetti, dobbiamo impostare il mockup sui token nel tema Material esistente.
- 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 l'aggiornamento del prefisso dello stile nei colori di selezione.
Fai clic su Scambia per aggiornare il tema collegato utilizzato nel design selezionato.
- Ora inserisci un'immagine o selezionane una dal browser di file. I valori del mockup assumeranno il colore dinamico estratto dall'immagine.
- Fai clic sul pulsante di riproduzione casuale per randomizzare il colore di base da cui estrapolare invece di estrarre dall'immagine. Questo è un altro modo per visualizzare rapidamente l'effetto del colore dinamico sui mock-up di progettazione.
Se fai clic sul pulsante di riproduzione casuale, il colore di base viene scelto in modo casuale.
Se apri il plug-in senza un tema, viene visualizzata una schermata di configurazione per iniziare. "Inizia" genererà la baseline predefinita "material-theme" come gruppo di stili Figma da connettere ai tuoi mockup o da utilizzare con il kit Material Design.
6. Richiesta di accesso all'UI
I layout forniti sono stati creati con il kit Material Design, che utilizza i token Material Design, ma sono presenti alcuni elementi personalizzati che non sono mappati.
- Seleziona le schede degli articoli. Nel riempimento, imposta lo stile (icona con quattro puntini) su material-theme/surface. Puoi anche cercare la superficie.
- Con una procedura simile, seleziona il tipo nelle schede e impostalo su sulla piattaforma e le caselle di controllo su primario.
Gli stili Figma utilizzati nelle schede del progetto.
Successivamente, creeremo altri mock per scorrere il resto degli schemi.
Creare temi e iterare
Ora abbiamo collegato completamente un mockup per visualizzare il colore dinamico, ma possiamo anche creare più temi e scambiarli su mockup separati per visualizzare una gamma di colori dinamici contemporaneamente.
- Nel modale del plug-in, fai clic sul menu a discesa e seleziona "Aggiungi nuovo tema".
- Crea un nome univoco per il tema e fai clic su "Crea tema". Verranno generati anche nuovi diagrammi dei colori per ogni tema creato.
Aggiunta di un nuovo tema tramite il menu a discesa.
- Aggiungi un'immagine o mescola il colore di base.
- Nel modale del plug-in, seleziona un mockup (componente dell'interfaccia utente dell'app) e fai clic su Scambia. In questo modo, i valori dello stile verranno aggiornati al tema corrente mostrato nel menu a discesa.
- Duplica (CMD + D) il mockup.
Fai clic su Scambia per aggiornare il tema collegato utilizzato nel design selezionato.
- Ripeti i passaggi da 1 a 5.
Ora hai più design con diverse iterazioni di colori dinamici.
7. Complimenti
Complimenti per aver imparato e applicato il colore dinamico. Material Theme Builder è stato creato per semplificare l'utilizzo dei colori in Material Design visualizzando i colori dinamici, creando temi personalizzati ed esportandoli nel codice.
Se hai domande, non esitare a contattarci in qualsiasi momento utilizzando @MaterialDesign su Twitter.
Continua a seguirci per altri contenuti e tutorial di design su youtube.com/MaterialDesign.