1. Panoramica
In occasione di Google I/O 2019, Material Design ha introdotto delle linee guida per la creazione di un tema scuro che completi il tema Material esistente del tuo prodotto. I temi chiari sono ideali per la lettura di testi lunghi e offrono un contrasto più leggibile, mentre la luminanza ridotta di un tema scuro garantisce sicurezza in ambienti bui e può ridurre l'affaticamento degli occhi.
In Material, i temi scuri sono progettati per essere utilizzati come modalità supplementare a un tema chiaro predefinito, mantenendo l'identità unica della tua app (inclusi gli stili per colore, forma, tipo ed elevazione) attraverso una presentazione sfumata e adatta alla notte.
In questo designlab, esamineremo i passaggi necessari per creare un tema scuro basato su un tema Material esistente, utilizzando uno dei nostri studi su Material.
Collaboreremo con Reply, un'app di posta elettronica progettata per chiarezza, leggibilità, intuitività e facilità d'uso. Analizzeremo l'identità di Reply e prenderemo decisioni ponderate per mantenere i momenti brandizzati nell'app, creando al contempo un tema che sia comunque comodo al buio.
Inoltre, miglioreremo il tema e lavoreremo con colori personalizzati per le superfici che vanno oltre il tema scuro di base per enfatizzare ulteriormente la personalità unica di Rispondi.
Materiali richiesti:
2. Raccogli i file richiesti.
Prima di iniziare, devi scaricare il nostro file iniziale di Figma. Tutto ciò che ti serve per designlab è incluso in questo file.
- Scarica DarkTheme DesignLab Kit.fig (7,6 MB)
3. Configura l'ambiente
A questo punto, devi configurare l'ambiente di progettazione.
Per prima cosa, accedi a Figma o crea un account.
Dopo aver eseguito l'accesso, importa il file che hai scaricato nel passaggio precedente. Per farlo, individua l'icona "Importa file" nell'angolo in alto a sinistra della schermata dei file Figma e individua il file nella cartella "Download".
Dai un'occhiata al file. Contiene un tema chiaro, una tavolozza tonale predefinita basata sul brand dell'app e una copia del tema scuro finale che creeremo.
- In un'altra scheda, apri la guida di Material Design per i temi scuri. Faremo riferimento a queste linee guida durante tutto il designlab.
4. Comprendere l'identità del prodotto
Prima di iniziare a lavorare sul tema scuro per Reply, dobbiamo comprendere alcune caratteristiche del brand Reply. In questo modo, potremo fare scelte consapevoli sul nostro tema, in modo che l'identità e il brand di Reply vengano espressi in modo coerente sia nel tema chiaro che in quello scuro.
Il brand di Reply pone l'accento sulla comunicazione. L'app dà la priorità alle qualità funzionali, favorendo la facilità d'uso rispetto agli elementi di design che non hanno uno scopo funzionale.
Ai fini di questo designlab, gli elementi più importanti dell'espressione del brand in Reply sono colore, tipo e forma.
Colore
Il tema cromatico di Rispondi utilizza un colore principale blu-grigio scuro abbinato a un colore secondario giallo-arancio.
Poiché il colore secondario viene utilizzato raramente, l'interfaccia utente di Rispondi è spesso monocromatica e utilizza variazioni del colore principale. Questo tema cromatico delicato consente di leggere facilmente i contenuti senza distrazioni e di visualizzare facilmente gli avatar fotografici.
Il colore secondario di Rispondi, quindi, ha un impatto enorme ovunque venga utilizzato, enfatizzando le azioni critiche e mettendo in evidenza i momenti del brand in tutta l'app.
Tipo
In quanto app incentrata su contenuti ed efficienza basati su testo, il tipo e la tipografia sono fondamentali per l'espressione dell'identità di Reply. L'app si basa su Work Sans per la sua scala tipografica completa, utilizzando una varietà di stili che incorporano sei pesi di Work Sans: Light, Regular, Medium, SemiBold e Bold.
La creazione dell'intera scala tipografica a partire da Work Sans conferisce a Reply una tipografia coerente e prevedibile, ma organica e leggibile.
Secondo il designer di Work Sans, Wei Huang, la famiglia è ottimizzata per l'utilizzo sullo schermo. È quindi ideale per leggere in modo efficiente passaggi di testo in email o altri contenuti. La sua base libera nelle forme dei primi Grotteschi gli conferisce un'estetica un po' più amichevole e umana, mentre la spaziatura più ampia rende la lettura più fluida.
Forma
Reply ha una storia di forme sfumate, che accoppiano componenti rotondi e appuntiti in modo da rafforzare l'efficienza e la natura funzionale dell'elenco email, dando al contempo un tocco più morbido alle azioni chiave e ai componenti più grandi.
- Componenti piccoli
- Componenti di media lunghezza
- Componenti di grandi dimensioni
I componenti piccoli come i pulsanti e il pulsante di azione rapida sono completamente arrotondati, mentre i componenti medi come le schede email e la barra delle app inferiore sono completamente quadrati. I componenti di grandi dimensioni, come il cambio account e il foglio inferiore, hanno angoli leggermente arrotondati.
Queste forme si combinano per rafforzare la comprensione dell'utente di dove si trova nell'app e di come è concepito ogni componente, nonché del suo rapporto con il resto dell'interfaccia.
5. Utilizzare il colore
Sapendo come il colore si relaziona all'espressione del brand di Rispondi nel suo tema chiaro predefinito, possiamo apportare modifiche informate alla sua tavolozza per un tema scuro utilizzabile ed espressivo.
In Material, i sistemi di colori si basano su tavolozze tonali, che utilizzano i colori del brand per creare un insieme di varianti armoniose che si uniscono in un sistema di colori completo applicato all'app, garantendo stile e leggibilità.
Nel file Figma, puoi vedere le tavolozze tonali primaria e secondaria di Reply. Le frecce chiare sopra ogni tavolozza indicano i valori utilizzati nel tema chiaro di Reply, mentre le frecce scure indicano le varianti che utilizzeremo nel tema scuro.
Quando crei un tema scuro con Material, vengono scelte varianti più chiare in modo che il sistema di colori possa rimanere espressivo e mantenere un contrasto appropriato senza causare affaticamento della vista. I colori più saturi tendono a "vibrare" visivamente su sfondi più scuri, rendendoli più difficili da leggere. I toni più chiari offrono anche una maggiore flessibilità nella variazione del colore delle superfici rialzate, che esamineremo a breve.
6. Regolare i colori della superficie
Ora che abbiamo una panoramica delle tavolozze tonali di Reply e dei colori che utilizzeremo nel tema scuro, è il momento di iniziare a modificare i valori dei colori nel mockup.
Nei temi scuri di Material, il livello più basso dell'interfaccia è in genere grigio scuro con il valore esadecimale #121212.
- Nel file Figma, trova la tavola da disegno chiamata "Reply Starter" e seleziona il livello chiamato "Background".
- Nella sezione "Riempimento" del riquadro dell'ispettore sul lato destro dello schermo, imposta il valore del colore su 121212 e premi Invio.
- La tavola da disegno dovrebbe avere il seguente aspetto:
Nella visualizzazione monocromatica della posta in arrivo di Reply, le schede email hanno un colore leggermente più chiaro dello sfondo, quindi dovremmo applicare lo stesso trattamento alle schede nel tema scuro per mantenere la gerarchia visiva della posta in arrivo.
- Nella stessa tavola da disegno, espandi il gruppo denominato "Email cards" e seleziona tutti i livelli denominati "Email card".
- Come prima, seleziona il valore Riempimento nel riquadro dell'ispettore. Imposta il valore su 121212 e premi Invio.
- Ora seleziona solo i livelli denominati "Email card overlay". Questi livelli ci consentiranno di creare una sovrapposizione che distingue le schede email dallo sfondo.
- Assegna ai livelli un Riempimento e impostalo su FFFFFF con un'opacità del 2%.
Ora che le schede email sono state scurite, il testo è illeggibile. Successivamente, ci occuperemo dei colori del testo.
7. Regolare i colori del testo
Per comprendere i colori del testo nei temi scuri, è importante capire come viene applicato il colore al testo nel sistema Material Design più ampio.
I componenti Material definiscono la nozione di colori "on", chiamati così perché appaiono "sopra" i componenti e le superfici chiave che utilizzano colori primari, secondari, di superficie, di sfondo o di errore. I colori "On" vengono utilizzati principalmente per il testo, per garantire che rimanga leggibile su queste superfici.
I colori "on" predefiniti in Material sono bianco (#FFFFFF) e nero (#000000). Poiché un colore "on" nero o scuro non sarebbe adatto alle nostre superfici scure, utilizzeremo il bianco.
Il sistema per stabilire la gerarchia del testo con questo colore "on" è semplice. Il testo con enfasi elevata ha un'opacità dell'87%, mentre il testo con enfasi media viene applicato al 60% e il testo disattivato utilizza un'opacità del 38%.
Il testo ad alta priorità non è bianco puro perché, come spiegato nel passaggio 5, il colore #FFFFFF, un colore chiaro, "vibra" visivamente sullo sfondo scuro. Inoltre, il testo bianco puro (#FFFFFF) su uno sfondo scuro può compromettere la leggibilità, poiché la luce del testo sembra sfumare o sbiadire sullo sfondo scuro.
Tenendo conto di tutto questo, correggiamo i colori del testo nel nostro tema scuro.
- Tutto il testo nel layout iniziale è raggruppato per facilitarne l'accesso. Individua il gruppo denominato Testo della posta in arrivo ed espandilo per visualizzare tutti i livelli che lo compongono.
- Seleziona tutti i livelli con il prefisso "Hi -". Questi sono tutti i testi con enfasi elevata nel nostro layout.
- Nel riquadro dell'ispettore, imposta Riempimento su FFFFFF con un'opacità dell'87%.
- Nel gruppo Testo della posta in arrivo, seleziona tutti i livelli a cui è anteposto "Med -".
- Nel riquadro dell'inspector, imposta il Riempimento su FFFFFF con un'opacità del 60%.
8. Regolare i colori dei componenti
Nei temi scuri creati con Material, le superfici e i componenti rialzati sono colorati utilizzando overlay. Più elevata è la superficie, più forte e luminoso diventa l'overlay. Questo è un modo per comunicare l'elevazione e la gerarchia quando lo sfondo è troppo scuro per rappresentare in modo affidabile le ombre scure.
Barra dell'app in basso
Per la barra delle app inferiore di Rispondi, che si trova sopra il resto dell'interfaccia utente della posta in arrivo, applicheremo una sovrapposizione leggera.
- Individua il gruppo denominato Barra delle app in basso nell'elenco dei livelli ed espandilo per visualizzare i livelli che lo compongono.
- Trova il livello denominato Superficie all'interno del gruppo e imposta il valore Riempimento su 121212.
- Trova il livello sopra, chiamato Sovrapposizione superficie, e assegna al Riempimento il valore FFFFFF con un'opacità del 12%.
Pulsante di azione mobile
Ora applicheremo un nuovo colore al FAB. Per farlo, torna alle tavolozze tonali che abbiamo esaminato in precedenza e prendi il valore 700 del colore secondario di Rispondi.
Se vuoi, per i componenti piccoli ma di grande impatto nella tua app, puoi selezionare un colore leggermente più saturo, purché mantenga il giusto contrasto con i colori sottostanti. Esploreremo questa opzione in un passaggio successivo.
- Individua il gruppo denominato FAB nell'elenco dei livelli ed espandilo per visualizzarne le parti costituenti.
- Trova il livello Superficie e selezionalo. Imposta il riempimento su FCC13B.
Schede selezionate
Potresti notare che lo stesso colore arancione-giallo di grande impatto compare anche nell'angolo delle schede email selezionate nella posta in arrivo di Reply. Questo è un altro momento di forte brandizzazione, ma non rientra perfettamente in componenti, superfici o testo.
In situazioni come questa, è meglio partire dal colore della variante secondaria (in questo caso #FFFBE6) e procedere a ritroso per trovare qualcosa di espressivo senza distrarre dall'estetica funzionale di Rispondi. Per Rispondi, possiamo utilizzare la nostra normale variante secondaria.
- Seleziona il livello denominato Earmark e imposta il Riempimento su FFF5A0.
9. Vai ancora più lontano: le superfici personalizzate
Come abbiamo visto in precedenza, il pulsante di azione rapida (o FAB) in Rispondi è un componente molto enfatizzato che rappresenta anche un momento di forte brandizzazione nell'app. Per questo motivo, potremmo decidere di mantenere la sua espressione di colore nel tema scuro di Rispondi utilizzando il colore secondario originale di Rispondi.
- Individua il gruppo denominato FAB nell'elenco dei livelli ed espandilo per visualizzarne le parti costituenti.
- Trova il livello Superficie e selezionalo. Imposta il riempimento su F9AA33.
Potremmo anche voler ripristinare il colore principale di Rispondi come colore della superficie personalizzato per la barra delle app in basso e le schede email. Per farlo, dobbiamo solo modificare la sovrapposizione in modo che utilizzi il colore principale scuro indicato nella tavolozza tonale a cui abbiamo fatto riferimento.
- Individua il gruppo denominato Barra delle app in basso nell'elenco dei livelli ed espandilo per visualizzare i livelli che lo compongono.
- Individua il livello denominato Sovrapposizione superficie e assegnagli un nuovo valore Riempimento di 344955 con un'opacità del 48%. In questo modo, il colore del brand sarà più intenso, mantenendo al contempo un contrasto adeguato.
- Individua i livelli denominati Email card overlay (Sovrapposizione scheda email) nell'elenco dei livelli e selezionali tutti.
- Imposta il Riempimento su ADC0CB con un'opacità del 4%.
10. Wrapup
In Material, i temi scuri sono un'estensione ponderata e intenzionale dell'identità unica del tuo prodotto, così come viene espressa nel tema chiaro. Con semplici modifiche al colore e al modo in cui viene resa l'elevazione, hai appena creato il tuo primo tema scuro Material. Complimenti!
Considera i passaggi di questo design lab come un framework per comprendere e definire il tema scuro del tuo prodotto e tieni sempre a mente le proprietà e gli obiettivi del tuo brand e del tuo prodotto.
Per ulteriori indicazioni sul tema scuro, consulta le specifiche di Material Design per i temi scuri.
Se hai domande, non esitare a contattarci in qualsiasi momento utilizzando @MaterialDesign su Twitter.
Continua a seguirci per altri contenuti e tutorial di progettazione sul canale YouTube di Google Design.