Eller hvad du skal huske på, når du udvikler en mørk tilstand til en applikation eller et websted
2018 viste, at mørke tilstande er på vej. Nu hvor vi er halvvejs gennem 2019, kan vi med selvtillid sige: de er her, og de er overalt.
Lad os starte med det faktum, at mørk tilstand slet ikke er et nyt koncept. Den har været brugt i ret lang tid. Og engang, faktisk i lang tid, var dette det eneste, de brugte: skærme var af sorten "grøn-på-sort", men kun fordi den selvlysende belægning indeni udsendte en grønlig glød, når de blev udsat for stråling .
Men selv efter introduktionen af farveskærme fortsatte mørk tilstand med at eksistere. Hvorfor er det sådan?
Der er to hovedmotiver, der forklarer, hvorfor hver anden person i dag har travlt med at tilføje et mørkt tema til deres ansøgning. Først og fremmest: computere er overalt. Overalt hvor vi kigger hen, er der en slags skærm. Vi bruger vores mobile enheder fra morgen til sent om aftenen. Tilstedeværelsen af en mørk tilstand reducerer anstrengelser for øjnene, når du er i seng, før du går i seng for "sidste gang" og scroller gennem dit sociale feed. netværk. (Hvis du er ligesom mig, kan "sidste gang" betyde en 3-timers rulle . Mørk tilstand? Ja tak! )
En anden grund er nye skærmproduktionsteknologier. Flagskibsmodeller fra store virksomheder - Apple, Google, Samsung, Huawei - er alle udstyret med OLED-skærme, som i modsætning til LCD-skærme ikke kræver baggrundsbelysning. Og det er rigtig gode nyheder for dit batteri. Forestil dig, at du ser et billede af en sort firkant på din telefon; med en LCD vil baggrundsbelysningen oplyse hele skærmen, selvom det meste er sort. Men når man ser det samme billede på en OLED-skærm, bliver de pixels, der udgør den sorte firkant, simpelthen slået fra. Det betyder, at de slet ikke forbruger energi.
Disse typer skærme gør mørke tilstande meget mere interessante. Ved at bruge en mørk grænseflade kan du forlænge batteriets levetid betydeligt på din enhed. . Mørke tilstande går selvfølgelig hånd i hånd med ændringer i brugergrænsefladen, så lad os friske op på vores viden!
Mørke tilstande 101
Først og fremmest: "mørk" er ikke det samme som "sort". Forsøg ikke at erstatte en hvid baggrund med en sort, da dette vil gøre det umuligt at bruge skygger. Et design som dette vil være super fladt (på en dårlig måde).
Det er vigtigt at huske på de grundlæggende principper for skygge/belysning. Objekter, der er mere forhøjede, bør være lysere i skyggen, hvilket simulerer virkelig belysning og skygge. Dette gør det lettere at skelne mellem de forskellige komponenter og deres hierarki.
To identiske grå firkanter med en skygge, den ene på en 100 % sort baggrund, den anden på #121212. Når objektet rejser sig, bliver det en lysere grå nuance.
I et mørkt tema kan du stadig arbejde med din almindelige grundfarve, så længe kontrasten er ok. Lad os forklare med et eksempel.
I denne grænseflade er hovedhandlingen den store blå knap i den nederste bjælke. Der er intet problem med hensyn til kontrast, når der skiftes mellem lys eller mørk tilstand, knappen er stadig iøjnefaldende, ikonet er tydeligt, og alt i alt er alt i orden.
Når den samme farve bruges på forskellige måder, for eksempel i tekst, vil der være problemer. Prøv at bruge en (meget) mindre mættet nuance af hovedfarven, eller se efter andre måder at inkorporere mærkefarver i grænsefladen.
Til venstre: Rødt på sort ser dårligt ud. Til højre: Reducer mætningen, og alt ser godt ud. — ca. oversættelse
Det samme gælder for alle andre stærke farver, du måtte have brugt, såsom advarsels- eller fejlfarver. Google bruger et 40 % hvidt lag overlejring oven på standardfejlfarven i deres når du skifter til mørk tilstand. Dette er et ret godt udgangspunkt, da det vil forbedre kontrastniveauerne for at matche AA-standarderne. Du kan selvfølgelig altid ændre indstillingerne, som det passer dig, men sørg for at tjekke kontrastniveauerne. Forresten, et nyttigt værktøj til dette formål er Sketch plugin - , som viser præcis hvor stor kontrast der er mellem 2 lag.
Hvad med teksten?
Alt er enkelt her: intet skal være 100 % sort og 100 % hvidt og omvendt. Hvid reflekterer lysbølger af alle bølgelængder, sort absorberer. Hvis du placerer 100 % hvid tekst på en 100 % sort baggrund, vil bogstaverne reflektere lys, udtvære og blive mindre læselige, hvilket vil påvirke læsbarheden negativt.
Det samme gælder for en 100% hvid baggrund, som reflekterer for meget lys til fuldt ud at fokusere på ordene. Prøv at blødgøre den hvide farve lidt, brug lysegrå til baggrunde og tekst på sort baggrund. Dette vil reducere øjenbelastning, forebygge
Mørk tilstand er her og vil ikke forsvinde
Mængden af tid, vi bruger foran skærme, vokser konstant, og hver ny dag dukker der nye skærme op i vores liv, fra vi vågner til vi falder i søvn. Dette er et ret nyt fænomen; vores øjne er endnu ikke vant til denne stigning i skærmtid sent på aftenen. Det er her mørk tilstand kommer i spil. Med introduktionen af denne funktion i macOS og Material Design (og højst sandsynligt i iOS), tror vi, at den før eller siden vil blive standard i alle applikationer, både mobil og desktop. Og det er bedre at være forberedt på dette!
Den eneste grund til ikke at implementere mørk tilstand er, når du er absolut 100 % sikker på, at din applikation udelukkende bruges i stærkt dagslys. Dette sker dog ikke ofte.
Det er værd at nævne et par ting, der vil kræve særlig opmærksomhed, når du implementerer mørk tilstand, ud over de grundlæggende principper, der er opsummeret tidligere.
Med hensyn til tilgængelighed er mørk tilstand ikke den mest bekvemme, da kontrasten generelt er lavere, hvilket igen ikke forbedrer læsbarheden overhovedet.
Men forestil dig, at du gør dig klar til at sove, du vil rigtig gerne sove, men lige inden du falder i søvn, husker du, at du skal sende en super vigtig besked til nogen, som ikke kan vente en enkelt nat. Du tager fat i din telefon, tænder den og AAAAAAH... den lyse baggrund i din iMessage holder dig vågen i yderligere 3 timer. Selvom lys tekst på en mørk baggrund ikke anses for at være den mest tilgængelige, ville det at have en mørk tilstand lige i dette sekund. øge bekvemmeligheden med en million. Det hele afhænger af den situation, som brugeren befinder sig i i øjeblikket.
Det er derfor, vi tror automatisk mørk tilstand sådan en fed idé. Den tænder om aftenen og slukker om morgenen. Brugeren behøver ikke engang at tænke over det, hvilket er meget praktisk. Twitter har gjort et godt stykke arbejde med sine mørke tilstandsindstillinger. Derudover har de både bare en mørk tilstand og en endnu mørkere tilstand til alle disse OLED-skærme, hvilket sparer batteri og alt dertil hører. Det er vigtigt at bemærke her: Giv brugeren mulighed for at skifte manuelt, når han vil: der er intet værre end automatisk at ændre grænsefladen uden mulighed for at skifte tilbage.
Twitter har en automatisk mørk tilstand, der tænder om aftenen og slukker om morgenen.
Når du udvikler et tema, er det også værd at huske på, at nogle ting simpelthen ikke kan gøres mørke.
Tag en teksteditor som Pages. Du kan gøre grænsefladen mørk, men selve arket vil altid være hvidt, hvilket simulerer et rigtigt ark papir.
Sider med mørk tilstand aktiveret
Det samme gælder for alle typer editorer til oprettelse af indhold, såsom Sketch eller Illustrator. Selvom grænsefladen kan gøres mørk, vil tegnebrættet, du arbejder med, altid være hvidt som standard.
Skitser i mørk tilstand og har stadig et lyst hvidt tegnebræt.
Så uanset appen, tror vi, at mørke tilstande kommer ind i det operativsystem, du bruger, hvilket betyder, at det er bedst at forberede sig på fremtiden. det bliver mørkt.
Hvis du vil lære mere om udvikling af mørke brugergrænseflader, skal du sørge for at tjekke retningslinjerne , dette var vores vigtigste informationskilde til denne artikel.
Kilde: www.habr.com