Eller vad du ska tänka på när du utvecklar ett mörkt läge för en applikation eller webbplats
2018 visade att mörka lägen är på väg. Nu när vi är halvvägs genom 2019 kan vi med tillförsikt säga: de är här och de finns överallt.
Låt oss börja med att mörkt läge inte alls är ett nytt koncept. Den har använts ganska länge. Och en gång i tiden, faktiskt, under lång tid, var detta det enda de använde: bildskärmar var av sorten "grön-på-svart", men bara för att den självlysande beläggningen inuti avgav ett grönaktigt sken när de exponerades för strålning .
Men även efter introduktionen av färgmonitorer fortsatte mörkt läge att existera. Varför är det så?
Det finns två huvudmotiv som förklarar varför varannan person idag har bråttom att lägga till ett mörkt tema i sin ansökan. Först och främst: datorer finns överallt. Vart vi än tittar finns det någon form av skärm. Vi använder våra mobila enheter från morgon till sent på kvällen. Närvaron av ett mörkt läge minskar påfrestningarna på ögonen när du ligger i sängen innan du går och lägger dig för "sista gången" när du bläddrar igenom ditt sociala flöde. nätverk. (Om du är som jag kan "förra gången" betyda en 3-timmars rullning . Mörkt läge? Ja tack! )
En annan anledning är ny teknik för bildskärmsproduktion. Flaggskeppsmodeller av 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 tittar på en bild av en svart fyrkant på din telefon; med en LCD kommer bakgrundsbelysningen att lysa upp hela skärmen trots att det mesta är svart. Men när du tittar på samma bild på en OLED-skärm stängs pixlarna som utgör den svarta fyrkanten helt enkelt av. 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 batteritiden på din enhet. . Mörka lägen går naturligtvis hand i hand med UI-ändringar så låt oss fräscha upp vår kunskap!
Mörka lägen 101
Först och främst: "mörkt" är inte detsamma som "svart". Försök inte att ersätta en vit bakgrund med en svart, eftersom det kommer att göra det omöjligt att använda skuggor. En sådan här design blir superplatt (på ett dåligt sätt).
Det är viktigt att tänka på de grundläggande principerna för skuggning/belysning. Objekt som är mer upphöjda bör vara ljusare i skuggan, vilket simulerar verklig belysning och skuggning. Detta gör det lättare att skilja mellan de olika komponenterna och deras hierarki.
Två identiska grå rutor med skugga, en på 100 % svart bakgrund, den andra på #121212. När föremålet reser sig blir det en ljusare nyans av grått.
I ett mörkt tema kan du fortfarande arbeta med din vanliga basfärg så länge kontrasten är ok. Låt oss förklara med ett exempel.
I det här gränssnittet är huvudåtgärden den stora blå knappen i den nedre raden. Det är inga problem vad gäller kontrasten när man växlar mellan ljust eller mörkt läge, knappen är fortfarande iögonfallande, ikonen är tydlig och överlag är allt bra.
När samma färg används på olika sätt, till exempel i text, blir det problem. Försök att använda en (mycket) mindre mättad nyans av huvudfärgen, eller leta efter andra sätt att införliva varumärkesfärger i gränssnittet.
Vänster: Rött på svart ser dåligt ut. Höger: minska mättnaden och allt ser bra ut. - cirka. översättning
Detsamma gäller för alla andra starka färger du kan ha använt, till exempel varnings- eller felfärger. Google använder en 40 % vit lageröverlagring ovanpå standardfelfärgen i deras när du växlar till mörkt läge. Detta är en ganska bra utgångspunkt eftersom det kommer att förbättra kontrastnivåerna för att matcha AA-standarder. Du kan naturligtvis alltid ändra inställningarna som du vill, men se till att kontrollera kontrastnivåerna. Förresten, ett användbart verktyg för detta ändamål är Sketch-plugin - , som visar exakt hur mycket kontrast det är mellan 2 lager.
Hur är det med texten?
Allt är enkelt här: ingenting ska vara 100 % svart och 100 % vitt och vice versa. Vitt reflekterar ljusvågor av alla våglängder, svart absorberar. Om du placerar 100 % vit text på en 100 % svart bakgrund kommer bokstäverna att reflektera ljus, smeta ut och bli mindre läsbara, vilket kommer att påverka läsbarheten negativt.
Detsamma gäller en 100% vit bakgrund, som reflekterar för mycket ljus för att helt fokusera på orden. Prova att mjuka upp den vita färgen lite, använd ljusgrå för bakgrunder och text på svart bakgrund. Detta kommer att minska belastningen på ögonen, förebygga
Mörkt läge är här och kommer inte att försvinna
Mängden tid vi spenderar framför skärmar växer hela tiden, och varje ny dag dyker det upp nya skärmar i våra liv, från det att vi vaknar tills vi somnar. Detta är ett ganska nytt fenomen, våra ögon är ännu inte vana vid denna ökning av skärmtid sent på kvällen. Det är här mörkt läge kommer in i bilden. Med introduktionen av den här funktionen i macOS och Material Design (och troligen i iOS) tror vi att den förr eller senare kommer att bli standard i alla applikationer, både mobila och stationära. Och det är bättre att vara förberedd på detta!
Den enda anledningen till att inte implementera mörkt läge är när du är helt 100 % säker på att din applikation uteslutande används i starkt dagsljus. Detta händer dock inte ofta.
Det är värt att nämna några saker som kommer att kräva särskild uppmärksamhet när du implementerar mörkt läge, utöver de grundläggande principerna som sammanfattats tidigare.
När det gäller tillgänglighet ä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 alls.
Men tänk dig att du gör dig redo för sängen, du vill verkligen sova, men precis innan du somnar kommer du ihåg att du behöver skicka ett superviktigt meddelande till någon som inte kan vänta ens en natt. Du tar tag i din telefon, sätter på den och AAAAAAH... den ljusa bakgrunden i din iMessage kommer att hålla dig vaken i ytterligare 3 timmar. Även om ljus text på en mörk bakgrund inte anses vara den mest lättillgängliga, skulle ha ett mörkt läge just denna sekund öka bekvämligheten med en miljon. Allt beror på den situation som användaren befinner sig i för tillfället.
Det är därför vi tänker automatiskt mörkt läge så cool idé. Den slås på på kvällen och släcks på morgonen. Användaren behöver inte ens tänka på det, vilket är väldigt bekvämt. Twitter har gjort ett bra jobb med sina mörka lägesinställningar. Dessutom har de både bara ett mörkt läge och ett ännu mörkare läge för alla dessa OLED-skärmar, vilket sparar batteri och allt som har med det att göra. Det är viktigt att notera här: ge användaren möjlighet att byta manuellt när han vill: det finns inget värre än att automatiskt ändra 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 du utvecklar ett tema är det också värt att komma ihåg att vissa saker helt enkelt inte kan göras mörka.
Ta en textredigerare som Pages. Du kan göra gränssnittet mörkt, men själva arket kommer alltid att vara vitt, vilket simulerar ett riktigt pappersark.
Sidor med mörkt läge aktiverat
Detsamma gäller alla typer av redaktörer för innehållsskapande, som Sketch eller Illustrator. Även om gränssnittet kan göras mörkt kommer ritytan du arbetar med alltid att vara vit som standard.
Skissa i mörkt läge och ha fortfarande en ljus vit rityta.
Så oavsett appen tror vi att mörka lägen kommer inbyggt i operativsystemet du använder, vilket betyder att det är bäst att förbereda sig för framtiden. det kommer att bli mörkt.
Om du vill lära dig mer om att utveckla mörka användargränssnitt, se till att kolla in riktlinjerna , detta var vår huvudsakliga informationskälla för den här artikeln.
Källa: will.com