Mörka tider närmar sig

Eller vad man bör tänka på vid utvecklingen av mörkt läge för en app eller webbplats

År 2018 visade att mörka lägen var på väg. Nu när vi redan är halvvägs in i 2019 kan vi med säkerhet säga: de är här, och de finns överallt.

Exempel på en gammal monitor med "grönt-på-svart"

Först och främst är mörkt läge inte ett nytt koncept. Det har använts länge. Faktum är att man en gång i tiden bara använde det: monitorer var av typen "grönt-på-svart", men det berodde bara på att det fluorescerande beläggningen inuti avgav ett grönaktigt ljus när det påverkades av strålning.

Men även efter införandet av färgmontrar fortsatte mörkt läge att existera. Varför är det så?

Det finns två huvudsakliga motiv som förklarar varför varannan person idag hasar sig att lägga till mörkt tema i sin app. För det första: datorer finns överallt. Var vi än vänder oss finns det en skärm. Vi använder våra mobila enheter från morgon till sen kväll. Att ha ett mörkt läge minskar påfrestningen på ögonen när man i sängen sneglar på sina sociala medier "en sista gång" före sänggåendet. (Om du är som jag kan "en sista gång" betyda tre timmar av scrollande. R/EngineeringPorn. Mörkt läge? verkligen, ja tack! )

En annan orsak är ny teknik för tillverkning av skärmar. Flaggskeppsmodeller från stora företag – Apple, Google, Samsung, Huawei – är alla utrustade med OLED-skärmar som, till skillnad från LCD-skärmar, inte kräver bakgrundsbelysning. Och det är verkligen goda nyheter för ditt batteri. Föreställ dig att du visar en bild av en svart ruta på din telefon; med en LCD-skärm kommer bakgrundsbelysningen att belysa hela skärmen, även om en stor del av den är svart. Men när samma bild ses på en OLED-skärm stängs pixlarna som utgör den svarta rutan av. Och det betyder att de inte förbrukar energi alls.

Dessa typer av skärmar gör mörka lägen mycket mer intressanta. Genom att använda ett mörkt gränssnitt kan du avsevärt förlänga livslängden på batteriet för din enhet. Se fakta och siffror från Android Dev Summit i november förra året för att övertyga dig själv.. Mörka lägen går givetvis hand i hand med UI-förändringar, så låt oss friska upp våra kunskaper!

Mörka lägen 101

Först och främst: "mörk" är inte detsamma som "svart". Försök inte byta ut den vita bakgrunden mot svart, eftersom detta gör det omöjligt att använda skuggor. En sådan design kommer att bli superplatt (i dålig bemärkelse).

Det är viktigt att ha i åtanke de grundläggande principerna för skuggning/belysning. Objekt som är mer upphöjda bör vara ljusare i skuggan, vilket imiterar verklig belysning och skuggning. På så sätt blir det lättare att särskilja olika komponenter och deras hierarki.

Två identiskt grå kvadrater med skugga, en på 100% svart bakgrund, den andra på #121212. När objektet är upphöjt får det en ljusare nyans av grått.

I ett mörkt tema går det fortfarande att arbeta med din vanliga huvudfärg, förutsatt att kontrasten är okej. Låt oss förklara med ett exempel.

I det här gränssnittet är den primära åtgärden den stora blå knappen i den nedre panelen. Det finns inget problem ur kontrastperspektiv när man växlar mellan ljus eller mörk läge, knappen drar fortfarande till sig uppmärksamhet, ikonen är skarp, överlag ser allt bra ut.

När samma färg används på olika sätt, till exempel i text — kan det uppstå problem. Försök att använda en (mycket) mindre mättad nyans av huvudfärgen eller se efter andra sätt att inkludera varumärkesfärger i gränssnittet.

Till vänster: röd på svart ser dåligt ut. Till höger: vi minskar mättnaden — och allt ser bra ut. — anm. övers.

Detta gäller också alla andra mättade färger som du kan ha använt, till exempel varnings- eller fel färger. Google använder en vit överlagring på 40% ovanpå standard fel färgen i sina Material Design riktlinjer vid växling till mörkt läge. Detta är en ganska bra utgångspunkt, eftersom det kommer att förbättra kontrastnivåerna till att uppfylla AA-standarder. Du kan självklart alltid ändra inställningarna efter eget tycke, men glöm inte att kontrollera kontrastnivåerna. Förresten, ett användbart verktyg för detta ändamål är en plugin för Sketch — Stark, som visar exakt hur mycket kontrast det finns mellan 2 lager.

Vad sägs om texten?

Det är enkelt: inget ska vara 100 % svart på 100 % vitt och vice versa. Vitt reflekterar ljusvågor av alla längder, svart absorberar. Om du placerar 100 % vit text på en 100 % svart bakgrund kommer bokstäverna att reflektera ljus, suddas ut och bli mindre läsbara, vilket negativt påverkar läsbarheten.

Samma gäller för en 100 % vit bakgrund, som reflekterar för mycket ljus för att helt kunna fokusera på orden. Försök att mjuka upp vitt lite, använd ljusgrått för bakgrunder och text på svarta bakgrunder. Detta minskar belastningen på ögonen och förhindrar överspänning

Det mörka läget är här för att stanna

Den tid vi tillbringar framför skärmar ökar ständigt, och varje ny dag dyker nya skärmar upp i våra liv, från det att vi vaknar till dess att vi somnar. Det är ett ganska nytt fenomen, våra ögon har ännu inte vant sig vid den ökade skärmtiden sent på kvällen. Det är här det mörka läget kommer in i bilden. Efter att denna funktion introducerades i macOS och Material Design (och förmodligen även i iOS) anser vi att det förr eller senare kommer att bli standard i alla applikationer, både mobila och stationära. Och det är bäst att vara redo för det!

Den enda anledningen att inte införa mörkt läge är när du är helt säker på att din applikation används enbart i starkt dagsljus. Sådana situationer är dock sällsynta.

Det är värt att nämna några saker som kräver särskild uppmärksamhet när man implementerar mörkt läge, förutom de grundläggande principerna sammanfattade ovan.

Ur tillgänglighetssynpunkt är mörkt läge inte det mest bekväma, eftersom kontrasten generellt är lägre, vilket i sin tur inte förbättrar läsbarheten.

Källa

Men föreställ dig att du förbereder dig för att sova, du är väldigt trött, men precis innan du somnar kommer du ihåg att du måste skicka ett superviktigt meddelande till någon som inte kan vänta ens en natt. Du tar din telefon, slår på den och AAAA… den ljusa bakgrunden av ditt iMessage gör att du inte kan somna på ytterligare 3 timmar. Även om ljus text på mörk bakgrund inte anses vara maximalt tillgänglig, skulle det mörka läget just i det ögonblicket ha ökat bekvämligheten enormt. Allt beror på situationen där användaren befinner sig för tillfället.

Det är därför vi anser automatiskt mörkt läge en så bra idé. Det slås på på kvällen och stängs av på morgonen. Användaren behöver knappt tänka på det, vilket är mycket praktiskt. Twitter har gjort ett utmärkt jobb med inställningarna för mörkt läge. Dessutom finns det både ett enkelt mörkt läge och ett ännu mörkare läge för alla dessa OLED-skärmar, batteribesparing och allt som hör därtill. Det är viktigt att notera: ge användaren möjligheten att växla manuellt när de vill: det finns inget värre än automatisk ändring av gränssnittet utan möjlighet att byta tillbaka.

Twitter har ett automatiskt mörkt läge som slås på på kvällen och stängs av på morgonen.

När man utvecklar teman bör man också tänka på att vissa saker helt enkelt inte kan göras mörka.

Ta till exempel en textredigerare som Pages. Man kan göra gränssnittet mörkt, men själva bladet kommer alltid att vara vitt, vilket imiterar ett verkligt papper.

Pages med mörkt läge aktiverat

Samma sak gäller alla typer av redigerare för att skapa innehåll, som Sketch eller Illustrator. Även om gränssnittet kan göras mörkt, kommer arbetsytan som du jobbar på alltid att vara vit som standard.

Sketch i mörkt läge med en fortfarande ljus vit arbetsyta.

Därför, oavsett applikation, anser vi att mörka lägen kommer att bli inbyggda i det operativsystem du använder, vilket innebär att det är bättre att förbereda sig för framtiden. det kommer att vara mörkt. 

Om du vill veta mer om utveckling av mörka gränssnitt, se gärna riktlinjerna Material Design, det var vår huvudsakliga informationskälla för denna artikel.

Källa: habr.com