Tai mitä pitää muistaa kehitettäessä tummaa tilaa sovellukselle tai verkkosivustolle
2018 osoitti, että tummat tilat ovat tulossa. Nyt kun olemme vuoden 2019 puolivälissä, voimme sanoa luottavaisin mielin: he ovat täällä, ja niitä on kaikkialla.
Aloitetaan siitä, että tumma tila ei ole uusi käsite. Se on ollut käytössä melko pitkään. Ja kerran, itse asiassa, pitkään aikaan, tämä oli ainoa asia, jota he käyttivät: näytöt olivat "vihreä-mustalla" -tyyppisiä, mutta vain siksi, että sisällä oleva luminoiva pinnoite säteili vihertävää hehkua altistuessaan säteilylle. .
Mutta jopa värinäyttöjen käyttöönoton jälkeen tumma tila oli edelleen olemassa. Miksi näin on?
On kaksi päämotiivia, jotka selittävät, miksi nykyään joka toisella on kiire lisätä hakemukseensa synkkä teema. Ensinnäkin: tietokoneita on kaikkialla. Kaikkialla, minne katsomme, on jonkinlainen näyttö. Käytämme mobiililaitteitamme aamusta myöhään iltaan. Tumman tilan läsnäolo vähentää silmien rasitusta, kun olet sängyssä ennen nukkumaanmenoa "viimeisen kerran" selaamalla sosiaalista syötettäsi. verkkoja. (Jos olet kuten minä, "viimeinen kerta" saattaa tarkoittaa 3 tunnin rullausta . Tumma tila? Kyllä kiitos! )
Toinen syy on uudet näyttötuotantotekniikat. Suuryritysten lippulaivamallit - Apple, Google, Samsung, Huawei - on kaikki varustettu OLED-näytöillä, jotka, toisin kuin LCD-näytöt, eivät vaadi taustavaloa. Ja se on todella hyvä uutinen akullesi. Kuvittele, että katselet puhelimessasi kuvaa mustasta neliöstä; LCD-näytöllä taustavalo valaisee koko näytön, vaikka suurin osa siitä on mustaa. Mutta kun katsot samaa kuvaa OLED-näytöllä, mustan neliön muodostavat pikselit yksinkertaisesti sammuvat. Tämä tarkoittaa, että ne eivät kuluta energiaa ollenkaan.
Tämäntyyppiset näytöt tekevät tummista tiloista paljon mielenkiintoisempia. Tumman käyttöliittymän avulla voit pidentää merkittävästi laitteesi akun käyttöikää. . Tummat tilat kulkevat tietysti käsi kädessä käyttöliittymämuutosten kanssa, joten päivitetään tietoamme!
Tummat tilat 101
Ensinnäkin: "tumma" ei ole sama kuin "musta". Älä yritä korvata valkoista taustaa mustalla, koska tämä tekee mahdottomaksi käyttää varjoja. Tällainen malli on erittäin tasainen (huonolla tavalla).
On tärkeää pitää mielessä varjostuksen/valaistuksen perusperiaatteet. Kohteiden, jotka ovat korkeammalla, tulisi olla vaaleampia varjossa, mikä simuloi todellista valaistusta ja varjostusta. Tämä helpottaa eri komponenttien ja niiden hierarkian erottamista toisistaan.
Kaksi identtistä harmaata ruutua varjolla, toinen 100 % mustalla taustalla, toinen #121212. Kun esine nousee, siitä tulee vaaleampi harmaan sävy.
Tummassa teemassa voit silti työskennellä tavallisella perusvärilläsi, kunhan kontrasti on ok. Selitetäänpä esimerkillä.
Tässä käyttöliittymässä päätoiminto on iso sininen painike alapalkissa. Kontrastin suhteen ei ole ongelmaa vaihdettaessa vaalean tai tumman tilan välillä, painike on edelleen katseenvangitsija, kuvake on selkeä ja kaiken kaikkiaan kaikki on kunnossa.
Kun samaa väriä käytetään eri tavoin, esimerkiksi tekstissä, syntyy ongelmia. Kokeile käyttää (paljon) vähemmän kylläistä päävärin sävyä tai etsi muita tapoja sisällyttää merkkivärejä käyttöliittymään.
Vasen: Punainen mustalla näyttää huonolta. Oikea: vähennä kylläisyyttä ja kaikki näyttää hyvältä. - n. käännös
Sama koskee kaikkia muita voimakkaita värejä, joita olet saattanut käyttää, kuten varoitus- tai virhevärejä. Google käyttää 40 % valkoista kerrosta oletusvirhevärin päällä kun vaihdat pimeään tilaan. Tämä on melko hyvä lähtökohta, koska se parantaa kontrastitasoja vastaamaan AA-standardeja. Voit tietysti aina muuttaa asetuksia parhaaksi katsomallasi tavalla, mutta muista tarkistaa kontrastitasot. Muuten, hyödyllinen työkalu tähän tarkoitukseen on Sketch-laajennus - , joka näyttää tarkalleen kuinka paljon kontrastia on kahden kerroksen välillä.
Entä teksti?
Täällä kaikki on yksinkertaista: mikään ei saa olla 100 % mustaa ja 100 % valkoista ja päinvastoin. Valkoinen heijastaa kaikkien aallonpituuksien valoaallot, musta absorboi. Jos asetat 100 % valkoista tekstiä 100 % mustalle taustalle, kirjaimet heijastavat valoa, tahriintuvat ja heikkenevät luettavista, mikä heikentää luettavuutta.
Sama koskee 100 % valkoista taustaa, joka heijastaa liian paljon valoa keskittyäkseen täysin sanoihin. Kokeile hieman pehmentää valkoista väriä, käytä taustana vaaleanharmaata ja mustalla taustalla olevaa tekstiä. Tämä vähentää silmien rasitusta ja ehkäisee
Tumma tila on täällä, eikä se poistu
Näyttöjen edessä viettämämme aika kasvaa jatkuvasti, ja joka päivä uusia näyttöjä ilmestyy elämäämme heräämisestämme nukahtamiseen. Tämä on melko uusi ilmiö, silmämme eivät ole vielä tottuneet tähän ruutuajan lisääntymiseen myöhään illalla. Tässä tumma tila tulee peliin. Kun tämä ominaisuus otettiin käyttöön macOS:ssä ja materiaalisuunnittelussa (ja todennäköisesti iOS:ssä), uskomme, että ennemmin tai myöhemmin siitä tulee oletusarvo kaikissa sovelluksissa, sekä mobiili- että pöytätietokoneissa. Ja tähän on parempi valmistautua!
Ainoa syy olla käyttämättä tummaa tilaa on, kun olet täysin 100 % varma, että sovellustasi käytetään vain kirkkaassa päivänvalossa. Tätä ei kuitenkaan tapahdu usein.
On syytä mainita muutama seikka, jotka vaativat erityistä huomiota pimeän tilan käyttöönotossa aiemmin tiivistettyjen perusperiaatteiden lisäksi.
Tumma tila ei ole saavutettavuuden kannalta kätevin, koska kontrasti on yleensä pienempi, mikä puolestaan ei paranna luettavuutta ollenkaan.
Mutta kuvittele, että valmistaudut nukkumaan, haluat todella nukkua, mutta juuri ennen nukahtamista muistat, että sinun on lähetettävä jollekin erittäin tärkeä viesti, joka ei voi odottaa edes yhtä yötä. Tartut puhelimeen, käynnistät sen ja AAAAAAH... iMessagen vaalea tausta pitää sinut hereillä vielä 3 tuntia. Vaikka vaaleaa tekstiä tummalla taustalla ei pidetä helpoimmin saatavilla, tumma tila tällä sekunnilla lisää käyttömukavuutta miljoonalla. Kaikki riippuu tilanteesta, jossa käyttäjä on tällä hetkellä.
Siksi ajattelemme automaattinen tumma tila niin hieno idea. Se syttyy illalla ja sammuu aamulla. Käyttäjän ei tarvitse edes ajatella sitä, mikä on erittäin kätevää. Twitter on tehnyt hienoa työtä pimeän tilan asetuksilla. Lisäksi niillä on sekä vain tumma tila että vielä tummempi tila kaikille näille OLED-näytöille, mikä säästää akkua ja kaikkea siihen liittyvää. Tässä on tärkeää huomata: anna käyttäjälle mahdollisuus vaihtaa manuaalisesti milloin tahansa: ei ole mitään pahempaa kuin käyttöliittymän automaattinen vaihtaminen ilman mahdollisuutta vaihtaa takaisin.
Twitterissä on automaattinen tumma tila, joka käynnistyy illalla ja sammuu aamulla.
Teemaa kehitettäessä kannattaa myös pitää mielessä, että joitain asioita ei yksinkertaisesti voi tehdä pimeäksi.
Ota tekstieditori, kuten Pages. Voit tehdä käyttöliittymästä tumman, mutta itse arkki on aina valkoinen, mikä simuloi todellista paperiarkkia.
Sivut, joissa tumma tila on käytössä
Sama koskee kaikentyyppisiä sisällönluontieditoreja, kuten Sketch tai Illustrator. Vaikka käyttöliittymä voidaan tehdä tummaksi, työskennellyt piirrostaulu on oletuksena aina valkoinen.
Luonnostele pimeässä tilassa ja silti kirkkaan valkoinen piirrostaulu.
Joten sovelluksesta riippumatta uskomme, että tummat tilat tulevat käyttämään käyttämääsi käyttöjärjestelmää, mikä tarkoittaa, että on parasta valmistautua tulevaisuuteen. tulee pimeää.
Jos haluat oppia lisää tummien käyttöliittymien kehittämisestä, muista tutustua ohjeisiin , tämä oli tämän artikkelin tärkein tietolähde.
Lähde: will.com