Alebo na čo nezabudnúť pri vývoji tmavého režimu pre aplikáciu alebo webovú stránku
Rok 2018 ukázal, že tmavé režimy sú na ceste. Teraz, keď sme v polovici roka 2019, môžeme s istotou povedať: sú tu a sú všade.
Začnime tým, že tmavý režim nie je vôbec nový koncept. Používa sa už pomerne dlho. A kedysi dávno, vlastne po dlhú dobu, to bola jediná vec, ktorú používali: monitory boli typu „zelené na čiernom“, ale len preto, že luminiscenčný povlak vo vnútri vyžaroval pri vystavení žiareniu zelenkastú žiaru. .
Ale aj po zavedení farebných monitorov naďalej existoval tmavý režim. prečo je to tak?
Existujú dva hlavné motívy, ktoré vysvetľujú, prečo sa dnes každý druhý človek ponáhľa s pridaním temnej témy do svojej aplikácie. Po prvé: počítače sú všade. Všade, kam sa pozrieme, je nejaká obrazovka. Naše mobilné zariadenia používame od rána do neskorej noci. Prítomnosť tmavého režimu znižuje únavu očí, keď ste v posteli pred spaním a „poslednýkrát“ prechádzate cez sociálne siete. siete. (Ak ste ako ja, výraz „posledný čas“ môže znamenať 3-hodinové posúvanie . Tmavý režim? Áno prosím! )
Ďalším dôvodom sú nové technológie výroby displejov. Vlajkové modely veľkých spoločností – Apple, Google, Samsung, Huawei – sú všetky vybavené OLED obrazovkami, ktoré na rozdiel od LCD displejov nevyžadujú podsvietenie. A to je naozaj dobrá správa pre vašu batériu. Predstavte si, že si na telefóne prezeráte obrázok čierneho štvorca; pri LCD podsvietenie osvetlí celú obrazovku, aj keď je väčšina čierna. Ale pri prezeraní rovnakého obrazu na OLED displeji sa pixely, ktoré tvoria čierny štvorec, jednoducho vypnú. To znamená, že vôbec nespotrebúvajú energiu.
Tieto typy displejov robia tmavé režimy oveľa zaujímavejšie. Použitím tmavého rozhrania môžete výrazne predĺžiť výdrž batérie vášho zariadenia. . Tmavé režimy idú samozrejme ruka v ruke so zmenami používateľského rozhrania, takže si oprášme svoje znalosti!
Tmavé režimy 101
Po prvé: „tmavé“ nie je to isté ako „čierne“. Nepokúšajte sa nahradiť biele pozadie čiernym, pretože to znemožní použitie tieňov. Takýto dizajn bude super plochý (v zlom zmysle).
Je dôležité mať na pamäti základné princípy tienenia/osvetlenia. Objekty, ktoré sú vyššie, by mali byť v tieni svetlejšie, simulujúc tak skutočné osvetlenie a tieňovanie. To uľahčuje rozlíšenie medzi rôznymi komponentmi a ich hierarchiou.
Dva rovnaké sivé štvorce s tieňom, jeden na 100 % čiernom pozadí, druhý na #121212. Keď objekt stúpa, stáva sa svetlejším odtieňom sivej.
V tmavej téme môžete stále pracovať so svojou bežnou základnou farbou, pokiaľ je kontrast v poriadku. Vysvetlíme si to na príklade.
V tomto rozhraní je hlavnou činnosťou veľké modré tlačidlo v spodnej lište. Z hľadiska kontrastu nie je problém pri prepínaní medzi svetlým alebo tmavým režimom, tlačidlo je stále pútavé, ikona je jasná a celkovo je všetko v poriadku.
Keď sa rovnaká farba použije rôznymi spôsobmi, napríklad v texte, nastanú problémy. Skúste použiť (oveľa) menej nasýtený odtieň hlavnej farby alebo hľadajte iné spôsoby, ako začleniť farby značky do rozhrania.
Vľavo: Červená na čiernej vyzerá zle. Vpravo: znížte sýtosť a všetko vyzerá dobre. - približne. preklad
To isté platí pre akékoľvek iné výrazné farby, ktoré ste mohli použiť, ako sú napríklad varovné alebo chybové farby. Google používa 40 % biele prekrytie nad predvolenou chybovou farbou pri prepnutí do tmavého režimu. Toto je celkom dobrý východiskový bod, pretože zlepší úrovne kontrastu, aby zodpovedali štandardom AA. Nastavenia môžete samozrejme vždy zmeniť, ako uznáte za vhodné, ale nezabudnite skontrolovať úrovne kontrastu. Mimochodom, užitočným nástrojom na tento účel je plugin Sketch - , ktorý presne ukazuje, aký veľký kontrast je medzi 2 vrstvami.
A čo text?
Všetko je tu jednoduché: nič by nemalo byť 100% čierne a 100% biele a naopak. Biela odráža svetelné vlny všetkých vlnových dĺžok, čierna pohlcuje. Ak umiestnite 100 % biely text na 100 % čierne pozadie, písmená budú odrážať svetlo, budú sa rozmazávať a budú horšie čitateľné, čo negatívne ovplyvní čitateľnosť.
To isté platí pre 100 % biele pozadie, ktoré odráža príliš veľa svetla na to, aby sa plne sústredilo na slová. Skúste bielu farbu trochu zjemniť, na pozadie a text na čiernom pozadí použite svetlosivú. Tým sa zníži namáhanie očí, prevencia
Tmavý režim je tu a nezmizne
Čas, ktorý strávime pred obrazovkami, neustále rastie a každý nový deň sa v našich životoch objavujú nové obrazovky, od chvíle, keď sa zobudíme, až po zaspávanie. Ide o pomerne nový fenomén, naše oči si ešte nezvykli na tento nárast času stráveného pred obrazovkou neskoro večer. Tu prichádza na rad tmavý režim. So zavedením tejto funkcie v macOS a Material Design (a s najväčšou pravdepodobnosťou v iOS) veríme, že skôr či neskôr sa stane predvolenou vo všetkých aplikáciách, mobilných aj desktopových. A na to je lepšie byť pripravený!
Jediný dôvod, prečo neimplementovať tmavý režim, je, keď ste si úplne 100% istí, že vaša aplikácia sa používa výlučne pri jasnom dennom svetle. To sa však nestáva často.
Stojí za zmienku niekoľko vecí, ktoré si budú vyžadovať osobitnú pozornosť pri implementácii tmavého režimu nad rámec základných princípov zhrnutých vyššie.
Z hľadiska dostupnosti nie je tmavý režim najvhodnejší, pretože kontrast je vo všeobecnosti nižší, čo zase vôbec nezlepšuje čitateľnosť.
Ale predstavte si, že sa chystáte do postele, naozaj sa vám chce spať, no tesne predtým, ako zaspíte, si spomeniete, že musíte niekomu poslať super dôležitú správu, ktorá nemôže čakať ani jednu noc. Chytíte telefón, zapnete ho a AAAAAAH... svetlé pozadie vašej iMessage vás udrží hore ďalšie 3 hodiny. Zatiaľ čo svetlý text na tmavom pozadí sa nepovažuje za najprístupnejší, mať tmavý režim práve túto sekundu by zvýšiť pohodlie o milión. Všetko závisí od situácie, v ktorej sa používateľ práve nachádza.
Preto si myslíme automatický tmavý režim taký skvelý nápad. Večer sa zapne a ráno sa vypne. Používateľ na to ani nemusí myslieť, čo je veľmi pohodlné. Twitter odviedol skvelú prácu s nastavením tmavého režimu. Navyše majú len tmavý režim a ešte tmavší režim pre všetky tieto OLED obrazovky, čím šetria batériu a všetko, čo s tým súvisí. Tu je dôležité poznamenať: dajte používateľovi možnosť manuálneho prepínania, kedykoľvek chce: nie je nič horšie ako automatická zmena rozhrania bez možnosti prepínania späť.
Twitter má automatický tmavý režim, ktorý sa zapne večer a ráno sa vypne.
Pri vytváraní témy je tiež potrebné pamätať na to, že niektoré veci jednoducho nemožno stmaviť.
Vezmite textový editor, ako je Pages. Rozhranie môžete stmaviť, ale samotný hárok bude vždy biely, čo bude simulovať skutočný hárok papiera.
Stránky so zapnutým tmavým režimom
To isté platí pre všetky typy editorov na vytváranie obsahu, ako je Sketch alebo Illustrator. Hoci rozhranie môže byť tmavé, kresliace plátno, s ktorým pracujete, bude predvolene vždy biele.
Načrtnite v tmavom režime a stále majte žiarivo bielu kresbu.
Takže bez ohľadu na aplikáciu veríme, že tmavé režimy budú prirodzené pre operačný systém, ktorý používate, čo znamená, že je najlepšie sa pripraviť na budúcnosť. bude tma.
Ak sa chcete dozvedieť viac o vývoji tmavých používateľských rozhraní, prečítajte si pokyny , to bol náš hlavný zdroj informácií pre tento článok.
Zdroj: hab.com