7 koristnih nasvetov za oblikovanje temnega uporabniškega vmesnika

Temni uporabniški vmesniki so postali priljubljeni in številne aplikacije zdaj ponujajo možnost preklapljanja med svetlim in temnim načinom. Vendar pa je implementacija temnega uporabniškega vmesnika lahko zahtevna naloga, ki zahteva posebno pozornost uporabljenim barvam, pisavam, slikam in razmikom.

Morebitne napake v teh elementih lahko povzročijo slabo uporabniško izkušnjo. Naslednji nasveti bi vam morali pomagati pri oblikovanju vašega prvega temnega uporabniškega vmesnika.

1. Ne uporabljajte Pure Black

Pri oblikovanju temnega uporabniškega vmesnika se izogibajte uporabi čistih črnih ozadij. Bolje je uporabiti temno sivo barvo. na primer Googlova tema materialnega oblikovanja priporoča barvo #121212.

Črno ozadje v kombinaciji z belim besedilom ima lahko preveč kontrasta in povzroči utrujenost oči. Temnejši odtenki sive namesto tega zlahka prikažejo sence, globino in višino.

2. Zagotovite, da je kontrast besedila skladen s smernicami WCAG 2.0

Izberite barvno kombinacijo, ki nudi ustrezno raven kontrasta, da bo besedilo berljivo. Smernice WCAG 2.0 navajajo, da mora imeti besedilo ali slike besedila kontrastno razmerje vsaj 4,5:1, veliko besedilo (vsaj 18 ali 14 pik krepko) pa mora imeti kontrastno razmerje vsaj 3:1.

Obstaja več orodij za preverjanje barvnega kontrasta, vključno z VALOVI Razširitev za Chrome, ki prav tako preverja, kako dostopne so barve.

3. Izberite pravi slog pisave

Upoštevati morate tudi sloge pisave vašega besedila, vključno z velikostjo, težo in višino vrstice. Če iščete možnosti pisave, ne pozabite, da obstajajo veliko spletnih mest, ki ponujajo brezplačne pisave. Kar zadeva velikost pisave, uporabite vrednosti, ki zadostujejo za zagotovitev, da je besedilo jasno in vidno na temnem ozadju.

Razmislite o naslednjih slogih za spletno stran:

telo {
družina pisav: "KurirNovo", monospace;
velikost pisave: 12px;
teža pisave: 200;
višina vrstice: 1; 
barva: #333333;
}

Družina pisav je težko berljiva, velikost pisave je premajhna in teža pisave je prelahka. Ti slogi otežujejo branje strani, kot lahko vidite na spodnjem posnetku zaslona.

Spodaj je nekaj primernih slogov, ki jih lahko uporabite namesto tega.

telo {
družina pisav: "Arial", sans-serif;
velikost pisave: 16px; 
teža pisave: 400; 
višina vrstice: 1.5; 
barva: #FFFFFF;
Barva ozadja: #121212; 
}

In tukaj je nastala stran:

4. Izogibajte se nasičenim poudarjenim barvam

Nasičene barve so lahko presvetle in zamegljene na temnem ozadju. Namesto tega uporabite barve, ki so manj intenzivne in zamolkle. Na ta način ustvarite uporabniški vmesnik z vidnim besedilom.

Za prikaz upoštevajte ta dva sloga gumbov:

/* Nasičeno modra */
.btn-nasičeno-modra {
Barva ozadja: #121212;
barva: #0e0bf6;
}
/* Utišana modra */
.btn-muted-blue {
Barva ozadja: #121212; 
barva: #4c5ab3;
}

Nasičena modra barva je lahko presvetla in težko berljiva na temnem ozadju, medtem ko zamolklo modra barva zagotavlja dober kontrast in je lažje berljiva.

Orodje kot barvno je v pomoč pri ustvarjanju barvnih kombinacij, ki sledijo smernicam za dostopnost.

5. Uporabite negativni prostor, da preprečite ustvarjanje težkega uporabniškega vmesnika

Temna barvna paleta lahko povzroči, da je uporabniški vmesnik uporabnikom težak. Ob pravilni uporabi vam lahko negativni prostor pomaga poudariti pomembne elemente uporabniškega vmesnika in olajša skeniranje besedila. Zadostna razdalja lahko naredi tudi dizajn čistejši in modernejši.

Vzemite, na primer, Applova ciljna stran. Zaradi razmika med elementi je stran videti zelo moderna in vizualno zanimiva, kar omogoča, da pomembni elementi izstopajo.

6. Uporabite različne barvne odtenke, da uporabniškemu vmesniku dodate globino

Pri oblikovanju svetlih uporabniških vmesnikov lahko uporabite sence, da elementom dodate globino in višino. Vendar pa je zaradi temnega ozadja sence včasih težko videti v temnih uporabniških vmesnikih.

Globino v temnem uporabniškem vmesniku lahko dosežete z uporabo več odtenkov temnih barv. Na primer, namesto samo enega temnega ozadja lahko dodate svetlejše odtenke iste barve različnim elementom, kot so gumbi in modali.

7. Zagotovite, da se vaše slike ujemajo s temnim uporabniškim vmesnikom

Ni vam treba uporabljati istih slik za svetlobni in temni način. Uporabite lahko temni način medijske poizvedbe CSS da izklopite slike, ki se ujemajo s temnim uporabniškim vmesnikom, kadar koli uporabnik preklopi na temni način.

Na primer, če želite uporabiti poseben vzorec ozadja za odseke svoje strani v temnem načinu, lahko uporabite ime razreda .bgpattern in dodate naslednjo kodo v svojo datoteko slogov.

@mediji (raje-barvna-shema: temno) {
/* Uporabi ta slog samo v temnem načinu */
.bgvzorec {
slika ozadja: url("/temno.jpg");
 }
}

Ta predstavnostna poizvedba zagotavlja, da je referenčna slika ozadja prikazana le, ko je uporabnikova želena barvna shema temna.

Kdaj uporabiti temni uporabniški vmesnik

Temni dizajni uporabniškega vmesnika so odličen način za sodobno estetiko vašega spletnega mesta ali aplikacije. Prav tako lahko zmanjšajo obremenitev oči in prihranijo življenjsko dobo baterije. Vendar temni uporabniški vmesniki niso primerni za vsako aplikacijo, zato morate vedno upoštevati blagovno znamko in bazo uporabnikov.

Na splošno so temni uporabniški vmesniki najbolj primerni za znamke, ki dajejo prednost razkošju, prestižu, minimalizmu ali skrivnostnosti. Lahko so tudi odlična izbira za nadzorne plošče in orodja za vizualizacijo.