O cosa tenere a mente quando si sviluppa la modalità scura di un'app o di un sito web
Il 2018 ha mostrato: le modalità scure sono in arrivo. Ora che siamo a metà del 2019, possiamo affermare con sicurezza: sono qui e sono ovunque.
Iniziamo con il dire che la modalità scura non è affatto una nuova concezione. Viene utilizzata da molto tempo. In effetti, una volta era l'unica modalità: i monitor erano del tipo 'verde su nero', semplicemente perché il rivestimento fluorescente all'interno emetteva una luce verdognola quando 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é oggi ogni secondo si affretta ad aggiungere un tema scuro alla propria applicazione. Prima di tutto: ci sono computer ovunque. Ovunque guardiamo, c'è uno schermo. Utilizziamo i nostri dispositivi mobili dalla mattina fino a tarda notte. Avere una modalità scura riduce l'affaticamento degli occhi quando ti trovi a letto a scorrere il feed dei social media 'per l'ultima volta'. (Se sei come me, 'per l'ultima volta' può significare un scrolling di 3 ore. . Modalità scura? Certo, per favore!
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 display LCD, la retroilluminazione illuminerà l'intero schermo, anche se gran parte è nera. Ma quando visualizzi la stessa immagine su un display OLED, i pixel che compongono il quadrato nero si spengono semplicemente. E quindi, non consumano affatto energia.
Questi tipi di display rendono le modalità scure molto più interessanti. Utilizzando un'interfaccia scura, puoi prolungare notevolmente la durata della batteria del tuo dispositivo. . Le modalità scure, naturalmente, vanno di pari passo con le modifiche all'interfaccia utente, quindi rinfreschiamo le nostre conoscenze!
Modalità scure 101
Per prima cosa: 'scuro' non equivale a 'nero'. Non cercare di sostituire uno sfondo bianco con uno nero, poiché ciò renderebbe impossibile l'uso delle ombre. Un tale design sarà super piatto (nel senso negativo).
È importante tenere a mente i principi di ombreggiatura/illuminazione di base. Gli oggetti sollevati devono apparire più chiari in ombra, imitando l'illuminazione e l'ombreggiatura reali. In questo modo, è più facile distinguere i vari componenti e la loro gerarchia.
Due quadrati grigi identici con ombra, uno su uno sfondo nero al 100%, l'altro su #121212. Quando l'oggetto si solleva, ottiene una tonalità di grigio più chiara.
In un tema scuro, è comunque possibile lavorare con il tuo colore principale normale, se il contrasto è corretto. Spieghiamolo con un esempio.
In questa interfaccia, l'azione principale è un grande pulsante blu nella barra inferiore. Non ci sono problemi di contrasto passando dalla modalità chiara a quella scura, il pulsante attira ancora l'attenzione, l'icona è chiara, insomma, tutto è perfetto.
Quando lo stesso colore viene utilizzato in modo diverso, ad esempio nel testo, ci saranno problemi. Cerca di usare una tonalità del colore principale (molto) meno satura o trova altri modi per includere i colori del marchio nell'interfaccia.
A sinistra: il rosso su nero appare male. A destra: riduciamo la saturazione e tutto va bene. — nota del traduttore.
Lo stesso vale per tutti gli altri colori saturi che potresti aver utilizzato, come ad esempio i colori di avviso o errore. Google utilizza una sovrapposizione bianca al 40% sopra il colore di errore predefinito nei suoi quando si passa alla modalità scura. È un'ottima base, poiché migliorerà i livelli di contrasto per rispettare gli standard AA. Puoi sempre modificare le impostazioni a tuo piacimento, ma non dimenticare di controllare i livelli di contrasto. A proposito, uno strumento utile per questo scopo è il plugin per Sketch — , che mostra esattamente quanto contrasto c'è tra i 2 livelli.
E per il testo?
Qui è semplice: nulla dovrebbe essere 100% nero su 100% bianco e viceversa. Il bianco riflette le onde luminose di tutte le lunghezze, il nero assorbe. Se poni del testo bianco al 100% su uno sfondo nero al 100%, le lettere rifletteranno la luce, sfocandosi e diventando meno leggibili, il che influisce negativamente sulla leggibilità.
Lo stesso vale per lo sfondo completamente bianco, che riflette troppa luce per concentrarsi completamente sulle parole. Prova ad attenuare un po' il bianco, usando grigio chiaro per gli sfondi e testi su sfondi neri. Questo ridurrà l'affaticamento degli occhi, prevenendo
La modalità scura è qui per restare
Il tempo che passiamo davanti agli schermi continua a crescere e ogni giorno nuovi schermi entrano nelle nostre vite, dal risveglio fino a quando non ci addormentiamo. È un fenomeno relativamente recente, i nostri occhi non si sono ancora abituati a questo aumento del tempo di schermo fino a tardi. È 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 presto diventerà predefinita in tutte le applicazioni, sia mobili che desktop. Ed è meglio essere pronti a questo!
L'unica ragione per non implementare la modalità scura è quando si è assolutamente certi al 100% che la propria applicazione venga utilizzata esclusivamente alla luce del giorno. Questo, però, accade raramente.
Vale la pena menzionare alcune cose che richiederanno particolare attenzione durante l'implementazione della modalità scura, oltre ai principi fondamentali 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 la leggibilità.
Ma immagina di prepararti per andare a dormire, sei molto stanco, ma proprio prima di addormentarti ti ricordi che devi inviare a qualcuno un messaggio super importante che non può aspettare nemmeno una notte. Prendi il tuo telefono, lo accendi e AAAAAAA... lo sfondo chiaro del tuo iMessage ti impedirà di riaddormentarti per altre 3 ore. Mentre il testo chiaro su uno sfondo scuro non è considerato altamente accessibile, avere la modalità scura proprio in quel momento aumenterebbe il comfort di un milione. Tutto dipende dalla situazione in cui si trova l'utente in quel momento.
Ecco perché consideriamo la modalità scura automatica un'idea fantastica. Si attiva la sera e si disattiva la mattina. 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 la modalità scura normale, sia una modalità ancora più scura per tutti questi schermi OLED, per il risparmio della batteria e tutto ciò che ne deriva. È importante notare: dai all'utente la possibilità di passare manualmente quando lo desidera: non c'è niente di peggio che 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 la mattina.
Inoltre, durante la progettazione del tema, è importante tenere presente che alcune cose non possono semplicemente essere scure.
Prendi, ad esempio, un editor di testo come Pages. Puoi rendere l'interfaccia scura, ma il foglio sarà sempre bianco, imitando un vero foglio di carta.
Pages in modalità scura
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, il pannello di lavoro su cui stai lavorando sarà sempre bianco per impostazione predefinita.
Sketch in modalità scura con un pannello di lavoro bianco brillante.
Quindi, indipendentemente dall'applicazione, riteniamo che le modalità scure diventeranno native per il sistema operativo che stai utilizzando, quindi è meglio prepararsi in anticipo per il futuro, che sarà scuro.
Se vuoi saperne di più sulla progettazione di interfacce scure, assicurati di consultare le linee guida , è stata la nostra principale fonte di informazioni per questo articolo.
Fonte: habr.com
