A színeknek megvan a maguk természetes súlya. A sárga egy természetes “könnyebb” szín, míg a kéket és a pirosat természetes “nehezebbnek” tartják.
A sötétebb színeket általában nehezebbnek érzékeljük. Minél több árnyalattal rendelkezik egy szín (vagyis minél több feketét adnak hozzá egy színhez), annál nehezebbnek tűnik. Minél több árnyalattal rendelkezik egy szín (ami azt jelenti, hogy minél több fehéret adnak egy színhez), annál világosabbnak tűnik. Az alábbi színek ugyanahhoz az árnyalathoz tartoznak (zöld, illetve lila), de különböző árnyalatokkal és árnyalatokkal rendelkeznek.
Minél telítettebb egy szín, annál nehezebbnek tűnik.
Most, mit jelent ez, és hogyan befolyásolja a terveit? Egyszerűen fogalmazva…
Az alábbiakban egy szép esettanulmányt mutatunk be a fenti elméletre. Az összes textúra, forma és szín nem tud versenyezni a középen lévő, teljesen telített piros Play gombbal (a sugárirányú egyensúly is segít). Emellett az elmosódott háttér segít a képernyő felé terelni a fókuszt. Vegye észre, hogy a lufi árnyalt színei nem vonják el a figyelmet a gombról. A világosabb színű, türkiz és sárga színű alsó gombok nem versenyeznek, és egyértelműen másodlagosak. Szép munka, Airdrop UI tervezői!
Nézzük meg az alábbi dizájnt a következőkben. 3 sornyi szöveg az árcédulát tartalmazó egyetlen sorral szemben. Melyik elemre esik leginkább a szemed? Bingo! Az ultrasötét árnyalat egyértelműen felülírja a világos betűtípust, és a szín használatával szépen kiegyensúlyozza a 3 sort az 1 sorral szemben. Vegye észre, hogy ebben a dizájnban is szép asszimetrikus egyensúly van a bal és a jobb oldal között, de ez egy másik posztra való 🙂
Ez a következő dizájn egy nehézsúlyú verseny! Az erősen telített, forró rózsaszínű háttér egy kicsit versenyez a középen lévő sötét elemmel, amely középre helyezésének és nagy súlyának (árnyalatilag) köszönhetően kiemelkedik. A háttérben sok minden történik (és a weboldalon ráadásul mozgás is van), de a háttér minden textúrája és ismétlődő mintázata ellenére a szemnek mégis egyértelmű a fókusz. Szép munka.
Nézd meg az alábbi kompozíciót. Csak azt látod, hogy a piros-sárga színű pár sokkal erősebben vonzza a szemedet, mint a bal oldali pár, sőt a rács a piros árnyalat miatt másodlagos fókuszponttá válik? A zöldek nem tudnak versenyezni ezekkel az erős színekkel. Valójában a piros ing és a grill, valamint a piros ikon között van egy kis vizuális verseny. Ezt a tervező talán megfontolhatná és esetleg kezelhetné a póló világosabbá tételével és az ikon egy kicsit telítettebbé tételével (ez lenne mindenesetre az én javaslatom 🙂 Természetesen az élő oldalon van egy animáció az ikonhoz, amely arra ösztönzi a látogatót, hogy nagyobb figyelmet fordítson az ikonra: http://yadrenakopot.ru/
Ez tehát a gyors útmutató arról, hogyan befolyásolja a színsúly a felhasználói felület kialakítását. Remélem, a következő tervezésednél figyelembe veszed a színsúlyokat, mint csak egy eszközt a tervezői eszköztárad számos eszköze közül.