O di cosa tenere conto nella progettazione della modalità scura di un'app o di un sito
Il 2018 ha dimostrato: le modalità scure sono in arrivo. Ora che siamo già a metà del 2019, possiamo affermare con certezza: sono qui e sono ovunque.
Cominciamo col dire che la modalità scura non è un concetto nuovo. Viene utilizzata già da molto tempo. Una volta, in effetti, era quasi l'unica opzione disponibile: i monitor erano del tipo "verdi-su-nero", semplicemente perché il rivestimento fluorescente all'interno emetteva una luce verdognola quando veniva colpito dalla radiazione.
Ma anche dopo l'introduzione dei monitor a colori, la modalità scura ha continuato a esistere. Perché?
Ci sono due motivi principali che spiegano perché oggigiorno metà delle persone si affretta ad aggiungere un tema scuro alla propria app. Prima di tutto: i computer sono ovunque. Ovunque guardiamo, vediamo uno schermo. Usiamo i nostri dispositivi mobili dalla mattina fino a tarda notte. La presenza della modalità scura riduce l'affaticamento degli occhi quando, a letto, si scorre la feed dei social network "per l'ultima volta" prima di dormire. (Se sei come me, "per l'ultima volta" può significare una scorrimento di 3 ore. . Modalità scura? Certo, per carità! )
Un'altra ragione è la nuova tecnologia di produzione degli schermi. I modelli di punta delle grandi aziende — Apple, Google, Samsung, Huawei — sono tutti dotati di schermi OLED, che, a differenza degli schermi LCD, non richiedono retroilluminazione. E questa è davvero una buona notizia per la tua batteria. Immagina di visualizzare un'immagine di un quadrato nero sul tuo telefono; con uno schermo LCD, la retroilluminazione illuminerà l'intero schermo, anche se gran parte di esso è nera. Ma visualizzando la stessa immagine su uno schermo OLED, i pixel che compongono il quadrato nero si spengono semplicemente. Il che significa che non consumano affatto energia.
Questi tipi di schermi rendono le modalità scure di gran lunga più interessanti. Utilizzando un'interfaccia scura, puoi prolungare significativamente la durata della batteria del tuo dispositivo. . Le modalità scure, naturalmente, vanno di pari passo con i cambiamenti dell'interfaccia utente, quindi rinfreschiamo le nostre conoscenze!
Modalità scura 101
In primo luogo: "scuro" non è uguale a "nero". Non cercare di sostituire lo sfondo bianco con uno nero, poiché questo renderà impossibile l'uso delle ombre. Un design simile risulterà super piatto (nel senso negativo).
È importante tenere a mente i principi di base dell'ombreggiatura/illuminazione. Gli oggetti che sono più sollevati dovrebbero essere più chiari in ombra, simulando l'illuminazione e l'ombreggiatura reale. In questo modo, sarà più facile distinguere tra i vari componenti e la loro gerarchia.
Due quadrati grigi identici con ombra, uno su uno sfondo nero al 100%, l'altro su #121212. Sollevando l'oggetto, ottiene una tonalità di grigio più chiara.
In un tema scuro, puoi comunque lavorare con il tuo normale colore principale, se il contrasto è a posto. Spieghiamo con un esempio.
In questa interfaccia, l'azione principale è un grande pulsante blu nella barra inferiore. Non ci sono problemi dal punto di vista del contrasto passando dalla modalità chiara a quella scura, il pulsante continua a catturare l'attenzione, l'icona è chiara, insomma, tutto è ottimo.
Quando lo stesso colore viene utilizzato in modi diversi, ad esempio nel testo, si presentano problemi. Prova a usare una tonalità (di gran lunga) meno saturata del colore principale o cerca altri modi per includere i colori del marchio nell'interfaccia.
A sinistra: il rosso su nero appare male. A destra: diminuiamo la saturazione — e tutto diventa buono. — nota del traduttore.
Lo stesso vale per tutti gli altri colori saturi che potresti aver utilizzato, come i colori di avviso o di errore. Google utilizza un sovrapposizione di uno strato bianco al 40% sopra il colore dell'errore di default nei suoi quando si passa alla modalità scura. Questo è un buon punto di partenza, poiché migliorerà i livelli di contrasto per soddisfare gli standard AA. Certamente, puoi sempre modificare le impostazioni come preferisci, ma non dimenticare di controllare i livelli di contrasto. A proposito, uno strumento utile per questo scopo è il plugin per Sketch — , che mostra esattamente quanti contrasti ci sono tra 2 strati.
E riguardo al testo?
Qui tutto è semplice: niente deve essere 100% nero su 100% bianco e viceversa. Il bianco riflette le onde luminose di tutte le lunghezze, il nero le assorbe. Se posizioni un testo 100% bianco su uno sfondo 100% nero, le lettere riflettono la luce, sfocano e diventano meno leggibili, il che influisce negativamente sulla leggibilità.
Lo stesso vale per uno sfondo 100% bianco, che riflette troppa luce per concentrarsi completamente sulle parole. Prova a smorzare un po' il bianco, usa il grigio chiaro per gli sfondi e i testi su sfondi neri. Questo ridurrà l'affaticamento degli occhi, prevenendo
La modalità scura non sta per andarsene
Il tempo che trascorriamo sugli schermi è in costante aumento, e ogni giorno, nuovi schermi entrano nelle nostre vite, dal risveglio fino a quando non ci addormentiamo. È un fenomeno abbastanza nuovo, i nostri occhi non si sono ancora abituati a questo aumento del tempo sullo schermo fino a tardi nella serata. È qui che entra in gioco la modalità scura. Dopo l'introduzione di questa funzione in macOS e Material Design (e molto probabilmente in iOS), riteniamo che prima o poi diventerà predefinita in tutte le applicazioni, sia mobili che desktop. E meglio essere preparati!
L'unico motivo per non implementare la modalità scura è quando sei assolutamente sicuro al 100% che la tua applicazione venga utilizzata esclusivamente alla luce del giorno. Questo, in verità, accade raramente.
Vale la pena menzionare alcune cose che richiederanno particolare attenzione nell'implementazione della modalità scura, oltre ai principi di base riassunti in precedenza.
Dal punto di vista dell'accessibilità, la modalità scura non è la più comoda, poiché il contrasto in generale è più basso, il che non migliora affatto la leggibilità.
Ma immagina di prepararti per andare a dormire, sei molto stanco, ma proprio prima di addormentarti, ti ricordi che devi inviare un messaggio super importante a qualcuno, che non può aspettare nemmeno una notte. Prendi il tuo telefono, lo accendi e AAAAAAH... lo sfondo chiaro del tuo iMessage non ti farà riaddormentare per altre tre ore. Mentre il testo chiaro su uno sfondo scuro non è considerato massimamente accessibile, avere la modalità scura proprio in quel momento aumenterebbe di un milione il comfort. Tutto dipende dalla situazione in cui si trova l'utente in quel momento.
Ecco perché riteniamo modalità scura automatica un'idea così fantastica. Si attiva la sera e si disattiva al mattino. L'utente non deve nemmeno pensarci, il che è molto comodo. Twitter ha fatto un ottimo lavoro con le impostazioni della modalità scura. Inoltre, hanno sia una modalità scura semplice che una modalità ancora più scura per tutti questi schermi OLED, il risparmio energetico e tutto ciò che ne deriva. Qui è importante notare: dare all'utente la possibilità di passare manualmente quando lo desidera: non c'è nulla di peggio di un cambiamento automatico dell'interfaccia senza la possibilità di tornare indietro.
Twitter ha una modalità scura automatica che si attiva la sera e si disattiva al mattino.
Allo stesso modo, quando si sviluppa un tema, è importante tenere presente che alcune cose semplicemente non possono essere fatte scure.
Prendi un editor di testo, ad esempio, Pages. Puoi rendere l'interfaccia scura, ma il foglio rimarrà sempre bianco, imitando un foglio di carta reale.
Pages con la modalità scura attivata
Lo stesso vale per tutti i tipi di editor per la creazione di contenuti, come Sketch o Illustrator. Anche se l'interfaccia può essere resa scura, la tavola da disegno con cui lavori sarà sempre bianca per impostazione predefinita.
Sketch in modalità scura e con una tavola da disegno bianca brillante.
Quindi, indipendentemente dall'applicazione, riteniamo che le modalità scure diventeranno native per il sistema operativo che stai utilizzando, e quindi è meglio prepararsi in anticipo per il futuro. sarà scuro.
Se vuoi saperne di più sulla progettazione di interfacce scure, assicurati di controllare le linee guida , questa è stata la nostra principale fonte di informazioni per questo articolo.
Fonte: habr.com
