Barevné váhy v designu uživatelského rozhraní (vysvětleno názorně)

Rima Gerhard
Rima Gerhard

Sledovat

8. října, 2018 – 4 minuty čtení

Barvy mají svou přirozenou váhu. Žlutá je přirozeně “lehčí” barva, zatímco modrá a červená jsou považovány za přirozeně “těžší”.

Tmavší barvy jsou obecně vnímány jako těžší. Čím více má barva odstínů (což znamená, že do barvy je přidáno více černé), tím těžší se jeví. Čím více odstínu barva má (což znamená, že do barvy je přidáno více bílé), tím se jeví světlejší. Níže uvedené barvy patří do stejného odstínu (zelená, resp. fialová), ale mají různé nádechy a odstíny.

Čím je barva sytější, tím se jeví těžší.

Co to znamená a jak to ovlivňuje vaše návrhy? Jednoduše řečeno…

Pěkná případová studie pro celou tu výše uvedenou teorii je předvedena níže. Všechny textury, tvary a barvy nemohou konkurovat plně sytému červenému tlačítku Play uprostřed (pomáhá i radiální vyvážení). Také rozmazané pozadí pomáhá přitáhnout pozornost k obrazovce. Všimněte si, že stínované barvy balónku neodvádějí pozornost od tlačítka. Spodní tlačítka ve světlejších barvách, tyrkysové a žluté, si nekonkurují a jsou jasně sekundární. Dobrá práce, návrháři uživatelského rozhraní Airdrop!”

Podívejte se na následující návrh. Tři řádky textu versus jeden řádek obsahující cenovku. Který prvek nejvíce upoutá vaše oko? Bingo! Ultra tmavý odstín jasně přebíjí světlé písmo a také pěkně vyvažuje 3 řádky oproti 1 řádku pomocí barvy. Všimněte si, že mezi levou a pravou stranou tohoto návrhu je také pěkná asymetrická rovnováha, ale to je na jiný příspěvek 🙂

V dalším návrhu je to soutěž těžkých vah! Silně syté horké růžové pozadí trochu konkuruje tmavému prvku uprostřed, který vyniká díky své vycentrované pozici a velké váze (co do odstínu). Na pozadí se toho děje hodně (a web má ke všemu ještě pohyb), ale i přes veškerou texturu a opakující se vzor pozadí má oko stále jasnou pozornost. Pěkná práce.

Podívejte se na kompozici níže. Poznáte jen, že dvojice v červené a žluté barvě působí na vaše oko mnohem silněji než dvojice vlevo, a dokonce i mříž se díky červenému odstínu stává sekundárním ohniskem? Zelená těmto výrazným barvám nemůže konkurovat. Ve skutečnosti je mezi červenou košilí a grilem a červenou ikonou tak trochu vizuální konkurence. To je něco, co by designér mohl zvážit a případně řešit zesvětlením košile a trochu sytější ikonou (to by byl každopádně můj návrh 🙂 Na živé stránce je samozřejmě k ikoně animace, která návštěvníka nabádá, aby ikoně věnoval větší pozornost: http://yadrenakopot.ru/

Takže to je váš stručný návod, jak váha barev ovlivňuje návrh uživatelského rozhraní. Doufám, že při svém příštím návrhu vezmete v úvahu váhu barev jako jeden z mnoha nástrojů ve své sadě designérských nástrojů.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.