Come progettare la modalità oscura: una guida del 2021 per i progettisti di app mobili

Abbassa le luci, rilassa gli occhi e risparmia energia. La modalità oscura è una delle più grandi tendenze nel design e marchi di livello mondiale come WhatsApp, Instagram, Google, Facebook e Apple sono già saltati sul treno del design della modalità oscura.

Il lancio ufficiale di Android 10 e iOS 13 ha portato l'interfaccia utente a tema scuro alla ribalta. Sia Apple che Google hanno dedicato le loro risorse e la loro attenzione alla modalità oscura dall'ultimo anno.

Se eseguita correttamente, i vantaggi della modalità oscura sono senza precedenti. Possono essere letti più facilmente in condizioni di scarsa illuminazione. Riducono l'affaticamento degli occhi. Possono eliminare notevolmente il consumo della batteria, in base allo schermo.

Preparare il tema oscuro per un'app sta diventando un compito per ogni azienda di progettazione di app mobili. Tuttavia, le sfide di progettazione dell'app in modalità oscura non possono essere ignorate. Non è possibile semplicemente riutilizzare i colori o invertire i colori. Se lo fai, otterrai l'esatto opposto di ciò di cui hai bisogno.

Quando la modalità oscura è progettata in modo errato, provoca affaticamento degli occhi e rende più difficile la lettura in condizioni di scarsa illuminazione. La bassa luminosità di questo tema crea un senso di sicurezza in un ambiente buio. Di conseguenza, quando crei temi cupi, assicurati che siano divertenti, equilibrati e leggibili.

In questo articolo, esamineremo come i progettisti di app mobili possono iniziare a fornire un'esperienza di progettazione dell'interfaccia utente in modalità oscura ai propri utenti.

Come progettare un tema scuro per l'app Android?

Google viene fornito con un ampio supporto per la documentazione che aiuta i progettisti a iniziare a capire come progettare temi scuri per l' app Android .

Il gigante della tecnologia ha stabilito quattro principi che definiscono l' interfaccia utente del tema scuro e fornisce un punto di partenza su come sviluppare il design dell'app in modalità oscura :

1. Grigio vs nero

La prima cosa che potresti notare è che lo sfondo predefinito per le app con tema scuro non è nero, ma invece un grigio scuro: #121212.

Ci sono molte discussioni sul motivo per cui abbiamo scelto il grigio rispetto al nero, soprattutto perché la piattaforma in Android 10 utilizza uno sfondo nero. Questo è in gran parte un compromesso tra usabilità e risparmio energetico.

L'utilizzo di un colore nero puro #000000 come sfondo nella piattaforma, consente alle app e alle superfici di sistema di utilizzare la minor quantità di energia possibile quando sono aperte su display OLED. Queste superfici di sistema tendono ad essere abbastanza semplici, in genere solo testo e icone semplici, quindi per combattere i problemi di contrasto possiamo regolare i colori del testo e delle icone per adattarli.

Nelle app, tuttavia, le tue superfici possono contenere qualsiasi cosa: complesse animazioni vettoriali colorate, immagini luminose, superfici con marchio a contrasto e molto altro. Posizionarli su uno sfondo nero puro significa che il contrasto risultante è molto più alto, il che può aumentare l'affaticamento degli occhi. Quindi utilizzare uno sfondo di colore chiaro o grigio è la soluzione.

2. Attenzione ai dettagli in Colore con accenti

Quando si definisce una combinazione di colori per un'interfaccia utente scura, Google consiglia di applicare accenti di colore limitati nelle interfacce utente a tema scuro, in modo che la maggior parte dello spazio sia dedicato alle superfici scure. Inoltre, mantenere lo sfondo scuro rende la foto più profonda e crea un contrasto piacevole con il colore dell'accento. L'uso di colori complementari divisi può aiutare. Lo schema ha un colore dominante e due colori adiacenti al complemento del colore dominante. In questo modo si ottiene il contrasto necessario senza la tensione della combinazione di colori complementari.

3. Conserva la durata della batteria

I temi scuri riducono la luminanza emessa dagli schermi dei dispositivi, pur mantenendo rapporti di contrasto cromatici minimi. Aiutano a migliorare l'ergonomia visiva riducendo l'affaticamento degli occhi, regolando la luminosità in base alle condizioni di illuminazione attuali e facilitando l'uso dello schermo in ambienti bui, il tutto risparmiando la carica della batteria. I dispositivi con schermi OLED beneficiano della possibilità di disattivare i pixel neri in qualsiasi momento della giornata o riducendo l'uso dei pixel luminosi.

4. Scelta di combinazioni di colori conformi all'accessibilità

Soddisfa i normali utenti di temi scuri (come quelli con problemi di vista), rispettando gli standard di contrasto del colore di accessibilità .

Ci sono diverse proprietà che hanno corretto nelle Linee guida per la progettazione dei materiali di Google per la combinazione di colori scuri e la modalità generale:

Elevazione: nel processo di progettazione del tema scuro , i componenti mantengono gli stessi componenti dell'ombra e livelli di elevazione predefiniti come nel caso del tema chiaro. Ciò che differisce è l'illuminazione della superficie dei livelli di elevazione.

Maggiore è l'elevazione della superficie, più leggera sarebbe la superficie. La leggerezza si manifesta attraverso un'applicazione di sovrapposizioni semitrasparenti. Le sovrapposizioni consentono inoltre di distinguere tra i componenti e di vedere le ombre.

Accessibilità e contrasto: lo sfondo nel design dell'interfaccia utente del tema scuro dovrebbe essere abbastanza scuro da mostrare il testo bianco. Devono utilizzare un contrasto minimo di 15,8:1 tra lo sfondo e il testo. In questo modo si garantisce che il corpo del testo superi lo standard AA delle WCAG di 4,5:5:1 quando viene aggiunto alle superfici alla massima elevazione.

Colori: i designer dovrebbero concentrarsi sull'uso di colori desaturati per aumentare la leggibilità. La scelta dei colori primari e secondari deve anche dipendere dalla considerazione dei temi dell'interfaccia utente chiari e scuri.

Testo chiaro su sfondo scuro: quando un testo chiaro viene visualizzato su sfondo scuro, deve utilizzare questi livelli di opacità:

• Il testo con enfasi elevata ha un'opacità dell'87%
• Il testo con enfasi media e il testo dei suggerimenti hanno opacità del 60%
• Il testo disabilitato ha un'opacità del 38%

Stati: gli stati comunicano lo stato degli elementi interattivi per i layout oi componenti di temi scuri utilizzando le sovrapposizioni. Nel tema scuro, gli stati devono utilizzare gli stessi valori di sovrapposizione del tema chiaro predefinito. Esistono due contenitori che ereditano gli overlay di stato: Surface e Primary .

I contenitori Surface che utilizzano il colore Surface devono applicare una sovrapposizione che corrisponda al colore del testo o dell'icona. Per i contenitori di superficie che utilizzano il colore primario, lo stato di copertura deve essere bianco.

Come progettare un'app per iOS in modalità oscura?

Con la modalità oscura, Apple ha rivisitato il significato dello stile e dei colori dell'interfaccia utente in iOS. Esaminiamo le modifiche apportate da Apple per aiutarti con la progettazione per la modalità oscura su iOS 13.

Colori semantici

Apple ha introdotto i colori semantici per i componenti dell'interfaccia utente di uso comune per bilanciare la sensazione e l'aspetto delle app iOS sia in modalità chiara che scura. Questi colori non hanno il miglior valore RGB; invece, cambiano direttamente lo stile dell'interfaccia iOS. Inoltre, in modalità oscura, queste tonalità semantiche aiutano a gestire il colore e il testo sovrapposti.

Colori di sistema

Apple ha introdotto nove colori di sistema predefiniti che supportano l'aspetto scuro e dinamico a livello di sistema. Quindi, questi colori si modificano in base agli stili di interfaccia scelti.

Effetti vivaci e sfocati

Con iOS 13, Apple ha introdotto 4 effetti di sfocatura e 8 effetti di vivacità, che si adattano automaticamente allo stile dell'interfaccia iOS.

Ecco gli effetti di sfocatura nella modalità scuro e chiaro:

Apple ha anche introdotto 4 effetti di vivacità nella suite di tipografia in modalità oscura iOS , 3 in sovrapposizione e 1 per separatore. Eccoli:

Simboli SF

Apple, nelle sue linee guida sull'interfaccia umana, offre una raccolta di oltre 1500 simboli che gli sviluppatori e i designer di prodotti possono utilizzare nelle loro applicazioni. Hanno automaticamente un aspetto fantastico nella modalità oscura perché sono stati ottimizzati sia per l'interfaccia utente chiara che per quella scura.

Suggerimenti per un design a tema scuro di app mobili efficaci

La modalità oscura è una delle funzionalità più richieste negli ultimi anni. Sia Apple che Google hanno reso il tema scuro una parte essenziale dell'interfaccia utente. La luminosità ridotta della modalità oscura fornisce sicurezza in ambienti bui e può ridurre al minimo l'affaticamento degli occhi.

Ci sono alcuni processi che devono funzionare correttamente durante la creazione dell'interfaccia utente in modalità oscura. Dopotutto, vuoi che il tuo prodotto sia fantastico, giusto? Selezioniamo tutte le caselle per un elenco di controllo delle migliori pratiche su come progettare una modalità oscura per la tua app.

1. Evita il colore nero puro

Un tema scuro non deve essere di testo bianco su sfondo nero. In effetti, può essere difficile guardare in uno schermo ad alto contrasto.

Quando aggiungi la modalità oscura alla tua app, è più sicuro utilizzare il grigio scuro come colore principale per i componenti della modalità oscura , poiché riduce l'affaticamento degli occhi ed è anche molto più facile guardare le ombre su una superficie grigia rispetto al nero .

2. Evita l'uso di colori saturi sui temi scuri

I colori saturi che stanno benissimo sulle superfici chiare possono vibrare sullo sfondo scuro, rendendo il testo estremamente difficile da leggere.

Dovresti usare toni chiari perché hanno una migliore leggibilità e non rendono l'interfaccia utente inutilmente espressiva, risparmiando un inutile affaticamento degli occhi.

3. Considera il lato emotivo del design della tua app

Quando progetti un tema scuro per la tua app, è probabile che tu debba mirare a tradurre la stessa sensazione emotiva del design del tuo tema chiaro anche nel tema scuro.

Ma non è saggio farlo. Perché, in definitiva, colori diversi proiettano emozioni diverse. Di conseguenza, i colori della modalità scura evocheranno una sensazione diversa. Questo è il motivo per cui è necessario trovare un insieme emotivo di base comune per entrambe le interfacce utente del tema.

4. Testare il design in entrambi gli aspetti

Proprio come il modo in cui i tuoi utenti passerebbero da un'interfaccia utente a un'altra del tema in diversi momenti della giornata, è necessario testare l'app due volte al giorno per vedere come funziona in diverse condizioni di luce. E per assicurarti che soddisfi i tuoi criteri.

5. Incorpora la modalità oscura nelle animazioni e nelle illustrazioni

Se la tua app contiene animazioni o elementi grafici pesanti, dovrai prepararti per la loro adozione anche in tema scuro. Nel caso in cui l'illustrazione contenga un soggetto e uno sfondo, sarebbe bene desaturare completamente i colori dello sfondo per mantenere l'attenzione sul soggetto.

6. Soddisfare gli standard di contrasto del colore di accessibilità

Assicurati che i tuoi contenuti rimangano comodamente leggibili in modalità oscura. Le superfici del tema scuro devono essere sufficientemente scure per visualizzare il testo bianco. Google Material Design consiglia di utilizzare un livello di contrasto di almeno 15,8:1 tra il testo e lo sfondo. Usa gli strumenti di contrasto del colore per testare il rapporto di contrasto.

7. Non limitarti a fare retromarcia

Se stai passando dalla modalità standard a quella oscura, il tema originale potrebbe fornire utili segnali visivi. Per creare un tema scuro, non capovolgere semplicemente i colori. Potresti trasformare colori con un significato psicologico in toni blandi senza significato. Prendi una decisione consapevole riguardo ai colori che usi.

8. Usa i giusti colori "on".

I colori "On" si trovano sopra le superfici e gli elementi chiave. Di solito, sono usati per il testo. Per un tema scuro, il colore "attivo" predefinito è bianco puro. Ma è un colore brillante e vibrerebbe visivamente su sfondi scuri. Per questo motivo, Google Material Design suggerisce di utilizzare un bianco un po' più scuro.

• Il testo disabilitato utilizza l'oscurità del 38%.
• Al 60%, viene eseguito il testo con enfasi media.
• Il testo con enfasi elevata deve avere l'oscurità dell'87%.

9. Entra in profondità

Più alto è uno strato, più leggero dovrebbe essere. Questo creerà una gerarchia visiva in modalità oscura che va dagli elementi più utilizzati nel display al minimo.

Con questo, ora sai tutto ciò che c'è da sapere sulla progettazione della versione in modalità oscura della tua app. Il passaggio successivo perseguibile è parlare con un team di esperti che ha implementato l'interfaccia utente nelle applicazioni. Dovresti vedere questo come un modo per avvicinarti al raggiungimento del tuo intento di offrire un'esperienza salutare ai tuoi utenti finali.

Avvolgendo

Con questo, ora sai tutto ciò che c'è da sapere sulla progettazione della versione in modalità oscura della tua app. Il design dell'app in modalità oscura è una rivoluzione che si sta appena avviando. Ciò significa che è il momento perfetto per oscurare e diventare creativi. Il passaggio successivo perseguibile è parlare con un team di esperti dell'interfaccia utente che hanno implementato l'interfaccia utente nelle applicazioni e ottenere una visione reale dell'importanza della progettazione dell'interfaccia utente nello sviluppo di app . Dovresti vedere questo come un modo per avvicinarti al raggiungimento del tuo intento di offrire un'esperienza salutare ai tuoi utenti finali.

Vuoi saperne di più sulla progettazione di app in modalità oscura? Mettiti in contatto con gli esperti nello sviluppo di app .

Domande frequenti sulla progettazione di app in modalità oscura

1. La modalità scura è migliore per gli occhi?

Sì. Il design dell'app in modalità oscura previene i casi di affaticamento e secchezza degli occhi con l'utilizzo prolungato del telefono cellulare. Non essendo in contrasto, diventa più facile per gli utenti scorrere l'applicazione al buio.

2. Come si progetta per la modalità oscura?

Sebbene sia Apple che Google abbiano la loro documentazione che spiega il processo di progettazione di un'applicazione a tema scuro, ci sono alcuni suggerimenti che devono essere considerati. Alcuni di questi sono: evita il colore nero solido, tieni a mente l'aspetto emotivo dell'uso del colore nero, guarda la differenza di transizione tra il design dell'app in modalità bianca e scura.

3. Esiste una modalità oscura malsana?

Sì, ci sono casi in cui la modalità oscura può fare più male che bene. Possono causare un effetto velato o quando non viene prestata sufficiente attenzione allo stile di contrasto, possono affaticare gli occhi in misura enorme.