7 hyödyllistä vinkkiä tumman käyttöliittymän suunnitteluun

Tummat käyttöliittymät ovat saavuttaneet suosiota, ja monet sovellukset tarjoavat nyt mahdollisuuden vaihtaa vaalean ja tumman tilan välillä. Tumman käyttöliittymän käyttöönotto voi kuitenkin olla haastava tehtävä, joka vaatii tarkkaa huomiota käytettyihin väreihin, fontteihin, kuviin ja välityksiin.

Kaikki virheet näissä elementeissä voivat johtaa huonoon käyttökokemukseen. Seuraavien vinkkien pitäisi auttaa sinua suunnittelemaan ensimmäistä pimeää käyttöliittymääsi.

1. Älä käytä puhdasta mustaa

Kun suunnittelet tummaa käyttöliittymää, vältä puhtaan mustan taustan käyttöä. On parempi käyttää tummaa harmaan sävyä. Esimerkiksi, Googlen materiaalisuunnitteluteema suosittelee väriä #121212.

Musta tausta yhdistettynä valkoiseen tekstiin voi olla liian kontrastinen ja aiheuttaa silmien rasitusta. Sen sijaan tummemmat harmaan sävyt voivat näyttää varjot, syvyyden ja korkeuden helposti.

2. Varmista, että tekstin kontrasti vastaa WCAG 2.0 -ohjeita

Valitse väriyhdistelmä, joka tarjoaa oikean kontrastin, jotta teksti on luettavissa. WCAG 2.0 -ohjeiden mukaan tekstin tai tekstin kuvien kontrastisuhteen on oltava vähintään 4,5:1 ja suuren tekstin (vähintään 18 pistettä tai 14 pistettä lihavoitu) kontrastisuhteen on oltava vähintään 3:1.

Värikontrastin tarkistamiseen on useita työkaluja, mukaan lukien AALTO Chrome-laajennus, joka tarkistaa myös värien saatavuuden.

3. Valitse oikea kirjasintyyli

Sinun on myös otettava huomioon tekstisi kirjasintyylit, mukaan lukien koko, paino ja rivin korkeus. Jos etsit fonttivaihtoehtoja, älä unohda niitä paljon sivustoja, jotka tarjoavat ilmaisia ​​fontteja. Fonttikoon osalta käytä arvoja, jotka ovat riittävät varmistamaan, että teksti on selkeä ja näkyvä tummalla taustalla.

Harkitse seuraavia verkkosivun tyylejä:

kehon {
font-perhe: "KuriiriUusi", monospace;
Fonttikoko: 12px;
fontin paino: 200;
viivankorkeus: 1; 
väri: #333333;
}

Kirjasinperhettä on vaikea lukea, fonttikoko on liian pieni ja fontin paino liian kevyt. Nämä tyylit tekevät sivusta vaikeasti luettavan, kuten näet alla olevasta kuvakaappauksesta.

Alla on joitain sopivia tyylejä, joita voit käyttää sen sijaan.

kehon {
font-perhe: "Arial", sans-serif;
Fonttikoko: 16px; 
fontin paino: 400; 
viivankorkeus: 1.5; 
väri: #FFFFFF;
taustaväri: #121212; 
}

Ja tässä tulos sivu:

4. Vältä tyydyttyneitä korostusvärejä

Tyydytetyt värit voivat olla liian kirkkaita ja epäselviä tummalla taustalla. Käytä sen sijaan värejä, jotka ovat vähemmän voimakkaita ja vaimeita. Näin luot käyttöliittymän, jossa on näkyvää tekstiä.

Havainnollistaaksesi näitä kahta painiketyyliä:

/* Kyllästynyt sininen */
.btn-saturated-blue {
taustaväri: #121212;
väri: #0e0bf6;
}
/* Mykistetty sininen */
.btn-muted-blue {
taustaväri: #121212; 
väri: #4c5ab3;
}

Kyllästynyt sininen väri voi olla liian kirkas ja vaikea lukea tummalla taustalla, kun taas mykistetty sininen väri tarjoaa hyvän kontrastin ja on helpompi lukea.

Työkalu kuten värillinen on hyödyllinen luotaessa esteettömyysohjeita noudattavia väriyhdistelmiä.

5. Käytä negatiivista tilaa estääksesi raskaan käyttöliittymän luomisen

Tumma väripaletti voi saada käyttöliittymän näyttämään raskaalta käyttäjille. Oikein käytettynä negatiivinen tila voi auttaa sinua korostamaan tärkeitä käyttöliittymän elementtejä ja helpottamaan tekstin skannausta. Riittävä välimatka voi myös tehdä suunnittelusta puhtaamman ja nykyaikaisemman.

Otetaan esimerkiksi Applen aloitussivu. Elementtien välinen tila saa sivun näyttämään erittäin modernilta ja visuaalisesti kiinnostavalta, jolloin tärkeät elementit erottuvat joukosta.

6. Lisää syvyyttä käyttöliittymään eri värisävyillä

Kun suunnittelet vaaleita käyttöliittymiä, voit lisätä elementteihin syvyyttä ja korkeutta varjoilla. Tumman taustan vuoksi varjoja on kuitenkin joskus vaikea nähdä tummissa käyttöliittymissä.

Voit saavuttaa syvyyden tummassa käyttöliittymässä käyttämällä useita tummien värien sävyjä. Esimerkiksi yhden tumman taustan sijasta voit lisätä samanvärisiä vaaleampia sävyjä eri elementteihin, kuten painikkeisiin ja modaaleihin.

7. Varmista, että kuvasi vastaavat tummaa käyttöliittymää

Sinun ei tarvitse käyttää samoja kuvia vaaleassa ja tummassa tilassa. Voit käyttää tummaa tilaa CSS-mediakyselyt poistaaksesi tummaa käyttöliittymää vastaavat kuvat käytöstä aina, kun käyttäjä vaihtaa tummaan tilaan.

Jos esimerkiksi haluat käyttää tiettyä taustakuviota sivusi osiin pimeässä tilassa, voit käyttää .bgpattern-luokan nimeä ja lisätä seuraavan koodin tyylitaulukkoosi.

@media (mieluummin värimalli: tumma) {
/* Käytä tätä tyyliä vain pimeässä tilassa */
.bgpattern {
taustakuva: url("/tumma.jpg");
 }
}

Tämä mediakysely varmistaa, että viitattu taustakuva näytetään vain, kun käyttäjän valitsema värimaailma on tumma.

Milloin käyttää tummaa käyttöliittymää

Tummat käyttöliittymämallit ovat loistava tapa antaa modernia estetiikkaa verkkosivustollesi tai sovelluksellesi. Ne voivat myös vähentää silmien rasitusta ja säästää akun käyttöikää. Tummat käyttöliittymät eivät kuitenkaan sovellu kaikkiin sovelluksiin, ja sinun on aina otettava huomioon tuotemerkki ja käyttäjäkunta.

Yleensä tummat käyttöliittymät sopivat parhaiten brändeille, jotka asettavat etusijalle luksusta, arvovaltaa, minimalismia tai mysteeriä. Ne voivat olla myös loistava valinta kojelaudoille ja visualisointityökaluille.