Behöver er produkt mörkt läge?
Av CodexierPublicerad 5 min läsning
Önskemål om mörkt läge dyker förr eller senare upp i varje digital produkt. Ibland kommer de från användare som sitter i verktyget flera timmar om dagen, ibland från en grundare som gillar utseendet. Svaret beror på vilka användarna är och hur gränssnittet är byggt. Med färger definierade som tokens är mörkt läge ett avgränsat arbete; med hårdkodade färger i hundratals komponenter blir det en omdesign. Här får ni hjälp att bestämma er och, om ni kör, göra det ordentligt.
Vem som förväntar sig mörkt läge
I mobilen har både iOS och Android haft mörkt läge i hela systemet i många år, och många har det påslaget jämt. En app som ignorerar inställningen lyser som en vit rektangel på kvällen, och det märker användarna. På webben är förväntan svagare: de flesta besökare på en företagssajt saknar inte mörkt läge, medan användare av en webbapp de jobbar i hela dagen ofta gör det.
| Produkttyp | Förväntan | Rekommendation |
|---|---|---|
| Mobilapp | Hög; systeminställningen används flitigt | Stöd det och följ systemets inställning |
| Webbapp som används flera timmar om dagen | Medel till hög | Stöd det om färgerna är tokeniserade |
| Marknadssajt | Låg | Avstå oftast; lägg krutet på innehåll och fart |
| Kassa, bokning och formulär | Låg | Avstå om inte produkten runt omkring har det |
Vad det kostar att designa och testa
Mörkt läge är inte att invertera färgerna. Ytor behöver visa höjd med ljusare nyanser i stället för skuggor, varumärkesfärger behöver ofta en ljusare variant för att synas mot mörk bakgrund och helsvart med helvit text bländar många läsare. Varje tillstånd, från hovring och fokus till fel, inaktiverat och valt, måste kontrolleras i båda teman och uppfylla kontrastkraven i WCAG. Designarbetet är ungefär en palett till plus en genomgång av varje komponent; testarbetet är varje skärm två gånger.
- En andra uppsättning värden för varje färgroll: bakgrunder, ytor, text, kanter, varumärke och statusfärger.
- Kontrastkontroller för text och interaktiva element i båda teman.
- Visuell genomgång av varje komponent och skärm, även tomma lägen och fellägen.
- Hantering av innehåll från tredje part: inbäddade kartor, betalwidgetar och mejlmallar.
Tokens som gör det billigt
Skillnaden mellan ett billigt och ett dyrt mörkt läge är om komponenterna hänvisar till färger efter roll eller efter värde. Använder en knapp en token som heter ungefär colour-action-primary handlar mörkt läge om att ge den token ett annat värde i det mörka temat. Använder knappen en hexkod direkt måste varje komponent ändras. Ett designsystem med semantiska tokens gör mörkt läge, och senare varumärkesbyten, till en inställning i stället för ett nybygge. I guiden om huruvida ert företag behöver ett designsystem går vi igenom den större avvägningen.
Grundtokens
Den råa paletten: varje nyans av varumärkesfärgen och gråskalan, namngivna efter värde. Komponenter använder dem aldrig direkt.
Semantiska tokens
Roller som yta, dämpad text, kant, handling och fara, kopplade till grundtokens separat för ljust och mörkt.
I komponenterna
Komponenterna hänvisar bara till semantiska tokens, så att ett temabyte ändrar kopplingen och inget annat.
Bilder, logotyper och diagram
Det är innehållet som brukar spräcka mörkt läge. Logotyper med mörk text försvinner mot mörk bakgrund och behöver en ljus variant. Skärmbilder och illustrationer med vit bakgrund bländar, så ge dem en diskret ram eller en mörk version. Diagramfärger valda för vit bakgrund kan tappa kontrast; definiera diagrampaletter som tokens också och kontrollera dem i båda teman. Varumärkesfärger som klarar sig mot vitt kan misslyckas mot mörkt, vilket vi förklarar i guiden om varumärkesfärger med godkänd kontrast.
Gör det bra eller inte alls
Ett halvfärdigt mörkt läge är sämre än inget: oläsliga felmeddelanden, osynliga kanter på fält och en vit blixt när sidan laddas skadar förtroendet. Kör ni, följ systeminställningen, spara användarens eget val, sätt temat innan första bilden ritas så att blixten försvinner och ta med båda teman i varje designgranskning och releasetest framöver.
När ni inte ska köpa det här av oss: är produkten en marknadssajt eller ett kort köpflöde är mörkt läge sällan värt den löpande testkostnaden, och det säger vi. Bygger eller städar ni ett designsystem ändå är det billigaste tillfället att lägga till mörkt läge samtidigt. Vårt designsystem och UI-kit har semantiska tokens redo för teman; se priser eller boka ett samtal.
Vanliga frågor
Sparar mörkt läge batteri?
I mobiler med OLED-skärm drar mörka pixlar mindre ström, så ett verkligt mörkt gränssnitt kan minska förbrukningen. På LCD-skärmar är skillnaden liten. Det är en trevlig bieffekt, inte ett starkt skäl i sig.
Är mörkt läge bättre för tillgängligheten?
Det hjälper vissa, som den som är känslig för bländning, och försvårar för andra, till exempel en del personer med astigmatism som upplever ljus text på mörk bakgrund som suddigare. Därför ska valet vara användarens, med systemets inställning som standard.
Ska vi använda helsvart bakgrund?
Oftast inte. Mycket mörkt grått minskar bländningen och låter er visa höjd med något ljusare ytor. Helsvart kan fungera i mobilappar som riktar sig mot OLED-skärmar, men testa läsbarheten noga.
Kan vi lägga till mörkt läge senare?
Ja, och kostnaden beror på om komponenterna använder semantiska tokens. Gör de det är det mest design och test. Gör de det inte är första steget att flytta färgerna till tokens, vilket är värt att göra ändå.
Ta reda på vad mörkt läge skulle kosta i er produkt
Visa oss produkten och hur färgerna är definierade i dag. På en kvart kan vi säga om mörkt läge är en inställning eller en större städning, och om det är värt det.
Boka ett kostnadsfritt 15-minuterssamtal