Ali na kaj je treba paziti pri razvoju temnega načina aplikacije ali spletne strani
Leto 2018 je pokazalo: temni načini so na poti. Zdaj, ko smo že na pol poti v leto 2019, lahko z gotovostjo rečemo: tu so in povsod so.
Začnimo s tem, da temni način ni nova koncept. Uporablja se že dlje časa. Včasih so ga uporabljali prav vsi: monitorji so bili 'zelena-na-crno', a le zato, ker je fluorescentna prevleka v notranjosti oddajala zelenkast sijaj ob izpostavljenosti sevanju.
Toda tudi po uvedbi barvnih monitorjev temni način je še naprej obstajal. Zakaj torej?
Obstajata dva glavna razloga, zakaj danes skoraj vsako drugo aplikacijo hiti dodati temno temo. Prvič: računalniki so povsod. Kamorkoli pogledamo, povsod je neka zaslon. Naša mobilna naprava uporabljamo zjutraj do pozne noči. Prisutnost temnega načina zmanjšuje obremenitev oči, ko pred spanjem 'zadnjič' skrolate po družabnih omrežjih. (Če ste podobni meni, 'zadnjič' morda pomeni 3-urno skrolanje. . Temni način? Res je, prosim!
Še en razlog so nove tehnologije proizvodnje zaslonov. Vrhunski modeli velikih podjetij - Apple, Google, Samsung, Huawei - so vsi opremljeni z OLED zasloni, ki za razliko od LCD zaslonov ne potrebujejo osvetlitve. In to je res dobra novica za vašo baterijo. Predstavljajte si, da gledate sliko črnega kvadrata na svojem telefonu; pri LCD zaslonu osvetlitev osvetli celoten zaslon, čeprav je njegov večji del črn. Toda pri ogledu iste slike na OLED zaslonu se piksli, iz katerih je črni kvadrat sestavljen, preprosto izklopijo. To pomeni, da sploh ne porabijo energije.
Ti tipi zaslonov naredijo temne načine veliko bolj zanimive. Z uporabo temnega vmesnika lahko znatno podaljšate življenjsko dobo baterije vašega naprave. . Temni načini se seveda gibljejo z spremembami UI, zato osvežimo svoje znanje!
Temni načini 101
Najprej: „temna“ ni enaka „črni“. Ne poskušajte nadomestiti belega ozadja s črnim, saj bo to onemogočilo uporabo senc. Takšen dizajn bo super raven (v slabem pomenu besede).
Pomembno je upoštevati osnovna načela senčenja/osvetlitve. Predmeti, ki so bolj dvignjeni, naj bodo svetlejši v senci, kar posnema resnično osvetlitev in senčenje. Tako je lažje razlikovati različne komponente in njihovo hierarhijo.
Dva enaka siva kvadrata s senco, eden na 100% črni podlagi, drugi na #121212. Ko je predmet dvignjen, pridobi svetlejši odtenek sive.
V temnem načinu se še vedno lahko uporablja vaša običajna osnovna barva, če je kontrast v redu. Pojasnili bomo na primeru.
V tem vmesniku je glavno dejanje velika modra tipka na spodnji plošči. Tukaj ni težav z vidika kontrasta pri preklapljanju med svetlim ali temnim načinom, tipka še naprej pritegne pozornost, ikona je jasna, na splošno je vse odlično.
Ko se ista barva uporablja različno, na primer v besedilu — bodo težave. Poskusite uporabiti (močno) manj nasičen odtenek osnovne barve ali poiščite druge načine za vključitev barv blagovne znamke v vmesnik.
Levo: rdeča na črni izgleda slabo. Desno: zmanjšajmo nasičenost — in vse postane dobro. — op. prev.
Enako velja za vse druge nasičene barve, ki ste jih lahko uporabili, kot so barve opozorila ali napake. Google uporablja prekrivni bel sloj pri 40% nad barvo privzete napake v svojih pri preklapljanju v temni način. To je precej dober izhodiščni točka, saj bo izboljšalo ravni kontrasta, tako da ustreza standardom AA. Seveda lahko vedno spremenite nastavitve po lastni izbiri, vendar ne pozabite preveriti ravni kontrasta. Mimogrede, koristen pripomoček za to nalogo je vtičnik za Sketch — , ki natančno pokaže, koliko kontrasta je med 2 slojema.
Kaj pa besedilo?
Tu je vse preprosto: nič ne sme biti 100% črno in 100% belo. Belo odraža svetlobne valove vseh dolžin, črno – vpija. Če postavite 100% belo besedilo na 100% črn ozadje, bodo črke odražale svetlobo, razmazale se in postale manj prijetne za branje, kar negativno vpliva na berljivost.
Enako velja za 100% belo ozadje, ki odraža preveč svetlobe, da bi se popolnoma osredotočili na besede. Poskusite rahlo omiliti belo barvo, uporabite svetlo sivo za ozadja in besedila na črnih ozadjih. To bo zmanjšalo obremenitev oči in preprečilo
Temna tema tukaj ostaja
Količina časa, ki ga preživimo pred zasloni, nenehno narašča, in vsak nov dan se novi zasloni pojavljajo v našem življenju, od trenutka, ko se zbudimo, do trenutka, ko zaspite. To je precej nov pojav, naše oči se še niso privadile na povečanje časa pred zaslonom pozno zvečer. Tu nastopi temna tema. Po uvedbi te funkcionalnosti v macOS in Material Design (in verjetno v iOS) menimo, da bo prej ali slej postala privzeta v vseh aplikacijah, tako mobilnih kot namiznih. In bolje je biti na to pripravljen!
Edini razlog, da ne uvedete temne teme, je, če ste popolnoma prepričani, da vaša aplikacija deluje izključno pri močni dnevni svetlobi. Takšno stanje je res redko.
Treba je omeniti nekaj stvari, ki bodo potrebovale posebno pozornost pri izvedbi temne teme, poleg osnovnih načel, povzetih prej.
Z vidika dostopnosti temna tema ni najbolj prijazna, saj je kontrast na splošno nižji, kar posledično ne izboljšuje berljivosti.
Ampak, predstavljajte si, da se pripravljate na spanje, zelo želite spati, a ravno preden zaspite, se spomnite, da morate nekomu poslati super pomembno sporočilo, ki ne more čakati niti ene noči. Vzamete svoj telefon, ga prižgete in AAAAAAA... svetlo ozadje vašega iMessage vam ne bo dovolilo zaspati še vsaj 3 ure. Medtem ko svetlo besedilo na temnem ozadju ni najbolj dostopno, bi prisotnost temne teme v tistem trenutku občutno povečala udobje. Vse je odvisno od situacije, v kateri se uporabnik trenutno nahaja.
Zato menimo samodejni temni način s tako odlično idejo. Vklopi se zvečer in izklopi zjutraj. Uporabnik se tudi ne mora ukvarjati s tem, kar je zelo priročno. Twitter je odlično opravil delo z nastavitvami temnega načina. Poleg tega imajo tako preprost temni način, kot še temnejši način za vse OLED zaslone, varčevanje z baterijo in vse, kar je s tem povezano. Tu je pomembno omeniti: omogočite uporabniku, da se preklopi ročno, kadar koli želi: ni nič hujšega kot samodejna sprememba vmesnika brez možnosti vračanja nazaj.
Twitter ima samodejni temni način, ki se vklopi zvečer in izklopi zjutraj.
Prav tako je pri razvoju teme treba imeti v mislih, da nekaterih stvari preprosto ne moremo narediti v temni barvi.
Vzemite na primer besedilni urejevalnik Pages. Vmesnik lahko naredite temen, vendar bo sam list vedno bel, kar posnema pravi list papirja.
Pages vključen temni način
Enako velja za vse vrste urejevalnikov za ustvarjanje vsebin, kot sta Sketch ali Illustrator. Čeprav lahko vmesnik naredite temen, bo delovna plošča, s katero delate, vedno privzeto bela.
Sketch v temnem načinu in še vedno svetla bela delovna plošča.
Zato ne glede na aplikacijo menimo, da bodo temni načini postali privzeti za vašo operacijsko sistem, zato je najbolje, da se pripravite na prihodnost, to bo temno.
Če želite izvedeti več o razvoju temnih vmesnikov, obvezno preberite smernice , to je bil naš glavni vir informacij za ta članek.
Izvor: habr.com
