Eller hvad man skal huske på, når man udvikler en mørk tilstand for en applikation eller et website
2018 viste: Mørke tilstande er på vej. Nu hvor vi er halvvejs ind i 2019, kan vi med sikkerhed sige: de er her, og de er overalt.
Lad os starte med, at mørk tilstand ikke er et nyt koncept. Det har været brugt i lang tid. Faktisk, tidligere anvendte man kun den; monitorer var af typen 'grøn-på-sort', blot fordi det luminiscente belægning indeni udsendte et grønt lys, når det blev påvirket af stråling.
Men selv efter introduktionen af farvemonitorer fortsatte den mørke tilstand med at eksistere. Hvorfor er det mon?
Der er to grundlæggende grunde til, at hver anden person i dag haster med at tilføje en mørk tema til deres applikation. Først og fremmest: computere er overalt. Uanset hvor vi kigger, er der en skærm. Vi bruger vores mobile enheder fra morgen til sen aften. At have en mørk tilstand reducerer belastningen på øjnene, når du i sengen ‘sidste gang’ scroller gennem din sociale medie-feed. (Hvis du er som mig, kan ‘sidste gang’ betyde tre timers scroll.) . Mørk tilstand? Ja, selvfølgelig!
En anden grund er de nye teknologier til produktion af skærme. Flagships fra store virksomheder - Apple, Google, Samsung, Huawei - leveres alle med OLED-skærme, som, i modsætning til LCD-skærme, ikke kræver baggrundsbelysning. Og det er virkelig gode nyheder for dit batteri. Forestil dig, at du viser et billede af en sort firkant på din telefon; med en LCD-skærm vil baggrundsbelysningen oplyse hele skærmen, selvom en stor del af den er sort. Men når du ser det samme billede på en OLED-skærm, slukkes de pixels, der danner den sorte firkant. Så de bruger slet ikke strøm.
Disse typer skærme gør mørke tilstande mange gange mere interessante. Ved at bruge et mørkt interface kan du betydeligt forlænge batteriets levetid for din enhed. . Mørke tilstande går selvfølgelig hånd i hånd med UI-forandringer, så lad os friske vores viden op!
Mørke tilstande 101
Først og fremmest: "mørk" er ikke lig med "sort". Prøv ikke at erstatte den hvide baggrund med sort, da det vil gøre det umuligt at anvende skygger. En sådan design vil være super flad (på den dårlige måde).
Det er vigtigt at have de grundlæggende principper for skygge/belysning i mente. Genstande, der er mere hævet, skal være lysere i skyggen og efterligne reel belysning og skygge. På den måde er det lettere at skelne mellem de forskellige komponenter og deres hierarki.
To identisk grå firkanter med skygger, den ene på 100% sort baggrund, den anden på #121212. Når objektet hæves, får det en lysere nuance af grå.
I et mørkt tema kan du stadig arbejde med din sædvanlige primære farve, hvis kontrasten er i orden. Lad os forklare med et eksempel.
I dette interface er den primære handling den store blå knap i bunden af panelet. Der er ikke nogen problem med kontrasten ved skift mellem lys eller mørk tilstand, knappen tiltrækker stadig opmærksomhed, ikonet er klart, generelt er alt godt.
Når den samme farve bruges forskelligt, for eksempel i teksten — vil der opstå problemer. Prøv at bruge en (meget) mindre mættet nuance af den primære farve, eller se efter andre måder at inkludere brandfarverne i interfacet.
Til venstre: rød på sort ser dårligt ud. Til højre: lad os reducere mætningen — så bliver alt godt. — bem. overs.
Det samme gælder for alle andre mættede farver, du måske har brugt, såsom advarsels- eller fejlfarver. Google bruger et lag af hvidt med 40% dækning over standardfejlens farve i deres ved skift til mørk tilstand. Dette er en ret god udgangspunkt, da det vil forbedre kontrastniveauerne til at overholde AA-standarder. Du kan selvfølgelig altid ændre indstillingerne efter eget ønske, men glem ikke at tjekke kontrastniveauerne. For øvrigt er et nyttigt værktøj til dette formål en Sketch-plugin — , der præcist viser, hvor meget kontrast der er mellem 2 lag.
Hvad med teksten?
Her er det enkelt: intet bør være 100% sort på 100% hvidt og omvendt. Hvid reflekterer lysbølger af alle længder, sort absorberer. Hvis man placerer 100% hvid tekst på 100% sort baggrund, vil bogstaverne reflektere lys, blive slørede og blive mindre behagelige at læse, hvilket negativt påvirker læsbarheden.
Det samme gælder for 100% hvid baggrund, som reflekterer for meget lys til, at man fuldt ud kan fokusere på ordene. Prøv at mildne den hvide farve lidt, brug lys grå til baggrunde og tekst på sorte baggrunde. Dette vil mindske belastningen på øjnene og forebygge
Mørk tilstand er her for at blive
Den tid, vi tilbringer foran skærmene, stiger konstant, og hver ny dag dukker nye skærme op i vores liv, fra vi vågner, indtil vi sover. Dette er et relativt nyt fænomen, og vores øjne er endnu ikke vant til det stigende skærmtid sent på aftenen. Her kommer den mørke tilstand ind i billedet. Efter implementeringen af denne funktion i macOS og Material Design (og sandsynligvis i iOS) mener vi, at den før eller siden vil blive standard i alle applikationer, både mobil- og desktop. Og det er bedst at være forberedt!
Den eneste grund til ikke at implementere en mørk tilstand er, hvis du er helt sikker på, at din applikation kun bruges ved klart dagslys. Det sker sjældent.
Det er værd at nævne et par ting, der kræver særlig opmærksomhed ved implementeringen af den mørke tilstand, ud over de grundlæggende principper, der er opsummeret tidligere.
Set fra et tilgængelighedssynspunkt er den mørke tilstand ikke den mest bekvemme, da kontrasten generelt er lavere, hvilket bestemt ikke forbedrer læsbarheden.
Men forestil dig, at du er ved at sove, virkelig træt, men lige før du falder i søvn, husker du, at du skal sende en supervigtig besked, der ikke kan vente til i morgen. Du tager din telefon, tændes den, og AAAAAAA… den lyse baggrund på din iMessage vil holde dig vågen i yderligere tre timer. Mens lys tekst på mørk baggrund ikke betragtes som maksimalt tilgængelig, ville det at have en mørk tilstand lige nu øge brugervenligheden med en million. Det afhænger alt sammen af den situation, brugeren befinder sig i på det pågældende tidspunkt.
Derfor mener vi, at automatisk mørkt tema en fantastisk 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 fremragende stykke arbejde med indstillingerne for mørkt tema. Derudover har de både et simpelt mørkt tema og et endnu mørkere tema til OLED-skærme, som sparer batteri og alt det, der følger med. Det er vigtigt at bemærke: giv brugerne mulighed for at skifte manuelt, når de ønsker det; der er ikke noget værre end automatisk ændring af grænsefladen uden mulighed for at skifte tilbage.
Twitter har et automatisk mørkt tema, der tænder om aftenen og slukker om morgenen.
Når man udvikler et tema, skal man huske, at nogle ting bare ikke kan gøres mørke.
Tag en tekstbehandler, for eksempel Pages. Man kan gøre grænsefladen mørk, men selve arket vil altid være hvidt, hvilket imiterer et rigtigt papirark.
Pages med mørkt tema aktiveret
Det samme gælder for alle typer content creation værktøjer, såsom Sketch eller Illustrator. Selvom man kan gøre grænsefladen mørk, vil det arbejdsområde, man arbejder i, altid være hvidt som standard.
Sketch i mørkt tema og stadig en klar hvid arbejdsplade.
Så uanset applikationen mener vi, at mørke temaer vil blive indfødte for det operativsystem, du bruger, og derfor er det en god idé at forberede sig på fremtiden. det vil være mørkt.
Hvis du vil vide mere om udvikling af mørke grænseflader, skal du sørge for at tjekke retningslinjerne , dette var vores primære informationskilde til denne artikel.
Kilde: habr.com
