Introducere în teoria culorilor

Ei bine, dacă ați citit primele cinci articole din această serie, s-ar putea să vă întrebați: "Cum se corelează toate acestea cu designul mobil?" Scopul acestei serii introductive este să adăugați niște instrumente și idei noi arsenalului dvs. de design mobil. Acest articol nu este diferit. Culorile pot face aplicația dvs. să arate profesională și frumoasă, dar, pe de altă parte, ele pot face să pară că aplicația dvs. a fost făcută de nepotul meu de cinci ani.

Nu sunt în afara pentru a vă face un designer profesionist în acest curs, dar cunoașterea fundamentelor teoriei culorilor poate ajuta într-adevăr să aducă aplicațiile la nivelul următor, chiar dacă intenționați să creați întreaga interfață de aplicație în cod.

Când vine vorba de înțelegerea teoriei culorii, ceea ce urmează este cel mai simplu mod de a-ți putea descompune pentru tine.

Culori primare

Roșu, galben, albastru. Acestea sunt cele trei culori de bază care nu pot fi create de nici o combinație de alte culori. Toate celelalte culori sunt rezultatul amestecării acestor trei.

Culorile secundare

Verde, portocaliu, violet. Acestea sunt culorile formate prin amestecarea culorilor primare.

Culori terțiare

Galben-portocaliu, roșu-portocaliu, roșu-violet, albastru-violet, albastru-verzui și galben-verde. Acestea sunt culorile formate prin amestecarea unei culori primare și secundare. Cu alte cuvinte, se umple de restul roții noastre de culoare.

Culori similare

Toate cele trei culori care sunt alăturate pe o roată colorată de 12 părți, cum ar fi galben-verde, galben și galben-portocaliu. De obicei, una dintre cele trei culori este culoarea dominată.

Culori complementare

În ceea ce privește roata de culoare, culorile complementare sunt oricare două culori direct opuse unul pe altul, cum ar fi roșu și verde. Culorile complementare creează un contrast maxim și o stabilitate maximă. Aveți grijă atunci când lucrați cu culori complementare complet saturate pentru interfețele digitale: pot fi tensionate pe ochi.

Iată un alt din micile mele secrete pe care te voi lăsa să le dai și de unde am prins graficele. Acesta este un site minunat care vă va ajuta să puneți armonie în aplicația dvs..

Culori adiționale

Culorile aditivilor sunt cele pe care se fabrică webul, televiziunea și dispozitivele mobile. În Photoshop, creăm toate capturile de ecran ale aplicațiilor, fundalul și graficele în format RGB. RGB înseamnă Red, Verde și Albastru, iar aceste trei sunt culorile primare adiționale. Atunci când diferite combinații ale acestor trei sunt amestecate, toate culorile rămase sunt create. În Photoshop, puteți gestiona culoarea RGB făcând dublu clic pe paleta de culori. Cele două moduri cele mai frecvente de a ajusta culoarea în Photoshop este fie să introduceți valori RGB numerice direct în câmpurile de text, fie să trageți selectorul de culori peste paleta de culori.

Pe o scară de la 0 la 255, fiecare increment numeric modifică culoarea într-un mod subtil. Doar pentru a obține atârnă de ea, nu este nimic subtil despre diferențele de mai jos!

O valoare RGB de 255, 255, 255 (saturație completă) este același lucru ca și albul, care arată și valoarea hex din #ffffff.

Dimpotrivă, dacă toate valorile RGB sunt setate la zero, culoarea generată este neagră. Aceasta indică valoarea hexaj corespunzătoare # 000000.

Pentru a obține un pic mai mult în ea, ar trebui să puteți anticipa ce culoare va fi generată atunci când Red este setat la o valoare de 255, iar Green și Blue sunt setate la 0.

Cu toate acestea, nu am putut rezista unui alt ecran. Cu o valoare de 255 în spotul roșu și 0 în verde și albastru, obținem o culoare roșie complet saturată. Verde și Albastru se modifică în mod corespunzător cu aceleași valori rearanjate.

Ca un exemplu al a ceea ce se întâmplă atunci când începem să ne confruntăm cu mai multe valori diferite, cu o valoare de 255 în roșu și verde, vom crea o culoare galbenă complet saturată, cu valoarea hex din # ffff00.

Astfel, prin schimbarea exclusivă a valorilor roșii, verzi sau albastre, putem crea culoarea exactă necesară pentru designul la îndemână. Știind cum culorile interacționează unul cu celălalt este într-adevăr de gând să vă ajute aplicațiile și site-urile web să arate o mai mică armonie și coeziune.

Psihologia culorilor

Deci acum vine distracția. Cu teoria generală, cum știi care este cea mai bună culoare pentru aplicația ta? Culorile pot avea efecte diferite asupra oamenilor și pot chiar să dețină diferite semnificații culturale dincolo de ceea ce poate fi natural intuitiv. Roșul a fost cunoscut pentru a crește circulația sângelui și stimulează corpul și mintea noastră. Din aceste motive, este adesea asociată cu sexul și dragostea. Orange a cunoscut o creștere a energiei totale. Albastrul poate fi utilizat pentru a trata durerea și este cunoscut ca un stimulant și poate adesea să se atribuie insomniei. Țineți cont de asta data viitoare când priviți la acea mică lumină albastră de pe televizor!

Cunoașterea modului în care oamenii reacționează la culori prin natură poate fi un important tip de informație care să vă păstreze în buzunarul din spate. Asocierea culorilor și psihologia culorilor merg mana și mâna, iar ambele merită cercetări independente în continuare pentru designerul serios.

Un site pe care ar trebui să-l bucurați și va accelera deciziile de design al asocierii culorilor este http://colorapi.com. Căutați un cuvânt, să zicem, pâine și veți veni cu o tona de opțiuni de culoare pentru acea aplicație de panificație pe care lucrați. se bucura!

Accesibilitate & Culoare

Sunt un mare susținător al accesibilității și culoare joacă un rol major în accesibilitatea generală atât a site-urilor Web cât și a aplicațiilor mobile. Furnizând un contrast suficient între culoarea de fundal și elementele de pagină, vă veți asigura că toată lumea va putea să se bucure de aplicațiile dvs. așa cum doriți să vă bucurați.

Pentru a vedea cum arată site-ul sau aplicația dvs. web pentru persoanele cu deficiențe de vedere, consultați http://colorfilter.wickline.org/.

Culoare prin exemplu

Iată câteva aplicații care au făcut bine. Uitați-vă la site-ul web pe care îl veți vedea când vizitați de pe un computer desktop și îl comparați cu cel al aplicației mobile. Ambele au un aspect consistent, simt și o schemă de culori. Continuitatea dintre site-ul web și aplicația web este la fel de importantă ca și schema de culori (dar discuția este pentru un alt moment).

Folosind o culoare albastră, site-ul oferă un loc frumos calmant și interesant. Nu se răcește ca în slangul surfer-băiat, dar răcit ca și în temperatură, astfel aplicația termometru. Lucrează bine.

Imi place aceasta. Pivnița scoate un efect frumos folosind maro pentru a da site-ului și aplicației o senzație naturală și reconfortantă. Ca o pivniță de vinuri, eventual cu podele de murdărie și rafturi și pereți din lemn - căptușeala a fost cu adevărat alegerea evidentă aici.

La fel ca aplicația pentru termometru, versiunea mobilă a arctic.ru oferă un aspect frumos, rece, cu albul, albastrul și griul. Afișarea culorilor reci pe un site cu urși polari este întotdeauna o idee bună. În schimb, un sit pentru Las Vegas sau Arizona sau un climat tropical mai cald ar avea mai mult succes folosind culori calde, cum ar fi roșii, portocale și galben.

Data viitoare?

Data viitoare vom reveni în Photoshop și vom învăța cum să creăm forme și butoane de bază. Rămâneți aproape!

Cod