7 sfaturi utile pentru proiectarea unei interfețe de utilizare întunecate

Interfețele de utilizator întunecate au câștigat popularitate, iar multe aplicații oferă acum opțiunea de a comuta între un mod deschis și cel întunecat. Cu toate acestea, implementarea unei interfețe de utilizare întunecate poate fi o sarcină dificilă care necesită o atenție deosebită culorilor, fonturilor, imaginilor și spațiilor utilizate.

Orice greșeală în aceste elemente poate duce la o experiență slabă a utilizatorului. Următoarele sfaturi ar trebui să vă ajute atunci când vă proiectați prima interfață de utilizare întunecată.

1. Nu folosiți negru pur

Când proiectați o interfață de utilizare întunecată, evitați să utilizați fundaluri negre pur. Este mai bine să folosiți o nuanță închisă de gri. De exemplu, Tema de design de materiale Google recomandă culoarea #121212.

Un fundal negru combinat cu text alb poate avea prea mult contrast și poate provoca oboseala ochilor. Nuanțele mai închise de gri pot afișa cu ușurință umbrele, adâncimea și elevația.

2. Asigurați-vă că contrastul textului îndeplinește liniile directoare WCAG 2.0

Alegeți o combinație de culori care oferă un nivel adecvat de contrast, astfel încât textul să fie lizibil. Orientările WCAG 2.0 afirmă că textul sau imaginile textului trebuie să aibă un raport de contrast de cel puțin 4,5:1 cu textul mare (cel puțin 18 puncte sau 14 puncte aldine) trebuie să aibă un raport de contrast de cel puțin 3:1.

Există mai multe instrumente pentru verificarea contrastului culorilor, inclusiv VAL Extensia Chrome care verifică și cât de accesibile sunt culorile.

3. Alegeți stilul de font potrivit

De asemenea, trebuie să luați în considerare stilurile de font ale textului dvs., inclusiv dimensiunea, greutatea și înălțimea liniei. Dacă căutați opțiuni de font, nu uitați că există multe site-uri care oferă fonturi gratuite. În ceea ce privește dimensiunea fontului, utilizați valori suficiente pentru a vă asigura că textul este clar și vizibil pe un fundal întunecat.

Luați în considerare următoarele stiluri pentru o pagină web:

corp {
familie de fonturi: "CurierNou", monospațial;
marimea fontului: 12px;
grosimea fontului: 200;
inaltimea liniei: 1; 
culoare: #333333;
}

Familia de fonturi este greu de citit, dimensiunea fontului este prea mică și greutatea fontului este prea ușoară. Aceste stiluri fac pagina dificil de citit, așa cum puteți vedea din captura de ecran de mai jos.

Mai jos sunt câteva stiluri adecvate pe care le puteți folosi în schimb.

corp {
familie de fonturi: "Arial", sans-serif;
marimea fontului: 16px; 
grosimea fontului: 400; 
inaltimea liniei: 1.5; 
culoare: #FFFFFF;
culoare de fundal: #121212; 
}

Și iată pagina rezultată:

4. Evitați culorile de accent saturate

Culorile saturate pot fi prea luminoase și neclare pe fundaluri întunecate. În schimb, utilizați culori care sunt mai puțin intense și dezactivate. În acest fel, creați o interfață de utilizator care are text vizibil.

Pentru a demonstra, luați în considerare aceste două stiluri de butoane:

/* Albastru saturat */
.btn-saturat-albastru {
culoare de fundal: #121212;
culoare: #0e0bf6;
}
/* Albastru dezactivat */
.btn-muted-blue {
culoare de fundal: #121212; 
culoare: #4c5ab3;
}

Culoarea albastră saturată poate fi prea strălucitoare și dificil de citit pe un fundal întunecat, în timp ce culoarea albastră dezactivată oferă un contrast bun și este mai ușor de citit.

Un instrument ca colorabil este util pentru generarea de combinații de culori care urmează regulile de accesibilitate.

5. Utilizați spațiul negativ pentru a preveni crearea unei interfețe de utilizare grele

O paletă de culori închise poate face UI să pară grea pentru utilizatori. Când este utilizat corect, spațiul negativ vă poate ajuta să evidențiați elementele importante ale interfeței de utilizare și să facă textul ușor de scanat. Spațierea suficientă poate face, de asemenea, designul mai curat și mai modern.

Luați, de exemplu, Pagina de destinație a Apple. Spațiul dintre elemente face ca pagina să pară foarte modernă și interesantă din punct de vedere vizual, permițând elementelor importante să iasă în evidență.

6. Utilizați diferite nuanțe de culoare pentru a adăuga profunzime interfeței de utilizare

Când proiectați interfețe de utilizare luminoase, puteți utiliza umbre pentru a adăuga adâncime și înălțime elementelor. Cu toate acestea, din cauza fundalurilor întunecate, umbrele sunt uneori greu de văzut în interfețele de utilizare întunecate.

Puteți obține profunzime într-o interfață de utilizare întunecată utilizând mai multe nuanțe de culori închise. De exemplu, în loc de un singur fundal întunecat, puteți adăuga nuanțe mai deschise de aceeași culoare la diferite elemente, cum ar fi butoanele și modale.

7. Asigurați-vă că imaginile dvs. se potrivesc cu interfața de utilizare întunecată

Nu trebuie să utilizați aceleași imagini pentru modul de lumină și modul întunecat. Puteți utiliza modul întunecat Interogări media CSS pentru a comuta imaginile care se potrivesc cu interfața de utilizare întunecată ori de câte ori utilizatorul comută la modul întunecat.

De exemplu, pentru a aplica un anumit model de fundal la secțiunile paginii dvs. în modul întunecat, puteți utiliza numele clasei .bgpattern și puteți adăuga următorul cod în foaia de stil.

@mass-media (preferă schema de culori: întuneric) {
/* Aplică acest stil numai în modul întunecat */
.bgpattern {
imagine de fundal: url("/întuneric.jpg");
 }
}

Această interogare media asigură că imaginea de fundal referită este afișată numai atunci când schema de culori preferată a utilizatorului este întunecată.

Când să utilizați o interfață de utilizare întunecată

Designurile întunecate ale interfeței de utilizare sunt o modalitate excelentă de a oferi o estetică modernă site-ului sau aplicației dvs. De asemenea, pot minimiza oboseala ochilor și pot conserva durata de viață a bateriei. Cu toate acestea, interfețele de utilizator întunecate nu sunt potrivite pentru fiecare aplicație și ar trebui să luați în considerare întotdeauna marca și baza de utilizatori.

În general, interfețele întunecate sunt cele mai potrivite pentru mărcile care acordă prioritate luxului, prestigiului, minimalismului sau misterului. De asemenea, pot fi o alegere excelentă pentru tablouri de bord și instrumente de vizualizare.