Tumeda režiimi valik sobib suurepäraselt kasutajatele, kes seda eelistavad, kuid veenduge, et kujundaksite parima võimaliku tumeda režiimi.
Tumedad kasutajaliidesed on kogunud populaarsust ja paljud rakendused pakuvad nüüd võimalust heleda ja tumeda režiimi vahel lülituda. Tume kasutajaliidese rakendamine võib aga olla keeruline ülesanne, mis nõuab hoolikat tähelepanu kasutatavatele värvidele, fontidele, piltidele ja vahekaugustele.
Kõik vead nendes elementides võivad põhjustada kehva kasutuskogemuse. Järgmised näpunäited peaksid teid aitama oma esimese tumeda kasutajaliidese kujundamisel.
1. Ärge kasutage puhast musta
Tume kasutajaliidese kujundamisel vältige puhta musta tausta kasutamist. Parem on kasutada tumedat halli varjundit. Näiteks, Google'i materjalikujunduse teema soovitab värvi #121212.
Mustal taustal koos valge tekstiga võib olla liiga palju kontrasti ja see võib põhjustada silmade väsimust. Selle asemel võivad hallid tumedamad toonid lihtsalt näidata varje, sügavust ja kõrgust.
2. Veenduge, et teksti kontrastsus vastaks WCAG 2.0 juhistele
Valige värvikombinatsioon, mis pakub õiget kontrasti, et tekst oleks loetav. WCAG 2.0 juhised ütlevad, et teksti või teksti kujutiste kontrastsussuhe peab olema vähemalt 4,5:1, suure tekstiga (vähemalt 18 punkti või 14 punkti paksus kirjas) peab kontrastsuse suhe olema vähemalt 3:1.
Värvikontrastsuse kontrollimiseks on mitmeid tööriistu, sealhulgas LAINE Chrome'i laiendus, mis kontrollib ka värvide kättesaadavust.
3. Valige õige fondi stiil
Arvesse tuleb võtta ka teksti kirjastiile, sealhulgas suurust, kaalu ja rea kõrgust. Kui otsite fondivalikuid, ärge unustage, et need on olemas palju saite, mis pakuvad tasuta fonte. Kirjasuuruse osas kasutage väärtusi, mis on piisavad tagamaks, et tekst on selge ja nähtav tumedal taustal.
Mõelge järgmistele veebilehe stiilidele.
keha {
font-perekond: "KullerUus", monoruum;
fondi suurus: 12px;
font-weight: 200;
reakõrgus: 1;
värvi: #333333;
}Fondiperekonda on raske lugeda, fondi suurus on liiga väike ja fondi kaal liiga kerge. Need stiilid muudavad lehe raskesti loetavaks, nagu näete allolevalt ekraanipildilt.
Allpool on mõned sobivad stiilid, mida saate selle asemel kasutada.
keha {
font-perekond: "Arial", sans-serif;
fondi suurus: 16px;
font-weight: 400;
reakõrgus: 1.5;
värvi: #FFFFFF;
taustavärv: #121212;
}
Ja siin on tulemuseks olev leht:
4. Vältige küllastunud aktsentvärve
Küllastunud värvid võivad tumedal taustal olla liiga heledad ja udused. Selle asemel kasutage värve, mis on vähem intensiivsed ja summutatud. Nii loote kasutajaliidese, millel on nähtav tekst.
Demonstreerimiseks kaaluge neid kahte nupustiili:
/* Küllastunud sinine */
.btn-saturated-blue {
taustavärv: #121212;
värvi: #0e0bf6;
}
/* Vaigistatud sinine */
.btn-muted-blue {
taustavärv: #121212;
värvi: #4c5ab3;
}
Küllastunud sinine värv võib olla liiga hele ja tumedal taustal raskesti loetav, samas kui vaigistatud sinine värv annab hea kontrasti ja seda on kergem lugeda.
Selline tööriist nagu värviline on abiks juurdepääsetavuse juhistele vastavate värvikombinatsioonide loomisel.
5. Raske kasutajaliidese loomise vältimiseks kasutage negatiivset ruumi
Tume värvipalett võib muuta kasutajaliidese kasutajate jaoks raskeks. Õige kasutamise korral aitab negatiivne ruum esile tõsta olulisi kasutajaliidese elemente ja muuta teksti hõlpsaks skannimiseks. Piisav vahekaugus võib muuta ka disaini puhtamaks ja kaasaegsemaks.
Võtame näiteks Apple'i sihtleht. Elementidevaheline ruum muudab lehe väga kaasaegse ja visuaalselt huvitavaks, võimaldades olulistel elementidel silma paista.
6. Kasutage kasutajaliidesele sügavuse lisamiseks erinevaid värvivarjundeid
Heledate kasutajaliideste kujundamisel võite elementidele sügavuse ja kõrguse lisamiseks kasutada varje. Kuid tumeda tausta tõttu on tumedates kasutajaliideses mõnikord raske näha varje.
Tumedas kasutajaliideses saate saavutada sügavuse, kasutades mitut tumedate värvide varjundit. Näiteks saate ühe tumeda tausta asemel erinevatele elementidele (nt nuppudele ja modaalidele) lisada sama värvi heledamaid toone.
7. Veenduge, et teie pildid vastaksid tumedale kasutajaliidesele
Te ei pea heledas ja tumedas režiimis kasutama samu pilte. Võite kasutada tumedat režiimi CSS-i meediumipäringud tumedale kasutajaliidesele vastavate piltide väljalülitamiseks alati, kui kasutaja lülitub tumedale režiimile.
Näiteks konkreetse taustamustri rakendamiseks oma lehe osadele tumedas režiimis võite kasutada klassinime .bgpattern ja lisada oma stiililehele järgmise koodi.
@meedia (eelistab värviskeemi: tume) {
/* Rakenda seda stiili ainult tumedas režiimis */
.bgpattern {
taustapilt: url("/tume.jpg");
}
}See meediumipäring tagab, et viidatud taustapilti kuvatakse ainult siis, kui kasutaja eelistatud värviskeem on tume.
Millal kasutada tumedat kasutajaliidest
Tume kasutajaliidese kujundus on suurepärane viis oma veebisaidile või rakendusele kaasaegse esteetika andmiseks. Samuti võivad need vähendada silmade pinget ja säästa aku kasutusaega. Tumedad kasutajaliidesed ei sobi aga iga rakenduse jaoks ning alati tuleks arvestada brändi ja kasutajaskonnaga.
Üldiselt sobivad tumedad kasutajaliidesed kõige paremini kaubamärkidele, mis eelistavad luksust, prestiiži, minimalismi või salapära. Need võivad olla ka suurepärane valik armatuurlaudade ja visualiseerimistööriistade jaoks.
