7 užitočných tipov na navrhovanie tmavého používateľského rozhrania

Tmavé používateľské rozhrania si získali popularitu a mnohé aplikácie teraz ponúkajú možnosť prepínania medzi svetlým a tmavým režimom. Implementácia tmavého používateľského rozhrania však môže byť náročnou úlohou, ktorá si vyžaduje starostlivú pozornosť týkajúcu sa farieb, písma, obrázkov a použitých medzier.

Akékoľvek chyby v týchto prvkoch môžu mať za následok zlú používateľskú skúsenosť. Nasledujúce tipy by vám mali pomôcť pri navrhovaní vášho prvého tmavého používateľského rozhrania.

1. Nepoužívajte čistú čiernu

Pri navrhovaní tmavého používateľského rozhrania sa vyhnite používaniu čisto čierneho pozadia. Je lepšie použiť tmavý odtieň sivej. Napríklad, Téma materiálového dizajnu Google odporúča farbu #121212.

Čierne pozadie v kombinácii s bielym textom môže mať príliš veľký kontrast a spôsobiť únavu očí. Tmavšie odtiene sivej môžu namiesto toho ľahko zobraziť tiene, hĺbku a výšku.

2. Zabezpečte, aby kontrast textu spĺňal usmernenia WCAG 2.0

Zvoľte farebnú kombináciu, ktorá ponúka primeranú úroveň kontrastu, aby bol text čitateľný. Pokyny WCAG 2.0 stanovujú, že text alebo obrázky textu musia mať kontrastný pomer aspoň 4,5:1 a veľký text (aspoň 18 bodov alebo 14 bodov tučné) musí mať kontrastný pomer aspoň 3:1.

Existuje niekoľko nástrojov na kontrolu farebného kontrastu, vrátane MÁVAŤ Rozšírenie Chrome, ktoré tiež kontroluje dostupnosť farieb.

3. Vyberte si správny štýl písma

Musíte tiež vziať do úvahy štýly písma vášho textu vrátane veľkosti, hmotnosti a výšky riadku. Ak hľadáte možnosti písma, nezabudnite, že existujú veľa stránok, ktoré ponúkajú bezplatné písma. Pokiaľ ide o veľkosť písma, použite hodnoty, ktoré sú dostatočné na to, aby bol text jasný a viditeľný na tmavom pozadí.

Zvážte nasledujúce štýly webovej stránky:

telo {
font-family: "KuriérNový", monopriestor;
veľkosť písma: 12px;
font-weight: 200;
line-height: 1; 
farba: #333333;
}

Rodina písiem je ťažko čitateľná, veľkosť písma je príliš malá a hrúbka písma je príliš nízka. Tieto štýly sťažujú čítanie stránky, ako môžete vidieť na obrázku nižšie.

Nižšie sú uvedené niektoré vhodné štýly, ktoré môžete použiť namiesto toho.

telo {
font-family: "Arial", sans-serif;
veľkosť písma: 16px; 
font-weight: 400; 
line-height: 1.5; 
farba: #FFFFFF;
farba pozadia: #121212; 
}

A tu je výsledná stránka:

4. Vyhnite sa nasýteným akcentovým farbám

Nasýtené farby môžu byť na tmavom pozadí príliš svetlé a rozmazané. Namiesto toho použite farby, ktoré sú menej intenzívne a tlmené. Týmto spôsobom vytvoríte používateľské rozhranie, ktoré má viditeľný text.

Na demonštráciu zvážte tieto dva štýly tlačidiel:

/* Nasýtená modrá */
.btn-saturated-blue {
farba pozadia: #121212;
farba: #0e0bf6;
}
/* Tlmená modrá */
.btn-tlmená-modrá {
farba pozadia: #121212; 
farba: #4c5ab3;
}

Sýta modrá farba môže byť príliš svetlá a ťažko čitateľná na tmavom pozadí, zatiaľ čo tlmená modrá farba poskytuje dobrý kontrast a je ľahšie čitateľná.

Nástroj ako vyfarbiteľné je užitočná pri vytváraní farebných kombinácií, ktoré sa riadia pokynmi na prístupnosť.

5. Použite negatívny priestor, aby ste zabránili vytvoreniu ťažkého používateľského rozhrania

Paleta tmavých farieb môže spôsobiť, že používateľské rozhranie bude pre používateľov ťažké. Pri správnom použití vám negatívny priestor môže pomôcť zvýrazniť dôležité prvky používateľského rozhrania a uľahčiť skenovanie textu. Dostatočné rozostupy môžu tiež urobiť dizajn čistejším a modernejším.

Vezmi si napr. Vstupná stránka spoločnosti Apple. Vďaka medzere medzi prvkami stránka vyzerá veľmi moderne a vizuálne zaujímavo, čo umožňuje vyniknúť dôležitým prvkom.

6. Použite rôzne farebné odtiene na pridanie hĺbky do používateľského rozhrania

Pri navrhovaní svetelných používateľských rozhraní môžete použiť tiene na pridanie hĺbky a výšky k prvkom. Kvôli tmavému pozadiu sú však tiene v tmavých používateľských rozhraniach niekedy ťažko viditeľné.

Hĺbku v tmavom používateľskom rozhraní môžete dosiahnuť použitím viacerých odtieňov tmavých farieb. Napríklad namiesto jedného tmavého pozadia môžete k rôznym prvkom, ako sú tlačidlá a modály, pridať svetlejšie odtiene rovnakej farby.

7. Uistite sa, že sa vaše obrázky zhodujú s tmavým používateľským rozhraním

Pre svetlý a tmavý režim nemusíte používať rovnaké obrázky. Môžete použiť tmavý režim Dopyty na médiá CSS na prepnutie obrázkov, ktoré sa zhodujú s tmavým používateľským rozhraním vždy, keď používateľ prepne do tmavého režimu.

Napríklad, ak chcete použiť špecifický vzor pozadia na časti vašej stránky v tmavom režime, môžete použiť názov triedy .bgpattern a pridať nasledujúci kód do svojej šablóny so štýlmi.

@media (preferuje farebnú schému: tmavé) {
/* Použiť tento štýl iba v tmavom režime */
.bgpattern {
obrázok na pozadí: url("/tmavé.jpg");
 }
}

Tento mediálny dotaz zaisťuje, že odkazovaný obrázok na pozadí sa zobrazí iba vtedy, keď je preferovaná farebná schéma používateľa tmavá.

Kedy použiť tmavé používateľské rozhranie

Tmavé návrhy používateľského rozhrania sú skvelým spôsobom, ako dodať vašej webovej stránke alebo aplikácii modernú estetiku. Môžu tiež minimalizovať namáhanie očí a šetriť výdrž batérie. Tmavé používateľské rozhrania však nie sú vhodné pre každú aplikáciu a vždy by ste mali zvážiť značku a používateľskú základňu.

Vo všeobecnosti sú tmavé používateľské rozhrania najvhodnejšie pre značky, ktoré uprednostňujú luxus, prestíž, minimalizmus alebo tajomstvo. Môžu byť tiež skvelou voľbou pre dashboardy a vizualizačné nástroje.