7 suggerimenti utili per la progettazione di un'interfaccia utente oscura

Le interfacce utente scure hanno guadagnato popolarità e molte applicazioni ora offrono la possibilità di passare dalla modalità chiara a quella scura. Tuttavia, l'implementazione di un'interfaccia utente scura può essere un'attività impegnativa che richiede un'attenta attenzione ai colori, ai caratteri, alle immagini e alla spaziatura utilizzati.

Eventuali errori in questi elementi possono comportare un'esperienza utente scadente. I seguenti suggerimenti dovrebbero aiutarti durante la progettazione della tua prima interfaccia utente oscura.

1. Non usare il nero puro

Quando si progetta un'interfaccia utente scura, evitare di utilizzare sfondi neri puri. È meglio usare una tonalità scura di grigio. Per esempio, Il tema del material design di Google consiglia il colore #121212.

Uno sfondo nero combinato con testo bianco può avere un contrasto eccessivo e causare affaticamento della vista. Le tonalità di grigio più scure invece possono mostrare facilmente ombre, profondità ed elevazione.

2. Garantisci il contrasto del testo Soddisfa le linee guida WCAG 2.0

Scegli una combinazione di colori che offra un adeguato livello di contrasto, in modo che il testo sia leggibile. Le linee guida WCAG 2.0 stabiliscono che il testo o le immagini di testo devono avere un rapporto di contrasto di almeno 4,5:1 con testo di grandi dimensioni (almeno 18 punti o 14 punti in grassetto) deve avere un rapporto di contrasto di almeno 3:1.

Esistono diversi strumenti per controllare il contrasto del colore, incluso il ONDA Estensione di Chrome che controlla anche l'accessibilità dei colori.

3. Scegli lo stile di carattere giusto

Devi anche tenere conto degli stili di carattere del tuo testo, comprese le dimensioni, il peso e l'altezza della linea. Se stai cercando opzioni per i caratteri, non dimenticare che ci sono molti siti che offrono font gratuiti. Per quanto riguarda la dimensione del carattere, utilizzare valori sufficienti per garantire che il testo sia chiaro e visibile su uno sfondo scuro.

Considera i seguenti stili per una pagina web:

corpo {
famiglia di font: "CorriereNuovo", monospazio;
dimensione del font: 12px;
font-weight: 200;
altezza della linea: 1; 
colore: #333333;
}

La famiglia di caratteri è difficile da leggere, la dimensione del carattere è troppo piccola e il peso del carattere è troppo leggero. Questi stili rendono la pagina difficile da leggere, come puoi vedere dallo screenshot qui sotto.

Di seguito sono riportati alcuni stili appropriati che potresti utilizzare.

corpo {
famiglia di font: "Aria", sans-serif;
dimensione del font: 16px; 
font-weight: 400; 
altezza della linea: 1.5; 
colore: #FFFFFF;
colore di sfondo: #121212; 
}

Ed ecco la pagina risultante:

4. Evita i colori accentati saturi

I colori saturi possono essere troppo luminosi e sfocati su sfondi scuri. Invece, usa colori meno intensi e tenui. In questo modo crei un'interfaccia utente con testo visibile.

Per dimostrarlo, considera questi due stili di pulsanti:

/* Blu saturo */
.btn-saturo-blu {
colore di sfondo: #121212;
colore: #0e0bf6;
}
/* Blu disattivato */
.btn-silenziato-blu {
colore di sfondo: #121212; 
colore: #4c5ab3;
}

Il colore blu saturo può essere troppo luminoso e difficile da leggere su uno sfondo scuro, mentre il colore blu tenue fornisce un buon contrasto ed è più facile da leggere.

Uno strumento come colorabile è utile per generare combinazioni di colori che seguono le linee guida sull'accessibilità.

5. Usa lo spazio negativo per impedire la creazione di un'interfaccia utente pesante

Una tavolozza di colori scuri può rendere l'interfaccia utente pesante per gli utenti. Se usato correttamente, lo spazio negativo può aiutarti a evidenziare importanti elementi dell'interfaccia utente e rendere il testo facile da scansionare. Una spaziatura sufficiente può anche rendere il design più pulito e moderno.

Prendi, ad esempio, La pagina di destinazione di Apple. Lo spazio tra gli elementi rende la pagina molto moderna e visivamente interessante, consentendo agli elementi importanti di risaltare.

6. Usa sfumature di colore diverse per aggiungere profondità all'interfaccia utente

Quando si progettano interfacce utente luminose, è possibile utilizzare le ombre per aggiungere profondità ed elevazione agli elementi. Tuttavia, a causa degli sfondi scuri, le ombre a volte sono difficili da vedere nelle interfacce utente scure.

Puoi ottenere profondità in un'interfaccia utente scura utilizzando più sfumature di colori scuri. Ad esempio, invece di un solo sfondo scuro, puoi aggiungere sfumature più chiare dello stesso colore a diversi elementi come pulsanti e modali.

7. Assicurati che le tue immagini corrispondano all'interfaccia utente scura

Non è necessario utilizzare le stesse immagini per la modalità chiara e la modalità oscura. Puoi usare la modalità oscura Media query CSS per cambiare le immagini che corrispondono all'interfaccia utente scura ogni volta che l'utente passa alla modalità oscura.

Ad esempio, per applicare un motivo di sfondo specifico alle sezioni della tua pagina in modalità oscura, puoi utilizzare il nome della classe .bgpattern e aggiungere il seguente codice al tuo foglio di stile.

@media (preferisce-la-combinazione-di-colori: buio) {
/* Applica questo stile solo in modalità scura */
.bgpattern {
immagine di sfondo: URL("/buio.jpg");
 }
}

Questa media query garantisce che l'immagine di sfondo di riferimento venga visualizzata solo quando la combinazione di colori preferita dall'utente è scura.

Quando utilizzare un'interfaccia utente oscura

I design scuri dell'interfaccia utente sono un ottimo modo per dare un'estetica moderna al tuo sito Web o applicazione. Possono anche ridurre al minimo l'affaticamento degli occhi e preservare la durata della batteria. Tuttavia, le interfacce utente scure non sono adatte a tutte le applicazioni e dovresti sempre considerare il marchio e la base di utenti.

In generale, le interfacce utente scure sono più adatte per i marchi che privilegiano il lusso, il prestigio, il minimalismo o il mistero. Possono anche essere un'ottima scelta per dashboard e strumenti di visualizzazione.