Eller hva du bør huske på når du utvikler en mørk modus for en applikasjon eller et nettsted
2018 viste at mørke moduser er på vei. Nå som vi er halvveis i 2019, kan vi med selvtillit si: de er her, og de er overalt.
La oss starte med det faktum at mørk modus slett ikke er et nytt konsept. Den har vært brukt ganske lenge. Og en gang i tiden, faktisk i lang tid, var dette det eneste de brukte: skjermer var av sorten "grønn-på-svart", men bare fordi det selvlysende belegget på innsiden avga en grønnaktig glød når de ble utsatt for stråling .
Men selv etter introduksjonen av fargeskjermer, fortsatte mørk modus å eksistere. Hvorfor er det slik?
Det er to hovedmotiver som forklarer hvorfor annenhver person i dag har det travelt med å legge til et mørkt tema i søknaden sin. Først av alt: datamaskiner er overalt. Overalt hvor vi ser er det en slags skjerm. Vi bruker våre mobile enheter fra morgen til sent på kveld. Tilstedeværelsen av en mørk modus reduserer belastningen på øynene når du er i seng før du går til sengs for "siste gang" når du blar gjennom den sosiale feeden din. nettverk. (Hvis du er som meg, kan "siste gang" bety en 3-timers rulling . Mørk modus? Ja takk! )
En annen grunn er ny teknologi for skjermproduksjon. Flaggskipmodeller av store selskaper - Apple, Google, Samsung, Huawei - er alle utstyrt med OLED-skjermer, som i motsetning til LCD-skjermer ikke krever bakgrunnsbelysning. Og det er virkelig gode nyheter for batteriet ditt. Tenk deg at du ser på et bilde av en svart firkant på telefonen din; med en LCD vil bakgrunnsbelysningen lyse opp hele skjermen selv om det meste er svart. Men når du ser på det samme bildet på en OLED-skjerm, blir pikslene som utgjør den svarte firkanten ganske enkelt slått av. Dette betyr at de ikke bruker energi i det hele tatt.
Disse typer skjermer gjør mørke moduser mye mer interessante. Ved å bruke et mørkt grensesnitt kan du forlenge batterilevetiden til enheten din betraktelig. . Mørke moduser går selvfølgelig hånd i hånd med UI-endringer, så la oss friske opp kunnskapen vår!
Mørke moduser 101
Først av alt: "mørk" er ikke det samme som "svart". Ikke prøv å erstatte en hvit bakgrunn med en svart, da dette vil gjøre det umulig å bruke skygger. Et design som dette vil være superflat (på en dårlig måte).
Det er viktig å huske på de grunnleggende prinsippene for skyggelegging/belysning. Objekter som er mer forhøyet bør være lysere i skyggen, og simulere virkelig belysning og skyggelegging. Dette gjør det lettere å skille mellom de ulike komponentene og deres hierarki.
To identiske grå firkanter med en skygge, en på 100 % svart bakgrunn, den andre på #121212. Når objektet stiger, blir det en lysere gråtone.
I et mørkt tema kan du fortsatt jobbe med din vanlige grunnfarge så lenge kontrasten er ok. La oss forklare med et eksempel.
I dette grensesnittet er hovedhandlingen den store blå knappen i bunnlinjen. Det er ikke noe problem når det gjelder kontrast når du bytter mellom lys eller mørk modus, knappen er fortsatt iøynefallende, ikonet er tydelig, og alt er i orden.
Når samme farge brukes på ulike måter, for eksempel i tekst, vil det oppstå problemer. Prøv å bruke en (mye) mindre mettet nyanse av hovedfargen, eller se etter andre måter å innlemme merkefarger i grensesnittet.
Venstre: Rødt på svart ser dårlig ut. Høyre: reduser metningen og alt ser bra ut. — ca. oversettelse
Det samme gjelder for andre sterke farger du kan ha brukt, for eksempel advarsels- eller feilfarger. Google bruker et 40 % hvitt lag overlegg på toppen av standard feilfarge i deres når du bytter til mørk modus. Dette er et ganske godt utgangspunkt da det vil forbedre kontrastnivåene for å matche AA-standarder. Du kan selvfølgelig alltid endre innstillingene slik du vil, men sørg for å sjekke kontrastnivåene. Forresten, et nyttig verktøy for dette formålet er Sketch-plugin - , som viser nøyaktig hvor mye kontrast det er mellom 2 lag.
Hva med teksten?
Alt er enkelt her: ingenting skal være 100 % svart og 100 % hvitt og omvendt. Hvitt reflekterer lysbølger av alle bølgelengder, svart absorberer. Hvis du plasserer 100 % hvit tekst på en 100 % svart bakgrunn, vil bokstavene reflektere lys, smøre ut og bli mindre leselige, noe som vil påvirke lesbarheten negativt.
Det samme gjelder en 100 % hvit bakgrunn, som reflekterer for mye lys til å fokusere fullt ut på ordene. Prøv å myke opp den hvite fargen litt, bruk lysegrå for bakgrunner og tekst på svart bakgrunn. Dette vil redusere belastningen på øynene, forebygge
Mørk modus er her og vil ikke forsvinne
Tiden vi bruker foran skjermer vokser stadig, og hver ny dag dukker det opp nye skjermer i livene våre, fra vi våkner til vi sovner. Dette er et ganske nytt fenomen; øynene våre er ennå ikke vant til denne økningen i skjermtid sent på kvelden. Det er her mørk modus kommer inn i bildet. Med introduksjonen av denne funksjonen i macOS og Material Design (og mest sannsynlig i iOS), tror vi at den før eller siden vil bli standard i alle applikasjoner, både mobil og desktop. Og det er bedre å være forberedt på dette!
Den eneste grunnen til å ikke implementere mørk modus er når du er helt 100 % sikker på at applikasjonen din utelukkende brukes i sterkt dagslys. Dette skjer imidlertid ikke ofte.
Det er verdt å nevne noen få ting som vil kreve spesiell oppmerksomhet når du implementerer mørk modus, utover de grunnleggende prinsippene som er oppsummert tidligere.
Når det gjelder tilgjengelighet, er ikke mørk modus den mest praktiske, siden kontrasten generelt er lavere, noe som igjen ikke forbedrer lesbarheten i det hele tatt.
Men forestill deg at du gjør deg klar til å legge deg, du vil virkelig sove, men rett før du sovner, husker du at du må sende noen en superviktig melding som ikke kan vente en natt. Du tar tak i telefonen, slår den på og AAAAAAH... den lyse bakgrunnen til iMessage vil holde deg våken i ytterligere 3 timer. Mens lys tekst på en mørk bakgrunn ikke anses som den mest tilgjengelige, ville det å ha en mørk modus akkurat dette sekundet øke bekvemmeligheten med en million. Alt avhenger av situasjonen brukeren er i for øyeblikket.
Det er derfor vi tenker automatisk mørk modus så kul idé. Den slår seg på om kvelden og slår seg av om morgenen. Brukeren trenger ikke engang tenke på det, noe som er veldig praktisk. Twitter har gjort en god jobb med mørkemodusinnstillingene. I tillegg har de både bare en mørk modus og en enda mørkere modus for alle disse OLED-skjermene, sparer batteri og alt relatert til det. Det er viktig å merke seg her: gi brukeren muligheten til å bytte manuelt når han vil: det er ingenting verre enn å automatisk endre grensesnittet uten muligheten til å bytte tilbake.
Twitter har en automatisk mørk modus som slår seg på om kvelden og slår seg av om morgenen.
Når du utvikler et tema, er det også verdt å huske på at noen ting ganske enkelt ikke kan gjøres mørke.
Ta en tekstredigerer som Pages. Du kan gjøre grensesnittet mørkt, men selve arket vil alltid være hvitt, og simulerer et ekte papirark.
Sider med mørk modus aktivert
Det samme gjelder for alle typer redaktører for innholdsskaping, for eksempel Sketch eller Illustrator. Selv om grensesnittet kan gjøres mørkt, vil tegnebrettet du jobber med alltid være hvitt som standard.
Skisser i mørk modus og ha fortsatt en lys hvit tegnebrett.
Så uavhengig av appen, tror vi mørke moduser kommer til operativsystemet du bruker, noe som betyr at det er best å forberede seg på fremtiden. det blir mørkt.
Hvis du vil lære mer om å utvikle mørke brukergrensesnitt, sørg for å sjekke ut retningslinjene , dette var vår viktigste informasjonskilde for denne artikkelen.
Kilde: www.habr.com