Edo zer kontuan izan behar den aplikazio edo webgune baterako modu iluna garatzerakoan
2018ak modu ilunak bidean daudela erakutsi zuen. 2019. urtearen erdira gaudela, konfiantzaz esan dezakegu: hemen daude, eta nonahi daude.
Has gaitezen modu iluna ez dela batere kontzeptu berria. Nahiko denbora luzez erabiltzen da. Eta garai batean, hain zuzen ere, denbora luzez, hau zen erabiltzen zuten bakarra: monitoreak "berde-beltzean" motakoak ziren, baina barruko estaldura luminiszenteak distira berdexka igortzen zuelako erradiazioaren eraginpean. .
Baina koloreko monitoreak sartu ondoren ere, modu iluna existitzen jarraitu zuen. Zergatik da hori horrela?
Bi arrazoi nagusi daude gaur egun bigarren pertsona bakoitzak bere aplikazioari gai ilun bat gehitzeko presarik. Lehenik eta behin: ordenagailuak nonahi daude. Begiratzen dugun toki guztietan pantaila motaren bat dago. Gure gailu mugikorrak goizetik gauera arte erabiltzen ditugu. Modu ilun baten presentziak begien nekea murrizten du ohean zaudenean oheratu aurretik "azken aldian" zure jario sozialean mugituz. sareak. (Ni bezalakoa bazara, "azken aldia" 3 orduko korritua esan nahi du . Modu iluna? Bai mesedez! )
Beste arrazoi bat pantaila ekoizteko teknologia berriak dira. Enpresa handien eredu enblematikoek - Apple, Google, Samsung, Huawei - OLED pantailez hornituta daude, eta LCD pantailek ez bezala, ez dute atzeko argirik behar. Eta oso albiste ona da zure bateriarentzat. Imajinatu zure telefonoan karratu beltz baten irudi bat ikusten ari zarela; LCD batekin, atzeko argiak pantaila osoa argituko du gehiena beltza izan arren. Baina OLED pantaila batean irudi bera ikustean, karratu beltza osatzen duten pixelak itzaltzen dira besterik gabe. Horrek esan nahi du ez dutela energia batere kontsumitzen.
Pantaila mota hauek modu ilunak askoz interesgarriagoak egiten dituzte. Interfaze iluna erabiliz, zure gailuaren bateriaren iraupena nabarmen luzatu dezakezu. . Modu ilunak, noski, UI aldaketekin batera doaz, beraz, hobetu dezagun gure ezagutza!
Modu ilunak 101
Lehenik eta behin: βilunaβ ez da βbeltzaβ-ren berdina. Ez saiatu hondo zuri bat beltz batekin ordezkatzen, itzalak erabiltzea ezinezkoa izango baita. Horrelako diseinu bat oso laua izango da (modu txarrean).
Garrantzitsua da itzal/argiztapenaren oinarrizko printzipioak kontuan izatea. Altxatuago dauden objektuek itzalean argiagoak izan behar dute, bizitza errealeko argiztapena eta itzalak simulatuz. Horri esker, errazagoa da osagai desberdinak eta haien hierarkia bereiztea.
Bi lauki gris berdin itzal batekin, bata %100eko atzeko planoan, eta bestea #121212. Objektua igotzen den heinean, gris tonu argiago bihurtzen da.
Gai ilun batean, zure oinarrizko kolore arruntarekin lan egin dezakezu, kontrastea ondo dagoen bitartean. Azal dezagun adibide batekin.
Interfaze honetan, ekintza nagusia beheko barrako botoi urdin handia da. Ez dago kontrasteari dagokionez modu argi edo ilun batetik bestera aldatzean, botoia oraindik deigarria da, ikonoa argia da eta, oro har, dena ondo dago.
Kolore bera modu ezberdinetan erabiltzen denean, adibidez testuan, arazoak egongo dira. Saiatu kolore nagusiaren (askoz) gutxiago saturatu bat erabiltzen, edo bilatu marka koloreak interfazean sartzeko beste modu batzuk.
Ezkerrean: gorria beltzean itxura txarra du. Eskuina: saturazioa murriztu eta dena ondo ikusten da. β gutxi gorabehera. itzulpena
Gauza bera gertatzen da erabili izan dituzun beste kolore indartsuekin, hala nola abisu edo erroreen koloreekin. Google-k %40ko geruza zuria erabiltzen du bere errore-kolore lehenetsiaren gainean modu ilunera aldatzean. Hau nahiko abiapuntu ona da, kontraste-mailak hobetuko baititu AA estandarrekin bat etortzeko. Noski, beti alda ditzakezu ezarpenak egoki ikusten duzun moduan, baina ziurtatu kontraste-mailak egiaztatzea. Bide batez, horretarako tresna erabilgarria Sketch plugina da - , 2 geruzen artean zenbat kontraste dagoen erakusten duena.
Zer gertatzen da testuarekin?
Hemen dena sinplea da: ezer ez da izan behar %100 beltza eta %100 zuria eta alderantziz. Zuriak uhin-luzera guztietako argi-uhinak islatzen ditu, beltzak xurgatzen ditu. Testu %100 zuria atzealde beltz batean jartzen baduzu, letrek argia islatuko dute, zikinduko dute eta irakurgarritasun gutxiago izango dute, eta horrek irakurgarritasunean eragin negatiboa izango du.
Gauza bera gertatzen da %100eko atzealde zuriarekin, argi gehiegi islatzen duena hitzetan guztiz zentratzeko. Saiatu kolore zuria apur bat leuntzen, erabili gris argia atzeko planoetarako eta testua hondo beltzetan. Horrek begien tentsioa murriztuko du, saihestuz
Modu iluna hemen dago eta ez da desagertuko
Pantailen aurrean pasatzen dugun denbora etengabe hazten ari da, eta egun berri bakoitzean pantaila berriak agertzen dira gure bizitzan, esnatzen garenetik loak hartzen dugun arte. Fenomeno nahiko berria da; gure begiak ez daude oraindik ohituta arratsaldean pantaila-denboraren gehikuntza horretara. Modu iluna jokoan sartzen da. Ezaugarri hau macOS-en eta Material Design-en (eta ziurrenik iOS-en) sartzearekin batera, uste dugu lehenago edo beranduago lehenetsia izango dela aplikazio guztietan, bai mugikorretan bai mahaigainean. Eta hobe da horretarako prestatuta egotea!
Modu iluna ez ezartzeko arrazoi bakarra zure aplikazioa egun argi argian soilik erabiltzen dela guztiz ziur zaudenean da. Hau, ordea, ez da askotan gertatzen.
Modu iluna ezartzerakoan arreta berezia eskatuko duten zenbait gauza aipatzea komeni da, lehen laburbildutako oinarrizko printzipioetatik haratago.
Irisgarritasunari dagokionez, modu iluna ez da erosoena, kontrastea orokorrean baxuagoa baita, eta horrek ez du irakurgarritasuna batere hobetzen.
Baina imajinatu ohera prestatzen ari zarela, benetan lo egin nahi duzula, baina loak hartu baino lehen, gogoratzen duzu norbaiti mezu super garrantzitsu bat bidali behar diozula, gau bat bera ere itxaron ezin duena. Telefonoa hartu, piztu eta AAAAAAH... zure iMessage-ren atzeko plano argiak esna mantenduko zaitu beste 3 orduz. Atzealde iluneko testu argia eskuragarriena ez den arren, bigarren honetan modu iluna edukitzea litzateke. erosotasuna milioi bat handitu. Erabiltzailea momentu honetan dagoen egoeraren araberakoa da dena.
Horregatik sinesten dugu modu ilun automatikoa hain ideia polita. Arratsaldean pizten da eta goizean itzaltzen da. Erabiltzaileak ez du zertan pentsatu ere egin behar, eta hori oso erosoa da. Twitterrek lan bikaina egin du modu iluneko ezarpenekin. Horrez gain, modu iluna eta are modu ilunagoa dute OLED pantaila guzti hauentzat, bateria eta harekin lotutako guztia aurreztuz. Kontuan izan behar da hemen: eman erabiltzaileari eskuz aldatzeko aukera nahi duenean: ez dago interfazea automatikoki aldatzea baino okerragorik atzera egiteko gaitasunik gabe.
Twitterrek modu ilun automatikoa du, arratsaldean pizten eta goizean itzaltzen dena.
Gainera, gai bat garatzerakoan, kontuan izan behar da gauza batzuk ezin direla ilun egin.
Hartu orrialdeak bezalako testu-editore bat. Interfazea ilun egin dezakezu, baina orria bera beti zuria izango da, benetako paper orri bat simulatuz.
Modu iluna gaituta duten orrialdeak
Gauza bera gertatzen da edukiak sortzeko editore mota guztiekin, hala nola Sketch edo Illustrator. Interfazea ilun egin daitekeen arren, lan egiten duzun taula zuria izango da lehenespenez.
Egin zirriborroa modu ilunean eta eduki oraindik taula zuri distiratsua.
Beraz, aplikazioa edozein dela ere, modu ilunak erabiltzen duzun sistema eragilean berez etorriko direla uste dugu, hau da, hobe da etorkizunerako prestatzea. iluna izango da.
Interfaze ilunak garatzeari buruz gehiago jakin nahi baduzu, ziurtatu jarraibideak begiratu dituzula , hau izan da artikulu honetarako gure informazio iturri nagusia.
Iturria: www.habr.com