7 hasznos tipp a sötét felhasználói felület megtervezéséhez

A sötét felhasználói felületek egyre népszerűbbek, és számos alkalmazás kínál lehetőséget a világos és sötét mód közötti váltásra. A sötét felhasználói felület megvalósítása azonban kihívást jelentő feladat lehet, amely gondos odafigyelést igényel a használt színekre, betűtípusokra, képekre és térközökre.

Az ezekben az elemekben előforduló hibák rossz felhasználói élményt eredményezhetnek. A következő tippek segíthetnek az első sötét felhasználói felület megtervezésekor.

1. Ne használjon tiszta feketét

Sötét felhasználói felület tervezésekor kerülje a tiszta fekete hátterek használatát. Jobb, ha sötét szürke árnyalatot használ. Például, A Google anyagtervezési témája a #121212 színt ajánlja.

A fehér szöveggel kombinált fekete háttér túlságosan kontrasztos lehet, és megerőlteti a szemet. Ehelyett a szürke sötétebb árnyalatai könnyen megjeleníthetik az árnyékokat, a mélységet és a magasságot.

2. Győződjön meg arról, hogy a szöveg kontrasztja megfelel a WCAG 2.0 irányelveinek

Válasszon olyan színkombinációt, amely megfelelő kontrasztszintet kínál, hogy a szöveg olvasható legyen. A WCAG 2.0 irányelvei kimondják, hogy a szöveg vagy a szöveg képeinek kontrasztaránya legalább 4,5:1 legyen, a nagy szöveg (legalább 18 pontos vagy 14 pontos félkövér) kontrasztaránya pedig legalább 3:1.

Számos eszköz létezik a színkontraszt ellenőrzésére, beleértve a HULLÁM Chrome-bővítmény, amely azt is ellenőrzi, hogy a színek mennyire hozzáférhetők.

3. Válassza ki a megfelelő betűstílust

Figyelembe kell vennie a szöveg betűstílusát is, beleértve a méretet, a súlyt és a sor magasságát. Ha betűtípus-beállításokat keres, ne felejtse el, hogy vannak rengeteg olyan webhely, amely ingyenes betűtípusokat kínál. A betűméretet illetően olyan értékeket használjon, amelyek elegendőek ahhoz, hogy a szöveg világos és látható legyen sötét háttéren.

Vegye figyelembe a következő stílusokat egy weboldalhoz:

test {
betűtípus család: "futárÚj", monospace;
betűméret: 12px;
font-weight: 200;
vonalmagasság: 1; 
szín: #333333;
}

A betűcsalád nehezen olvasható, a betűméret túl kicsi, a betűsúly pedig túl könnyű. Ezek a stílusok megnehezítik az oldal olvasását, ahogy az az alábbi képernyőképen is látható.

Az alábbiakban felsorolunk néhány megfelelő stílust, amelyeket helyette használhat.

test {
betűtípus család: "Arial", sans-serif;
betűméret: 16px; 
font-weight: 400; 
vonalmagasság: 1.5; 
szín: #FFFFFF;
háttérszín: #121212; 
}

És itt az eredményül kapott oldal:

4. Kerülje a telített kiemelő színeket

A telített színek túl világosak és homályosak lehetnek sötét háttéren. Ehelyett használjon kevésbé intenzív és tompa színeket. Így olyan felhasználói felületet hoz létre, amelyen látható szöveg található.

A bemutatáshoz vegye figyelembe a következő két gombstílust:

/* Telített kék */
.btn-telített-kék {
háttérszín: #121212;
szín: #0e0bf6;
}
/* Elnémított kék */
.btn-muted-blue {
háttérszín: #121212; 
szín: #4c5ab3;
}

A telített kék szín túl világos és nehezen olvasható sötét háttéren, míg a tompa kék szín jó kontrasztot biztosít és könnyebben olvasható.

Olyan eszköz, mint kiszínezhető segít olyan színkombinációk létrehozásában, amelyek megfelelnek a kisegítő lehetőségek irányelveinek.

5. Használja a negatív szóközt a nehéz felhasználói felület létrehozásának megakadályozására

A sötét színpaletta nehéznek tűnhet a felhasználói felületen. Megfelelő használat esetén a negatív szóköz segíthet a kezelőfelület fontos elemeinek kiemelésében, és megkönnyítheti a szöveg beolvasását. A megfelelő térköz a kialakítást tisztábbá és modernebbé is teheti.

Vegyük például Az Apple nyitóoldala. Az elemek közötti térköz teszi az oldalt nagyon modernnek és vizuálisan érdekesnek, lehetővé téve a fontos elemek kiemelését.

6. Használjon különböző színárnyalatokat a felhasználói felület mélyítéséhez

Világos felhasználói felületek tervezésekor árnyékokat használhat az elemek mélységének és magasságának növelésére. A sötét hátterek miatt azonban az árnyékokat néha nehéz észrevenni a sötét felhasználói felületeken.

Sötét felhasználói felületen mélységet érhet el a sötét színek több árnyalatának használatával. Például egyetlen sötét háttér helyett ugyanazon színű világosabb árnyalatokat adhat hozzá különböző elemekhez, például gombokhoz és modálokhoz.

7. Győződjön meg arról, hogy a képek illeszkednek a sötét felhasználói felülethez

Nem kell ugyanazokat a képeket használni világos és sötét módhoz. Használhatja a sötét módot CSS médialekérdezések a sötét felhasználói felületnek megfelelő képek kikapcsolásához, amikor a felhasználó sötét módba vált.

Ha például egy adott háttérmintát szeretne alkalmazni az oldal szakaszaira sötét módban, használhatja a .bgpattern osztálynevet, és hozzáadhatja a következő kódot a stíluslaphoz.

@média (előnyben részesíti a színsémát: sötét) {
/* Csak sötét módban alkalmazza ezt a stílust */
.bgpattern {
háttérkép: url("/sötét.jpg");
 }
}

Ez a médialekérdezés biztosítja, hogy a hivatkozott háttérkép csak akkor jelenjen meg, ha a felhasználó által preferált színséma sötét.

Mikor használjunk sötét felhasználói felületet?

A sötét felhasználói felület nagyszerű módja annak, hogy modern esztétikát adjon webhelyének vagy alkalmazásának. Emellett minimálisra csökkenthetik a szem megerőltetését, és kímélik az akkumulátor élettartamát. A sötét felhasználói felületek azonban nem minden alkalmazáshoz alkalmasak, és mindig figyelembe kell venni a márkát és a felhasználói bázist.

Általában a sötét felhasználói felületek a legalkalmasabbak olyan márkák számára, amelyek előnyben részesítik a luxust, a presztízst, a minimalizmust vagy a rejtélyt. Műszerfalakhoz és vizualizációs eszközökhöz is remek választás lehet.