Tmavý barevný design odkazuje na styl a přístup k vytváření vizuálního designu, který se opírá o použití hlubokých, bohatých barevných schémat, obvykle s převahou tmavých odstínů. Tento designový styl se v posledních letech stal populárním a lze jej použít v různých oblastech včetně webdesignu, grafického designu, interiérového designu a dalších.

Ztlumte světla, uvolněte oči a ušetřete energii. Tmavý režim je jedním z nejoblíbenějších designové trendya světové značky jako WhatsApp, Instagram, Google, Facebook a Apple již nasedly do vlaku designu tmavého režimu.

Pojďme se podívat na to, co tyto špičkové značky dělají a jak můžete přidat uživatelské rozhraní tmavého režimu do svých vlastních projektů. Dozvíte se o výhody a nevýhody tmavý režim a základní doporučené postupy pro vývoj tmavého režimu, aby vaše webové stránky a návrhy aplikací vypadaly a fungovaly perfektně.

Tištěný marketingový materiál

Co je tmavý režim? Design v tmavých barvách

Tmavý režim je uživatelské rozhraní (UI) pro slabé osvětlení, které jako hlavní barvu používá tmavou barvu pozadí barva - obvykle černá nebo odstín šedé. Jedná se o úplný opak standardního bílého uživatelského rozhraní, které návrháři používají po desetiletí. V reakci na naši delší dobu strávenou na obrazovce vývojáři zjistili, že rozhraní s tmavými motivy pomáhá snižovat únavu očí, zejména za špatných světelných podmínek nebo v noci. Menší namáhání očí znamenalo méně bolestí hlavy a lepší pracovní zkušenosti.

Návrh aplikace Instagram v tmavém režimu Návrh v tmavých barvách

Uživatelské rozhraní tmavého režimu Instagramu

 

WhatsApp v designu desktopové aplikace v tmavém režimu Design v tmavých barvách

WhatsApp v uživatelském rozhraní tmavého režimu plochy prostřednictvím aplikace What's App

Návrh aplikace v tmavém režimu Google Fit

Uživatelské rozhraní tmavého režimu Google Fit

 

Tmavý režim ale není vlastně nic nového.

Vývoj plakátů. 5 pravidel

Pamatujete si na zelený počítačový kód pršící na černém pozadí v Matrixu? To byl souhlas s původním tmavým režimem: starými monochromatickými monitory raných počítačů.

Raný domácí počítač se zeleným textem na černém pozadí

První domácí počítače se zeleným textem na černém byly v tmavém režimu OG.

 

Tento klasický tmavý vzhled vyšel z módy v 80. letech ve prospěch černého textu na bílém pozadí, který simuloval inkoust na papíře. Design v tmavých barvách

Co je to videoreklama? Definice, typy a trendy

To bylo normou téměř tři desetiletí, dokud se v roce 7 do Windows Phone 2010 nevrátil tmavý režim. Poté, co Google potvrdil, že tmavý režim šetří baterii, přidal tuto funkci do svého operačního systému Android v roce 2018. O rok později následoval Apple s tmavým režimem na iOS a iPadOS.

Tmavý režim a světlý režim v designu aplikace iOS 13

Tmavý režim v iOS 13

Výhody použití tmavého režimu. Design v tmavých barvách

Tmavý režim je nejen šetrnější pro oči (pokud je proveden správně), ale také šetří baterii a může být dokonce zdravější. Podívejme se na praktické výhody tmavého režimu oproti světlému.

Snižuje únavu očí

Neměl bys cítit oči. Ale každý, kdo analyzuje data obrazovky po dlouhou dobu, ví, že po chvíli to začnete dělat. Syndrom počítačového vidění (CVS) zahrnuje bolesti očí, rozmazané vidění, dvojité vidění, bolesti hlavy, bolesti krku/záda a další. Pokud jde o tabulky a grafy, tmavý režim může doslova pomoci snížit bolest.

Návrh aplikace v tmavém režimu Návrh v tmavých barvách

Toto zelené logo se dobře hodí k tomuto designu aplikace s tmavým motivem.

 

Zvyšuje viditelnost při slabém osvětlení

Pokud spíte a někdo rozsvítí jasné světlo, rozbolí vás hlava. Stejný princip platí pro lidi, kteří pracují před obrazovkou počítače pozdě v noci nebo brzy ráno. Tmavý režim redukuje tyto odlesky a usnadňuje sledování obsahu za špatných světelných podmínek.

Šetří energii baterie

Některé digitální přístroje s obrazovkami OLED mohou vypnout černé pixely, když se nepoužívají. Tmavý režim využívá zvýšený počet černých pixelů, což způsobuje, že zařízení spotřebovává méně energie.

Dává emocionální náboj

Mnoho uživatelů uživatelského rozhraní v tmavém režimu jej volí spíše z energetických a zdravotních důvodů než z estetických důvodů. Tmavý režim jim připomene, že dělají něco zdravějšího, což jim dává dobrý pocit – jako ten, který získáte, když doplníte své opakovaně použitelné nákupní taška nebo láhev vody.

Zabraňuje ADD. Design v tmavých barvách

No... tak nějak. Bílé světlo a barvy mají tendenci rozptylovat vaši pozornost, což ztěžuje dokončení úkolu. Uživatelské rozhraní v tmavém režimu může zlepšit zaměření tím, že nasměruje vaši koncentraci do oblastí obsahu vašeho rozhraní, což umožní, aby se obsah objevil a pozadí zmizelo.

Nevýhody použití tmavého režimu

Jako všechno má i tmavý režim své nevýhody. Pojďme se podívat na důvody, proč může být tmavé téma pro vaše účely nevýhodou.

Může snížit emocionální spojení. Design v tmavých barvách

Bystrý barvy mohou vyvolat živé emoce. Pokud je to to, co vaši diváci hledají, pak jim ztmavení barev může vytvořit mentální bariéru. Bude pro ně těžší navázat emocionální spojení s temným tématem. Pokud je vaše značka motivační, inspirativní nebo duchovní povahy, může být uživatelské rozhraní v tmavém režimu hazardem. I když jasné barvy mohou vyvolat silné emoce, opak může být pravdou. Kdo je tedy vaše publikum? Nespalte je, pokud hledají výtah.

Komprimuje prostor

Pokoje s tmavými stěnami mohou působit klaustrofobicky. Na zařízení může tmavý režim fungovat stejným způsobem. Pokud se snažíte vytvořit pocit prostoru, tmavé rozhraní může způsobit, že se prostor bude zdát menší.

Barvy s nízkým kontrastem mohou být obtížně čitelné. Design v tmavých barvách

Pokud nerozumíte barvám a kontrastům správně kdy vývoj webových stránek nebo aplikace s tmavým motivem, může být text obtížně čitelný, takže na to pamatujte při navrhování e-mailu, aplikace nebo webu v tmavém režimu.

Jak používat tmavý režim v designu

Návrh tmavého režimu může fungovat kdekoli. Od mobilních aplikací po chytré hodinky a televizní rozhraní může tento designový trend posunout vaši značku kupředu. Udělejte to správně a tmavý režim může fungovat jako gangbusters. Nechte to špatně a váš návrh by mohl uživatele okamžitě odradit. Zde je několik základních tipů při navrhování tmavého webu nebo rozhraní aplikace:

Kdy použít tmavý režim. Design v tmavých barvách

Vyberte si barvy své značky

Při stávající paletě barev značka již kompatibilní s tmavým režimem, bohové tmavého režimu se na vás usmívají.

Návrh aplikace v tmavém režimu

Návrh aplikace v tmavém režimu

 

Pokud máte pocit, že potřebujete změnit značku, aby odpovídala estetice, dvakrát si rozmyslete, zda zhasnete. Stejně tak, pokud vaše značka potřebuje používat širokou škálu barev, zvažte světlejší rozhraní. Celé barevné spektrum je na tmavém pozadí obtížně čitelné.

Zvýrazněte své odvětví. Design v tmavých barvách

Uživatelské rozhraní tmavého režimu je také užitečné pro vylepšení konkrétních odvětví. Například značky zaměřené na noční život a zábavu jsou ideální pro tmavý režim, protože jejich vysokoenergetický obsah je v reálném životě často spárován s tmavým pozadím.

Jděte do minimalismu

Pokud je vaše estetika designu minimalistická s omezeným obsahem, vaše prostředí je vhodné pro tmavý režim. V situaci, kdy je text hlavním obsahem, může tmavé rozhraní znesnadnit čtení. Tmavý režim obvykle zvyšuje vizuální nepořádek, takže přeplněná obrazovka je ještě chaotičtější.

Vyvolat emoce

Snažíte se vyvolat konkrétní emocionální reakci? Jako záhada nebo malé drama? Vzhledem k tomu, že nízká viditelnost vyvolává zvědavost a zvyšuje emocionální napětí, může být tmavý režim perfektním nástrojem pro vaši značku.

temný web design téma Design v tmavých barvách

Tmavý web design

 

Symbol postavení. Design v tmavých barvách

Pokud chcete vytvořit pocit statusu, uživatelské rozhraní tmavého režimu může být účinným nástrojem. Tmavší barvy vyvolávají emoce spojené s luxusem a bohatstvím. Pokud chcete upozornit na precizní práci, zvažte uživatelské rozhraní v tmavém režimu.

Tmavé téma Návrh webových stránek pro značku luxusních hodinek

Elegantní, vysoce kvalitní design webových stránek s tmavým motivem

 

Nejlepší postupy pro návrh tmavého režimu

Existují určité procesy, které musí při vytváření uživatelského rozhraní tmavého režimu fungovat správně. Koneckonců, chcete, aby váš produkt byl úžasný, že? Pojďme zaškrtnout všechna políčka v našem kontrolním seznamu doporučených postupů pro tmavý režim:

1. Nechoďte příliš do tmy. Design v tmavých barvách

Vydavatelé knih nepoužívají čistě bílý papír, protože kontrast s černým inkoustem je příliš ostrý. To způsobuje šilhání a může způsobit bolesti hlavy. Stejné je to s digitálními zařízeními. Drž se dál od čisté černé. Je těžké se dívat na vysoce kontrastní obrazovku. Dobré barvy tmavého režimu jsou odstíny šedé kombinované s desaturovanými barvami.

Design v tmavých barvách Design mobilního digitálního časopisu v aplikaci Dark Mode

Tmavý design aplikace

 

2. Mít správný kontrast

Pozadí v tmavém režimu musí být dostatečně tmavé, aby bylo možné zobrazit bílý text. Návrh od Google Material Design je použít kontrast mezi textem a pozadím alespoň 15,8:1.

3. Desaturujte barvy. Design v tmavých barvách

Drž se dál od plně sytých barev na tmavém pozadí. Na tmavých površích se často zdá, že odstíny „vibrují“. Místo toho použijte desaturované barvy, jako jsou pastelové a tlumené barvy – odstíny s přidanou šedou a bílou.

Kromě toho zvažte změnu barevné palety vaší značky. Modrá barva vaší společnosti se na černé může číst jinak než na bílé. Barvy v tmavém režimu je často nutné upravit, aby se dosáhlo stejné odezvy jako ve světlém režimu.

4. Použijte správné barvy "zapnuto"

Jakou barvu? Ten, který se zobrazuje na prvcích a klíčových plochách. Pro nápisy se obvykle používají barvy „On“. Výchozí barva uživatelského rozhraní tmavého režimu je čistě bílá (#FFFFFF). Toto nepoužívejte. Zdá se, že #FFFFFF vibruje při pohledu na tmavém pozadí. Vyberte si světle šedou barvu.

5. Nepřevracejte se. Design v tmavých barvách

Pokud přepnete do tmavého režimu ze standardního režimu, pravděpodobně budou v původním motivu cenné vizuální podněty. Nepřevracejte pouze barvy, abyste získali tmavé téma. Možná měníte barvy, které mají psychologický účel, na nesmyslné tlumené barvy. Barvu vybírejte vědomě.

6. Ponořte se hlouběji

Čím vyšší vrstva, tím by měla být světlejší. Tím se vytvoří vizuální hierarchie v tmavém režimu, který přechází od nejčastěji používaných prvků na vašem displeji k těm nejméně používaným.

Vizuální hierarchie tmavého režimu

Světlejší barvy nahoře vytvářejí vizuální hierarchii

 

7. Zažijte a nabídněte svobodu. Design v tmavých barvách

Otestujte tmavé i světlé verze vašeho návrhu. Experimentujte s každým stylem a proveďte příslušné změny na základě zpětné vazby od uživatelů. Koneckonců, preference lidí mohou být nepředvídatelné, takže nedávejte zátěž na své uživatele. Nechte je přepnout displej ze světlého do tmavého režimu. Uživatelé tak mají kontrolu nad svými zkušenostmi a cítí se personalizovanější.

 

Váš asistent v obchodní reklamní a tiskařské společnosti "АЗБУКА«