Vagy mit kell szem előtt tartani, amikor sötét módot fejlesztünk egy alkalmazáshoz vagy webhelyhez
2018-ban kiderült, hogy a sötét módok jönnek. Most, hogy 2019 felénél járunk, bátran kijelenthetjük: itt vannak, és mindenhol ott vannak.
Kezdjük azzal, hogy a sötét mód egyáltalán nem új fogalom. Elég régóta használták. És réges-régen, sőt, sokáig ez volt az egyetlen dolog, amit használtak: a monitorok „zöld-feketén” típusúak voltak, de csak azért, mert a belsejében lévő lumineszcens bevonat zöldes fényt bocsátott ki sugárzás hatására. .
De még a színes monitorok bevezetése után is megmaradt a sötét mód. Miért van ez így?
Két fő oka van annak, hogy ma már minden második ember siet, hogy sötét témát adjon a pályázatához. Először is: számítógépek mindenhol vannak. Bármerre nézünk, mindenhol van valamilyen képernyő. Mobileszközeinket reggeltől késő estig használjuk. A sötét mód jelenléte csökkenti a szem megerőltetését, amikor lefekszik az "utoljára" lefekvés előtt, görgetve a közösségi hírfolyamot. hálózatok. (Ha olyan vagy, mint én, a „legutóbbi alkalom” egy 3 órás tekercset jelenthet . Sötét mód? Igen, kérem! )
Egy másik ok az új kijelzőgyártási technológiák. A nagyvállalatok – Apple, Google, Samsung, Huawei – zászlóshajó modelljei mind OLED-képernyőkkel vannak felszerelve, amelyek az LCD-kijelzőkkel ellentétben nem igényelnek háttérvilágítást. És ez nagyon jó hír az akkumulátora számára. Képzelje el, hogy egy fekete négyzet képét nézi a telefonján; LCD esetén a háttérvilágítás az egész képernyőt megvilágítja, annak ellenére, hogy a legtöbb fekete. De ha ugyanazt a képet nézi egy OLED-kijelzőn, a fekete négyzetet alkotó képpontok egyszerűen kikapcsolódnak. Ez azt jelenti, hogy egyáltalán nem fogyasztanak energiát.
Az ilyen típusú kijelzők sokkal érdekesebbé teszik a sötét módokat. A sötét felület használatával jelentősen meghosszabbíthatja a készülék akkumulátorának élettartamát. . A sötét módok természetesen kéz a kézben járnak a felhasználói felület változásaival, így ecseteljük tudásunkat!
Sötét módok 101
Először is: a „sötét” nem azonos a „feketével”. Ne próbálja a fehér hátteret feketére cserélni, mert ez lehetetlenné teszi az árnyékok használatát. Egy ilyen kialakítás szuperlapos lesz (rossz értelemben).
Fontos szem előtt tartani az árnyékolás/világítás alapelveit. A magasabban fekvő tárgyaknak világosabbnak kell lenniük az árnyékban, szimulálva a valós megvilágítást és árnyékolást. Ez megkönnyíti a különböző összetevők és azok hierarchiájának megkülönböztetését.
Két egyforma szürke négyzet árnyékkal, az egyik 100%-ban fekete háttéren, a másik a #121212. Ahogy a tárgy felemelkedik, a szürke világosabb árnyalata lesz.
Sötét témában továbbra is használhatja a szokásos alapszínt, amíg a kontraszt megfelelő. Magyarázzuk meg egy példával.
Ezen a felületen a fő művelet a nagy kék gomb az alsó sávban. Világos vagy sötét mód közötti váltáskor kontraszttal nincs gond, a gomb továbbra is szemet gyönyörködtető, az ikon tiszta, összességében minden rendben van.
Ha ugyanazt a színt különböző módon használják, például szövegben, problémák léphetnek fel. Próbálja meg a fő szín (sokkal) kevésbé telített árnyalatát használni, vagy keressen más módokat a márkaszínek beillesztésére a felületen.
Balra: A piros a feketén rosszul néz ki. Jobbra: csökkentse a telítettséget, és minden jól néz ki. — kb. fordítás
Ugyanez vonatkozik minden más erős színre, amelyet esetleg használt, például figyelmeztető vagy hibaszínekre. A Google 40%-os fehér rétegfedőt használ az alapértelmezett hibaszínen felül sötét módba váltáskor. Ez egy nagyon jó kiindulópont, mivel javítja a kontrasztszintet, hogy megfeleljen az AA szabványoknak. A beállításokat természetesen mindig tetszés szerint módosíthatja, de mindenképpen ellenőrizze a kontrasztszinteket. Egyébként egy hasznos eszköz erre a célra a Sketch plugin - , amely pontosan megmutatja, mekkora kontraszt van 2 réteg között.
Mi a helyzet a szöveggel?
Itt minden egyszerű: semmi sem lehet 100% fekete és 100% fehér és fordítva. A fehér minden hullámhosszú fényhullámot visszaveri, a fekete elnyeli. Ha 100%-ban fehér szöveget helyez 100%-ban fekete háttérre, a betűk visszaverik a fényt, elkenődnek és kevésbé olvashatók, ami negatívan befolyásolja az olvashatóságot.
Ugyanez vonatkozik a 100%-ban fehér háttérre is, amely túl sok fényt ver vissza ahhoz, hogy teljes mértékben a szavakra összpontosítson. Próbáld kicsit lágyítani a fehér színt, világosszürkét használj a háttérhez és a szöveget a fekete háttérhez. Ez csökkenti a szem megerőltetését, megelőzve
A sötét mód itt van, és nem fog eltűnni
A képernyők előtt eltöltött idő folyamatosan növekszik, és minden új nap új képernyők jelennek meg az életünkben, az ébredés pillanatától kezdve egészen az elalvásig. Ez egy meglehetősen új jelenség, a szemünk még nem szokott hozzá a késő esti képernyőidő növekedéséhez. Itt jön képbe a sötét mód. Úgy gondoljuk, hogy ennek a funkciónak a macOS-ben és a Material Design-ban (és nagy valószínűséggel iOS-ben) való bevezetésével előbb-utóbb ez lesz az alapértelmezett minden alkalmazásban, mobilokon és asztali számítógépeken egyaránt. És jobb erre felkészülni!
Az egyetlen ok arra, hogy ne alkalmazza a sötét módot, ha teljesen 100%-ban biztos abban, hogy az alkalmazást kizárólag erős nappali fényben használja. Ez azonban nem gyakran fordul elő.
Érdemes megemlíteni néhány dolgot, amelyek a korábban összefoglalt alapelveken túlmenően különös figyelmet igényelnek a sötét mód megvalósítása során.
Hozzáférhetőség szempontjából a sötét mód nem a legkényelmesebb, mivel általában alacsonyabb a kontraszt, ami viszont egyáltalán nem javít az olvashatóságon.
De képzeld el, hogy lefekvéshez készülsz, nagyon szeretnél aludni, de közvetlenül elalvás előtt eszedbe jut, hogy el kell küldened valakinek egy szuper fontos üzenetet, amely nem várhat még egy éjszakát sem. Fogja a telefont, bekapcsolja, és ÁÁÁÁÁÁ... az iMessage világos háttere még 3 órán keresztül ébren tart. Bár a sötét háttéren lévő világos szöveg nem tekinthető a legelérhetőbbnek, a sötét mód ebben a másodpercben való bekapcsolása millióval növeli a kényelmet. Minden attól függ, hogy milyen helyzetben van a felhasználó pillanatnyilag.
Ezért hiszünk automatikus sötét mód olyan jó ötlet. Este bekapcsol, reggel kikapcsol. A felhasználónak nem is kell ezen gondolkodnia, ami nagyon kényelmes. A Twitter nagyszerű munkát végzett a sötét mód beállításaival. Ezen túlmenően ezeknek az OLED-képernyőknek van egy sötét és egy még sötétebb módja is, így kímélik az akkumulátort és minden, ami ezzel kapcsolatos. Itt fontos megjegyezni: adjuk meg a felhasználónak a lehetőséget, hogy manuálisan váltson, amikor csak akar: nincs rosszabb, mint az interfész automatikus megváltoztatása a visszaváltás lehetősége nélkül.
A Twitter automatikus sötét móddal rendelkezik, amely este bekapcsol, reggel pedig kikapcsol.
A téma kidolgozásakor azt is érdemes szem előtt tartani, hogy bizonyos dolgokat egyszerűen nem lehet elsötétíteni.
Vegyünk egy szövegszerkesztőt, például a Pages-t. Sötétítheti a felületet, de maga a lap mindig fehér lesz, valódi papírlapot szimulálva.
Oldalak, amelyeken engedélyezve van a sötét mód
Ugyanez vonatkozik minden típusú tartalomkészítő szerkesztőre, mint például a Sketch vagy az Illustrator. Bár a felület sötétre tehető, a rajztábla, amellyel dolgozik, alapértelmezés szerint mindig fehér lesz.
Vázlatot készíthet sötét módban, és továbbra is fényes fehér rajztáblával rendelkezik.
Tehát az alkalmazástól függetlenül úgy gondoljuk, hogy a sötét módok az Ön által használt operációs rendszerben natívak lesznek, vagyis a legjobb, ha felkészülünk a jövőre. sötét lesz.
Ha többet szeretne megtudni a sötét felhasználói felületek fejlesztéséről, feltétlenül olvassa el az irányelveket , ez volt a cikk fő információforrása.
Forrás: will.com