Nebo na co si vzpomenout při vytváření tmavého režimu aplikace nebo webu
Rok 2018 ukázal: tmavé režimy jsou na vzestupu. Nyní, když jsme už v roce 2019, můžeme s jistotou říct: jsou tady a jsou všude.
Začněme tím, že tmavý režim není zcela nová koncepce. Používá se už docela dlouho. A kdysi, vlastně dávno, byl používán pouze on: monitory byly typu „zelené na černém“, ale jen proto, že fosforescenční povlak uvnitř emitoval nazelenalé světlo při vystavení záření.
Ale i po zavedení barevných monitorů tmavý režim nadále žil. Proč tomu tak bylo?
Existují dva hlavní důvody, proč dnes každý druhý spěchá přidat tmavé téma do své aplikace. Především: počítače jsou všude. Kamkoli se podíváme, je tam nějaký displej. Používáme naše mobilní zařízení od rána do pozdní noci. Přítomnost tmavého režimu snižuje zátěž očí, když ležíte v posteli a pří poslední prohlížíte sociální sítě. (Pokud jste jako já, poslední prohlížení může znamenat tříhodinové scrollování. . Tmavý režim? Ano, samozřejmě! )
Dalším důvodem jsou nové technologie výroby displejů. Vlajkové modely velkých společností — Apple, Google, Samsung, Huawei — všechny jsou vybaveny OLED obrazovkami, které na rozdíl od LCD displejů nevyžadují podsvícení. A to je opravdu dobrá zpráva pro vaši baterii. Představte si, že prohlížíte obrázek černého čtverce na svém telefonu; u LCD displeje bude podsvícení osvětlovat celý displej, i když velká část z něj je černá. Ale při pohledu na stejný obrázek na OLED displeji se pixely, z nichž černý čtverec sestává, jednoduše vypnou. A to tedy vůbec nepodporuje energii.
Tyto typy displejů dělají tmavé režimy mnohem zajímavějšími. Použitím tmavého rozhraní můžete výrazně prodloužit životnost baterie vašeho zařízení. . Samozřejmě, že tmavé režimy jdou ruku v ruce se změnami UI, takže si osvěžme naše znalosti!
Tmavé režimy 101
Především: "tmavé" neznamená "černé". Nepokoušejte se nahradit bílou barvu černou, protože to ztíží použití stínů. Takový design bude velmi plochý (v negativním smyslu).
Je důležité mít na paměti základní principy stínování/osvětlení. Objekty, které jsou více vyvýšené, by měly být v těnních světlejší, což napodobuje skutečné osvětlení a stínování. Tímto způsobem lze snadněji rozlišovat různé komponenty a jejich hierarchii.
Dva stejné šedé čtverce se stínem, jeden na 100% černém pozadí, druhý na #121212. Při vyvýšení objekt získává světlejší odstín šedé.
V tmavém režimu lze stále pracovat s vaší obvyklou základní barvou, pokud je kontrast v pořádku. Vysvětlíme na příkladu.
V tomto rozhraní je hlavní akcí velké modré tlačítko v dolním panelu. Z hlediska kontrastu při přepínání mezi světlým a tmavým režimem není problém, tlačítko stále poutá pozornost, ikona je jasná, celkově je vše v pořádku.
Když je stejná barva používána různými způsoby, například v textu — nastanou problémy. Zkuste použít (mnohem) méně sytý odstín základní barvy nebo hledejte jiné způsoby, jak zahrnout barvy značky do rozhraní.
Vlevo: červená na černém vypadá špatně. Vpravo: snížíme sytost — a vše vypadá dobře. — pozn. překl.
To samé platí pro všechny ostatní syté barvy, které jste mohli použít, například barvy varování nebo chyby. Google používá překrytí bílé vrstvy o 40% na barvu výchozí chyby ve svých při přepínání do tmavého režimu. To je docela dobrý výchozí bod, protože to zlepší úrovně kontrastu tak, aby splnily standardy AA. Samozřejmě, že si vždy můžete upravit nastavení podle své libosti, ale nezapomeňte kontrolovat úrovně kontrastů. Mimochodem, užitečným nástrojem pro tento účel je plugin pro Sketch — , který přesně ukazuje, kolik kontrastu je mezi 2 vrstvami.
Co text?
Tady je to jednoduché: nic by nemělo být 100 % černé na 100 % bílém a naopak. Bílé odráží světelné vlny všech délek, černé je absorbuje. Pokud umístíte 100% bílý text na 100% černé pozadí, písmena budou odrážet světlo, rozmazávat se a budou méně přehledná, což negativně ovlivní čitelnost.
Totéž platí pro 100% bílé pozadí, které odráží příliš mnoho světla, aby se člověk mohl plně soustředit na slova. Zkuste trochu zmírnit bílou barvu, použijte světle šedou pro pozadí a texty na černých pozadích. To sníží zátěž na oči a zabrání
Tmavý režim se tu zatím nechystá odejít.
Množství času, které trávíme před obrazovkami, neustále roste a každý den se objevují nové obrazovky v našem životě, od probuzení po usnutí. Je to poměrně nový jev, naše oči si ještě nezvykly na takový nárůst času stráveného před obrazovkami pozdě v noci. Tam přichází tmavý režim do hry. Po zavedení této funkce v macOS a Material Design (a pravděpodobně i v iOS) se domníváme, že dříve či později se stane defaultním ve všech aplikacích, ať už mobilních nebo desktopových. A je dobré na to být připraven!
Jediný důvod, proč nezavádět tmavý režim, je, když si jste absolutně jisti, že vaše aplikace se používá výhradně za jasného denního světla. To se však stává zřídka.
Stojí za zmínku několik věcí, které vyžadují zvláštní pozornost při zavádění tmavého režimu, vedle základních principů shrnutých dříve.
Z pohledu dostupnosti není tmavý režim nejpohodlnější, protože kontrast je obecně nižší, což na druhou stranu vůbec nezlepšuje čitelnost.
Ale představte si, že se chystáte spát, jste velmi unavení, ale těsně před usnutím si vzpomenete, že musíte někomu poslat super důležitou zprávu, která nemůže čekat ani jednu noc. Vezmete si svůj telefon, zapnete ho a AAAAAA… světlé pozadí vašeho iMessage vám nedá spát ještě další 3 hodiny. Zatímco světlý text na tmavém pozadí není považován za maximálně dostupný, mít tmavý režim právě v tuto chvíli by zvýšilo pohodlí o milión. Vše závisí na situaci, ve které se momentálně uživatel nachází.
Proto se domníváme automatický tmavý režim tak skvělý nápad. Aktivuje se večer a vypíná se ráno. Uživatel se o to nemusí ani starat, což je velmi pohodlné. Twitter odvedl skvělou práci s nastavením tmavého režimu. Kromě toho mají nejen obyčejný tmavý režim, ale i ještě tmavší režim pro všechny tyto OLED displeje, úsporu baterie a vše, co s tím souvisí. Je důležité poznamenat: dejte uživatelům možnost přepínat ručně, kdykoli chtějí; nic není horšího než automatická změna rozhraní bez možnosti se vrátit zpět.
Na Twitteru je automatický tmavý režim, který se aktivuje večer a vypíná se ráno.
Při vývoji šablony je také důležité mít na paměti, že některé věci nelze jednoduše udělat tmavé.
Vezměte si textový editor, například Pages. Můžete udělat rozhraní tmavé, ale samotný list vždy zůstane bílý, napodobující skutečný list papíru.
Pages s aktivovaným tmavým režimem
Totéž platí pro všechny typy editorů pro vytváření obsahu, jako je Sketch nebo Illustrator. Ačkoliv lze rozhraní udělat tmavé, pracovní plocha, se kterou pracujete, bude vždy bílá jako výchozí.
Sketch v tmavém režimu a stále jasná bílá pracovní plocha.
Proto bez ohledu na aplikaci považujeme, že tmavé režimy se stanou nativními pro operační systém, který používáte, takže je lepší se na budoucnost připravit již nyní. bude tmavý.
Pokud chcete vědět více o vývoji tmavých rozhraní, rozhodně se podívejte na pokyny, to byl náš hlavní zdroj informací pro tento článek.
Zdroj: habr.com
