Donkere kleurûntwerp ferwiist nei in styl en oanpak foar it meitsjen fan in fisueel ûntwerp dat fertrout op it gebrûk fan djippe, rike kleurskema's, meastentiids mei in oerwicht fan donkere skaden. Dizze ûntwerpstyl is de lêste jierren populêr wurden en kin brûkt wurde yn in ferskaat oan fjilden, ynklusyf webûntwerp, grafysk ûntwerp, ynterieurûntwerp en oaren.

Dim de ljochten, ûntspanne jo eagen en besparje enerzjy. Dark modus is ien fan de meast populêre design trends, en merken fan wrâldklasse lykas WhatsApp, Instagram, Google, Facebook en Apple binne al yn 'e tsjustere modus-ûntwerptrein stapt.

Litte wy ris sjen wat dizze topmerken dogge en hoe't jo in donkere modus UI kinne tafoegje oan jo eigen projekten. Jo sille leare oer foar- en neidielen tsjustere modus en basisûntwikkeling fan donkere modus bêste praktiken om te soargjen dat jo webside- en app-ûntwerpen perfekt sjogge en funksjonearje.

Printe marketing materiaal

Wat is tsjustere modus? Untwerp yn donkere kleuren

Tsjustere modus is in brûkersynterface mei leech ljocht (UI) dy't in donkere eftergrûnkleur as haadkleur brûkt kleur - meastal swart of skaad fan griis. Dit is it folsleine tsjinoerstelde fan 'e standert wite brûkersynterface dy't ûntwerpers al tsientallen jierren hawwe brûkt. As antwurd op ús ferhege skermtiid, hawwe ûntwikkelders fûn dat donkere tema-ynterfaces helpe om eachspanning te ferminderjen, foaral yn omstannichheden mei leech ljocht as nachts. Minder eachspanning betsjutte minder hoofdpijn en in bettere wurkûnderfining.

Instagram-app-ûntwerp yn tsjustere modus Untwerp yn donkere kleuren

Instagram Dark Mode UI

 

WhatsApp op buroblêd applikaasje-ûntwerp yn tsjustere modus Untwerp yn donkere kleuren

WhatsApp yn buroblêd donkere modus UI fia What's App

Google Fit tsjustere modus app-ûntwerp

Google Fit donkere modus brûkersynterface

 

Mar tsjustere modus is net echt wat nijs.

Poster ûntwikkeling. 5 regels

Unthâld de griene kompjûter koade reint del op in swarte eftergrûn yn The Matrix? Dit wie in knypeach nei de orizjinele tsjustere modus: de âlde skoalle monochrome monitors fan iere kompjûters.

Iere thúskompjûter mei griene tekst op swart

Iere thúskompjûters mei griene tekst op swart wiene de OG tsjustere modus.

 

Dizze klassike donkere útstrieling gie yn 'e jierren '80 út' e styl yn it foardiel fan swarte tekst op in wite eftergrûn, simulearret inket op papier. Untwerp yn donkere kleuren

Wat is fideo reklame? Definysje, soarten en trends

Dit wie de noarm foar hast trije desennia oant tsjustere modus weromkaam yn Windows Phone 7 yn 2010. Nei't Google befêstige dat tsjustere modus batterij besparret, hawwe se de funksje tafoege oan har Android OS yn 2018. In jier letter folge Apple mei tsjustere modus op iOS en iPadOS.

Dark Mode en Light Mode yn iOS 13 App Design

Tsjustere modus yn iOS 13

Foardielen fan it brûken fan donkere modus. Untwerp yn donkere kleuren

Tsjustere modus is net allinich makliker foar de eagen (as goed dien), mar it besparret ek batterijlibben en kin sels sûner wêze. Litte wy sjen nei de praktyske foardielen fan tsjustere modus boppe ljochtmodus.

Ferminderet each strain

Jo moatte jo eagen net fiele. Mar elkenien dy't lange tiid skermgegevens analysearret, wit dat jo dit nei in skoftke begjinne te dwaan. Computer Vision Syndrome (CVS) omfettet eachpine, wazig fyzje, dûbele fyzje, hoofdpijn, nekke / rêchpine en mear. As it giet om diagrammen en grafiken, kin tsjustere modus letterlik helpe om de pine te ferminderjen.

Applikaasjeûntwerp yn tsjustere modus Untwerp yn donkere kleuren

Dit griene logo giet goed mei dit donkere tema-app-ûntwerp.

 

Fergruttet sichtberens yn leech ljocht

As jo ​​​​sliepe en immen docht in helder ljocht oan, dan krije jo hoofdpijn. Itselde prinsipe jildt foar minsken dy't nachts let of moarns betiid foar in kompjûterskerm wurkje. Tsjustere modus ferminderet dizze glare en makket it makliker om ynhâld te besjen yn omstannichheden mei leech ljocht.

Besparret batterij macht

Guon digitale gadgets mei OLED-skermen kinne swarte piksels útsette as se net yn gebrûk binne. Tsjustere modus brûkt in ferhege oantal swarte piksels, wêrtroch it apparaat minder macht konsumearret.

Jout in emosjonele lading

In protte donkere modus UI-brûkers kieze it foar enerzjy- en sûnensredenen ynstee fan estetyske redenen. Tsjustere modus herinnert har dat se wat sûner dogge, wat har in goed gefoel jout - lykas dejinge dy't jo krije as jo jo herbrûkber lade shopping bag of in flesse wetter.

Foarkomt ADD. Untwerp yn donkere kleuren

No... soarte fan. Wyt ljocht en kleuren meie jo oandacht ôfliede, wat it dreech makket om in taak te foltôgjen. In donkere modus UI kin de fokus ferbetterje troch jo konsintraasje te rjochtsjen nei de ynhâldgebieten fan jo ynterface, wêrtroch dizze ynhâld yn kin popje en de eftergrûn ferdwynt.

Neidielen fan it brûken fan donkere modus

Lykas alles hat tsjustere modus syn neidielen. Litte wy ris sjen nei de redenen wêrom't in tsjuster tema in neidiel kin wêze foar jo doelen.

Kin emosjonele ferbining ferminderje. Untwerp yn donkere kleuren

Helder kleuren kinne libbene emoasjes oproppe. As dit is wat jo sjoggers sykje, dan kin it fertsjusterjen fan de kleuren in mentale barriêre foar har meitsje. Se sille it dreger hawwe om in emosjonele ferbining te meitsjen mei in tsjuster ûnderwerp. As jo ​​merk motivearjend, ynspirearjend of geastlik fan aard is, kin donkere modus UI in gok wêze. Wylst ljochte kleuren sterke emoasjes kinne oproppe, kin it tsjinoerstelde wier wêze. Dus wa is dyn publyk? Ferbaarne se net as se sykje nei in lift.

Komprimearret romte

Keamers mei donkere muorren kinne klaustrofobysk fiele. Op in apparaat kin tsjustere modus op deselde manier wurkje. As jo ​​​​besykje in gefoel fan romte te meitsjen, kin in tsjustere interface de romte lytser meitsje.

Kleuren mei leech kontrast kinne lestich wêze om te lêzen. Untwerp yn donkere kleuren

As jo ​​net begripe kleuren en kontrasten goed wannear webside ûntwikkeling of apps mei in tsjuster tema, dit kin tekst lestich meitsje om te lêzen, dus hâld dit yn gedachten by it ûntwerpen fan jo e-post, app of webside yn tsjustere modus.

Hoe kinne jo donkere modus brûke yn ûntwerp

Dark mode-ûntwerp kin oeral wurkje. Fan mobile apps oant smartwatches en tv-ynterfaces, dizze ûntwerptrend kin jo merk foarút stjoere. Krij it rjocht en tsjustere modus kin wurkje as gangbusters. Meitsje it ferkeard en jo ûntwerp kin brûkers fuortendaliks útsette. Hjir binne wat basistips by it ûntwerpen fan in tsjustere webside of app-ynterface:

Wannear te brûken tsjustere modus. Untwerp yn donkere kleuren

Kies jo merkkleuren

Wannear't de besteande kleur palet merk al kompatibel mei tsjustere modus, de tsjustere modus goaden glimkje nei dy.

Donkere modus app-ûntwerp

Donkere modus app-ûntwerp

 

Tink twa kear oer it tsjuster gean as jo fiele dat jo jo branding moatte feroarje om te passen by de estetyk. Likemin, as jo merk in breed skala oan kleuren moat brûke, beskôgje dan in lichtere interface. It folsleine kleurspektrum is lestich te lêzen tsjin in donkere eftergrûn.

Markearje jo yndustry. Untwerp yn donkere kleuren

De donkere modus UI is ek nuttich foar it ferbetterjen fan spesifike yndustry. Bygelyks, merken dy't rjochte binne op nachtlibben en ferdivedaasje binne ideaal foar tsjustere modus, om't har hege enerzjyynhâld faak kombineare is mei tsjustere eftergrûnen yn it echte libben.

Gean minimalistysk

As jo ​​​​estetyske ûntwerp al minimalistysk is mei beheinde ynhâld, is jo omjouwing geskikt foar tsjustere modus. Yn in situaasje wêryn tekst de haadynhâld is, kin in tsjustere ynterface it lestich meitsje. Typysk fergruttet de tsjustere modus fisuele rommel, wêrtroch in rommelich skerm noch chaotiger wurdt.

Evoke emoasjes

Besykje in spesifike emosjonele reaksje op te roppen? Lykas mystearje of in bytsje drama? Sûnt lege sichtberens nijsgjirrigens skept en emosjonele spanning ferheget, kin tsjustere modus it perfekte ark wêze foar jo merk.

donker webûntwerptema Untwerp yn donkere kleuren

Dûnker webûntwerp

 

Status symboal. Untwerp yn donkere kleuren

As jo ​​​​in gefoel fan status wolle meitsje, kin de donkere modus UI in effektyf ark wêze. Dûnkere kleuren roppe emoasjes op dy't ferbûn binne mei lúkse en rykdom. As jo ​​​​de oandacht wolle lûke op it moaie wurk, beskôgje dan in donkere modus UI.

Donker tema Webside-ûntwerp foar in lúks horloazjemerk

Elegant webside-ûntwerp fan hege kwaliteit mei in tsjuster tema

 

Best Practices foar Dark Mode Design

D'r binne bepaalde prosessen dy't goed moatte wurkje by it meitsjen fan in donkere modus UI. Jo wolle ommers dat jo produkt geweldich is, krekt? Litte wy alle fakjes kontrolearje op ús checklist foar bêste praktiken foar donkere modus:

1. Gean net te tsjuster. Untwerp yn donkere kleuren

Boekeútjouwers brûke gjin suver wyt papier omdat it kontrast mei swarte inket te hurd is. Dit soarget foar jo om te knibbeljen en kin hoofdpijn feroarsaakje. It is itselde mei digitale apparaten. Bliuw fuort fan suver swart. It is lestich om te sjen nei in skerm mei hege kontrast. Goede donkere moduskleuren binne skaden fan griis kombineare mei desaturearre kleuren.

Untwerp yn donkere kleuren Untwerp fan in mobyl digitaal tydskrift yn 'e Dark Mode-applikaasje

Donkere app-ûntwerp

 

2. Hawwe it rjocht kontrast

De eftergrûn yn tsjustere modus moat tsjuster genôch wêze om wite tekst wer te jaan. In suggestje fan Google Material Design is om in kontrastnivo fan tekst nei eftergrûn te brûken fan op syn minst 15,8:1.

3. Desaturate de kleuren. Untwerp yn donkere kleuren

Bliuw fuort fan folslein verzadigde kleuren op in donkere eftergrûn. Op donkere oerflakken ferskine skaden faak "vibrearje". Brûk ynstee desaturearre kleuren lykas pastels en gedempte kleuren - skaden mei tafoege griis en wyt.

Tink deroan om it kleurpalet fan jo merk te feroarjen. De blauwe kleur fan jo bedriuw kin oars lêze op swart dan op wyt. De kleuren yn tsjustere modus moatte faak oanpast wurde om deselde reaksje te produsearjen as yn ljochtmodus.

4. Brûk de juste kleuren "op"

Hokker kleur? De iene dy't ferskynt boppe op eleminten en kaai oerflakken. "On" kleuren wurde typysk brûkt foar letters. De standert donkere modus UI-kleur is suver wyt (#FFFFFF). Brûk dit net. #FFFFFF liket te triljen as it wurdt besjoen tsjin in donkere eftergrûn. Kies in ljocht griis kleur.

5. Net gewoan flip. Untwerp yn donkere kleuren

As jo ​​oerskeakelje nei tsjustere modus fan standert modus, binne d'r wierskynlik weardefolle fisuele oanwizings yn it orizjinele tema. Ferwiderje de kleuren net allinich om in tsjuster tema te krijen. Jo kinne kleuren feroarje dy't in psychologysk doel hawwe yn betsjuttingsleaze gedempte kleuren. Kies kleur bewust.

6. Dûke djipper

Hoe heger de laach, hoe lichter it moat wêze. Dit sil meitsje fisuele hierargy yn tsjustere modus, dy't giet fan 'e meast brûkte eleminten op jo display nei it minst brûkte.

Fisuele hierargy fan tsjustere modus

Lichtere kleuren boppe meitsje fisuele hierargy

 

7. Belibje en biede frijheid. Untwerp yn donkere kleuren

Test sawol tsjustere as ljochte ferzjes fan jo ûntwerp. Eksperimintearje mei elke styl en meitsje wizigingen dêrop basearre op feedback fan brûkers. De foarkar fan minsken kinne ommers ûnfoarspelber wêze, dus lizze jo brûkers net de lêst. Lit se har werjefte wikselje fan ljochtmodus nei tsjustere modus. Dit jout brûkers kontrôle oer har ûnderfining en makket dat se har personaliseare fiele.

 

Jo assistint yn bedriuwsreklame en drukkerij "АЗБУКА«