7 nyttige tips for å designe et mørkt brukergrensesnitt

Mørke brukergrensesnitt har vunnet popularitet, og mange applikasjoner tilbyr nå muligheten til å bytte mellom lys og mørk modus. Imidlertid kan implementering av et mørkt brukergrensesnitt være en utfordrende oppgave som krever nøye oppmerksomhet til fargene, skriftene, bildene og avstanden som brukes.

Eventuelle feil i disse elementene kan resultere i en dårlig brukeropplevelse. Følgende tips bør hjelpe deg når du designer ditt første mørke brukergrensesnitt.

1. Ikke bruk Pure Black

Når du designer et mørkt brukergrensesnitt, unngå å bruke ren svart bakgrunn. Det er bedre å bruke en mørk gråtone. For eksempel, Googles tema for materialdesign anbefaler fargen #121212.

En svart bakgrunn kombinert med hvit tekst kan ha for mye kontrast og forårsake anstrengelser for øynene. Mørkere gråtoner kan i stedet enkelt vise skygger, dybde og høyde.

2. Sørg for at tekstkontrast oppfyller WCAG 2.0-retningslinjene

Velg en fargekombinasjon som gir et riktig kontrastnivå, slik at teksten er lesbar. WCAG 2.0 retningslinjer sier at tekst eller bilder av tekst må ha et kontrastforhold på minst 4,5:1 med stor tekst (minst 18 punkter eller 14 punkter fet skrift) må ha et kontrastforhold på minst 3:1.

Det finnes flere verktøy for å kontrollere fargekontrasten, inkludert BØLGE Chrome-utvidelse som også sjekker hvor tilgjengelige fargene er.

3. Velg riktig skriftstil

Du må også ta hensyn til skriftstilene til teksten, inkludert størrelse, vekt og linjehøyde. Hvis du leter etter skriftalternativer, ikke glem at det finnes mange nettsteder som tilbyr gratis fonter. Når det gjelder skriftstørrelse, bruk verdier som er tilstrekkelige til å sikre at teksten er tydelig og synlig på en mørk bakgrunn.

Vurder følgende stiler for en nettside:

kropp {
font-familie: "kurerNy", monospace;
skriftstørrelse: 12px;
font-vekt: 200;
linjehøyde: 1; 
farge: #333333;
}

Skriftfamilien er vanskelig å lese, skriftstørrelsen er for liten og skriftvekten er for lav. Disse stilene gjør siden vanskelig å lese som du kan se fra skjermbildet nedenfor.

Nedenfor er noen passende stiler du kan bruke i stedet.

kropp {
font-familie: "Arial", sans serif;
skriftstørrelse: 16px; 
font-vekt: 400; 
linjehøyde: 1.5; 
farge: #FFFFFF;
bakgrunnsfarge: #121212; 
}

Og her er den resulterende siden:

4. Unngå mettede aksentfarger

Mettede farger kan være for lyse og uskarpe på mørk bakgrunn. Bruk heller farger som er mindre intense og dempet. På denne måten lager du et brukergrensesnitt som har synlig tekst.

For å demonstrere, vurder disse to knappestilene:

/* Mettet blått */
.btn-mettet-blå {
bakgrunnsfarge: #121212;
farge: #0e0bf6;
}
/* Dempet blå */
.btn-dempet-blå {
bakgrunnsfarge: #121212; 
farge: #4c5ab3;
}

Den mettede blåfargen kan være for lys og vanskelig å lese på en mørk bakgrunn, mens den dempede blåfargen gir god kontrast og er lettere å lese.

Et verktøy som fargebare er nyttig for å generere fargekombinasjoner som følger retningslinjer for tilgjengelighet.

5. Bruk negativ plass for å unngå å lage et tungt brukergrensesnitt

En mørk fargepalett kan få brukergrensesnittet til å virke tungt for brukerne. Når det brukes riktig, kan negativt mellomrom hjelpe deg med å fremheve viktige UI-elementer og gjøre tekst enkel å skanne. Tilstrekkelig avstand kan også gjøre designet renere og mer moderne.

Ta for eksempel Apples landingsside. Mellomrom mellom elementene gjør at siden ser veldig moderne og visuelt interessant ut, slik at viktige elementer skiller seg ut.

6. Bruk forskjellige fargenyanser for å legge til dybde i brukergrensesnittet

Når du designer lette brukergrensesnitt, kan du bruke skygger for å legge til dybde og høyde til elementer. På grunn av den mørke bakgrunnen er det imidlertid noen ganger vanskelig å se skygger i mørke brukergrensesnitt.

Du kan oppnå dybde i et mørkt brukergrensesnitt ved å bruke flere nyanser av mørke farger. For eksempel, i stedet for bare én mørk bakgrunn, kan du legge til lysere nyanser av samme farge til forskjellige elementer som knapper og modaler.

7. Sørg for at bildene dine samsvarer med det mørke brukergrensesnittet

Du trenger ikke å bruke de samme bildene for lys og mørk modus. Du kan bruke mørk modus CSS-mediespørringer for å bytte ut bilder som matcher det mørke brukergrensesnittet når brukeren bytter til mørk modus.

For å bruke et spesifikt bakgrunnsmønster på deler av siden din i mørk modus, kan du for eksempel bruke klassenavnet .bgpattern og legge til følgende kode i stilarket ditt.

@media (foretrekker-fargeskjema: mørk) {
/* Bruk denne stilen kun i mørk modus */
.bgpattern {
bakgrunnsbilde: url("/mørk.jpg");
 }
}

Denne mediespørringen sikrer at det refererte bakgrunnsbildet bare vises når brukerens foretrukne fargeskjema er mørkt.

Når du skal bruke et mørkt brukergrensesnitt

Mørke UI-design er en fin måte å gi en moderne estetikk til nettstedet eller applikasjonen din. De kan også minimere belastningen på øynene og spare batterilevetid. Mørke brukergrensesnitt er imidlertid ikke egnet for alle applikasjoner, og du bør alltid vurdere merkevaren og brukerbasen.

Generelt er mørke brukergrensesnitt best egnet for merker som prioriterer luksus, prestisje, minimalisme eller mystikk. De kan også være et godt valg for dashbord og visualiseringsverktøy.