Home-theater-designers
Ang mga madilim na interface ng gumagamit ay nakakuha ng katanyagan, at maraming mga application ang nag-aalok ngayon ng opsyon na lumipat sa pagitan ng isang light at dark mode. Gayunpaman, ang pagpapatupad ng madilim na UI ay maaaring maging isang mahirap na gawain na nangangailangan ng maingat na pansin sa mga kulay, font, larawan, at puwang na ginamit.
Ang anumang pagkakamali sa mga elementong ito ay maaaring magresulta sa hindi magandang karanasan ng user. Ang mga sumusunod na tip ay dapat makatulong sa iyo kapag nagdidisenyo ng iyong unang madilim na UI.
MAKEUSEOF VIDEO OF THE DAY MAG-SCROLL PARA MAGPATULOY SA NILALAMAN
1. Huwag Gumamit ng Purong Itim
Kapag nagdidisenyo ng madilim na UI, iwasang gumamit ng mga purong itim na background. Mas mainam na gumamit ng madilim na lilim ng kulay abo. Halimbawa, Ang tema ng materyal na disenyo ng Google Inirerekomenda ang kulay #121212.
Ang isang itim na background na sinamahan ng puting teksto ay maaaring magkaroon ng masyadong maraming contrast at maging sanhi ng pananakit ng mata. Sa halip, ang mga darker shade ng gray ay madaling magpakita ng mga anino, lalim, at elevation.
2. Tiyaking Natutugunan ng Contrast ng Teksto ang Mga Alituntunin ng WCAG 2.0
Pumili ng kumbinasyon ng kulay na nag-aalok ng tamang antas ng contrast, para mabasa ang text. Ang mga alituntunin ng WCAG 2.0 ay nagsasaad na ang text o mga larawan ng text ay dapat na may contrast ratio na hindi bababa sa 4.5:1 na may malaking text (hindi bababa sa 18 point o 14 point bold) ay dapat na may contrast ratio na hindi bababa sa 3:1.
Mayroong ilang mga tool para sa pagsuri ng contrast ng kulay, kabilang ang KAWAY Chrome extension na nagsusuri din kung gaano ka naa-access ang mga kulay.
3. Piliin ang Tamang Estilo ng Font
Dapat mo ring isaalang-alang ang mga estilo ng font ng iyong teksto kasama ang laki, timbang, at taas ng linya. Kung naghahanap ka ng mga pagpipilian sa font, huwag kalimutang mayroon maraming mga site na nag-aalok ng mga libreng font . Tulad ng para sa laki ng font, gumamit ng mga halaga na sapat upang matiyak na ang teksto ay malinaw at nakikita sa isang madilim na background.
Isaalang-alang ang mga sumusunod na istilo para sa isang web page:
body {
font-family: "Courier New", monospace;
font-size: 12px;
font-weight: 200;
line-height: 1;
color: #333333;
}
Ang font family ay mahirap basahin, ang laki ng font ay masyadong maliit, at ang bigat ng font ay masyadong magaan. Ginagawa ng mga istilong ito na mahirap basahin ang pahina gaya ng nakikita mo mula sa screenshot sa ibaba.
Nasa ibaba ang ilang naaangkop na istilo na maaari mong gamitin sa halip.
body {
font-family: "Arial", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #FFFFFF;
background-color: #121212;
}
At narito ang resultang pahina:
4. Iwasan ang Mga Kulay ng Saturated Accent
Maaaring masyadong maliwanag at malabo ang mga saturated na kulay sa madilim na background. Sa halip, gumamit ng mga kulay na hindi gaanong matindi at naka-mute. Sa ganitong paraan lumikha ka ng user interface na may nakikitang text.
Upang ipakita, isaalang-alang ang dalawang istilo ng button na ito:
/* Saturated blue */
.btn-saturated-blue {
background-color: #121212;
color: #0e0bf6;
}
/* Muted blue */
.btn-muted-blue {
background-color: #121212;
color: #4c5ab3;
}
Ang saturated blue na kulay ay maaaring masyadong maliwanag at mahirap basahin sa madilim na background, habang ang naka-mute na asul na kulay ay nagbibigay ng magandang contrast at mas madaling basahin.
Isang tool tulad ng makulay ay kapaki-pakinabang para sa pagbuo ng mga kumbinasyon ng kulay na sumusunod sa mga alituntunin sa pagiging naa-access.
5. Gumamit ng Negative Space para Pigilan ang Paggawa ng Mabigat na UI
Ang isang madilim na paleta ng kulay ay maaaring gawing mabigat ang UI sa mga user. Kapag ginamit nang maayos, makakatulong sa iyo ang negatibong espasyo na i-highlight ang mahahalagang elemento ng UI at gawing madaling i-scan ang text. Ang sapat na espasyo ay maaari ring gawing mas malinis at mas moderno ang disenyo.
Kunin, halimbawa, Ang landing page ng Apple . Ang espasyo sa pagitan ng mga elemento ay ginagawang napaka-moderno ng pahina, at kawili-wili sa paningin, na nagbibigay-daan sa mahahalagang elemento na lumabas.
6. Gumamit ng Iba't ibang Kulay ng Kulay para Magdagdag ng Lalim sa UI
Kapag nagdidisenyo ng mga magaan na UI, maaari kang gumamit ng mga anino upang magdagdag ng lalim at elevation sa mga elemento. Gayunpaman, dahil sa madilim na background, minsan mahirap makita ang mga anino sa madilim na UI.
Maaabot mo ang lalim sa isang madilim na UI sa pamamagitan ng paggamit ng maraming kulay ng madilim na kulay. Halimbawa, sa halip na isang madilim na background lang, maaari kang magdagdag ng mga lighter shade ng parehong kulay sa iba't ibang elemento tulad ng mga button at modal.
7. Tiyaking Itugma ang Madilim na UI
Hindi mo kailangang gumamit ng parehong mga larawan para sa light mode at dark mode. Maaari mong gamitin ang dark mode Mga query sa media ng CSS upang ilipat ang mga larawang tumutugma sa madilim na UI sa tuwing mag-toggle ang user sa dark mode.
Halimbawa, para maglapat ng partikular na pattern ng background sa mga seksyon ng iyong page sa dark mode, maaari mong gamitin ang .bgpattern na pangalan ng klase at idagdag ang sumusunod na code sa iyong stylesheet.
@media (prefers-color-scheme: dark) {
/* Apply this style in dark mode only */
.bgpattern {
background-image: url("/dark.jpg");
}
}
Tinitiyak ng media query na ito na ang na-refer na larawan sa background ay ipinapakita lamang kapag madilim ang ginustong scheme ng kulay ng user.
kung paano mag-stream ng mga laro sa pc sa tv
Kailan Gumamit ng Madilim na UI
Ang mga disenyo ng madilim na UI ay isang mahusay na paraan upang magbigay ng modernong aesthetic sa iyong website o application. Maaari din nilang bawasan ang strain ng mata at makatipid sa buhay ng baterya. Gayunpaman, ang mga madilim na UI ay hindi angkop para sa bawat application, at dapat mong palaging isaalang-alang ang brand at user base.
Sa pangkalahatan, ang mga madilim na UI ay pinakaangkop para sa mga brand na inuuna ang karangyaan, prestihiyo, minimalism, o misteryo. Maaari rin silang maging isang mahusay na pagpipilian para sa mga dashboard at visualization tool.