7 užitečných tipů pro návrh tmavého uživatelského rozhraní

Tmavá uživatelská rozhraní si získala oblibu a mnoho aplikací nyní nabízí možnost přepínání mezi světlým a tmavým režimem. Implementace tmavého uživatelského rozhraní však může být náročný úkol, který vyžaduje pečlivou pozornost věnovanou použitým barvám, fontům, obrázkům a mezerám.

Jakékoli chyby v těchto prvcích mohou mít za následek špatnou uživatelskou zkušenost. Následující tipy by vám měly pomoci při navrhování vašeho prvního tmavého uživatelského rozhraní.

1. Nepoužívejte čistě černou

Při navrhování tmavého uživatelského rozhraní se vyhněte použití čistě černého pozadí. Je lepší použít tmavý odstín šedé. Například, Téma materiálového designu Google doporučuje barvu #121212.

Černé pozadí v kombinaci s bílým textem může mít příliš velký kontrast a způsobit únavu očí. Tmavší odstíny šedé místo toho mohou snadno zobrazit stíny, hloubku a výšku.

2. Zajistěte, aby kontrast textu splňoval pokyny WCAG 2.0

Vyberte barevnou kombinaci, která nabízí správnou úroveň kontrastu, aby byl text čitelný. Pokyny WCAG 2.0 uvádějí, že text nebo obrázky textu musí mít kontrastní poměr alespoň 4,5:1 a velký text (nejméně 18 bodů nebo 14 bodů tučné) musí mít kontrastní poměr alespoň 3:1.

Existuje několik nástrojů pro kontrolu barevného kontrastu, včetně MÁVAT Rozšíření pro Chrome, které také kontroluje dostupnost barev.

3. Vyberte správný styl písma

Musíte také vzít v úvahu styly písma vašeho textu včetně velikosti, váhy a výšky řádku. Pokud hledáte možnosti písma, nezapomeňte, že existují spousta stránek, které nabízejí písma zdarma. Pokud jde o velikost písma, použijte hodnoty, které jsou dostatečné k tomu, aby byl text jasný a viditelný na tmavém pozadí.

Zvažte následující styly pro webovou stránku:

tělo {
rodina písem: "KurýrNový", monoprostor;
velikost písma: 12px;
tloušťka písma: 200;
výška čáry: 1; 
barva: #333333;
}

Rodina písem je obtížně čitelná, velikost písma je příliš malá a tloušťka písma je příliš malá. Tyto styly znesnadňují čtení stránky, jak můžete vidět na snímku obrazovky níže.

Níže jsou uvedeny některé vhodné styly, které můžete místo toho použít.

tělo {
rodina písem: "Arial", sans-serif;
velikost písma: 16px; 
tloušťka písma: 400; 
výška čáry: 1.5; 
barva: #FFFFFF;
barva pozadí: #121212; 
}

A tady je výsledná stránka:

4. Vyhněte se sytým akcentovým barvám

Syté barvy mohou být na tmavém pozadí příliš jasné a rozmazané. Místo toho použijte barvy, které jsou méně intenzivní a tlumené. Tímto způsobem vytvoříte uživatelské rozhraní, které má viditelný text.

Pro demonstraci zvažte tyto dva styly tlačítek:

/* Nasycená modrá */
.btn-saturated-blue {
barva pozadí: #121212;
barva: #0e0bf6;
}
/* Ztlumená modrá */
.btn-muted-blue {
barva pozadí: #121212; 
barva: #4c5ab3;
}

Nasycená modrá barva může být příliš jasná a špatně čitelná na tmavém pozadí, zatímco tlumená modrá barva poskytuje dobrý kontrast a je snáze čitelná.

Nástroj jako barevná je užitečný pro generování barevných kombinací, které se řídí pokyny pro usnadnění.

5. Použijte záporný prostor, abyste zabránili vytváření těžkého uživatelského rozhraní

Paleta tmavých barev může způsobit, že uživatelské rozhraní bude pro uživatele těžké. Při správném použití vám negativní prostor může pomoci zvýraznit důležité prvky uživatelského rozhraní a usnadnit skenování textu. Dostatečné rozestupy mohou také učinit design čistším a modernějším.

Vezměte si např. Vstupní stránka společnosti Apple. Díky mezerám mezi prvky stránka vypadá velmi moderně a vizuálně zajímavě, což umožňuje vyniknout důležitým prvkům.

6. Pomocí různých barevných odstínů přidejte do uživatelského rozhraní hloubku

Při navrhování světelných uživatelských rozhraní můžete použít stíny k přidání hloubky a výšky prvkům. Kvůli tmavému pozadí jsou však stíny v tmavých uživatelských rozhraních někdy špatně vidět.

Hloubky v tmavém uživatelském rozhraní můžete dosáhnout použitím více odstínů tmavých barev. Například místo jednoho tmavého pozadí můžete k různým prvkům, jako jsou tlačítka a modály, přidat světlejší odstíny stejné barvy.

7. Ujistěte se, že vaše obrázky odpovídají tmavému uživatelskému rozhraní

Pro světlý a tmavý režim nemusíte používat stejné obrázky. Můžete použít tmavý režim Dotazy na média CSS pro přepnutí obrázků, které odpovídají tmavému uživatelskému rozhraní, kdykoli uživatel přepne do tmavého režimu.

Chcete-li například použít konkrétní vzor pozadí na části stránky v tmavém režimu, můžete použít název třídy .bgpattern a přidat do své šablony stylů následující kód.

@media (preferuje barevné schéma: temný) {
/* Použít tento styl pouze v tmavém režimu */
.bgpattern {
obrázek na pozadí: url("/temný.jpg");
 }
}

Tento dotaz na média zajišťuje, že se odkazovaný obrázek na pozadí zobrazí pouze v případě, že je preferované barevné schéma uživatele tmavé.

Kdy použít tmavé uživatelské rozhraní

Tmavé návrhy uživatelského rozhraní jsou skvělým způsobem, jak dodat moderní estetiku vašemu webu nebo aplikaci. Mohou také minimalizovat únavu očí a šetřit životnost baterie. Tmavá uživatelská rozhraní však nejsou vhodná pro každou aplikaci a vždy byste měli zvážit značku a uživatelskou základnu.

Obecně platí, že tmavá uživatelská rozhraní jsou nejvhodnější pro značky, které upřednostňují luxus, prestiž, minimalismus nebo tajemno. Mohou být také skvělou volbou pro řídicí panely a vizualizační nástroje.