7 användbara tips för att designa ett mörkt användargränssnitt

Mörka användargränssnitt har blivit populära, och många applikationer erbjuder nu möjligheten att växla mellan ljust och mörkt läge. Men att implementera ett mörkt användargränssnitt kan vara en utmanande uppgift som kräver noggrann uppmärksamhet på färgerna, teckensnitten, bilderna och avståndet som används.

Eventuella misstag i dessa element kan resultera i en dålig användarupplevelse. Följande tips bör hjälpa dig när du designar ditt första mörka användargränssnitt.

1. Använd inte Pure Black

Undvik att använda rena svarta bakgrunder när du designar ett mörkt gränssnitt. Det är bättre att använda en mörk grå nyans. Till exempel, Googles tema för materialdesign rekommenderar färgen #121212.

En svart bakgrund i kombination med vit text kan ha för mycket kontrast och orsaka ansträngda ögon. Mörkare nyanser av grått i stället kan enkelt visa skuggor, djup och höjd.

2. Se till att textkontrast uppfyller WCAG 2.0-riktlinjerna

Välj en färgkombination som ger rätt kontrast, så att texten är läsbar. WCAG 2.0 riktlinjer säger att text eller bilder av text måste ha ett kontrastförhållande på minst 4,5:1 med stor text (minst 18 punkter eller 14 punkter fetstil) måste ha ett kontrastförhållande på minst 3:1.

Det finns flera verktyg för att kontrollera färgkontrasten, inklusive VINKA Chrome-tillägg som också kontrollerar hur tillgängliga färgerna är.

3. Välj rätt typsnittsstil

Du måste också ta hänsyn till teckensnitten i din text, inklusive storlek, vikt och radhöjd. Om du letar efter teckensnittsalternativ, glöm inte att det finns massor av webbplatser som erbjuder gratis typsnitt. När det gäller teckenstorlek, använd värden som är tillräckliga för att säkerställa att texten är tydlig och synlig på en mörk bakgrund.

Tänk på följande stilar för en webbsida:

kropp {
typsnittsfamilj: "KurirNy", monospace;
textstorlek: 12px;
teckensnittsvikt: 200;
radavstånd: 1; 
Färg: #333333;
}

Teckensnittsfamiljen är svår att läsa, teckenstorleken är för liten och teckensnittsvikten är för låg. Dessa stilar gör sidan svår att läsa som du kan se på skärmdumpen nedan.

Nedan finns några lämpliga stilar som du kan använda istället.

kropp {
typsnittsfamilj: "Arial", sans serif;
textstorlek: 16px; 
teckensnittsvikt: 400; 
radavstånd: 1.5; 
Färg: #FFFFFF;
bakgrundsfärg: #121212; 
}

Och här är den resulterande sidan:

4. Undvik mättade accentfärger

Mättade färger kan vara för ljusa och suddiga på mörka bakgrunder. Använd istället färger som är mindre intensiva och dämpade. På så sätt skapar du ett användargränssnitt som har synlig text.

För att demonstrera, överväg dessa två knappstilar:

/* Mättad blå */
.btn-mättad-blå {
bakgrundsfärg: #121212;
Färg: #0e0bf6;
}
/* Dämpad blå */
.btn-muted-blue {
bakgrundsfärg: #121212; 
Färg: #4c5ab3;
}

Den mättade blå färgen kan vara för ljus och svår att läsa på en mörk bakgrund, medan den dämpade blå färgen ger bra kontrast och är lättare att läsa.

Ett verktyg som färgbar är användbart för att skapa färgkombinationer som följer riktlinjerna för tillgänglighet.

5. Använd negativt utrymme för att förhindra att du skapar ett tungt användargränssnitt

En mörk färgpalett kan göra att användargränssnittet verkar tungt för användarna. När det används på rätt sätt kan negativt utrymme hjälpa dig att markera viktiga UI-element och göra text lätt att skanna. Tillräckligt med avstånd kan också göra designen renare och modernare.

Ta till exempel Apples målsida. Utrymmet mellan elementen gör att sidan ser väldigt modern och visuellt intressant ut, vilket gör att viktiga element sticker ut.

6. Använd olika färgnyanser för att lägga till djup till användargränssnittet

När du designar lätta användargränssnitt kan du använda skuggor för att lägga till djup och höjd till element. Men på grund av de mörka bakgrunderna är skuggor ibland svåra att se i mörka användargränssnitt.

Du kan uppnå djup i ett mörkt gränssnitt genom att använda flera nyanser av mörka färger. Till exempel, istället för bara en mörk bakgrund, kan du lägga till ljusare nyanser av samma färg till olika element som knappar och modaler.

7. Se till att dina bilder matchar det mörka användargränssnittet

Du behöver inte använda samma bilder för ljust läge och mörkt läge. Du kan använda mörkt läge CSS-mediafrågor för att byta ut bilder som matchar det mörka användargränssnittet när användaren växlar till mörkt läge.

Till exempel, för att tillämpa ett specifikt bakgrundsmönster på delar av din sida i mörkt läge, kan du använda klassnamnet .bgpattern och lägga till följande kod i din stilmall.

@media (föredrar-färgschema: mörk) {
/* Använd denna stil endast i mörkt läge */
.bgpattern {
bakgrundsbild: url("/mörk.jpg");
 }
}

Denna mediefråga säkerställer att den refererade bakgrundsbilden endast visas när användarens föredragna färgschema är mörkt.

När ska man använda ett mörkt gränssnitt

Mörk UI-design är ett bra sätt att ge en modern estetik till din webbplats eller applikation. De kan också minimera ögonbelastningen och spara batteritid. Dock är mörka användargränssnitt inte lämpliga för alla applikationer, och du bör alltid överväga varumärket och användarbasen.

I allmänhet är mörka användargränssnitt bäst lämpade för varumärken som prioriterar lyx, prestige, minimalism eller mystik. De kan också vara ett utmärkt val för instrumentpaneler och visualiseringsverktyg.