Sau la ce ar trebui să fim atenți atunci când dezvoltăm modul închis pentru aplicații sau site-uri
Anul 2018 a arătat: modurile închise sunt în ascensiune. Acum, când suntem deja pe jumătate în 2019, putem spune cu încredere: sunt aici și sunt peste tot.
Să începem prin a spune că modul închis nu este o conceptie nouă. Este utilizat de mult timp. Iar la un moment dat a fost singura opțiune: monitoarele erau de tip «verde-pe-negru», dar asta doar pentru că acoperirea fluorescentă din interior emitea o lumină verzuie în urma expunerii la radiații.
Dar chiar și după introducerea monitorilor color, modul închis a continuat să existe. De ce este așa?
Există două motive principale care explică de ce astăzi fiecare al doilea dezvoltator se grăbește să adauge o temă închisă aplicației sale. Primul: calculatoarele sunt peste tot. Oriunde ne uităm, vedem vreun ecran. Folosim dispozitivele noastre mobile de dimineața până seara târziu. Existenta modului închis reduce oboseala ochilor atunci când, înainte de culcare, „derulăm ultima dată” prin feed-ul rețelelor sociale. (Dacă ești ca mine, „ultima dată” poate însemna o derulare de 3 ore) . Mod închis? Sigur, da! )
O altă motivare sunt noile tehnologii de producție a afișajelor. Modelele de top ale marilor companii - Apple, Google, Samsung, Huawei - sunt dotate cu ecrane OLED care, spre deosebire de monitoarele LCD, nu necesită iluminare de fundal. Și aceasta este o veste cu adevărat bună pentru bateria ta. Imaginează-ți că vizualizezi o imagine cu un pătrat negru pe telefonul tău; cu un monitor LCD, iluminarea va ilumina întregul ecran, deși cea mai mare parte este neagră. Dar atunci când privești aceeași imagine pe un afișaj OLED, pixelii din care este compus pătratul negru se deconectează pur și simplu. Asta înseamnă că nu consumă deloc energie.
Aceste tipuri de afișaje fac ca modurile închise să fie de multe ori mai interesante. Folosind o interfață închisă, poți prelungi semnificativ durata de viață a bateriei dispozitivului tău. . Modurile închise, desigur, merg mână în mână cu schimbările UI, așa că să ne reîmprospătăm cunoștințele!
Modurile închise 101
În primul rând: „întunecat” nu este echivalent cu „negru”. Nu încercați să înlocuiți fundalul alb cu unul negru, deoarece acest lucru va face imposibilă utilizarea umbrelor. Un astfel de design va fi super plat (în sensul rău).
Este important să țineți cont de principiile de bază ale umbririi/iluminării. Obiectele care sunt mai ridicate ar trebui să fie mai deschise în umbră, imitando iluminarea și umbrirea reale. Astfel, va fi mai ușor să distingeți diferitele componente și ierarhia acestora.
Două pătrate gri identice cu umbră, unul pe un fundal 100% negru, celălalt pe #121212. Pe măsură ce obiectul se ridică, acesta capătă o nuanță mai deschisă de gri.
Într-o temă închisă, puteți lucra în continuare cu culoarea principală obișnuită, atâta timp cât contrastul este în regulă. Să explicăm printr-un exemplu.
În această interfață, acțiunea principală este un buton mare albastru în partea de jos. Nu există o problemă din perspectiva contrastului atunci când comutați între modul deschis sau închis, butonul continuă să atragă atenția, pictograma este clară, în general, totul este excelent.
Atunci când aceeași culoare este folosită în mod diferit, de exemplu în text – vor apărea probleme. Încercați să utilizați o nuanță (mult) mai puțin saturată a culorii principale sau căutați alte modalități de a încorpora culorile mărcii în interfață.
La stânga: roșu pe negru arată rău. La dreapta: să diminuăm saturația – și totul devine bine. – nt. traducător.
Același lucru este valabil și pentru toate celelalte culori saturate pe care le-ați putea folosi, cum ar fi culorile de avertizare sau de eroare. Google folosește un overlay cu un strat alb de 40% peste culoarea de eroare implicită în când se comută în modul închis. Acesta este un punct de plecare destul de bun, deoarece va îmbunătăți nivelurile de contrast pentru a corespunde standardelor AA. Desigur, puteți schimba setările conform preferințelor dvs., dar nu uitați să verificați nivelurile de contrast. Apropo, un instrument util pentru acest scop este pluginul pentru Sketch – , care arată precis cât de mult contrast este între cele două straturi.
Ce ziceți de text?
Aici totul este simplu: nimic nu ar trebui să fie 100% negru pe 100% alb și invers. Alb reprezintă undele luminoase de toate lungimile, negru — le absoarbe. Dacă pui un text 100% alb pe un fundal 100% negru, literele vor reflecta lumina, se vor estompa și vor deveni mai puțin lizibile, ceea ce va afecta negativ citibilitatea.
Același lucru se aplică și unui fundal 100% alb, care reflectă prea multă lumină pentru a te concentra complet asupra cuvintelor. Încearcă să nuanțezi puțin alb, folosește gri deschis pentru fundaluri și texte pe fundaluri negre. Acest lucru va reduce oboseala ochilor, prevenind
Modul întunecat nu va dispărea prea curând
Timpul petrecut în fața ecranelor crește constant, iar în fiecare zi, noi ecrane își fac apariția în viața noastră, de la momentul trezirii până la culcare. Este un fenomen destul de nou, ochii noștri nu s-au obișnuit încă cu această expunere crescută la ecran seara târziu. Aici intră în scenă modul întunecat. Odată cu introducerea acestei funcții în macOS și Material Design (și, cel mai probabil, în iOS), credem că, mai devreme sau mai târziu, va deveni standard în toate aplicațiile, atât mobile, cât și desktop. Și este mai bine să fim pregătiți!
Singurul motiv pentru a nu implementa modul întunecat este când ești absolut 100% sigur că aplicația ta este folosită exclusiv la lumină puternică de zi. Asta se întâmplă, de fapt, foarte rar.
Merită să menționezi câteva lucruri care vor necesita o atenție specială la implementarea modului întunecat, pe lângă principiile de bază rezumate anterior.
Din punct de vedere al accesibilității, modul întunecat nu este cel mai convenabil, deoarece contrastul este în general mai scăzut, ceea ce de fapt nu îmbunătățește deloc lizibilitatea.
Însă, imaginează-ți că te pregătești de culcare, ești foarte obosit, dar chiar înainte de a adormi, îți amintești că trebuie să trimiți cuiva un mesaj super important, care nu poate aștepta nici măcar o noapte. Îți scoți telefonul, îl deschizi și AAAAA… fundalul luminos al mesajului tău nu îți va permite să adormi timp de încă 3 ore. Deși textul luminos pe un fundal închis nu este considerat maxim accesibil, existența modului întunecat în acel moment ar crește confortul cu un milion. Totul depinde de situația în care se află utilizatorul în acel moment.
De aceea credem modul întunecat automat o idee atât de grozavă. Se activează seara și se dezactivează dimineața. Utilizatorul nu trebuie să se gândească la asta, ceea ce este foarte convenabil. Twitter a făcut o treabă excelentă cu setările modulului întunecat. În plus, au atât un mod întunecat simplu, cât și un mod chiar mai întunecat pentru toate aceste ecrane OLED, economisind bateria și tot ce este legat de asta. Aici este important de menționat: oferiți utilizatorului opțiunea de a comuta manual când dorește: nu există nimic mai rău decât schimbarea automată a interfeței fără posibilitatea de a reveni.
Twitter are un modul întunecat automat care se activează seara și se dezactivează dimineața.
De asemenea, în dezvoltarea temelor, trebuie să țineți cont că unele lucruri pur și simplu nu pot fi realizate în întuneric.
Luați de exemplu un editor de text, cum ar fi Pages. Puteți face interfața întunecată, dar pagina în sine va fi mereu albă, imitând o pagină reală de hârtie.
Pages cu modul întunecat activat
Același lucru este valabil pentru toate tipurile de editori pentru crearea de conținut, cum ar fi Sketch sau Illustrator. Deși interfața poate fi întunecată, panoul de lucru cu care lucrați va fi mereu alb în mod implicit.
Sketch în modul întunecat și cu un panou de lucru alb strălucitor.
Așadar, indiferent de aplicație, considerăm că modulele întunecate vor deveni native pentru sistemul de operare pe care îl utilizați, așa că este mai bine să vă pregătiți din timp pentru viitor, va fi întunecat.
Dacă doriți să aflați mai multe despre dezvoltarea interfețelor întunecate, asigurați-vă că consultați liniile directoare , acesta a fost principala noastră sursă de informații pentru acest articol.
Sursa: habr.com
