Kolory mają swoje naturalne ciężary. Żółty jest naturalnie “lżejszym” kolorem, podczas gdy niebieski i czerwony są uważane za naturalnie “cięższe”.
Ciemniejsze kolory w ogóle są postrzegane jako cięższe. Im więcej cienia kolor ma (co oznacza, więcej czarny jest dodawany do koloru), tym cięższe wydaje. Im więcej odcienia ma kolor (czyli im więcej bieli jest dodane do koloru), tym jaśniejszy się wydaje. Poniższe kolory należą do tego samego odcienia (odpowiednio zielony i fioletowy), ale mają różne odcienie i barwy.
Im bardziej nasycony jest kolor, tym cięższy się wydaje.
Co to oznacza i jak to wpływa na Twoje projekty? Po prostu…
Miłe studium przypadku dla całej tej teorii powyżej jest pokazane poniżej. Wszystkie tekstury, kształty i kolory nie mogą konkurować z w pełni nasyconym czerwonym przyciskiem Play w centrum (równowaga radialna również pomaga). Ponadto, rozmyte tło pomaga przyciągnąć uwagę w kierunku ekranu. Zauważ, że cieniowane kolory balonu nie odciągają uwagi od przycisku. Dolne przyciski w jaśniejszych kolorach, turkusowy i żółty, nie konkurować i są wyraźnie wtórne. Dobra robota, projektanci Airdrop UI!
Następnie rozważ poniższy projekt. 3 linie tekstu kontra pojedyncza linia zawierająca metkę z ceną. Który element najbardziej przyciąga Twój wzrok? Bingo! Ultra ciemny odcień wyraźnie obezwładnia jasną czcionkę, a także ładnie równoważy 3 linie vs. 1 linia za pomocą koloru. Zauważ, że istnieje miła asymetryczna równowaga pomiędzy lewą i prawą stroną tego projektu, ale to już temat na inny wpis 🙂
W tym kolejnym projekcie jest to konkurencja wagi ciężkiej! Mocno nasycone, gorące różowe tło konkuruje nieco z ciemnym elementem w centrum, który wyróżnia się dzięki swojemu centralnemu położeniu i dużej wadze (w sensie odcieni). W tle dużo się dzieje (a na dodatek strona jest ruchoma), ale pomimo całej tekstury i powtarzającego się wzoru tła, oko wciąż ma jasny punkt ciężkości. Dobra robota.
Przyjrzyjrzyj się kompozycji poniżej. Czy możesz powiedzieć, że para w czerwieni i żółci znacznie mocniej przyciąga wzrok niż para po lewej stronie, a nawet grill staje się drugorzędnym punktem centralnym z powodu czerwonego odcienia? Zieloni nie mogą konkurować z tymi mocnymi kolorami. W rzeczywistości, jest trochę wizualnej konkurencji między czerwoną koszulą i grillem a czerwoną ikoną. To jest coś, co projektant mógłby rozważyć i potencjalnie zająć się tym, rozjaśniając koszulę i nasycając nieco ikonę (to byłaby moja sugestia, w każdym razie 🙂 Oczywiście, na stronie na żywo, jest animacja ikony, która zachęca odwiedzającego do zwrócenia większej uwagi na ikonę: http://yadrenakopot.ru/
Więc, to jest Twój szybki przewodnik po tym, jak waga kolorów wpływa na projektowanie UI. Mam nadzieję, że przy następnym projekcie weźmiesz pod uwagę wagę kolorów jako jedno z wielu narzędzi w swoim zestawie projektanta.
.