Color Weights in UI Design (explicat vizual)

Rima Gerhard
Rima Gerhard

Follow

Oct 8, 2018 – 4 min citește

Culoarele au propriile lor greutăți naturale. Galbenul este o culoare în mod natural “mai ușoară”, în timp ce albastrul și roșul sunt considerate în mod natural “mai grele”.

Culoarele mai închise, în general, sunt percepute ca fiind mai grele. Cu cât o culoare are mai multe nuanțe (ceea ce înseamnă că, cu cât se adaugă mai mult negru într-o culoare), cu atât pare mai grea. Cu cât o culoare are mai multă nuanță (ceea ce înseamnă, cu cât se adaugă mai mult alb într-o culoare), cu atât apare mai deschisă. Culorile de mai jos aparțin aceleiași nuanțe (verde și, respectiv, violet), dar au nuanțe și nuanțe diferite.

Cu cât o culoare este mai saturată, cu atât apare mai grea.

Acum, ce înseamnă acest lucru și ce impact are asupra modelelor dumneavoastră? Pur și simplu…

Un studiu de caz frumos pentru toată această teorie de mai sus este prezentat mai jos. Toate texturile, formele și culorile nu pot concura cu butonul Play roșu complet saturat din centru (echilibrul radial ajută și el). De asemenea, fundalul încețoșat ajută la atragerea atenției spre ecran. Observați că culorile umbrite ale balonului nu distrag atenția de la buton. Butoanele inferioare în culori mai deschise, turcoaz și galben, nu concurează și sunt în mod clar secundare. Bună treabă, designeri Airdrop UI!

Considerați în continuare designul de mai jos. 3 rânduri de text față de un singur rând care conține o etichetă de preț. Care este elementul care vă atrage cel mai mult privirea? Bingo! Nuanța ultra-închisă domină în mod clar tipul deschis și, de asemenea, echilibrează frumos cele 3 rânduri față de 1 rând prin utilizarea culorii. Observați că există, de asemenea, un echilibru asimetric frumos între partea stângă și partea dreaptă a acestui design, dar asta este pentru o altă postare 🙂

Este o competiție cu greutate mare în acest următor design! Fundalul roz cald puternic saturat concurează puțin cu elementul întunecat din centru, care iese în evidență datorită poziției sale centrate și a greutății mari (în ceea ce privește nuanțele). Se întâmplă multe lucruri în fundal (iar site-ul web are mișcare pe lângă toate acestea), dar în ciuda texturii și a modelului repetat al fundalului, ochiul are totuși o concentrare clară. Bună treabă.

Aruncați o privire la compoziția de mai jos. Vă puteți da seama că cuplul în roșu și galben are o atracție vizuală mult mai puternică asupra ochiului dvs. decât cuplul din stânga, și chiar și grătarul devine un punct focal secundar datorită nuanței roșii? Verdele nu poate concura cu aceste culori puternice. De fapt, există o oarecare competiție vizuală între cămașa și grătarul roșu și pictograma roșie. Acesta este un aspect pe care designerul ar putea dori să îl ia în considerare și, eventual, să îl abordeze prin ușurarea cămășii și saturarea puțin a pictogramei (aceasta ar fi sugestia mea, oricum 🙂 Desigur, pe site-ul live, există o animație a pictogramei care îl îndeamnă pe vizitator să acorde mai multă atenție pictogramei: http://yadrenakopot.ru/

Atunci, acesta este ghidul vostru rapid despre cum afectează greutatea culorilor designul UI. Sper că veți lua în considerare greutățile culorilor la următorul dvs. design ca fiind doar unul dintre multele instrumente din trusa dvs. de instrumente de designer.

.

Lasă un răspuns

Adresa ta de email nu va fi publicată.