Mørke tider kommer

Eller hva du bør huske på når du utvikler mørk modus for applikasjonen eller nettsiden din

2018 viste: mørke moduser er på vei. Nå, når vi er midt i 2019, kan vi med sikkerhet si: de er her, og de er overalt.

Eksempel på en gammel skjerm med «grønt på svart»

La oss begynne med at mørk modus absolutt ikke er et nytt konsept. Det har vært brukt en stund nå. En gang var det faktisk nesten det eneste vi brukte: skjermer var av typen «grønt på svart», bare fordi det fosforbehandlede laget inne ga et grønnaktig lys når det ble utsatt for stråling.

Men selv etter innføringen av farge skjermer fortsatte mørk modus å eksistere. Hvorfor er det slik?

Det er to hovedgrunner som forklarer hvorfor så mange nå haster med å legge til mørkt tema i sine applikasjoner. Først og fremst: datamaskiner er overalt. Uansett hvor vi ser, er det en skjerm et sted. Vi bruker mobilene våre fra morgen til sen kveld. Mørk modus reduserer belastningen på øynene når du ligger i sengen og «ser på» sosiale medier for «siste gang» før du legger deg. (Hvis du er som meg, kan «siste gang» bety tre timer med scrolling. R/EngineeringPorn. Mørk modus? Ja, absolutt! )

En annen grunn er nye teknologier for produksjon av skjermer. Flag Ship-modellene til store selskaper - Apple, Google, Samsung, Huawei - er alle utstyrt med OLED-skjermer som, i motsetning til LCD-skjermer, ikke krever bakgrunnsbelysning. Og dette 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-skjerm vil bakgrunnsbelysningen lyse opp hele skjermen, selv om en stor del er svart. Men når du ser på det samme bildet på en OLED-skjerm, slås pikslene som utgjør den svarte firkanten av. Og det betyr at de ikke forbruker energi.

Disse typer skjermer gjør mørke moduser mye mer interessante. Ved å bruke et mørkt grensesnitt kan du betydelig forlenge batterilevetiden til enheten din. Sjekk fakta og tall fra Android Dev-symposiet i november i fjor for å forsikre deg selv. Mørke moduser går selvfølgelig hånd i hånd med endringer i UI, så la oss friske opp kunnskapene våre!

Mørke moduser 101

Først og fremst: «mørk» er ikke lik «svart». Ikke prøv å bytte ut den hvite bakgrunnen med svart, da dette vil gjøre det umulig å bruke skygger. Et slikt design vil bli superflatt (på en dårlig måte).

Det er viktig å ha de grunnleggende prinsippene for skyggelegging/lyssetting i tankene. Gjenstander som er hevet, bør være lysere i skyggen, og imitere ekte belysning og skyggelegging. Dette gjør det lettere å skille mellom ulike komponenter og deres hierarki.

To identiske grå firkanter med skygge, den ene på 100% svart bakgrunn, den andre på #121212. Når objektet heves, får det en lysere nyanse av grått.

I et mørkt tema kan du fortsatt bruke din vanlige hovedfarge, så lenge kontrasten er i orden. La oss forklare med et eksempel.

I dette grensesnittet er den primære handlingen en stor blå knapp på den nederste panelet. Det er ikke noe problem med kontrasten når du bytter mellom lyst eller mørkt modus, knappen tiltrekker fortsatt oppmerksomhet, ikonet er klart, alt er generelt bra.

Når den samme fargen brukes på forskjellige 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 å inkludere merkevarens farger i grensesnittet.

Til venstre: rødt på svart ser dårlig ut. Til høyre: ved å redusere metningen — blir alt bra. — anm. overs.

Det samme gjelder for alle andre mettet farger du måtte ha brukt, for eksempel advarsels- eller feilkfarger. Google bruker et 40% hvitt lag over defekte feilkfarger i sine retningslinjer for Material Design når du bytter til mørk modus. Dette er en ganske god utgangspunkt, da det vil forbedre kontrastnivåene til å møte AA-standarder. Du kan selvsagt alltid endre innstillingene etter eget ønske, men husk å sjekke kontrastnivåene. Forresten, et nyttig verktøy for dette formålet er en plugin for Sketch — Stark, som nøyaktig viser hvor mye kontrast det er mellom 2 lag.

Hvordan er det med teksten?

Her er det enkelt: ingenting skal være 100% svart på 100% hvit og omvendt. Hvit reflekterer lysbølger av alle lengder, svart absorberer. Hvis du plasserer 100% hvit tekst på 100% svart bakgrunn, vil bokstavene reflektere lyset, smuldre og bli mindre behagelige å lese, noe som negativt påvirker lesbarheten.

Det samme gjelder for 100% hvit bakgrunn, som reflekterer for mye lys til å kunne konsentrere seg fullt om ordene. Prøv å dempe den hvite fargen litt, bruk lysegrått for bakgrunner og tekst på svarte bakgrunner. Dette vil redusere belastningen på øynene og forhindre deres overbelastning.

Mørk modus er her for å bli.

Tiden vi tilbringer foran skjermer øker kontinuerlig, og hver ny dag kommer nye skjermer inn i livene våre, fra vi våkner til vi legger oss. Dette er et ganske nytt fenomen, øynene våre er fremdeles ikke vant med den økte skjermtiden sent på kvelden. Her kommer mørk modus inn. Etter innføringen av denne funksjonen i macOS og Material Design (og antakelig i iOS) tror vi at den før eller senere vil bli standard i alle apper, både mobile og desktop. Og det er best å være forberedt!

Den eneste grunnen til ikke å implementere mørk modus er når du er 100% sikker på at appen din bare brukes i sterkt dagslys. Dette skjer imidlertid sjelden.

Det er flere ting som bør nevnes og krever spesiell oppmerksomhet ved implementering av mørk modus, i tillegg til de grunnleggende prinsippene oppsummert tidligere.

Sett fra et tilgjengelighetsperspektiv, er mørk modus ikke den mest brukervennlige, ettersom kontrasten generelt er lavere, noe som ikke forbedrer lesbarheten.

Kilde

Men tenk deg at du forbereder deg på å sove, du er veldig trøtt, men rett før du sovner husker du at du må sende en superviktig melding til noen som ikke kan vente selv en natt. Du tar telefonen din, slår den på, og ÅÅÅÅÅ… den lyse bakgrunnen til iMessage vil hindre deg i å sove i minst tre timer. Mens lys tekst på mørk bakgrunn ikke vurderes som maksimalt tilgjengelig, ville tilstedeværelsen av mørk modus i dette øyeblikket ha økt komforten med millioner. Alt avhenger av situasjonen brukeren befinner seg i.

Derfor mener vi automatisk mørk modus er en så kul idé. Den slås på om kvelden og av om morgenen. Brukeren trenger ikke engang å tenke på det, noe som er veldig praktisk. Twitter har gjort en fantastisk jobb med innstillingene for mørk modus. I tillegg har de både en enkel mørk modus og en enda mørkere modus for alle OLED-skjermer, batterisparing og alt det innebærer. Det er viktig å merke seg: Gi brukeren muligheten til å vekselvis skifte til manuell kontroll, når han ønsker det: det finnes ikke noe verre enn automatisk endring av grensesnittet uten mulighet til å bytte tilbake.

Twitter har en automatisk mørk modus som slås på om kvelden og av om morgenen.

Når man utvikler temaet, bør man også huske at noen ting rett og slett ikke kan være mørke.

Ta for eksempel en tekstbehandler, som Pages. Man kan gjøre grensesnittet mørkt, men selve siden vil alltid være hvit, som imiterer et ekte ark papir.

Pages med mørk modus aktivert

Det samme gjelder alle typer innholdsredigeringsprogrammer, som Sketch eller Illustrator. Selv om grensesnittet kan gjøres mørkt, vil arbeidsflaten alltid være hvit som standard.

Sketch i mørk modus og fortsatt lys hvit arbeidsflate.

Derfor, uavhengig av applikasjonen, mener vi at mørke moduser vil bli innfødte i operativsystemet du bruker, og derfor er det best å forberede seg på fremtiden, det vil være mørkt. 

Hvis du vil vite mer om utvikling av mørke grensesnitt, sjekk ut retningslinjene Material Design, dette var vår hovedkilde til informasjon for denne artikkelen.

Kilde: habr.com