Boja u dizajnu sučelja: A (praktični) okvir

Budući da je prilično samouk, što se tiče dizajna sučelja, uvijek sam se pitao zašto toliko članaka i knjiga govori o teoriji boja i paleti. Prema mom iskustvu, korištenje "podijeljene komplementarne palete" predviđa oko 0% da napravim lijepe dizajne.

Imam još jednu riječ za takve stvari: beskorisno.

Dakle, ako teorija boja ne daje čvrstu osnovu za boju u dizajnu sučelja, što znači?

Dopustite da vam kažem mišljenje: modifikacije boja. Važno je podešavanje boje, a ne branje istih iz šešira za teoriju boja.

Ili, rečeno na drugi način: Temeljna vještina bojenja dizajna sučelja je u mogućnosti mijenjati jednu osnovnu boju u mnogo različitih varijacija.

Znam da ovo zvuči pomalo čudno. Poslušaj me. Dat ću vam okvir za prilagodbu boje u vašem dizajnu sučelja.

Ovaj će okvir:

  • Dopustite da izmijenite jednu boju teme za bilo koju svrhu u vašem korisničkom sučelju (ovo je izuzetno moćno, a kao što ćemo vidjeti, već rade i aplikacije poput Facebooka)
  • Pomoći će vam da predvidite koje će promjene boja izgledati dobro
  • Neka boja izgleda manje subjektivno ("subjektivna" je često riječ za "nisam shvatila kako to funkcionira" - a to je riječ koju čujete tonu kada ljudi pričaju o boji)

Jesmo li cool? Super smo?

Sjajno.

Tamnije i svjetlije varijacije

Jedna stvar koju sam primijetio na mnogim sjajnim sučeljima je da oni često imaju tamnije i svjetlije varijacije na određenoj boji teme.

Nisi mislila da je traka za pretragu samo proziran crni sloj, zar ne? Upozorenje spojlera: nije. Nijedna neprozirnost crne boje na ovoj plavoj boji neće vam dati boju trake za pretraživanje. To je varijacija pokupljena nekom drugom magijom.

Brzo, sada pogledajte Swell Grid, prekrasnu aplikaciju za prognozu surfa.

Sha-KM. Upravo smo pogodili mnoštvo varijacija. Koliko je tamo? Idite na web mjesto i računajte sami. Praktično sve na ovoj stranici je varijacija početne plave boje.

Ili, evo još jednog jednostavnog primjera:

Čak su i stanja elemenata varijacije u boji. To se najbolje ne opisuje kao "paleta od 3 bluesa". To je jedna plava s varijacijama.

Ali ovo postavlja pitanje: kako zapravo izmijeniti boju da biste dobili dobre varijacije?

Doći ćemo tamo, ali želim da shvatite ove stvari iz temelja. Dakle, evo dva naša pouzdana načela za otkrivanje ove stvari:

  1. Potražit ćemo referentne znakove u stvarnom svijetu. Iako su naša sučelja "lažna", i dalje kopiramo kao luda iz stvarnog svijeta, jer nakon desetljeća gledanja stvari u stvarnom svijetu, samo očekujemo da svjetlost i boja djeluju na određene načine.
  2. Koristit ćemo sustav boja HSB. Nedostatak toga je: to je najintimitivniji sustav boja sa širokom uporabom (u moje svrhe, Sketch i Photoshop). Ako ne znate što su nijansa, zasićenost i svjetlina, krenimo i ponovno se vidimo za 10.

Varijacije boja u stvarnom svijetu

Dobro, pogledajte oko sebe. Koju „varijantu boje“ nesumnjivo vidite dvije desetine primjera svaki put kada pogledate po svojoj sobi?

Sjene.

O senci možete razmišljati kao o tamnijoj varijaciji osnovne boje.

Fotografirao David Blaikie

Sa mnom?

Ajmo sad skočiti u Skicu i nabaviti svoje alate za odabir boja i shvatiti ćemo točno što se događa kad sjenka padne na naš koraljni zid.

Kao što sam spomenuo, to ćemo shvatiti i u HSB-u.

Napomena: profili boja monitora / slike mogu za vas tačna mjerenja razlikovati.

Svjetlina se kreće prema dolje - u redu, tako da je to bilo prilično očito. Ali zadržite - prije nego što previše napravimo generaliziranje, pogledajmo još jedan primjer.

Foto Matthias Uhlig

Da li sjene djeluju na Kubi isto? Mi ćemo to saznati.

U redu, sada možemo usporediti i usporediti. Primjećujete obrazac?

Ako postoji nijansa sjenčanja u boji, možete očekivati ​​da se svjetlost smanji, a zasićenost da poraste. Samo smo to gledali u dva slučaja, ali koliko sam ikad vidio, čvrsto je pravilo koje možete ići.

Nijansa je pomalo ljepša - spustila se prema sjeni koraljnog zida, a gore prema sjeni zida tealusa. Za to postoji objašnjenje, ali to je mnogo manje važno i malo ezoteričnije od zasićenosti / svjetline - pa ćemo se tome vratiti kasnije.

Pravila

Razmotrimo ove koncepte još malo.

Tamnija varijacija boje = veća zasićenost + manja svjetlina

Ako se vratite na primjer naše trake za pretraživanje na Facebooku, vidjet ćete da se upravo to događa.

Hue se pomiče za 1 ° od 360 °, što je praktično greška zaokruživanja.

Kako se povećala svjetlina, zasićenost se povećavala. Razlog zbog kojeg traka za pretraživanje ne bi mogla biti neprozirnost crne boje na osnovnom plavom je, jer je u HSB-u dodavanje crne boje jednako smanjenju svjetline. Umjesto toga, želimo smanjiti svjetlinu istodobno dodajući zasićenost. Crna boja ne dodaje zasićenost našoj boji!

Zašto u stvarnom svijetu tamnije boje koreliraju s većim zasićenostima? Nemam pojma ni najmanje. Ali uvijek mogu izmisliti nešto: to je zato što kako intenzitet svjetlosti (svjetlina) nadilazi intenzitet boje (zasićenost), boja nužno postaje ispranija - i obrnuto.

To bi mogao biti potpuni BS, ali nekako ima smisla, zar ne?

Varija boja boja = niža zasićenost + veća svjetlina

Sada, budući da ste pronicljivi i eruditni čitatelji, vjerojatno ste pretpostavili da će nam suprotna transformacija, koja nam daje tamnije varijacije, donijeti svjetlije varijacije.

I ti si ga zabola, pobogu.

Naravno, možemo ići i korak dalje. Ako nastavimo spuštanjem zasićenja i podizanjem svjetline dok krave ne dođu kući, gdje ćemo završiti?

Ovdje:

Završavamo na bijelom.

Možete razmišljati o stvaranju svjetlijih varijacija kao dodavanju bijele boje. A dva su vrlo jednostavna načina dodavanja bijele boje u Sketch i ostali:

  1. Smanjite neprozirnost elementa (ako je na bijeloj pozadini)
  2. Na vrh elementa dodajte prozirni sloj bijele boje

Najvažnija stvar

Ako se sjećate samo jedne stvari iz ovog članka, zapamtite ovo:

Tamnije varijacije boja nastaju smanjenjem svjetline i povećanjem zasićenosti. Svjetlije varijacije boja dobivaju se povećanjem svjetline i smanjenjem zasićenja.

Pomoću ove jednostavne ideje moći ćete napraviti nevjerojatne stvari sa samo jednom bojom.

Istina je da su tolike varijacije u boji između elemenata - ili čak stanja istog elementa - samo jednostavne modifikacije boja.

Evo žetve, aplikacije za praćenje vremena koju koristim i volim.

Pogledajte zaglavlje. Stanje lebdeće točke svjetlije je. Odabrano stanje je tamnije.

Ili pogledajte zeleni gumb novog unosa.

Stanje lebdjenja je tamnije varijacije - veća zasićenost, niža svjetlina.

To ćete koristiti opet i opet.

Da budemo fer, ne svaki dizajn slijedi ovo pravilo 100% vremena. U gornjem zaglavlju Harvest odabrano je stanje samo niže svjetline (zasićenost je nepromijenjena), a stanje lebdanja samo je niža zasićenost (svjetlina je nepromijenjena). Ali gledali smo kako boja djeluje u stvarnom svijetu i znamo da je razlog zašto ovi dizajni izgledaju dobro zato što približavaju ovdje utvrđenim načelima.

Što je sa Hueom?

Govoreći o približavanju načela koja su ovdje izložena, trebali bismo govoriti o nijansi. I gore sam to rekao, ali ponavlja se: nijansa je toliko sekundarna u odnosu na cijelu zasićenost i svjetlinu-pomicanje-u-pravcu da je često možete potpuno zanemariti kad prilagođavate boju.

Kako se kaže, evo najkraćeg objašnjenja.

Prije svega, svaka boja ima neku vrstu "opažene svjetline". To se zove svjetlost.

Iako su plava i žuta svjetlost na 100% HSB svjetlosti, što se čini svjetlijim?

Mislim, pitati nekoga s ulice: što je svjetlije?

„Hm. Žuta boja. Žuta boja?"

Hvala, rando. Upravo ste otkrili blistavost.

"Dakle, u pravu sam?"

Da, jeste. Čak i ako držite konstantu svjetline i zasićenosti i samo mijenjate nijanse, dobit ćete raspon svjetline ili uočene svjetline, koje mjerimo u vrijednostima između 0 i 100.

Naše su nijanse u intervalima od 30 °, sve sa 100% zasićenjem i 100% svjetlošću.

A evo, naše su nijanse umnožene, stavljene u modus mješavine svjetlosti (na bijeloj pozadini - što je kritično za dodavanje ako pratite u Sketch-u) i prekrivene svjetlinom rezultirajuće sive boje. To nam daje mjeru svjetlosti izvorne boje.

U načinu mješavine svjetlosti, svijetlosiva boja znači visoku svjetlinu, a tamno siva znači nisku svjetlinu. Razmislite li na trenutak, ovo ima savršen smisao.

Sada sam ispisao brojeve za vas, ali grafikon vrijedi tisuću brojeva, zar ne?

Gledaj, Sherlock, uzorak.

A upravo ovaj obrazac odgovara na naše pitanje odozgo. Sjećate se kako smo vidjeli da će se za sjenu nijansa pomaknuti prema dolje, a ponekad bi se pomaknula prema gore? Zašto to radi?

Pa, prvo, primijetite da ovaj grafikon ima tri maksimalna i tri minimalna boda. Niske točke su crvena, zelena i plava. Najvažnije točke su cijan, magenta i žuta.

Zvuče li ove određene boje zvono? Da. RGB i CMY popularni su sustavi boja, ali za sada to zanemarite jer vas zalutali.

Važan dio je sljedeći: ako ne računate zasićenost i svjetlinu, pomicanje nijanse prema crvenoj (0 °), zelenoj (120 °) ili plavoj (240 °) smanjuje svjetlinu ili percipira svjetlost boje. Pomicanje nijanse prema žutoj (60 °), cijan (180 °) ili magenta (300 °) povećaće uočenu lakoću boje.

Trik je u tome da se samo kretanje nijanse podudara s gibanjem zasićenosti i svjetline. Ako želite tamniju varijantu, pomaknite nijansu prema crvenoj (0 °), zelenoj (120 °) ili plavoj (240 °), ovisno što je najbliže - i obrnuto (s cijanom, magenta i žutom bojom) za svjetlije varijacije. (Naravno, ovo pretpostavlja da također smanjujete svjetlinu i povećavate zasićenost)

Zbog toga se sjena na koraljnom zidu spuštala nijansom - kretala se prema crvenoj, na 0 °, što je najbliža minimalna točka na 21 °.

I zato se sjena na stijenci zamahnula prema nijansi - premještala se prema plavoj boji, na 240 °, što je najbliža minimalna točka na 194 °.

Um se raznio još?

Put boje

Pa kad su u pitanju varijacije boja, zapitajte se: trebam li jednostavno svjetlije ili tamnije varijacije na boji koju već imam?

(I ako idete za nečim čistim i jednostavnim, odgovor je tako, zato često da)

Tamnije varijacije:

  • Svjetlina se smanjuje
  • Zasićenje raste
  • Nijansa (često) se pomiče prema minimumu svjetlosti (crvena, zelena ili plava)

Lakše varijacije:

  • Povećava se svjetlina
  • Zasićenje se smanjuje
  • Nijansa (često) se pomiče prema maksimumu svjetline

To će vam omogućiti da odaberete jednu nijansu, ali beskrajno je modificirate za sve vaše korisničke sučelje, koristeći tamnije i svjetlije varijacije, gdje je to prikladno.

Sučelje s jednom bojom i mnogo modifikacija

Samo sam ovdje spojio jedan brzi primjer. Cijelo sučelje izrađeno je iz jedne boje. Reci ... izgleda li ta sjenka tela poznatu?

Sada sam poprilično kratak sa svim tim. Postoji još mnogo tema koje treba pokriti:

  • Kako je nijansa još važnija u gradijentima i vizualizaciji podataka?
  • Kad ste u Sketch-u (itd.), Koju tehniku ​​koristite za izradu tamnijih varijacija?
  • Da li više pomičete zasićenost ili svjetlinu?
  • Kako možete pronaći sive koji odgovaraju vašoj shemi boja?
  • Kako odabrati potpuno nepovezane boje koje dobro izgledaju zajedno?
  • Kako to popraviti kada se boje sukobe?
  • I, naravno, samo zašto su RGB i CMY niske / visoke točke na grafu svjetlosti?

Drago mi je što ste pitali.

Predstavljamo… Naučite UI dizajn

Posljednjih 11 mjeseci naporno radim na stvaranju jedinstvenog najopsežnijeg internetskog video tečaja za učenje praktičnih vještina dizajna sučelja.

Ovdje sve govorimo:

  • Boja
  • Tipografija
  • izgledi
  • Postupak
  • Odgovarajući dizajn
  • I više…

Tečaj je 16+ sati videozapisa u preko 30 video lekcija.

U skoro svakom videu gledati ćete me kako dizajniram u Sketch-u. Ovo je važno. Ovdje ne predajem neki teorijski okvir. Umjesto toga, sve što vam pokažem su savjeti, trikovi i okviri koje koristim za dizajniranje sučelja svaki dan. Zamislite na to kako me gleda preko ramena dok vas učim svemu što znam.

Primjerice, u videozapisu „Spacing“ (i da - to je 50-minutni videozapis u cijelosti na bijelom prostoru), započinjem s jednostavnim primjerom temeljenim na tekstu. između naslova i tijela, razmaka uz tekst itd.

To je vrhunac u meni kada govorim o 3 najvažnija principa razmaka. Zatim u drugom dijelu videa napravim redizajn početne stranice 350.org, posebno fokusirajući se na poboljšanje njihove uporabe bijelog prostora. To se temelji na svim pojmovima koje smo upravo uveli. Na kraju, raspravljam o nekoliko slučajeva u kojima ta pravila vidite istegnuta, poput odredišnih stranica ili tablica s velikim podacima.

Evo što ljudi kažu:

„Naučite dizajn UI dizajna je poput naučiti kako letjeti avionom zapravo sjedeći u pilotskoj kabini - Erik stalno dizajnira / redizajnira primjere iz stvarnog svijeta ispred vas, objašnjavajući zašto je X dobar ili loš i kako krenuti o tome da ga učinim još boljim. "
 - Mudassir Ali, inženjer Frontenda, Canva
"Izravni pristup UI Design-a, ilustriran primjerima i vodičima iz stvarnog života, bio je vrlo koristan i otvoren za oči. Toplo bih preporučio ovaj tečaj za UX dizajnere koji žele dodati UI dizajn svom skupu alata. "
 - Sarah Kim, voditeljica UX Design
„Erikin pragmatični pristup dizajnu naučio me beskrajno više od onoga što sam čitao u dizajnerskim knjigama! U redu s knjigama i još jednim video zapisom. "
 - Anders Nysom, razvojni programer

Ako ste razvoj, UX dizajner ili PM, želite dodati vizualni dizajn u svoj set, ovaj tečaj je prilagođen vama. Skoknite preko na naukui.design za više.

I da, imam najbolje ime domene ikad - hvala što ste ga spomenuli.

Dva posljednja čepa prije nego što se oprostimo: Imam Design Newsletter na koji namjerno šaljem vrlo malo, ali vrlo vrijednih članaka o dizajnu (poput onog gore). Ako želite vidjeti takve stvari svakog mjeseca (ili 6) u pristigloj pošti (u osnovi sve je neobjavljeno bilo gdje drugdje), odvojite trenutak i prijavite se.

Za kraj: trebate li slobodni UX / UI dizajner? Zaposli me.