7 korisnih savjeta za dizajniranje mračnog korisničkog sučelja

Tamna korisnička sučelja postala su popularna, a mnoge aplikacije sada nude opciju prebacivanja između svijetlog i tamnog načina rada. Međutim, implementacija mračnog korisničkog sučelja može biti izazovan zadatak koji zahtijeva posebnu pozornost na boje, fontove, slike i razmake koji se koriste.

Sve pogreške u ovim elementima mogu rezultirati lošim korisničkim iskustvom. Sljedeći savjeti trebali bi vam pomoći pri dizajniranju vašeg prvog mračnog korisničkog sučelja.

1. Nemojte koristiti Pure Black

Kada dizajnirate tamno korisničko sučelje, izbjegavajte korištenje čiste crne pozadine. Bolje je koristiti tamnu nijansu sive. Na primjer, Googleova tema materijalnog dizajna preporučuje boju #121212.

Crna pozadina u kombinaciji s bijelim tekstom može imati previše kontrasta i uzrokovati naprezanje očiju. Tamnije nijanse sive umjesto toga mogu lako prikazati sjene, dubinu i visinu.

2. Osigurajte kontrast teksta u skladu sa smjernicama WCAG 2.0

Odaberite kombinaciju boja koja nudi odgovarajuću razinu kontrasta kako bi tekst bio čitljiv. Smjernice WCAG 2.0 navode da tekst ili slike teksta moraju imati omjer kontrasta od najmanje 4,5:1, a veliki tekst (najmanje 18 točaka ili 14 točaka podebljano) mora imati omjer kontrasta od najmanje 3:1.

Postoji nekoliko alata za provjeru kontrasta boja, uključujući VAL Chromeovo proširenje koje također provjerava koliko su boje dostupne.

3. Odaberite pravi stil fonta

Također morate uzeti u obzir stilove fonta vašeg teksta uključujući veličinu, težinu i visinu retka. Ako tražite opcije fonta, ne zaboravite da postoje mnoštvo stranica koje nude besplatne fontove. Što se tiče veličine fonta, koristite vrijednosti koje su dovoljne da tekst bude jasan i vidljiv na tamnoj pozadini.

Razmotrite sljedeće stilove za web stranicu:

tijelo {
obitelj-fontova: "KurirNovi", monospace;
veličina fonta: 12px;
težina fonta: 200;
linija-visina: 1; 
boja: #333333;
}

Porodica fontova je teška za čitanje, veličina fonta je premala, a težina fonta je prelaga. Ovi stilovi čine stranicu teško čitljivom kao što možete vidjeti na slici ispod.

Ispod su neki prikladni stilovi koje možete koristiti umjesto toga.

tijelo {
obitelj-fontova: "Arial", sans-serif;
veličina fonta: 16px; 
težina fonta: 400; 
linija-visina: 1.5; 
boja: #FFFFFF;
boja pozadine: #121212; 
}

I evo stranice koja je nastala:

4. Izbjegavajte zasićene akcentne boje

Zasićene boje mogu biti previše svijetle i mutne na tamnoj pozadini. Umjesto toga, koristite boje koje su manje intenzivne i prigušene. Na taj način stvarate korisničko sučelje koje ima vidljiv tekst.

Za demonstraciju, razmotrite ova dva stila gumba:

/* Zasićena plava */
.btn-zasićeno-plavo {
boja pozadine: #121212;
boja: #0e0bf6;
}
/* Prigušeno plava */
.btn-prigušeno-plava {
boja pozadine: #121212; 
boja: #4c5ab3;
}

Zasićena plava boja može biti presvijetla i teška za čitanje na tamnoj pozadini, dok prigušena plava boja daje dobar kontrast i lakša je za čitanje.

Alat poput bojan koristan je za generiranje kombinacija boja koje slijede smjernice pristupačnosti.

5. Koristite Negative Space kako biste spriječili stvaranje teškog korisničkog sučelja

Tamna paleta boja može učiniti korisničko sučelje teškim za korisnike. Ako se pravilno koristi, negativni prostor vam može pomoći da istaknete važne elemente korisničkog sučelja i olakšate skeniranje teksta. Dovoljan razmak također može učiniti dizajn čistijim i modernijim.

Uzmimo, na primjer, Appleova odredišna stranica. Razmak između elemenata čini stranicu vrlo modernom i vizualno zanimljivom, omogućujući da se važni elementi istaknu.

6. Koristite različite nijanse boja da biste dodali dubinu korisničkom sučelju

Prilikom dizajniranja svijetlih korisničkih sučelja, možete koristiti sjene za dodavanje dubine i visine elementima. Međutim, zbog tamne pozadine, sjene je ponekad teško vidjeti u tamnim korisničkim sučeljima.

Možete postići dubinu u tamnom korisničkom sučelju korištenjem više nijansi tamnih boja. Na primjer, umjesto samo jedne tamne pozadine, možete dodati svjetlije nijanse iste boje različitim elementima poput gumba i modala.

7. Osigurajte da vaše slike odgovaraju Dark UI

Ne morate koristiti iste slike za svijetli i tamni način. Možete koristiti tamni način rada CSS medijski upiti za isključivanje slika koje odgovaraju tamnom korisničkom sučelju kad god korisnik prijeđe u tamni način rada.

Na primjer, da biste primijenili određeni pozadinski uzorak na dijelove svoje stranice u mračnom načinu, možete upotrijebiti naziv klase .bgpattern i dodati sljedeći kod svojoj tablici stilova.

@mediji (preferira shemu boja: tamno) {
/* Primijeni ovaj stil samo u tamnom načinu */
.bguzorak {
pozadinska slika: url("/mračno.jpg");
 }
}

Ovaj medijski upit osigurava da se referentna pozadinska slika prikazuje samo kada je korisnikova preferirana shema boja tamna.

Kada koristiti tamno korisničko sučelje

Tamni dizajn korisničkog sučelja izvrstan je način da svojoj web stranici ili aplikaciji date modernu estetiku. Također mogu smanjiti naprezanje očiju i produžiti trajanje baterije. Međutim, mračna sučelja nisu prikladna za svaku aplikaciju i uvijek biste trebali uzeti u obzir robnu marku i bazu korisnika.

Općenito, tamna sučelja najprikladnija su za robne marke kojima je prioritet luksuz, prestiž, minimalizam ili tajanstvenost. Također mogu biti odličan izbor za nadzorne ploče i alate za vizualizaciju.