Tmavý farebný dizajn sa vzťahuje na štýl a prístup k vytvoreniu vizuálneho dizajnu, ktorý sa spolieha na použitie hlbokých, bohatých farebných schém, zvyčajne s prevahou tmavých odtieňov. Tento štýl dizajnu sa v posledných rokoch stal populárnym a môže byť použitý v rôznych oblastiach vrátane webového dizajnu, grafického dizajnu, interiérového dizajnu a ďalších.

Stlmte svetlá, uvoľnite oči a šetrite energiu. Tmavý režim je jedným z najpopulárnejších dizajnové trendya svetové značky ako WhatsApp, Instagram, Google, Facebook a Apple už nastúpili do vlaku dizajnu tmavého režimu.

Poďme sa pozrieť na to, čo robia tieto špičkové značky a ako môžete do svojich projektov pridať používateľské rozhranie v tmavom režime. Dozviete sa o klady a zápory tmavý režim a základné osvedčené postupy vývoja tmavého režimu, aby sa zabezpečilo, že vaše webové stránky a návrhy aplikácií budú vyzerať a fungovať dokonale.

Tlačený marketingový materiál

Čo je tmavý režim? Dizajn v tmavých farbách

Tmavý režim je málo osvetlené používateľské rozhranie (UI), ktoré používa tmavú farbu pozadia ako hlavnú farbu farba - zvyčajne čierna alebo odtieň sivej. Toto je úplný opak štandardného bieleho používateľského rozhrania, ktoré dizajnéri používajú už desaťročia. V reakcii na náš dlhší čas strávený na obrazovke vývojári zistili, že rozhrania s tmavými témami pomáhajú znižovať únavu očí, najmä pri slabom osvetlení alebo v noci. Menej namáhania očí znamenalo menej bolestí hlavy a lepší pracovný zážitok.

Dizajn aplikácie Instagram v tmavom režime Dizajn v tmavých farbách

Používateľské rozhranie tmavého režimu Instagramu

 

WhatsApp na dizajn desktopovej aplikácie v tmavom režime Dizajn v tmavých farbách

WhatsApp v používateľskom rozhraní v tmavom režime pracovnej plochy prostredníctvom aplikácie What's App

Dizajn aplikácie Google Fit v tmavom režime

Používateľské rozhranie tmavého režimu aplikácie Google Fit

 

Tmavý režim však v skutočnosti nie je žiadnou novinkou.

Vývoj plagátov. 5 pravidiel

Pamätáte si na zelený počítačový kód, ktorý prší na čiernom pozadí v Matrixe? Bol to súhlas s pôvodným tmavým režimom: starodávne monochromatické monitory skorých počítačov.

Skorý domáci počítač so zeleným textom na čiernom

Prvé domáce počítače so zeleným textom na čiernom boli tmavým režimom OG.

 

Tento klasický tmavý vzhľad vyšiel z módy v 80. rokoch v prospech čierneho textu na bielom pozadí, ktorý simuloval atrament na papieri. Dizajn v tmavých farbách

Čo je to videoreklama? Definícia, typy a trendy

Toto bolo štandardom takmer tri desaťročia, kým sa v roku 7 do Windows Phone 2010 nevrátil tmavý režim. Potom, čo Google potvrdil, že tmavý režim šetrí batériu, pridal túto funkciu do svojho operačného systému Android v roku 2018. O rok neskôr Apple nasledoval tmavý režim na iOS a iPadOS.

Tmavý režim a svetlý režim v dizajne aplikácie iOS 13

Tmavý režim v systéme iOS 13

Výhody používania tmavého režimu. Dizajn v tmavých farbách

Tmavý režim je nielen ľahší pre oči (ak sa robí správne), ale tiež šetrí batériu a môže byť dokonca zdravší. Pozrime sa na praktické výhody tmavého režimu oproti svetlému.

Znižuje namáhanie očí

Nemali by ste cítiť oči. Ale každý, kto dlho analyzuje údaje na obrazovke, vie, že po chvíli to začnete robiť. Syndróm počítačového videnia (CVS) zahŕňa bolesť očí, rozmazané videnie, dvojité videnie, bolesti hlavy, bolesti krku/chrbta a ďalšie. Pokiaľ ide o tabuľky a grafy, tmavý režim môže doslova pomôcť znížiť bolesť.

Dizajn aplikácie v tmavom režime Dizajn v tmavých farbách

Toto zelené logo sa dobre hodí k tomuto dizajnu aplikácie s tmavou témou.

 

Zvyšuje viditeľnosť pri slabom osvetlení

Ak spíte a niekto rozsvieti jasné svetlo, rozbolí vás hlava. Rovnaký princíp platí pre ľudí, ktorí pracujú pred obrazovkou počítača neskoro v noci alebo skoro ráno. Tmavý režim redukuje tento odlesk a uľahčuje prezeranie obsahu pri slabom osvetlení.

Šetrí energiu batérie

Niektoré digitálne prístroje s obrazovkami OLED môžu vypnúť čierne pixely, keď sa nepoužívajú. Tmavý režim využíva zvýšený počet čiernych pixelov, čo spôsobuje, že zariadenie spotrebuje menej energie.

Dodáva emocionálny náboj

Mnoho používateľov používateľského rozhrania v tmavom režime si ho vyberá skôr z energetických a zdravotných dôvodov ako z estetických dôvodov. Tmavý režim im pripomína, že robia niečo zdravšie, čo im dáva dobrý pocit – ako ten, ktorý získate, keď si doplníte svoj opakovane použiteľný nákupná taška alebo fľašu vody.

Zabraňuje ADD. Dizajn v tmavých farbách

No... tak nejako. Biele svetlo a farby majú tendenciu rozptyľovať vašu pozornosť, čo sťažuje dokončenie úlohy. Používateľské rozhranie v tmavom režime môže zlepšiť zameranie nasmerovaním vašej koncentrácie na oblasti obsahu vášho rozhrania, čo umožní, aby sa obsah objavil a pozadie vybledlo.

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

Ako všetko, aj tmavý režim má svoje nevýhody. Poďme sa pozrieť na dôvody, prečo môže byť tmavá téma pre vaše účely nevýhodou.

Môže znížiť emocionálne spojenie. Dizajn v tmavých farbách

bystrý farby môžu vyvolať živé emócie. Ak je to to, čo vaši diváci hľadajú, stmavenie farieb im môže vytvoriť mentálnu bariéru. Bude pre nich ťažšie nadviazať emocionálne spojenie s temnou témou. Ak je vaša značka motivačná, inšpiratívna alebo duchovná, používateľské rozhranie v tmavom režime môže byť hazardom. Aj keď svetlé farby môžu vyvolať silné emócie, opak môže byť pravdou. Kto je teda vaše publikum? Nepálte ich, ak hľadajú výťah.

Stláča priestor

Izby s tmavými stenami môžu pôsobiť klaustrofobicky. Na zariadení môže tmavý režim fungovať rovnakým spôsobom. Ak sa snažíte vytvoriť pocit priestoru, tmavé rozhranie môže priestor zmenšiť.

Farby s nízkym kontrastom môžu byť ťažko čitateľné. Dizajn v tmavých farbách

Ak nerozumiete farbám a kontrastom správne kedy vývoj webových stránok alebo aplikácie s tmavou témou, môže to sťažiť čítanie textu, takže na to pamätajte pri navrhovaní e-mailu, aplikácie alebo webovej stránky v tmavom režime.

Ako používať tmavý režim v dizajne

Dizajn tmavého režimu môže fungovať kdekoľvek. Od mobilných aplikácií po inteligentné hodinky a televízne rozhrania, tento dizajnový trend môže posunúť vašu značku vpred. Urobte to správne a tmavý režim môže fungovať ako gangbusters. Pomýlite sa a váš návrh by mohol používateľov okamžite odradiť. Tu je niekoľko základných tipov pri navrhovaní tmavej webovej stránky alebo rozhrania aplikácie:

Kedy použiť tmavý režim. Dizajn v tmavých farbách

Vyberte si farby svojej značky

Keď existujúca paleta farieb značka už kompatibilný s tmavým režimom, bohovia tmavého režimu sa na vás usmievajú.

Dizajn aplikácie v tmavom režime

Dizajn aplikácie v tmavom režime

 

Dvakrát si rozmyslite, či zapadnete do tmy, ak máte pocit, že musíte zmeniť svoju značku tak, aby zodpovedala estetike. Podobne, ak vaša značka potrebuje používať širokú škálu farieb, zvážte svetlejšie rozhranie. Celé farebné spektrum je ťažko čitateľné na tmavom pozadí.

Zvýraznite svoje odvetvie. Dizajn v tmavých farbách

Používateľské rozhranie tmavého režimu je tiež užitočné na zlepšenie konkrétnych odvetví. Napríklad značky zamerané na nočný život a zábavu sú ideálne pre tmavý režim, pretože ich vysokoenergetický obsah sa v reálnom živote často spája s tmavým pozadím.

Choďte do minimalizmu

Ak je vaša estetika dizajnu minimalistická s obmedzeným obsahom, vaše prostredie je vhodné pre tmavý režim. V situácii, keď je text hlavným obsahom, môže tmavé rozhranie sťažiť čítanie. Tmavý režim zvyčajne zvyšuje vizuálny neporiadok, vďaka čomu je preplnená obrazovka ešte chaotickejšia.

Vyvolajte emócie

Snažíte sa vyvolať špecifickú emocionálnu reakciu? Ako tajomstvo alebo malá dráma? Keďže nízka viditeľnosť vyvoláva zvedavosť a zvyšuje emocionálne napätie, tmavý režim môže byť dokonalým nástrojom pre vašu značku.

temná téma webového dizajnu Dizajn v tmavých farbách

Tmavý webový dizajn

 

Stavový symbol. Dizajn v tmavých farbách

Ak chcete vytvoriť pocit statusu, používateľské rozhranie tmavého režimu môže byť účinným nástrojom. Tmavšie farby vyvolávajú emócie spojené s luxusom a bohatstvom. Ak chcete upozorniť na kvalitnú prácu, zvážte používateľské rozhranie v tmavom režime.

Tmavá téma Dizajn webovej stránky pre značku luxusných hodiniek

Elegantný, kvalitný dizajn webovej stránky s tmavou témou

 

Najlepšie postupy pre návrh tmavého režimu

Existujú určité procesy, ktoré musia pri vytváraní používateľského rozhrania v tmavom režime fungovať správne. Koniec koncov, chcete, aby bol váš produkt úžasný, však? Začiarknime všetky políčka v našom kontrolnom zozname osvedčených postupov pre tmavý režim:

1. Nechoďte príliš do tmy. Dizajn v tmavých farbách

Vydavatelia kníh nepoužívajú čisto biely papier, pretože kontrast s čiernym atramentom je príliš tvrdý. To spôsobuje škúlenie a môže spôsobiť bolesti hlavy. Rovnako je to aj s digitálnymi zariadeniami. Drž sa ďalej od čistej čiernej. Je ťažké pozerať sa na obrazovku s vysokým kontrastom. Dobré farby tmavého režimu sú odtiene šedej v kombinácii s desaturovanými farbami.

Dizajn v tmavých farbách Dizajn mobilného digitálneho časopisu v aplikácii Dark Mode

Tmavý dizajn aplikácie

 

2. Mať správny kontrast

Pozadie v tmavom režime musí byť dostatočne tmavé na zobrazenie bieleho textu. Návrh od spoločnosti Google Material Design je použiť kontrast medzi textom a pozadím aspoň 15,8:1.

3. Desaturujte farby. Dizajn v tmavých farbách

Drž sa ďalej od úplne sýtych farieb na tmavom pozadí. Na tmavých povrchoch sa často zdá, že odtiene "vibrujú". Namiesto toho použite desaturované farby, ako sú pastelové a tlmené farby – odtiene s pridanou sivou a bielou.

Okrem toho zvážte zmenu farebnej palety vašej značky. Modrá farba vašej spoločnosti sa môže čítať inak na čiernej ako na bielej. Farby v tmavom režime sa často musia upraviť, aby sa dosiahla rovnaká odozva ako vo svetlom režime.

4. Použite správne farby "zapnuté"

Akú farbu? Ten, ktorý sa zobrazuje na vrchu prvkov a kľúčových plôch. Na nápisy sa zvyčajne používajú farby „On“. Predvolená farba používateľského rozhrania tmavého režimu je čisto biela (#FFFFFF). Toto nepoužívajte. Zdá sa, že #FFFFFF vibruje pri pohľade na tmavé pozadie. Vyberte si svetlosivú farbu.

5. Nepretáčajte sa. Dizajn v tmavých farbách

Ak prepnete do tmavého režimu zo štandardného režimu, v pôvodnej téme sú pravdepodobne cenné vizuálne podnety. Ak chcete získať tmavú tému, nemeňte iba farby. Možno meníte farby, ktoré majú psychologický účel, na bezvýznamné tlmené farby. Vyberte farbu vedome.

6. Ponorte sa hlbšie

Čím vyššia vrstva, tým by mala byť ľahšia. Toto vytvorí vizuálna hierarchia v tmavom režime, ktorý prechádza od najčastejšie používaných prvkov na vašom displeji k najmenej používaným.

Vizuálna hierarchia tmavého režimu

Svetlejšie farby navrchu vytvárajú vizuálnu hierarchiu

 

7. Zažite a ponúknite slobodu. Dizajn v tmavých farbách

Otestujte tmavé aj svetlé verzie vášho dizajnu. Experimentujte s každým štýlom a vykonajte príslušné zmeny na základe spätnej väzby od používateľov. Koniec koncov, preferencie ľudí môžu byť nepredvídateľné, takže nepreťažujte svojich používateľov. Nechajte ich prepnúť zobrazenie zo svetlého do tmavého režimu. To dáva používateľom kontrolu nad ich zážitkami a cítia sa viac prispôsobené.

 

Váš asistent v obchodnej reklamnej a tlačiarenskej spoločnosti "АЗБУКА«