Või mida tuleks arvesse võtta rakenduse või veebisaidi tumeda režiimi arendamisel
2018. aastal selgus: tumedad režiimid on teel. Nüüd, kui oleme 2019. aastasse juba poole peal, saame kindlalt öelda: nad on siin ja nad on igal pool.
Alustame sellest, et tume režiim ei ole sugugi uus kontseptsioon. Seda on juba pikka aega kasutatud. Kui arvestada, siis kasutati kunagi ainult seda: monitorid olid «rohelise ja musta» tüüpi, kuid ainult seetõttu, et sisemine luminofoorlamp kiirgab rohelise valguse mõju all.
Kuid isegi pärast värviliste monitoride käivitamist tume režiim püsis. Miks see nii on?
On kaks peamist põhjust, miks tänapäeval iga teine inimene kiirustab oma rakendusse tumeda teema lisamisega. Esiteks: arvutid on igal pool. Kuhu iganes me vaatame, on seal mõni ekraan. Kasutame meie mobiilseadmeid hommikul ja hilisõhtuni. Tumeda režiimi olemasolu vähendab silmade koormust, kui te voodis enne magamaminekut „viimast korda” sirvite sotsiaalmeedia uudisvoogu. (Kui te olete nagu mina, siis „viimane kord” võib tähendada 3-tunnist kerimist. . Tumeda režiimi? Jah, palun! )
Veel üks põhjus on uued ekraanitehnoloogiad. Suurettevõtete lipulaevmudelid — Apple, Google, Samsung, Huawei — on kõik varustatud OLED-ekraanidega, mis erinevalt LCD-ekraanidest ei vaja taustvalgustust. Ja see on tõeliselt hea uudis teie aku jaoks. Kujutage ette, et vaatate musta ruudu pilti oma telefonis; LCD-ekraaniga valgustab taustvalgustus kogu ekraani, kuigi enamik sellest on must. Kuid sama pildi vaatamisel OLED-ekraanil lihtsalt lülitatakse need pikslid, millest must ruut koosneb, välja. Seega ei tarbi need üldse energiat.
Need display types that make dark modes much more interesting. By using a dark interface, you can significantly extend the battery life of your device. Dark modes go hand in hand with UI changes, so let's refresh our knowledge!
Dark Modes 101
First of all: 'dark' does not equal 'black'. Don't try to replace a white background with black, as it will make shadows impossible to use. Such a design will be super flat (in a bad way).
It's important to keep basic shading/lighting principles in mind. Objects that are more elevated should be lighter in shadow, mimicking real lighting and shading. This makes it easier to distinguish between different components and their hierarchy.
Two equally gray squares with shadow: one on a 100% black background, the other on #121212. When elevated, the object takes on a lighter shade of gray.
In a dark theme, you can still work with your usual primary color if the contrast is okay. Let's explain with an example.
Selles liideses on peamine tegevus suur sinine nupp alumisel paneelil. Heledalt tumedale režiimile üleminekul ei ole kontrasti osas probleeme, nupp tõmbab jätkuvalt tähelepanu, ikoon on selge ja kõik on suurepärane.
Kui sama värvi kasutatakse erinevates kontekstides, näiteks tekstis, võivad tekkida probleemid. Proovige kasutada (oluliselt) vähem küllastunud põhivärvi tooni või leidke teisi viise brändivärvide integreerimiseks liidesesse.
Vasakul: punane musta peal paistab halvasti. Paremal: vähendame küllastust — ja kõik muutub heaks. — tõlkija märkus.
Sama kehtib ka kõikide teiste küllastunud värvide kohta, mida võisite kasutada, nagu näiteks hoiatuse või veateated. Google kasutab oma 'Material Design' juhistes vaiketõrkede värvi peal 40% valge kihi ülekannet. tumed režiimi sisselülitamisel. See on üsna hea alguspunkt, kuna see parandab kontrastsuse taset, et see vastaks AA-standarditele. Loomulikult võite alati seadeid oma maitse järgi kohandada, kuid ärge unustage kontrollida kontrastsuse taset. Muide, kasulik tööriist selle jaoks on Sketchi plugin — , mis näitab täpselt, kui palju kontrasti on kahe kihi vahel.
Aga kuidas tekstiga on?
Siin on kõik lihtne: mitte miski ei tohiks olla 100% must 100% valgel ega vastupidi. Valge peegeldab valguslainete kõiki pikkusi, must neelab neid. Kui panna 100% valge tekst 100% mustale taustale, peegeldavad tähed valgust, hajuvad ja muutuvad vähem loetavaks, mis mõjutab negatiivselt lugemise mugavust.
Sama kehtib ka 100% valge tausta kohta, mis peegeldab liiga palju valgust, et sõnades täiesti keskenduda. Proovige veidi pehmendada valget värvi, kasutage musta tausta jaoks helehallit või tekste. See vähendab silmade koormust ja ennetab
Tumedat režiimi siit ei kavatseta eemaldada
Ekraanide ees veedetud aeg kasvab pidevalt, iga uus päev toob meie ellu uusi ekraane, alates ärkamisest kuni uneeni. See on suhteliselt uus nähtus, meie silmad pole veel harjunud selle õhtul ekraani ees veedetud aja suurenemisega. Siin tulebki mängu tume režiim. Pärast selle funktsiooni sisseviimist macOS-is ja Material Design-is (ja tõenäoliselt ka iOS-is) usume, et varem või hiljem muutub see kõigis rakendustes, nii mobiilsetes kui ka lauaarvutites, vaikeseadeks. Ja on parem selleks valmis olla!
Ainus põhjus, miks tumedat režiimi mitte rakendada, on see, et olete 100% kindel, et teie rakendust kasutatakse ainult ere päevavalguses. Selle olukorraga aga ei juhtu just sageli.
Tasub mainida mitmeid asju, mis nõuavad erilist tähelepanu, kui rakendate tumedat režiimi, lisaks varasemalt kokkuvõtvatele põhimõtetele.
Saavutatavuse seisukohalt ei ole tume režiim kõige mugavam, kuna kontrast on üldiselt madalam, mis omakorda ei paranda lugemisvõimet.
Kuid kujutage ette, et olete vähkimas, tahate väga magada, kuid just enne uinumist meenub teile, et peate saatma kellelegi üliolulise sõnumi, mis ei saa oodata isegi ööd. Te võtate oma telefoni, lülitate selle sisse ja AAAAAAA… hele iMessage'i taust ei lase teil magama jääda veel 3 tundi. Kuigi heledat teksti tumedal taustal ei peeta maksimaalselt kergesti loetavaks, suurendaks tumeda režiimi olemasolu just praegu mugavust miljoni võrra. Kõik sõltub olukorrast, milles kasutaja sel hetkel viibib.
Seetõttu usume automaatsesse tumedasse režiimi nii äge idee. See lülitub sisse õhtul ja välja hommikul. Kasutaja ei pea selle üle isegi mõtlema, mis on väga mugav. Twitter on teinud suurepärast tööd tumeda režiimi seadistustega. Neil on lisaks lihtsalt tumedale režiimile ka veel tumedam režiim, mis sobib OLED-ekraanide jaoks, säästes akut ja kõike, mis sellega seotud. Siin on oluline märkida: andke kasutajale võimalus manuaalselt vahetada, kui ta seda soovib: pole midagi hullemat kui automaatne kasutajaliidese muutmine ilma võimaluseta tagasi vahetada.
Twitteril on automaatne tume režiim, mis lülitub sisse õhtul ja välja hommikul.
Samuti teemat arendades tasub silmas pidada, et mõned asjad lihtsalt ei saa olla tumedad.
Võtame näiteks tekstiredaktori, näiteks Pages. Kasutajaliides võib olla tume, kuid leht ise on alati valge, jäljendades reaalset paberilehte.
Pages tumeda režiimiga
Sama kehtib kõigi sisukirjutamise redaktorite, näiteks Sketch või Illustrator, kohta. Kuigi kasutajaliidese võib teha tumedaks, on montaaži paneel, millega töötate, alati vaikimisi valge.
Sketch tumed režiimis ja endiselt särav valge redigeerimispaneel.
Seetõttu usume, et tumedad režiimid saavad olema natiivsed teie kasutatava operatsioonisüsteemi jaoks, mistõttu on parem valmistuda tuleviku jaoks. see saab olema tumedam.
Kui soovite rohkem teada saada tumedate liideste arendamisest, tutvuge kindlasti suunanäidikutega. see oli meie peamine teabeallikas selle artikli jaoks.
Allikas: habr.com
