O kung ano ang dapat tandaan kapag bumubuo ng isang dark mode para sa isang application o website
Ipinakita ng 2018 na nasa daan na ang mga dark mode. Ngayong nasa kalagitnaan na tayo ng 2019, masasabi natin nang may kumpiyansa: narito sila, at nasa lahat sila.
Magsimula tayo sa katotohanan na ang dark mode ay hindi isang bagong konsepto. Medyo matagal na itong ginagamit. At minsan, sa katunayan, sa loob ng mahabang panahon, ito lang ang ginamit nila: ang mga monitor ay mula sa iba't ibang "berde-sa-itim", ngunit dahil lamang ang luminescent na patong sa loob ay naglalabas ng maberde na glow kapag nalantad sa radiation. .
Ngunit kahit na pagkatapos ng pagpapakilala ng mga monitor ng kulay, patuloy na umiral ang dark mode. Bakit ganito?
Mayroong dalawang pangunahing motibo na nagpapaliwanag kung bakit ngayon ang bawat pangalawang tao ay nagmamadaling magdagdag ng madilim na tema sa kanilang aplikasyon. Una sa lahat: ang mga computer ay nasa lahat ng dako. Kahit saan tayo tumingin ay may ilang uri ng screen. Ginagamit namin ang aming mga mobile device mula umaga hanggang hatinggabi. Ang pagkakaroon ng dark mode ay nakakabawas sa pagkapagod ng mata kapag ikaw ay nasa kama bago matulog para sa "huling pagkakataon" na nag-i-scroll sa iyong social feed. mga network. (Kung ikaw ay tulad ko, ang "huling pagkakataon" ay maaaring mangahulugan ng 3 oras na scroll . Dark mode? Oo, pakiusap! )
Ang isa pang dahilan ay ang mga bagong teknolohiya sa paggawa ng display. Ang mga pangunahing modelo ng malalaking kumpanya - Apple, Google, Samsung, Huawei - lahat ay nilagyan ng mga OLED screen, na, hindi tulad ng mga LCD display, ay hindi nangangailangan ng backlighting. At iyon ay talagang magandang balita para sa iyong baterya. Isipin na tumitingin ka ng isang imahe ng isang itim na parisukat sa iyong telepono; gamit ang isang LCD, ang backlight ay magpapaliwanag sa buong screen kahit na karamihan sa mga ito ay itim. Ngunit kapag tinitingnan ang parehong imahe sa isang OLED display, ang mga pixel na bumubuo sa itim na parisukat ay naka-off lang. Nangangahulugan ito na hindi sila kumukonsumo ng enerhiya sa lahat.
Ang mga uri ng display ay ginagawang mas kawili-wili ang mga dark mode. Sa pamamagitan ng paggamit ng isang madilim na interface, maaari mong makabuluhang pahabain ang buhay ng baterya ng iyong device. . Siyempre, ang mga madilim na mode ay kasabay ng mga pagbabago sa UI kaya't husayin natin ang ating kaalaman!
Mga Dark Mode 101
Una sa lahat: ang "madilim" ay hindi katulad ng "itim". Huwag subukang palitan ang isang puting background ng isang itim, dahil ito ay magiging imposible na gumamit ng mga anino. Ang disenyong tulad nito ay magiging sobrang flat (sa masamang paraan).
Mahalagang isaisip ang mga pangunahing prinsipyo ng pagtatabing/pag-iilaw. Ang mga bagay na mas mataas ay dapat na mas magaan sa anino, gayahin ang totoong buhay na pag-iilaw at pagtatabing. Ginagawa nitong mas madali ang pagkilala sa pagitan ng iba't ibang bahagi at kanilang hierarchy.
Dalawang magkaparehong gray na parisukat na may anino, ang isa sa 100% itim na background, ang isa sa #121212. Habang tumataas ang bagay, nagiging mas magaan na lilim ng kulay abo.
Sa madilim na tema, maaari mo pa ring gamitin ang iyong regular na baseng kulay hangga't ok ang contrast. Ipaliwanag natin gamit ang isang halimbawa.
Sa interface na ito, ang pangunahing aksyon ay ang malaking asul na button sa ibabang bar. Walang problema sa mga tuntunin ng contrast kapag lumilipat sa pagitan ng light o dark mode, ang button ay kapansin-pansin pa rin, ang icon ay malinaw, at sa pangkalahatan ay maayos ang lahat.
Kapag ang parehong kulay ay ginamit sa iba't ibang paraan, halimbawa sa teksto, magkakaroon ng mga problema. Subukang gumamit ng (halos) hindi gaanong saturated shade ng pangunahing kulay, o maghanap ng iba pang mga paraan upang isama ang mga kulay ng brand sa interface.
Kaliwa: Ang pula sa itim ay mukhang masama. Kanan: bawasan ang saturation at lahat ay mukhang maayos. β tinatayang. pagsasalin
Ganoon din sa anumang iba pang matitingkad na kulay na maaaring ginamit mo, gaya ng mga kulay ng babala o error. Gumagamit ang Google ng 40% puting layer na overlay sa ibabaw ng default na kulay ng error sa kanilang kapag lumipat sa dark mode. Ito ay isang magandang panimulang punto dahil mapapabuti nito ang mga antas ng kaibahan upang tumugma sa mga pamantayan ng AA. Maaari mong, siyempre, palaging baguhin ang mga setting ayon sa nakikita mong angkop, ngunit tiyaking suriin ang mga antas ng kaibahan. Sa pamamagitan ng paraan, isang kapaki-pakinabang na tool para sa layuning ito ay ang Sketch plugin - , na nagpapakita kung gaano kalaki ang kaibahan sa pagitan ng 2 layer.
Paano ang tungkol sa teksto?
Ang lahat ay simple dito: walang dapat na 100% itim at 100% puti at vice versa. Ang puti ay sumasalamin sa mga liwanag na alon ng lahat ng mga wavelength, ang itim ay sumisipsip. Kung maglalagay ka ng 100% puting text sa isang 100% itim na background, ang mga titik ay magpapakita ng liwanag, smear, at magiging hindi gaanong nababasa, na negatibong makakaapekto sa pagiging madaling mabasa.
Ang parehong napupunta para sa isang 100% puting background, na nagpapakita ng masyadong maraming liwanag upang ganap na tumutok sa mga salita. Subukang palambot ng kaunti ang puting kulay, gumamit ng mapusyaw na kulay abo para sa mga background at teksto sa mga itim na background. Bawasan nito ang pagkapagod ng mata, na pumipigil
Nandito na ang dark mode at hindi na mawawala
Ang dami ng oras na ginugugol namin sa harap ng mga screen ay patuloy na lumalaki, at sa bawat bagong araw, ang mga bagong screen ay lilitaw sa aming mga buhay, mula sa sandaling kami ay gumising hanggang kami ay makatulog. Ito ay isang medyo bagong kababalaghan; ang aming mga mata ay hindi pa sanay sa pagtaas ng oras ng screen sa gabi. Dito pumapasok ang dark mode. Sa pagpapakilala ng feature na ito sa macOS at Material Design (at malamang sa iOS), naniniwala kami na sa kalaunan ay magiging default ito sa lahat ng application, parehong mobile at desktop. At mas mahusay na maging handa para dito!
Ang tanging dahilan upang hindi ipatupad ang dark mode ay kapag ikaw ay ganap na 100% sigurado na ang iyong aplikasyon ay ginagamit nang eksklusibo sa maliwanag na liwanag ng araw. Gayunpaman, hindi ito madalas mangyari.
Ito ay nagkakahalaga ng pagbanggit ng ilang mga bagay na mangangailangan ng espesyal na atensyon kapag nagpapatupad ng dark mode, lampas sa mga pangunahing prinsipyo na naunang buod.
Sa mga tuntunin ng pagiging naa-access, ang dark mode ay hindi ang pinaka-maginhawa, dahil ang kaibahan ay karaniwang mas mababa, na sa turn ay hindi nagpapabuti sa pagiging madaling mabasa.
Ngunit isipin na naghahanda ka na para matulog, gusto mo talagang matulog, ngunit bago ka matulog, naaalala mo na kailangan mong magpadala sa isang tao ng isang napaka-importanteng mensahe na hindi makapaghintay kahit isang gabi. Kinuha mo ang iyong telepono, i-on ito at AAAAAH... ang maliwanag na background ng iyong iMessage ay magpapanatiling gising sa iyo para sa isa pang 3 oras. Bagama't hindi itinuturing na pinaka-accessible ang light text sa madilim na background, ang pagkakaroon ng dark mode right this second ay dagdagan ang kaginhawaan ng isang milyon. Ang lahat ay nakasalalay sa sitwasyon kung saan ang gumagamit ay nasa sandaling ito.
Kaya naman iniisip natin awtomatikong dark mode napakagandang ideya. Naka-on ito sa gabi at naka-off sa umaga. Ang gumagamit ay hindi na kailangang mag-isip tungkol dito, na kung saan ay napaka-maginhawa. Ang Twitter ay gumawa ng mahusay na trabaho sa mga setting ng dark mode nito. Bilang karagdagan, mayroon silang parehong dark mode at mas dark mode para sa lahat ng OLED screen na ito, na nakakatipid ng baterya at lahat ng nauugnay dito. Mahalagang tandaan dito: bigyan ang user ng pagkakataong manu-manong lumipat sa tuwing gusto niya: wala nang mas masahol pa sa awtomatikong pagbabago ng interface nang walang kakayahang bumalik.
Ang Twitter ay may awtomatikong dark mode na nag-o-on sa gabi at nag-o-off sa umaga.
Gayundin, kapag bumubuo ng isang tema, nararapat na tandaan na ang ilang mga bagay ay hindi maaaring gawing madilim.
Kumuha ng text editor tulad ng Pages. Maaari mong gawing madilim ang interface, ngunit ang sheet mismo ay palaging magiging puti, na tinutulad ang isang tunay na sheet ng papel.
Mga page na may naka-enable na dark mode
Ang parehong napupunta para sa lahat ng mga uri ng mga editor ng paglikha ng nilalaman, tulad ng Sketch o Illustrator. Bagama't maaaring gawing madilim ang interface, ang artboard na pinagtatrabahuhan mo ay palaging magiging puti bilang default.
Mag-sketch sa dark mode at mayroon pa ring maliwanag na puting artboard.
Kaya't anuman ang app, naniniwala kami na ang mga dark mode ay lalabas sa operating system na iyong ginagamit, ibig sabihin, pinakamahusay na maghanda para sa hinaharap. magdidilim na.
Kung gusto mong matuto nang higit pa tungkol sa pagbuo ng mga madilim na UI, tiyaking tingnan ang mga alituntunin , ito ang aming pangunahing pinagmumulan ng impormasyon para sa artikulong ito.
Pinagmulan: www.habr.com