Sau de ce să țineți cont atunci când dezvoltați un mod întunecat pentru o aplicație sau un site web
2018 a arătat că modurile întunecate sunt pe drum. Acum că suntem la jumătatea anului 2019, putem spune cu încredere: sunt aici și sunt peste tot.
Să începem cu faptul că modul întunecat nu este deloc un concept nou. A fost folosit de destul de mult timp. Și cândva, de fapt, de mult timp, acesta a fost singurul lucru pe care l-au folosit: monitoarele erau de tipul „verde-pe-negru”, dar numai pentru că stratul luminiscent din interior emitea o strălucire verzuie atunci când erau expuse la radiații. .
Dar chiar și după introducerea monitoarelor color, modul întunecat a continuat să existe. De ce este așa?
Există două motive principale pentru care astăzi fiecare a doua persoană se grăbește să adauge o temă întunecată aplicației lor. În primul rând: computerele sunt peste tot. Oriunde ne uităm, există un fel de ecran. Ne folosim dispozitivele mobile de dimineața până seara târziu. Prezența unui mod întunecat reduce oboseala ochilor atunci când sunteți în pat înainte de a merge la culcare pentru „ultima dată” derulând prin feedul social. retelelor. (Dacă sunteți ca mine, „ultima dată” ar putea însemna un scroll de 3 ore . Modul întunecat? Da, te rog! )
Un alt motiv este noile tehnologii de producție de afișare. Modelele emblematice ale marilor companii - Apple, Google, Samsung, Huawei - sunt toate echipate cu ecrane OLED, care, spre deosebire de display-urile LCD, nu necesită iluminare din spate. Și asta este o veste foarte bună pentru bateria ta. Imaginează-ți că vezi o imagine a unui pătrat negru pe telefonul tău; cu un LCD, lumina de fundal va ilumina întregul ecran, chiar dacă cea mai mare parte este neagră. Dar atunci când vizualizați aceeași imagine pe un afișaj OLED, pixelii care alcătuiesc pătratul negru sunt pur și simplu opriți. Aceasta înseamnă că nu consumă deloc energie.
Aceste tipuri de afișaje fac modurile întunecate mult mai interesante. Folosind o interfață întunecată, puteți extinde semnificativ durata de viață a bateriei dispozitivului dvs. . Desigur, modurile întunecate merg mână în mână cu modificările interfeței de utilizare, așa că haideți să ne perfecționăm cunoștințele!
Moduri întunecate 101
În primul rând: „întuneric” nu este același lucru cu „negru”. Nu încercați să înlocuiți un fundal alb cu unul negru, deoarece acest lucru va face imposibilă utilizarea umbrelor. Un design ca acesta va fi super plat (într-un mod prost).
Este important să țineți cont de principiile de bază ale umbririi/iluminării. Obiectele care sunt mai înalte ar trebui să fie mai ușoare în umbră, simulând iluminarea și umbrirea din viața reală. Acest lucru face mai ușor să se facă distincția între diferitele componente și ierarhia acestora.
Două pătrate gri identice cu o umbră, unul pe un fundal 100% negru, celălalt pe #121212. Pe măsură ce obiectul se ridică, acesta devine o nuanță mai deschisă de gri.
Într-o temă întunecată, puteți încă lucra cu culoarea de bază obișnuită, atâta timp cât contrastul este ok. Să explicăm cu un exemplu.
În această interfață, acțiunea principală este butonul mare albastru din bara de jos. Nu există nicio problemă în ceea ce privește contrastul atunci când comutați între modul deschis sau întunecat, butonul este încă atrăgător, pictograma este clară și, per total, totul este în regulă.
Când aceeași culoare este folosită în moduri diferite, 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ță.
Stânga: roșu pe negru arată rău. Dreapta: reduceți saturația și totul arată bine. — aprox. traducere
Același lucru este valabil și pentru orice alte culori puternice pe care le-ați fi folosit, cum ar fi culorile de avertizare sau de eroare. Google folosește o suprapunere de 40% strat alb deasupra culorii implicite de eroare din acestea când treceți în modul întunecat. Acesta este un punct de plecare destul de bun, deoarece va îmbunătăți nivelurile de contrast pentru a se potrivi cu standardele AA. Desigur, puteți schimba întotdeauna setările după cum credeți de cuviință, dar asigurați-vă că verificați nivelurile de contrast. Apropo, un instrument util în acest scop este pluginul Sketch - , care arată exact cât de mult contrast există între 2 straturi.
Dar textul?
Totul este simplu aici: nimic nu ar trebui să fie 100% negru și 100% alb și invers. Albul reflectă undele luminoase de toate lungimile de undă, negrul absoarbe. Dacă plasați text 100% alb pe un fundal 100% negru, literele vor reflecta lumina, vor decolora și vor deveni mai puțin lizibile, ceea ce va afecta negativ lizibilitatea.
Același lucru este valabil și pentru un fundal 100% alb, care reflectă prea multă lumină pentru a se concentra pe deplin asupra cuvintelor. Încercați să înmuiați puțin culoarea albă, folosiți gri deschis pentru fundaluri și text pe fundaluri negre. Acest lucru va reduce oboseala ochilor, prevenind
Modul întunecat este aici și nu va dispărea
Timpul pe care îl petrecem în fața ecranelor este în continuă creștere și în fiecare zi nouă apar ecrane noi în viața noastră, din momentul în care ne trezim și până adormim. Acesta este un fenomen destul de nou; ochii noștri nu sunt încă obișnuiți cu această creștere a timpului pe ecran, seara târziu. Aici intervine modul întunecat. Odată cu introducerea acestei caracteristici în macOS și Material Design (și cel mai probabil în iOS), credem că mai devreme sau mai târziu va deveni implicit în toate aplicațiile, atât mobile, cât și desktop. Și este mai bine să fii pregătit pentru asta!
Singurul motiv pentru a nu implementa modul întunecat este atunci când sunteți absolut sigur 100% că aplicația dvs. este utilizată exclusiv în lumina strălucitoare a zilei. Acest lucru, însă, nu se întâmplă des.
Merită menționat câteva lucruri care vor necesita o atenție deosebită la implementarea modului întunecat, dincolo de principiile de bază rezumate mai devreme.
În ceea ce privește accesibilitatea, modul întunecat nu este cel mai convenabil, deoarece contrastul este în general mai scăzut, ceea ce, la rândul său, nu îmbunătățește deloc lizibilitatea.
Dar imaginează-ți că te pregătești de culcare, chiar vrei să dormi, 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 iei telefonul, îl pornești și AAAAAAH... fundalul deschis al iMessage-ului tău te va ține treaz încă 3 ore. În timp ce textul deschis pe un fundal întunecat nu este considerat cel mai accesibil, a avea un mod întunecat chiar în această secundă ar crește confortul cu un milion. Totul depinde de situația în care se află utilizatorul în acest moment.
De aceea gândim modul întunecat automat o idee atât de cool. Se aprinde seara și se stinge dimineața. Utilizatorul nici nu trebuie să se gândească la asta, ceea ce este foarte convenabil. Twitter a făcut o treabă grozavă cu setările pentru modul întunecat. În plus, au atât doar un mod întunecat, cât și un mod și mai întunecat pentru toate aceste ecrane OLED, economisind bateria și tot ce este legat de acesta. Este important să rețineți aici: oferiți utilizatorului posibilitatea de a comuta manual oricând dorește: nu este nimic mai rău decât schimbarea automată a interfeței fără posibilitatea de a comuta înapoi.
Twitter are un mod automat întunecat care pornește seara și se oprește dimineața.
De asemenea, atunci când dezvoltați o temă, merită să aveți în vedere că unele lucruri pur și simplu nu pot fi întunecate.
Luați un editor de text precum Pages. Puteți întuneca interfața, dar foaia în sine va fi întotdeauna albă, simulând o foaie de hârtie reală.
Pagini cu modul întunecat activat
Același lucru este valabil și pentru toate tipurile de editori de creare de conținut, cum ar fi Sketch sau Illustrator. Deși interfața poate fi întunecată, tabloul cu care lucrați va fi întotdeauna alb în mod implicit.
Schițați în modul întunecat și aveți în continuare o panou de desen alb strălucitor.
Deci, indiferent de aplicație, credem că modurile întunecate vor veni native sistemului de operare pe care îl utilizați, ceea ce înseamnă că cel mai bine este să vă pregătiți pentru viitor. va fi întuneric.
Dacă doriți să aflați mai multe despre dezvoltarea interfețelor de utilizare întunecate, asigurați-vă că consultați instrucțiunile , aceasta a fost principala noastră sursă de informații pentru acest articol.
Sursa: www.habr.com