O cosa tenere a mente quando si sviluppa una modalità oscura per un'applicazione o un sito Web
Il 2018 ha mostrato che le modalità oscure sono in arrivo. Ora che siamo a metà del 2019, possiamo dire con sicurezza: sono qui e sono ovunque.
Partiamo dal fatto che la modalità oscura non è affatto un concetto nuovo. È stato utilizzato per molto tempo. E una volta, anzi, per molto tempo, si usava solo questa: i monitor erano del tipo “verde su nero”, ma solo perché il rivestimento luminescente all'interno emetteva un bagliore verdastro quando esposto alle radiazioni .
Ma anche dopo l’introduzione dei monitor a colori, la modalità oscura ha continuato ad esistere. Perché è così?
Ci sono due motivi principali che spiegano perché oggi una persona su due ha fretta di aggiungere un tema oscuro alla propria applicazione. Prima di tutto: i computer sono ovunque. Ovunque guardiamo c'è una specie di schermo. Usiamo i nostri dispositivi mobili dalla mattina fino a tarda notte. La presenza di una modalità oscura riduce l'affaticamento degli occhi quando sei a letto prima di andare a letto per “l'ultima volta” scorrendo il tuo feed social. reti. (Se sei come me, "l'ultima volta" potrebbe significare uno scorrimento di 3 ore . Modalità scura? Sì grazie! )
Un altro motivo sono le nuove tecnologie di produzione dei display. I modelli di punta delle grandi aziende - Apple, Google, Samsung, Huawei - sono tutti dotati di schermi OLED che, a differenza dei display LCD, non necessitano di retroilluminazione. E questa è davvero una buona notizia per la tua batteria. Immagina di visualizzare l'immagine di un quadrato nero sul tuo telefono; con un LCD, la retroilluminazione illuminerà l'intero schermo anche se la maggior parte è nera. Ma quando si visualizza la stessa immagine su un display OLED, i pixel che compongono il quadrato nero vengono semplicemente spenti. Ciò significa che non consumano affatto energia.
Questi tipi di display rendono le modalità scure molto più interessanti. Utilizzando un'interfaccia scura, puoi prolungare significativamente la durata della batteria del tuo dispositivo. . Le modalità oscure ovviamente vanno di pari passo con le modifiche all'interfaccia utente, quindi rispolveriamo le nostre conoscenze!
Modalità scure 101
Innanzitutto: “scuro” non è la stessa cosa di “nero”. Non provare a sostituire uno sfondo bianco con uno nero, poiché ciò renderà impossibile l'utilizzo delle ombre. Un design come questo sarà super piatto (in senso negativo).
È importante tenere a mente i principi di base dell'ombreggiatura/illuminazione. Gli oggetti più elevati dovrebbero essere più chiari nell'ombra, simulando l'illuminazione e l'ombreggiatura della vita reale. Ciò rende più semplice distinguere tra i diversi componenti e la loro gerarchia.
Due quadrati grigi identici con un'ombra, uno su uno sfondo nero al 100%, l'altro su #121212. Man mano che l'oggetto si solleva, diventa di una tonalità di grigio più chiara.
In un tema scuro, puoi comunque lavorare con il tuo colore base normale purché il contrasto sia ok. Spieghiamo con un esempio.
In questa interfaccia, l'azione principale è il grande pulsante blu nella barra in basso. Non ci sono problemi in termini di contrasto quando si passa dalla modalità chiara a quella scura, il pulsante è comunque accattivante, l'icona è chiara e nel complesso va tutto bene.
Quando lo stesso colore viene utilizzato in modi diversi, ad esempio nel testo, si verificheranno dei problemi. Prova a utilizzare una tonalità (molto) meno satura del colore principale o cerca altri modi per incorporare i colori del marchio nell'interfaccia.
A sinistra: il rosso sul nero sembra pessimo. Giusto: riduci la saturazione e tutto sembra a posto. - ca. traduzione
Lo stesso vale per qualsiasi altro colore forte che potresti aver utilizzato, come i colori di avviso o di errore. Google utilizza uno strato bianco sovrapposto al 40% sopra il colore di errore predefinito nei propri file quando si passa alla modalità oscura. Questo è un buon punto di partenza in quanto migliorerà i livelli di contrasto per corrispondere agli standard AA. Ovviamente puoi sempre modificare le impostazioni come ritieni opportuno, ma assicurati di controllare i livelli di contrasto. A proposito, uno strumento utile a questo scopo è il plugin Sketch - , che mostra esattamente quanto contrasto c'è tra 2 strati.
E il testo?
Qui tutto è semplice: niente dovrebbe essere al 100% nero e al 100% bianco e viceversa. Il bianco riflette le onde luminose di tutte le lunghezze d'onda, il nero assorbe. Se inserisci testo bianco al 100% su uno sfondo nero al 100%, le lettere rifletteranno la luce, sbaveranno e diventeranno meno leggibili, con un impatto negativo sulla leggibilità.
Lo stesso vale per uno sfondo bianco al 100%, che riflette troppa luce per mettere a fuoco completamente le parole. Prova ad ammorbidire leggermente il colore bianco, usa il grigio chiaro per gli sfondi e il testo su sfondi neri. Ciò ridurrà l'affaticamento degli occhi, prevenendo
La modalità oscura è qui e non scomparirà
La quantità di tempo che trascorriamo davanti agli schermi è in costante aumento e ogni nuovo giorno compaiono nuovi schermi nelle nostre vite, dal momento in cui ci svegliamo fino a quando ci addormentiamo. Si tratta di un fenomeno abbastanza nuovo; i nostri occhi non sono ancora abituati a questo aumento del tempo trascorso davanti allo schermo a tarda sera. È qui che entra in gioco la modalità oscura. Con l'introduzione di questa funzionalità in macOS e Material Design (e molto probabilmente in iOS), crediamo che prima o poi diventerà l'impostazione predefinita in tutte le applicazioni, sia mobili che desktop. Ed è meglio essere preparati per questo!
L'unico motivo per non implementare la modalità oscura è quando sei assolutamente sicuro al 100% che la tua applicazione verrà utilizzata esclusivamente in pieno giorno. Ciò, tuttavia, non accade spesso.
Vale la pena menzionare alcune cose che richiederanno un'attenzione particolare durante l'implementazione della modalità oscura, oltre ai principi di base riassunti in precedenza.
In termini di accessibilità, la modalità oscura non è la più conveniente, poiché il contrasto è generalmente inferiore, il che a sua volta non migliora affatto la leggibilità.
Ma immagina che ti stai preparando per andare a letto, vuoi davvero dormire, ma subito prima di addormentarti ti ricordi che devi inviare a qualcuno un messaggio super importante che non può aspettare nemmeno una notte. Prendi il telefono, lo accendi e AAAAAAH... lo sfondo chiaro del tuo iMessage ti terrà sveglio per altre 3 ore. Sebbene il testo chiaro su uno sfondo scuro non sia considerato il più accessibile, avere una modalità scura proprio in questo secondo sarebbe aumentare la convenienza di un milione. Tutto dipende dalla situazione in cui si trova l'utente in questo momento.
Ecco perché pensiamo modalità oscura automatica un'idea così bella Si accende la sera e si spegne la mattina. L'utente non ha nemmeno bisogno di pensarci, il che è molto conveniente. Twitter ha fatto un ottimo lavoro con le sue impostazioni della modalità oscura. Inoltre, hanno sia solo una modalità oscura che una modalità ancora più scura per tutti questi schermi OLED, risparmiando batteria e tutto ciò che è correlato. È importante notare qui: dare all'utente la possibilità di cambiare manualmente quando vuole: non c'è niente di peggio che cambiare automaticamente l'interfaccia senza la possibilità di tornare indietro.
Twitter ha una modalità oscura automatica che si accende la sera e si spegne la mattina.
Inoltre, quando si sviluppa un tema, vale la pena tenere presente che alcune cose semplicemente non possono essere rese oscure.
Prendi un editor di testo come Pages. Puoi rendere l'interfaccia scura, ma il foglio stesso sarà sempre bianco, simulando un vero foglio di carta.
Pagine con modalità oscura abilitata
Lo stesso vale per tutti i tipi di editor per la creazione di contenuti, come Sketch o Illustrator. Sebbene l'interfaccia possa essere oscurata, la tavola da disegno con cui lavori sarà sempre bianca per impostazione predefinita.
Disegna in modalità scura e avrai comunque una tavola da disegno bianca brillante.
Quindi, indipendentemente dall'app, crediamo che le modalità scure diventeranno native del sistema operativo che utilizzi, il che significa che è meglio prepararsi per il futuro. sarà buio.
Se vuoi saperne di più sullo sviluppo di interfacce utente oscure, assicurati di consultare le linee guida , questa è stata la nostra principale fonte di informazioni per questo articolo.
Fonte: habr.com