Un spectru de posibilități: Ghidul de culoare pentru interfața de utilizare
Publicat: 2022-03-11Nu există nicio cale de ocolire: culoarea este elementul creativ cu cel mai mare impact în designul vizual. De la fundalurile scenice încântătoare ale decorului până la compozițiile complicate ale pixel art-ului, o înțelegere solidă a culorii este cheia principală pentru o comunicare convingătoare. Ai nevoie de dovezi?
Când participanții la un studiu recent centrat pe marcă au fost provocați să deseneze siglele a 10 corporații emblematice, doar 16% au reușit să-și amintească formele și caracteristicile de design precise. Cu toate acestea, atunci când i s-a cerut să identifice paleta de culori a unei mărci, numărul de răspunsuri corecte a crescut cu până la 80%.
Culoarea joacă, de asemenea, un rol influent în lumea designului interfeței cu utilizatorul. Produsele digitale cu care interacționăm zilnic se bazează pe utilizarea strategică a culorii pentru a comunica informații importante, așa că este esențial ca designerii UX și UI să înțeleagă cum să folosească culoarea cu înțelepciune.
În acest ghid, vom:
- Demistifică elementele de bază ale teoriei culorii,
- Oferiți principii solide pentru lucrul cu culoarea în interfețele digitale,
- Partajați resurse utile pentru creșterea gradului de conștientizare a culorilor și
- Permiteți designerilor de interfață de utilizare să își creeze propriile scheme de culori remarcabile.
Scopul acestui ghid este competența de culoare, urmată de încrederea în culoare, totul de dragul unei execuții uimitoare a culorilor în interfețele de utilizator pe care le întâlnim în fiecare zi.
Curs intensiv: Teoria culorilor pentru designeri de interfață de utilizare
Teoria culorilor este un domeniu de studiu extins, cu propria terminologie, metodologie și baze științifice. Poate fi complicat, dar nu asta ne dorim. Ceea ce dorim este o înțelegere a culorii care poate fi aplicată cu o precizie fulgerătoare. Vrem să folosim culoarea așa cum folosim formele - fără efort, îndrăzneț și eficient.
Pentru a folosi culoarea în acest fel, designerii UI trebuie să aibă o înțelegere solidă a acestor concepte de bază ale teoriei culorii:
- Culoarea este relativă.
- Supraîncărcarea de saturație distruge vibrația culorii.
- Contrastul simultan are argumente pro și contra.
- Cele mai bune scheme de culori de bază sunt.
- Nuanța influențează întotdeauna valoarea.
Să săpăm.
Culoarea este relativă
Culoarea nu este niciodată singură. Pe măsură ce ochiul uman și creierul lucrează împreună pentru a vedea o culoare, ele sunt întotdeauna influențate de:
- Lumină strălucește pe culoare
- Alte culori care înconjoară culoarea
Consultați acest exemplu din natură:
R: Creierul și ochiul lucrează împreună pentru a ne ajuta să înțelegem că floarea în ansamblu este de fapt roșu aprins.
B & C: Maroul închis al umbrei florii (B) face ca evidențierea de pe creasta petalei (C) să pară mult mai strălucitoare decât culoarea maro plictisitoare care este de fapt. În esență, lumina care strălucește pe creasta petalei și culoarea umbrei lucrează în tandem pentru a păcăli ochiul și a intensifica lumina.
Iată un alt exemplu care arată cât de înșelătoare poate fi culoarea:
În designul UI, relativitatea culorilor nu este întotdeauna la fel de evidentă, așa că culorile dintr-o schemă ar trebui testate unele față de altele. De ce? Pentru că acea selecție frumos aranjată de culori din ghidul tău de stil se poate dovedi a fi problematică atunci când este aplicată la o interfață.
Marea la pachet? Nu vă mângâiați conceptele de culoare. Dacă un eșantion de galben accentuat arată luxuriant când este înconjurat de spații albe în Sketch, dar se confruntă cu schema de culori dominantă a unei interfețe de utilizare, găsiți o soluție diferită.
Supraîncărcarea de saturație distruge vibrația culorii
Saturația culorii este parte integrantă a vibrației culorii. Cu toate acestea, o schemă asamblată în jurul nimic altceva decât culori foarte saturate copleșește ochiul, iar vibrația este diminuată. Cu culoare, mai puțin înseamnă mai mult. O culoare foarte saturată devine vibrantă atunci când este utilizată în tandem cu culori mai puțin saturate.
Contrastul simultan are argumente pro și contra
Contrastul simultan apare atunci când complementele de culoare de exact aceeași valoare sunt plasate una lângă alta. Efectul este atât de intens încât face ca punctul în care cele două culori se întâlnesc să vibreze sau să pulseze.
Pentru designerii UI, contrastul simultan poate avea rezultate pozitive și negative, așa că este important să înțelegeți cum să controlați potența acestui fenomen vizual.
De exemplu, într-o interfață concepută în jurul unei varietăți de albastru, utilizarea unui portocaliu complementar cu aceeași valoare ca și culoarea ancoră albastră ar fi o modalitate excelentă de a atrage atenția asupra pictogramelor de notificare.
Cu toate acestea, aceeași combinație de portocaliu și albastru ar provoca migrene dacă ar fi folosită pentru textul și fundalul meniurilor derulante.
Schemele de culori de bază sunt cele mai bune
Curcubeele sunt frumoase – în natură. În designul UI, culoarea trebuie folosită mai selectiv sau copleșește experiența. Chiar și atunci când mărcile au palete de mare impact cu o gamă largă de opțiuni, cel mai bine este să arătați reținere și să construiți interfețe cu utilizatorul în jurul schemelor de culori simple.
Iată două planuri sigure pentru construirea unei scheme de culori de bază pentru interfața de utilizare:
1. Scheme de culori UI analoge
- Aceste scheme plăcute pentru ochi constau în culori care sunt strâns grupate pe roata de culori.
- Schemele de culori similare sunt ușor de găsit în fotografiile mediilor naturale, în special ale vieții vegetale, și tind să fie calmante vizual.
- Varietatea schemelor analoge provine din schimbările de saturație și luminozitate, nu din schimbări majore de nuanță.
- Când utilizați o schemă analogă, încercați să adăugați o culoare foarte saturată direct de peste roata de culori pentru a crea un accent într-o interfață.
2. Scheme complementare de culori ale UI
- Schemele de culori complementare se bazează pe interacțiunea de a completa culorile reci și calde care există unul față de celălalt pe roata de culori.
- Varietatea culorilor este obținută prin modificarea saturației și a luminozității între extremele complementare.
- Utilizarea prea multor culori strălucitoare, foarte saturate subminează impactul schemelor complementare.
Nuanța influențează întotdeauna valoarea
Acest lucru poate suna ciudat, dar culorile au valorile de gri corespunzătoare. Iată dovada:
În imaginea de mai sus, avem o gamă de nuanțe la 100% luminozitate și saturație, dar uitați-vă la ce se întâmplă atunci când aceste culori sunt convertite în tonuri de gri:
Bum! Este dezvăluită o întreagă gamă de valori de gri. De ce contează acest lucru pentru designerii UI? Un cuvânt: Contrast .
Treceți-vă mintea la tonuri de gri pentru un moment. Dacă ați căuta să creați contrast, ați folosi vreodată o valoare de gri de 40% peste 50%? Bineînțeles că nu, dar este exact ceea ce riscă atunci când nuanța este lăsată în afara ecuației de contrast de culoare.
Amintiți-vă, nuanța influențează întotdeauna valoarea.
4 principii esențiale de culoare pentru interfețele digitale
Acum că am simplificat teoria culorilor și am legat conceptele sale de bază cu designul UI, este timpul să aruncăm o privire mai concentrată asupra rolului pe care îl joacă culoarea în interfețele digitale. Acestea sunt cele patru principii de culoare care trebuie luate în considerare încă de la primele eforturi ale fiecărui proiect de design UI.
- Relația dintre text și culoare este crucială.
- Accesibilitatea culorilor nu poate fi ignorată.
- Contrastul este esențial, dar nu este un remediu de design.
- Culoarea funcționează cel mai bine atunci când este aplicată proporțional.
Relația dintre text și culoare este crucială
Culoarea afectează lizibilitatea. Majoritatea designerilor de UI înțeleg acest lucru în principiu, motiv pentru care nu vedem multe interfețe cu text verde pe fundal roșu. În schimb, tensiunea dintre text și culoare apare subtil, trecând prin componentele obișnuite ale interfeței de utilizare, cum ar fi formularele, butoanele, anteturile și pictogramele.
Mențineți o relație sănătoasă text/culoare urmând aceste instrucțiuni simple:
- Evitați întotdeauna contrastul scăzut între text și fundal.
- Nu utilizați culori complementare pentru text și fundal, mai ales atunci când culorile au luminozitate și saturație similare (de exemplu, text galben pe fundal violet).
- Chiar și pe fundaluri albe, nu setați textul corpului în culori strălucitoare. Negrul și gri închis sunt cele mai ușor de citit.
Accesibilitatea culorilor nu poate fi ignorată
Culoarea este comunicativă, dar nu poate fi singurul element de design folosit pentru a transmite informații într-o interfață de utilizare. De ce nu? Pentru că unii utilizatori de web percep culoarea diferit (sau deloc) decât majoritatea populației.
De exemplu, o persoană care suferă de daltonism poate să nu poată spune când pictograma unui produs este în starea sa „apăsată” dacă singura diferență a pictogramei este o schimbare de culoare.
În plus, unii oameni întâmpină dificultăți în a vedea componentele importante ale interfeței de utilizare care au un contrast scăzut de culoare față de fundalul unei interfețe. Site-uri precum Colorable și Contrast Ratio permit designerilor să testeze rapid o gamă de perechi de culori pentru accesibilitatea contrastului.
Contrastul este esențial, dar nu este un remediu de design
Da, contrastul de culoare în designul UI este important. Planifică-l, implementează-l, beneficiază de el. Dar nu vă așteptați să o fluturați ca pe o baghetă magică și să remediați designul prost.
Forma, spațiul, dimensiunea și alte elemente de design nu trebuie ignorate. Contrastul de culoare poate face ca o interfață de utilizator îngrozitoare să pară atrăgătoare, dar nu va rezolva o experiență proastă a utilizatorului.
Culoarea funcționează cel mai bine atunci când este aplicată proporțional
Imaginați-vă o aplicație de știri în care fiecare instanță de text este setată în majuscule sau un site de comerț electronic proiectat pe o grilă de imagini de 9x9. Ambele ar fi groaznice!
Designerii pricepuți de interfață de utilizare folosesc elemente de design precum tipografia și repetarea proporțional pentru a îmbunătăți ierarhia designului. Culoarea merită aceeași considerație atentă. În designul UI, folosirea prea multor culori încurcă modul în care sunt percepute informațiile.
Resurse de culoare pentru un progres continuu
Iată un adevăr incomod: proiectarea cu culoare este o abilitate, iar abilitățile trebuie dezvoltate. Majoritatea designerilor de UI au un simț înnăscut al culorilor care arată bine împreună (alias gustul culorii), dar acest lucru nu se traduce întotdeauna în aplicare.
Pentru a stăpâni cu adevărat culoarea și a vedea impactul ei deplin asupra designului UI, designerii trebuie să exerseze. Din fericire, există o mulțime de resurse pentru a ajuta la învățarea continuă a culorilor și la dezvoltarea abilităților.
Ctrl+Paint
Dacă sunteți un designer de UI care dorește să câștige imediat încrederea în culoare, începeți cu ctrlpaint.com, un site web dedicat instrucțiunilor de pictură digitală. Pictură digitală? Într-adevăr?
Absolut. Artistul de concept profesionist Matt Kohr predă utilizarea culorilor digitale prin tutoriale video rapide și exerciții practice. Curriculumul este minunat de simplu și se concentrează pe „pictarea a ceea ce vezi”, atât în lumea fizică, cât și în imaginație.
Începeți cu biblioteca video gratuită (Secțiunea 11) înainte de a trece la exercițiile mai intensive din Color Starter Kit .
Josef Albers și aplicația interacțiunea culorilor
Înțelegerea contemporană a relativității culorilor a fost intens explorată și avansată de abordarea practică înainte de teorie a artistului/educatorului Josef Albers.
Albers a propus că o singură culoare ar putea avea „mai multe fețe” și a încurajat jocul și experimentarea extinsă în rândul studenților săi în speranța că „ochii vor fi deschiși” pentru a vedea culoarea așa cum se comportă cu adevărat în lumea reală (spre deosebire de culorile simbolice pe care le imaginăm). în mintea noastră).
În 1963, Albers a scris Interacțiunea culorii , un manual care continuă să aibă o mare influență în educația mondială în artă și design. Pentru a sărbători aniversarea a 50 de ani de la publicarea cărții, Universitatea Yale a lansat o aplicație interactivă pentru iPad care conține textul integral, dar permite și utilizatorilor să se joace și să experimenteze cu plăcile color ale lui Albers.
Pentru designerii UI, aplicația Interacțiunea culorilor oferă o oportunitate de a experimenta exerciții de culoare analogică într-un mediu digital și de a vedea direct modul în care relativitatea culorilor afectează interfețele utilizatorului.
Andrew Loomis
În prima jumătate a secolului al XX-lea, Andrew Loomis a fost un ilustrator și instructor proeminent la Academia Americană de Artă din Chicago, dar moștenirea sa de durată este aceea de autor. Loomis a scris șase cărți despre artă comercială și design și a acoperit o gamă largă de subiecte, de la desenul figurii până la plasarea produsului.
În cărțile sale Creative Illustration și Eye of the Painter (ambele disponibile pe archive.org), Loomis renunță la o serie de linii de durată care rămân relevante pentru domeniul modern al designului UI:
Cea mai mare greșeală de culoare, și una care provoacă lipsa de unitate și armonie, este să ai prea multe culori pe paletă.
Oricare două culori vor fi armonioase atunci când una sau ambele conțin unele din cealaltă.
Culoarea se pretează să experimenteze mai mult decât orice alt element de frumusețe.
Alte interfețe pentru designeri
Odată atins un nivel de bază de competență de culoare, crearea schemei de culori înflorește într-o activitate fascinantă. Fiecare interfață întâlnită devine o oportunitate de învățare și critică, iar observațiile abundă.
Aceasta este etapa de dezvoltare a unui designer de UI, când referirea la munca altor designeri devine responsabilă. Cum așa? Pentru că referințele se deplasează de la destinație la călătorie, de la punctul final la inspirație.
Designerii UI de toate nivelurile de calificare vor beneficia de păstrarea unei evidențe continue a schemelor de culori UI găsite. Faceți capturi de ecran, păstrați un jurnal fizic de culoare, începeți o tablă de dispoziție - orice este necesar pentru a imprima momente de iluminare color pentru implementarea viitoare.
Culoarea este prea importantă pentru a fi ignorată
Când vine vorba de proiectarea interfețelor digitale, culoarea nu este o considerație opțională. Chiar și în interfețele de utilizare care folosesc culori minime (sau cele care sunt în întregime alb-negru), este imperativ ca designerii de interfață de utilizare să înțeleagă de ce culoarea este sau nu este utilizată și cum afectează aceasta experiența utilizatorului.
De asemenea, este important ca designerii UI să aibă capacitatea de a genera și implementa scheme de culori originale. Referința la munca altor designeri și a produselor digitale este o practică utilă, dar aceasta devine limitativă atunci când este singura metodă de explorare a culorilor întreprinsă în timpul procesului de proiectare. Există o valoare imensă în a putea surprinde perechi de culori văzute în lumea reală sau cu ochii minții.
Dacă ești un designer care s-a chinuit să folosească culoarea cu pricepere sau te-ai gândit vreodată „Nu prea am talent pentru culoare”, nu te descuraja. Proiectarea cu culoare nu este o formă de vrăjitorie creativă sau de cadouri speciale; este o disciplină practică bazată pe tehnici simple care pot fi repetate și îmbunătățite.
Amintiți-vă, culoarea este cheia principală pentru o comunicare clară și convingătoare a designului. Indiferent dacă este implementat cu grijă sau abandonare nesăbuită, are un impact asupra conversiei, a cunoștinței mărcii și a experienței utilizatorului. Pentru designerul UI, culoarea este un instrument puternic care pur și simplu nu poate fi ignorat.
• • •
Citiri suplimentare pe Blogul Toptal Design:
- Rolul culorii în UX
- Crearea unui ghid de stil UI pentru o mai bună UX
- UX și importanța accesibilității web
- Artă vs. Design – O dezbatere atemporală
- Proiectare pentru medii interactive și spații inteligente