7 naudingi patarimai, kaip sukurti tamsią vartotojo sąsają

Tamsios vartotojo sąsajos išpopuliarėjo, o daugelis programų dabar siūlo galimybę perjungti šviesųjį ir tamsųjį režimą. Tačiau tamsios vartotojo sąsajos įdiegimas gali būti sudėtinga užduotis, todėl reikia atidžiai stebėti naudojamas spalvas, šriftus, vaizdus ir tarpus.

Bet kokios šių elementų klaidos gali lemti prastą vartotojo patirtį. Šie patarimai turėtų padėti jums kuriant pirmąją tamsią vartotojo sąsają.

1. Nenaudokite grynos juodos spalvos

Kurdami tamsią vartotojo sąsają nenaudokite grynai juodo fono. Geriau naudoti tamsų pilką atspalvį. Pavyzdžiui, „Google“ medžiagos dizaino tema rekomenduoja spalvą #121212.

Juodas fonas kartu su baltu tekstu gali turėti per daug kontrasto ir varginti akis. Tamsesni pilkos spalvos atspalviai gali lengvai parodyti šešėlius, gylį ir aukštį.

2. Užtikrinkite, kad teksto kontrastas atitiktų WCAG 2.0 gaires

Pasirinkite spalvų derinį, kuris siūlo tinkamą kontrasto lygį, kad tekstas būtų įskaitomas. WCAG 2.0 gairėse teigiama, kad teksto ar teksto vaizdų kontrasto santykis turi būti ne mažesnis kaip 4,5:1, o didelio teksto (mažiausiai 18 taškų arba 14 punktų paryškinta) kontrasto santykis turi būti bent 3:1.

Yra keletas įrankių, skirtų spalvų kontrastui patikrinti, įskaitant BANGOS „Chrome“ plėtinys, kuris taip pat patikrina, kaip pasiekiamos spalvos.

3. Pasirinkite tinkamą šrifto stilių

Taip pat turite atsižvelgti į teksto šrifto stilius, įskaitant dydį, svorį ir eilutės aukštį. Jei ieškote šrifto parinkčių, nepamirškite, kad jų yra daugybė svetainių, siūlančių nemokamus šriftus. Kalbant apie šrifto dydį, naudokite vertes, kurių pakanka, kad tekstas būtų aiškus ir matomas tamsiame fone.

Apsvarstykite šiuos tinklalapio stilius:

kūnas {
šrifto šeima: "KurjerisNauja", monospace;
šrifto dydis: 12px;
šrifto svoris: 200;
linijos aukštis: 1; 
spalva: #333333;
}

Šriftų šeimą sunku perskaityti, šrifto dydis per mažas, o šrifto svoris per mažas. Dėl šių stilių puslapį sunku skaityti, kaip matote toliau pateiktoje ekrano kopijoje.

Toliau pateikiami keli tinkami stiliai, kuriuos galite naudoti vietoj jų.

kūnas {
šrifto šeima: "Arial", be serifo;
šrifto dydis: 16px; 
šrifto svoris: 400; 
linijos aukštis: 1.5; 
spalva: #FFFFFF;
fono spalva: #121212; 
}

Ir štai toks puslapis:

4. Venkite sočiųjų akcentinių spalvų

Tamsiame fone sočios spalvos gali būti per ryškios ir neryškios. Vietoj to naudokite spalvas, kurios yra ne tokios intensyvios ir prislopintos. Tokiu būdu sukuriate vartotojo sąsają su matomu tekstu.

Norėdami parodyti, apsvarstykite šiuos du mygtukų stilius:

/* Sočiai mėlyna */
.btn-sotintas-mėlynas {
fono spalva: #121212;
spalva: #0e0bf6;
}
/* Nutildyta mėlyna */
.btn-muted-blue {
fono spalva: #121212; 
spalva: #4c5ab3;
}

Sodri mėlyna spalva gali būti per ryški ir sunkiai įskaitoma tamsiame fone, o prislopinta mėlyna spalva suteikia gerą kontrastą ir yra lengviau skaitoma.

Toks įrankis kaip spalvotas yra naudinga kuriant spalvų derinius, atitinkančius pritaikymo neįgaliesiems gaires.

5. Naudokite neigiamą erdvę, kad nesukurtumėte sunkios vartotojo sąsajos

Dėl tamsių spalvų paletės vartotojo sąsaja gali atrodyti sunki. Tinkamai naudojant, neigiama erdvė gali padėti paryškinti svarbius vartotojo sąsajos elementus ir palengvinti teksto nuskaitymą. Pakankamas atstumas taip pat gali padaryti dizainą švaresnį ir modernesnį.

Paimk, pavyzdžiui, „Apple“ nukreipimo puslapis. Dėl tarpų tarp elementų puslapis atrodo labai modernus ir vizualiai įdomus, todėl svarbūs elementai išsiskiria.

6. Naudokite skirtingus spalvų atspalvius, kad padidintumėte vartotojo sąsajos gylį

Kurdami šviesias vartotojo sąsajas, galite naudoti šešėlius, kad padidintumėte elementų gylį ir aukštį. Tačiau dėl tamsaus fono tamsiose vartotojo sąsajose šešėlius kartais sunku įžvelgti.

Tamsioje vartotojo sąsajoje gylį galite pasiekti naudodami kelis tamsių spalvų atspalvius. Pavyzdžiui, vietoj vieno tamsaus fono galite pridėti šviesesnių tos pačios spalvos atspalvių prie skirtingų elementų, pvz., mygtukų ir modalų.

7. Įsitikinkite, kad jūsų vaizdai atitinka tamsią vartotojo sąsają

Nereikia naudoti tų pačių vaizdų šviesiam ir tamsiam režimui. Galite naudoti tamsųjį režimą CSS medijos užklausos norėdami išjungti vaizdus, ​​atitinkančius tamsią vartotojo sąsają, kai vartotojas perjungia tamsųjį režimą.

Pavyzdžiui, norėdami pritaikyti konkretų fono raštą savo puslapio skyriams tamsiuoju režimu, galite naudoti .bgpattern klasės pavadinimą ir pridėti šį kodą į savo stiliaus lentelę.

@media (teikia pirmenybę spalvų schemai: tamsus) {
/* Taikyti šį stilių tik tamsiuoju režimu */
.bgpattern {
fono vaizdas: url("/tamsus.jpg");
 }
}

Ši medijos užklausa užtikrina, kad nurodytas fono vaizdas būtų rodomas tik tada, kai naudotojo pageidaujama spalvų schema yra tamsi.

Kada naudoti tamsią vartotojo sąsają

Tamsus vartotojo sąsajos dizainas yra puikus būdas suteikti jūsų svetainei ar programai šiuolaikišką estetiką. Jie taip pat gali sumažinti akių įtampą ir sutaupyti akumuliatoriaus veikimo laiką. Tačiau tamsios vartotojo sąsajos netinka kiekvienai programai, todėl visada turėtumėte atsižvelgti į prekės ženklą ir vartotojų bazę.

Paprastai tamsios vartotojo sąsajos geriausiai tinka prekių ženklams, kurie teikia pirmenybę prabangai, prestižui, minimalizmui ar paslapčiai. Jie taip pat gali būti puikus pasirinkimas prietaisų skydeliams ir vizualizavimo įrankiams.