7 nyttige tips til at designe en mørk brugergrænseflade

Mørke brugergrænseflader har vundet popularitet, og mange applikationer tilbyder nu muligheden for at skifte mellem lys og mørk tilstand. Implementering af en mørk brugergrænseflade kan dog være en udfordrende opgave, der kræver omhyggelig opmærksomhed på de anvendte farver, skrifttyper, billeder og mellemrum.

Eventuelle fejl i disse elementer kan resultere i en dårlig brugeroplevelse. Følgende tips skal hjælpe dig, når du designer din første mørke brugergrænseflade.

1. Brug ikke Pure Black

Når du designer en mørk brugergrænseflade, skal du undgå at bruge rene sorte baggrunde. Det er bedre at bruge en mørk grå nuance. For eksempel, Googles tema for materialedesign anbefaler farven #121212.

En sort baggrund kombineret med hvid tekst kan have for meget kontrast og forårsage anstrengte øjne. Mørkere grå nuancer kan i stedet nemt vise skygger, dybde og højde.

2. Sørg for at tekstkontrast opfylder WCAG 2.0-retningslinjerne

Vælg en farvekombination, der giver et passende niveau af kontrast, så teksten er læselig. WCAG 2.0 retningslinjer angiver, at tekst eller billeder af tekst skal have et kontrastforhold på mindst 4,5:1 med stor tekst (mindst 18 punkter eller 14 punkter fed) skal have et kontrastforhold på mindst 3:1.

Der er flere værktøjer til at kontrollere farvekontrasten, herunder BØLGE Chrome-udvidelse, som også tjekker, hvor tilgængelige farverne er.

3. Vælg den rigtige skrifttype

Du skal også tage højde for skrifttypestilene i din tekst, herunder størrelse, vægt og linjehøjde. Hvis du leder efter skrifttypeindstillinger, så glem ikke, at der er masser af websteder, der tilbyder gratis skrifttyper. Med hensyn til skriftstørrelse, brug værdier, der er tilstrækkelige til at sikre, at teksten er klar og synlig på en mørk baggrund.

Overvej følgende stilarter til en webside:

legeme {
skrifttype-familie: "kurerNy", monospace;
skriftstørrelse: 12px;
skrifttype-vægt: 200;
linjehøjde: 1; 
farve: #333333;
}

Skriftfamilien er svær at læse, skriftstørrelsen er for lille, og skriftvægten er for let. Disse stilarter gør siden svær at læse, som du kan se på skærmbilledet nedenfor.

Nedenfor er nogle passende stilarter, du kan bruge i stedet for.

legeme {
skrifttype-familie: "Arial", sans serif;
skriftstørrelse: 16px; 
skrifttype-vægt: 400; 
linjehøjde: 1.5; 
farve: #FFFFFF;
baggrundsfarve: #121212; 
}

Og her er den resulterende side:

4. Undgå mættede accentfarver

Mættede farver kan være for lyse og slørede på mørke baggrunde. Brug i stedet farver, der er mindre intense og dæmpede. På denne måde opretter du en brugergrænseflade, der har synlig tekst.

Overvej disse to knapstile for at demonstrere:

/* Mættet blå */
.btn-mættet-blå {
baggrundsfarve: #121212;
farve: #0e0bf6;
}
/* Dæmpet blå */
.btn-muted-blue {
baggrundsfarve: #121212; 
farve: #4c5ab3;
}

Den mættede blå farve kan være for lys og svær at læse på en mørk baggrund, mens den dæmpede blå farve giver god kontrast og er lettere at læse.

Et værktøj som farverige er nyttigt til at generere farvekombinationer, der følger retningslinjerne for tilgængelighed.

5. Brug negativ plads til at forhindre oprettelse af en tung brugergrænseflade

En mørk farvepalet kan få brugerfladen til at virke tung for brugerne. Når det bruges korrekt, kan negativt mellemrum hjælpe dig med at fremhæve vigtige UI-elementer og gøre tekst let at scanne. Tilstrækkelig mellemrum kan også gøre designet renere og mere moderne.

Tag f.eks. Apples landingsside. Mellemrum mellem elementer får siden til at se meget moderne og visuelt interessant ud, hvilket gør det muligt for vigtige elementer at skille sig ud.

6. Brug forskellige farvenuancer til at tilføje dybde til brugergrænsefladen

Når du designer lette brugergrænseflader, kan du bruge skygger til at tilføje dybde og højde til elementer. Men på grund af de mørke baggrunde er skygger nogle gange svære at se i mørke brugergrænseflader.

Du kan opnå dybde i en mørk brugergrænseflade ved at bruge flere nuancer af mørke farver. For eksempel, i stedet for kun én mørk baggrund, kan du tilføje lysere nuancer af samme farve til forskellige elementer som knapper og modaler.

7. Sørg for, at dine billeder matcher den mørke brugergrænseflade

Du behøver ikke bruge de samme billeder til lys tilstand og mørk tilstand. Du kan bruge mørk tilstand CSS-medieforespørgsler at udskifte billeder, der matcher den mørke brugergrænseflade, når brugeren skifter til mørk tilstand.

For at anvende et specifikt baggrundsmønster på sektioner af din side i mørk tilstand, kan du f.eks. bruge klassenavnet .bgpattern og tilføje følgende kode til dit stylesheet.

@medier (foretrækker-farveskema: mørk) {
/* Anvend kun denne stil i mørk tilstand */
.bgpattern {
baggrundsbillede: url("/mørk.jpg");
 }
}

Denne medieforespørgsel sikrer, at det refererede baggrundsbillede kun vises, når brugerens foretrukne farveskema er mørkt.

Hvornår skal man bruge en mørk brugergrænseflade

Mørke UI-design er en fantastisk måde at give en moderne æstetik til dit websted eller din applikation. De kan også minimere anstrengelser for øjnene og spare batterilevetid. Mørke brugergrænseflader er dog ikke egnede til enhver applikation, og du bør altid overveje brandet og brugerbasen.

Generelt er mørke brugergrænseflader bedst egnede til mærker, der prioriterer luksus, prestige, minimalisme eller mystik. De kan også være et godt valg til dashboards og visualiseringsværktøjer.