Vagy mire érdemes figyelni az alkalmazások vagy weboldalak sötét módjának fejlesztésekor
2018-ban már láttuk: a sötét módok közelednek. Most, hogy már féltávnál járunk 2019-ben, magabiztosan mondhatjuk: itt vannak, és mindenhol ott vannak.
Kezdjük azzal, hogy a sötét mód egyáltalán nem új koncepció. Ezt már régóta használják. Valójában régen csak ezt használták: a monitorok "zöld-fekete" színben voltak, mivel a belső fluoreszkáló bevonat zöldes fényt bocsátott ki, amikor rá hatott a sugárzás.
De még a színes monitorok megjelenése után is élt a sötét mód. Miért van ez?
Két fő indok van, ami magyarázza, miért rohan ma minden második ember, hogy sötét témát adjon az alkalmazásához. Mindenekelőtt: a számítógépek mindenhol ott vannak. Bárhova is nézünk, képernyők vesznek körül minket. Mobil eszközeinket reggeltől késő estig használjuk. A sötét mód csökkenti a szemet terhelő hatást, amikor az ágyban, a lefekvés előtt "utoljára" görgetjük a közösségi média hírfolyamot. (Ha olyan vagy, mint én, az "utolsó alkalom" akár 3 órányi görgetést is jelenthet. . Sötét mód? Persze, csak szívesen!
Egy másik ok az új kijelzőgyártási technológiák. A nagy cégek csúcsmodellei — Apple, Google, Samsung, Huawei — mind OLED képernyőkkel vannak felszerelve, amelyek, ellentétben az LCD kijelzőkkel, nem igényelnek háttérvilágítást. És ez igazán jó hír az akkumulátorod számára. Képzeld el, hogy egy fekete négyzet képet nézel a telefonodon; LCD kijelző esetén a háttérvilágítás az egész képernyőt megvilágítja, míg annak nagy része fekete. De ha ugyanazt a képet nézed OLED kijelzőn, azok a képpontok, amelyekből a fekete négyzet áll, egyszerűen kikapcsolnak. Ez azt jelenti, hogy egyáltalán nem fogyasztanak energiát.
Ezek a kijelzőtípusok sokkal izgalmasabbá teszik a sötét módokat. A sötét felhasználói felület használatával jelentősen meghosszabbíthatod készüléked akkumulátorának élettartamát. . A sötét módok természetesen együtt járnak a UI változásokkal, szóval frissítsük fel tudásunkat!
Sötét módok 101
Először is: a "sötét" nem egyenlő a "feketével". Ne próbálja meg a fehér háttér helyébe fekete háttért tenni, mivel ez lehetetlenné teszi az árnyékok használatát. Az ilyen dizájn rendkívül lapos lesz (rossz értelemben).
Fontos figyelembe venni az árnyékolás/alumínium világítás alapelveit. Azok az objektumok, amelyek magasabban állnak, a világosság árnyékában világosabbnak kell lenniük, utánozva a valós világítást és árnyékolást. Így könnyebb megkülönböztetni a különböző összetevőket és azok hierarchiáját.
Két azonos szürke négyzet árnyékkal, az egyik 100%-os fekete háttérrel, a másik #121212 háttérrel. Az emelkedéssel a tárgy egy világosabb szürke árnyalatot kap.
Sötét téma esetén még mindig dolgozhat a szokásos alapszínével, ha a kontraszt rendben van. Ezt bemutatjuk egy példával.
Ebben a felhasználói felületen a fő cselekvés a nagy kék gomb az alsó panelen. Nincs probléma a kontraszt szempontjából a világos vagy sötét mód között való váltásnál, a gomb továbbra is vonzza a figyelmet, a szimbólum éles, összességében minden rendben.
Ha ugyanazt a színt különböző módon használja, például a szövegben — problémák merülhetnek fel. Próbálja meg használni a fő szín (sokkal) kevésbé telített árnyalatát, vagy kereshet más módokat a márka színeinek hozzáadására a felülethez.
Balra: a piros a feketén rosszul néz ki. Jobbra: csökkentjük a telítettséget — és minden rendben van. — ford. jegyz.
Ugyanez vonatkozik minden más telített színre is, amelyet használhat, például a figyelmeztető vagy hibaszínekre. A Google 40%-os fehér réteget használ az alapértelmezett hiba színe fölött a a sötét módra való váltáskor. Ez egy meglehetősen jó kiindulási alap, mivel javítja a kontrasztszinteket az AA szabványoknak megfelelően. Természetesen mindig módosíthatja a beállításokat a saját igényei szerint, de ne felejtse el ellenőrizni a kontrasztszinteket. Egyébként, hasznos eszköz ebben a tekintetben a Sketch bővítmény — , amely pontosan megmutatja, mennyi a kontraszt a 2 réteg között.
Mi a helyzet a szöveggel?
Itt minden egyszerű: semmi sem lehet 100% fekete 100% fehér és fordítva. A fehér visszaveri a fényhullámok minden hosszát, a fekete pedig elnyeli. Ha 100% fehér szöveget helyezünk el 100% fekete háttérre, a betűk visszaverik a fényt, elmosódnak és nehezebbé válnak az olvasásra, ami negatívan befolyásolja az olvashatóságot.
Ez vonatkozik a 100% fehér háttérre is, amely túl sok fényt ver vissza ahhoz, hogy teljes mértékben a szavakra tudjon összpontosítani. Próbálja meg egy kicsit enyhíteni a fehér színt, használjon világosszürke hátteret és szöveget fekete háttereken. Ez csökkenti a szem terhelését, megelőzve
A sötét üzemmód itt marad, és nem fog eltűnni.
A képernyők előtt töltött időnk folyamatosan növekszik, és minden új nap új képernyők jelennek meg az életünkben, reggel ébredésünktől kezdve egészen az elalvásig. Ez viszonylag új jelenség, a szemünk még nem szokott hozzá a képernyő előtt töltött idő ilyen mértékű növekedéséhez késő este. Itt jön képbe a sötét üzemmód. A macOS és a Material Design (valószínűleg az iOS-ben is) bevezetésével úgy véljük, hogy előbb-utóbb ez alapértelmezetté válik minden alkalmazásban, legyen szó mobilról vagy asztali gépről. Jobb, ha felkészülünk rá!
Az egyetlen ok, amiért nem érdemes bevezetni a sötét üzemmódot, az, ha teljes mértékben biztos benne, hogy az alkalmazását kizárólag világos nappali fényben használják. Ez azonban meglehetősen ritkán fordul elő.
Érdemes megemlíteni néhány dolgot, amely különös figyelmet igényel a sötét üzemmód megvalósításakor, a korábban összefoglalt alapelveken kívül.
Hozzáférhetőség szempontjából a sötét üzemmód nem a legkényelmesebb, mivel az általános kontraszt alacsonyabb, ami viszont nem javítja az olvashatóságot.
De képzelje el, hogy éppen aludni készül, nagyon szeretne aludni, de közvetlenül az elalvás előtt eszébe jut, hogy el kell küldenie valakinek egy nagyon fontos üzenetet, amely nem várhat egy éjszakát sem. Fogja a telefonját, bekapcsolja, és AAAAHH… az iMessage világos háttere még 3 órára megakadályozza az elalvást. Míg a világos szöveg sötét háttéren nem tekinthető maximálisan hozzáférhetőnek, a sötét üzemmód megléte éppen abban a pillanatban egy millióval növelné a kényelmet. Minden a felhasználó aktuális helyzetétől függ.
Ezért tartjuk fontosnak. automatikus sötét mód ez egy szuper ötlet. Este bekapcsol, reggel pedig kikapcsol. A felhasználónak még csak gondolkodnia sem kell rajta, ami nagyon kényelmes. A Twitter kiváló munkát végzett a sötét mód beállításaival. Ezenkívül van sima sötét mód és még sötétebb mód is az OLED-kijelzők számára, hogy spóroljanak az akkumulátorral és az összes ezzel kapcsolatos dologgal. Fontos megjegyezni: lehetőséget kell adni a felhasználónak, hogy manuálisan váltogathasson, amikor csak akar: nincs is rosszabb, mint ha az interfész automatikusan változik, anélkül, hogy vissza lehessen kapcsolni.
A Twitter-en van automatikus sötét mód, amely este bekapcsol és reggel kikapcsol.
A téma fejlesztésekor azt is érdemes figyelembe venni, hogy bizonyos dolgokat egyszerűen nem lehet sötétté tenni.
Vegyük például a Pages szövegszerkesztőt. Az interfész sötét lehet, de a lap mindig fehér marad, utánozva a valódi papírlapot.
Pages sötét móddal
Ugyanez vonatkozik mindenféle tartalomkészítő szerkesztőre, például a Sketch-re vagy az Illustrator-ra. Bár az interfész sötét lehet, a munkafelület, amellyel dolgozik, mindig fehér lesz alapértelmezés szerint.
Sketch sötét módban, de a munkafelület még mindig fényes fehér.
Ezért függetlenül attól, hogy melyik alkalmazást használja, úgy gondoljuk, hogy a sötét módok a használt operációs rendszer natív részeivé válnak, így érdemes előre felkészülni a jövőre. az sötét lesz.
Ha többet szeretne megtudni a sötét interfészek fejlesztéséről, mindenképpen ismerkedjen meg az irányelvekkel , ez volt a fő információforrásunk ehhez a cikkhez.
Forrás: habr.com
