Nebo na co nezapomenout při vývoji tmavého režimu pro aplikaci nebo web
Rok 2018 ukázal, že tmavé režimy jsou na cestě. Nyní, když jsme v polovině roku 2019, můžeme s jistotou říci: jsou tady a jsou všude.
Začněme tím, že tmavý režim není vůbec nový koncept. Používá se již poměrně dlouho. A kdysi dávno, vlastně po dlouhou dobu, to byla jediná věc, kterou používali: monitory byly typu „zelená na černé“, ale pouze proto, že luminiscenční povlak uvnitř vyzařoval při vystavení záření nazelenalé záři. .
Ale i po zavedení barevných monitorů tmavý režim nadále existoval. proč tomu tak je?
Existují dva hlavní motivy, které vysvětlují, proč dnes každý druhý spěchá, aby do své aplikace přidal temné téma. Za prvé: počítače jsou všude. Všude, kam se podíváme, je nějaká obrazovka. Naše mobilní zařízení používáme od rána do pozdních nočních hodin. Přítomnost tmavého režimu snižuje únavu očí, když jste v posteli před spaním a „naposledy“ procházíte sociálním kanálem. sítí. (Pokud jste jako já, „naposled“ může znamenat 3hodinový svitek . Tmavý režim? Ano prosím! )
Dalším důvodem jsou nové technologie výroby displejů. Vlajkové modely velkých společností – Apple, Google, Samsung, Huawei – jsou všechny 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 si na telefonu prohlížíte obrázek černého čtverce; u LCD podsvícení osvětlí celou obrazovku, i když je většina černá. Při prohlížení stejného obrázku na OLED displeji se ale pixely, které tvoří černý čtverec, jednoduše vypnou. To znamená, že vůbec nespotřebovávají 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 výdrž baterie vašeho zařízení. . Tmavé režimy samozřejmě jdou ruku v ruce se změnami uživatelského rozhraní, takže si oprášíme své znalosti!
Tmavé režimy 101
Za prvé: „tmavý“ není totéž jako „černý“. Nepokoušejte se nahradit bílé pozadí černým, protože to znemožní použití stínů. Takový design bude super plochý (ve špatném slova smyslu).
Je důležité mít na paměti základní principy stínění/osvětlení. Objekty, které jsou vyvýšené, by měly být světlejší ve stínu, což simuluje skutečné osvětlení a stínování. To usnadňuje rozlišení mezi různými komponentami a jejich hierarchií.
Dva stejné šedé čtverce se stínem, jeden na 100% černém pozadí, druhý na #121212. Jak objekt stoupá, stává se světlejším odstínem šedé.
V tmavém motivu můžete stále pracovat s běžnou základní barvou, pokud je kontrast v pořádku. Vysvětlíme si to na příkladu.
V tomto rozhraní je hlavní akcí velké modré tlačítko ve spodní liště. Z hlediska kontrastu není problém při přepínání mezi světlým nebo tmavým režimem, tlačítko je stále poutavé, ikona je jasná a celkově je vše v pořádku.
Když je stejná barva použita různými způsoby, například v textu, nastanou problémy. Zkuste použít (mnohem) méně sytý odstín hlavní barvy nebo hledejte jiné způsoby, jak začlenit barvy značky do rozhraní.
Vlevo: Červená na černé vypadá špatně. Vpravo: snižte sytost a vše vypadá dobře. - Cca. překlad
Totéž platí pro jakékoli jiné výrazné barvy, které jste mohli použít, jako jsou barvy varování nebo chyb. Google používá 40% bílou vrstvu překryvnou nad výchozí chybovou barvou při přepnutí do tmavého režimu. To je docela dobrý výchozí bod, protože zlepší úrovně kontrastu, aby odpovídaly standardům AA. Nastavení můžete samozřejmě vždy změnit, jak uznáte za vhodné, ale nezapomeňte zkontrolovat úrovně kontrastu. Mimochodem, užitečným nástrojem pro tento účel je plugin Sketch - , který přesně ukazuje, jak velký kontrast je mezi 2 vrstvami.
A co text?
Všechno je zde jednoduché: nic by nemělo být 100% černé a 100% bílé a naopak. Bílá odráží světelné vlny všech vlnových délek, černá pohlcuje. Pokud umístíte 100% bílý text na 100% černé pozadí, budou písmena odrážet světlo, budou se rozmazávat a budou méně čitelná, což negativně ovlivní čitelnost.
Totéž platí pro 100% bílé pozadí, které odráží příliš mnoho světla na to, aby se plně soustředilo na slova. Zkuste bílou barvu trochu zjemnit, na pozadí a text na černém pozadí použijte světle šedou. Tím se sníží namáhání očí, zabrání se
Tmavý režim je tady a nezmizí
Množství času, který trávíme před obrazovkami, neustále roste a každý nový den se v našich životech objevují nové obrazovky, od chvíle, kdy se probudíme, až po usnutí. Jedná se o poměrně nový fenomén, naše oči si na tento nárůst času u obrazovky pozdě večer ještě nezvykly. Zde přichází na řadu tmavý režim. Se zavedením této funkce v macOS a Material Designu (a nejspíše i v iOS) věříme, že se dříve nebo později stane výchozí ve všech aplikacích, mobilních i desktopových. A na to je lepší být připraven!
Jediný důvod, proč neimplementovat tmavý režim, je, když jste si naprosto 100% jisti, že se vaše aplikace používá výhradně za jasného denního světla. To se však nestává často.
Stojí za zmínku několik věcí, které budou vyžadovat zvláštní pozornost při implementaci tmavého režimu, nad rámec základních principů shrnutých dříve.
Z hlediska přístupnosti není tmavý režim nejpohodlnější, protože kontrast je obecně nižší, což zase vůbec nezlepšuje čitelnost.
Ale představte si, že se chystáte do postele, chcete opravdu spát, ale těsně předtím, než usnete, si vzpomenete, že musíte někomu poslat super důležitou zprávu, která nemůže čekat ani jednu noc. Popadnete telefon, zapnete ho a AAAAAAH... světlé pozadí vaší iMessage vás udrží vzhůru další 3 hodiny. Zatímco světlý text na tmavém pozadí není považován za nejdostupnější, mít tmavý režim hned tuto sekundu by zvýšit pohodlí o milion. Vše závisí na situaci, ve které se uživatel právě nachází.
Proto si myslíme automatický tmavý režim takový skvělý nápad. Večer se zapne a ráno zhasne. Uživatel o tom ani nemusí přemýšlet, což je velmi pohodlné. Twitter odvedl skvělou práci s nastavením tmavého režimu. Navíc mají pro všechny tyto OLED obrazovky jak jen tmavý režim, tak ještě tmavší režim, šetří baterii a vše, co s tím souvisí. Zde je důležité poznamenat: dejte uživateli možnost přepínat ručně, kdykoli chce: není nic horšího než automatická změna rozhraní bez možnosti přepnout zpět.
Twitter má automatický tmavý režim, který se večer zapne a ráno vypne.
Při rozvíjení motivu je také vhodné mít na paměti, že některé věci prostě nelze ztmavit.
Vezměte textový editor, jako je Pages. Rozhraní můžete ztmavit, ale samotný list bude vždy bílý a bude simulovat skutečný list papíru.
Stránky s povoleným tmavým režimem
Totéž platí pro všechny typy editorů tvorby obsahu, jako je Sketch nebo Illustrator. Přestože rozhraní může být tmavé, kreslicí plátno, se kterým pracujete, bude ve výchozím nastavení vždy bílé.
Nakreslete v tmavém režimu a stále mějte jasně bílou kreslicí plochu.
Takže bez ohledu na aplikaci věříme, že tmavé režimy budou přirozené pro operační systém, který používáte, což znamená, že je nejlepší se připravit na budoucnost. bude tma.
Pokud se chcete dozvědět více o vývoji tmavých uživatelských rozhraní, určitě si přečtěte pokyny , to byl náš hlavní zdroj informací pro tento článek.
Zdroj: www.habr.com