Ali kaj je treba upoštevati pri razvoju temnega načina za aplikacijo ali spletno mesto
Leto 2018 je pokazalo, da so temni načini na poti. Zdaj, ko smo na polovici leta 2019, lahko z gotovostjo trdimo: tukaj so in povsod so.
Začnimo z dejstvom, da temni način sploh ni nov koncept. Uporablja se že precej dolgo. In nekoč, pravzaprav dolgo, je bilo to edino, kar so uporabljali: monitorji so bili sorte »zeleno na črno«, a le zato, ker je luminiscenčna prevleka v notranjosti ob izpostavljenosti sevanju oddajala zelenkast sijaj. .
Toda tudi po uvedbi barvnih monitorjev je temni način še naprej obstajal. Zakaj je temu tako?
Obstajata dva glavna motiva, ki pojasnjujeta, zakaj se danes vsaka druga oseba mudi, da bi svoji aplikaciji dodala temno temo. Prvič: računalniki so povsod. Kamor koli pogledamo, je nekakšen zaslon. Mobilne naprave uporabljamo od jutra do pozne noči. Prisotnost temnega načina zmanjša obremenitev oči, ko ste v postelji, preden se "zadnjič" odpravite spat in brskate po svojem socialnem viru. omrežja. (Če ste kot jaz, lahko "zadnjič" pomeni 3-urno drsenje . Temni način? Da, prosim! )
Drugi razlog so nove tehnologije izdelave zaslonov. Vodilni modeli velikih podjetij - Apple, Google, Samsung, Huawei - so vsi opremljeni z zasloni OLED, ki za razliko od LCD zaslonov ne potrebujejo osvetlitve ozadja. In to je res dobra novica za vašo baterijo. Predstavljajte si, da na telefonu gledate sliko črnega kvadrata; pri LCD-ju bo osvetlitev ozadja osvetlila celoten zaslon, čeprav je večina črne barve. Toda pri ogledu iste slike na zaslonu OLED se slikovne pike, ki sestavljajo črni kvadrat, preprosto izklopijo. To pomeni, da sploh ne porabljajo energije.
Te vrste zaslonov naredijo temne načine veliko bolj zanimive. Z uporabo temnega vmesnika lahko znatno podaljšate življenjsko dobo baterije vaše naprave. . Temni načini gredo seveda z roko v roki s spremembami uporabniškega vmesnika, zato osvežimo svoje znanje!
Temni načini 101
Najprej: "temno" ni isto kot "črno". Ne poskušajte zamenjati belega ozadja s črnim, saj bo to onemogočilo uporabo senc. Takšen dizajn bo super ploščat (v slabem smislu).
Pomembno je upoštevati osnovna načela senčenja/osvetljevanja. Predmeti, ki so bolj dvignjeni, morajo biti svetlejši v senci, simulirati svetlobo in senčenje v resničnem življenju. To olajša razlikovanje med različnimi komponentami in njihovo hierarhijo.
Dva enaka siva kvadrata s senco, eden na 100% črnem ozadju, drugi na #121212. Ko se predmet dvigne, postane svetlejši odtenek sive.
V temni temi lahko še vedno delate z običajno osnovno barvo, če je kontrast v redu. Razložimo s primerom.
V tem vmesniku je glavno dejanje velik modri gumb v spodnji vrstici. S kontrastom pri preklopu med svetlim in temnim načinom ni težav, gumb je še vedno vpadljiv, ikona je jasna, na splošno je vse v redu.
Če se ista barva uporablja na različne načine, na primer v besedilu, bodo težave. Poskusite uporabiti (veliko) manj nasičen odtenek glavne barve ali poiščite druge načine za vključitev barv znamke v vmesnik.
Levo: rdeče na črnem izgleda slabo. Desno: zmanjšajte nasičenost in vse bo videti dobro. — pribl. prevod
Enako velja za vse druge močne barve, ki ste jih morda uporabili, na primer barve opozoril ali napak. Google uporablja 40-odstotno belo prekrivno plast na vrhu privzete barve napake v svojem pri preklopu v temni način. To je precej dobro izhodišče, saj bo izboljšalo raven kontrasta, da bo ustrezala standardom AA. Nastavitve lahko seveda vedno spremenite, kot se vam zdi primerno, vendar ne pozabite preveriti ravni kontrasta. Mimogrede, uporabno orodje za ta namen je vtičnik Sketch - , ki natančno pokaže, koliko kontrasta je med 2 slojema.
Kaj pa besedilo?
Tukaj je vse preprosto: nič ne sme biti 100% črno in 100% belo in obratno. Bela odbija svetlobne valove vseh valovnih dolžin, črna absorbira. Če postavite 100 % belo besedilo na 100 % črno ozadje, bodo črke odbijale svetlobo, se razmazale in postale manj čitljive, kar bo negativno vplivalo na berljivost.
Enako velja za 100-odstotno belo ozadje, ki odseva preveč svetlobe, da bi se besede popolnoma osredotočile. Poskusite nekoliko zmehčati belo barvo, uporabite svetlo sivo za ozadja in besedilo na črnih ozadjih. To bo zmanjšalo obremenitev oči in preprečilo
Temni način je tukaj in ne bo izginil
Količina časa, ki ga preživimo pred zasloni, nenehno narašča in vsak nov dan se v našem življenju pojavijo novi zasloni, od trenutka, ko se zbudimo, do trenutka, ko zaspimo. To je dokaj nov pojav, naše oči še niso navajene tega podaljšanja časa pred zaslonom pozno zvečer. Tukaj nastopi temni način. Z uvedbo te funkcije v macOS in Material Design (ter najverjetneje v iOS) verjamemo, da bo prej ali slej postala privzeta v vseh aplikacijah, tako mobilnih kot namiznih. In bolje je biti pripravljen na to!
Edini razlog, da ne uvedete temnega načina, je, če ste popolnoma 100 % prepričani, da se vaša aplikacija uporablja izključno pri močni dnevni svetlobi. To pa se ne zgodi pogosto.
Vredno je omeniti nekaj stvari, ki zahtevajo posebno pozornost pri izvajanju temnega načina, poleg osnovnih načel, povzetih prej.
Kar zadeva dostopnost, temni način ni najbolj priročen, saj je kontrast praviloma nižji, kar posledično prav nič ne izboljša berljivosti.
Toda predstavljajte si, da se pripravljate na spanje, res želite spati, a tik preden zaspite, se spomnite, da morate nekomu poslati zelo pomembno sporočilo, ki ne more počakati niti ene noči. Zgrabite telefon, ga prižgete in AAAAAAH... svetlo ozadje vašega iMessage-a vas bo držalo budnega še 3 ure. Medtem ko svetlo besedilo na temnem ozadju ne velja za najbolj dostopno, bi temni način to sekundo povečati udobje za milijon. Vse je odvisno od situacije, v kateri se uporabnik trenutno nahaja.
Zato mislimo samodejni temni način tako kul ideja. Zvečer se prižge in zjutraj ugasne. Uporabniku o tem sploh ni treba razmišljati, kar je zelo priročno. Twitter je opravil odlično delo s svojimi nastavitvami temnega načina. Poleg tega imajo tako samo temni način kot še temnejši način za vse te zaslone OLED, varčujejo z baterijo in vsem, kar je povezano s tem. Tukaj je pomembno opozoriti: dajte uporabniku možnost ročnega preklopa, kadar koli želi: nič ni hujšega kot samodejno spreminjanje vmesnika brez možnosti preklopa nazaj.
Twitter ima samodejni temni način, ki se vklopi zvečer in izklopi zjutraj.
Tudi pri razvoju teme je vredno upoštevati, da nekaterih stvari preprosto ni mogoče narediti temne.
Vzemite urejevalnik besedil, kot je Pages. Vmesnik lahko naredite temen, vendar bo sam list vedno bel in simulira pravi list papirja.
Strani z omogočenim temnim načinom
Enako velja za vse vrste urejevalnikov za ustvarjanje vsebine, kot sta Sketch ali Illustrator. Čeprav je vmesnik lahko temen, bo umetniška plošča, s katero delate, privzeto vedno bela.
Skicirajte v temnem načinu in še vedno imejte svetlo belo umetniško ploščo.
Ne glede na aplikacijo verjamemo, da bodo temni načini izvirni iz operacijskega sistema, ki ga uporabljate, kar pomeni, da je najbolje, da se pripravite na prihodnost. temno bo.
Če želite izvedeti več o razvoju temnih uporabniških vmesnikov, si oglejte smernice , je bil to naš glavni vir informacij za ta članek.
Vir: www.habr.com