Vizuální rovnováha v návrhu UI

Naučte se pracovat s principem vizuální rovnováhy. Návrh rozhraní webu nebo aplikace se stane přehlednějším a bude příjemnější se na něj dívat.

Při tvorbě designu UI musíte docílit konzistence a harmonie. Všechny prvky vůči sobě musí být vizuálně vyrovnány. Jak docílit toho, aby prvky mezi sebou ladily?

V lekci se dozvíte

  • Co je to vizuální rovnováha.
  • Jak upravovat vizuální váhu prvků.
  • Pomocí čeho docílit vizuální rovnováhy.
  • Jaké existují typy vizuální rovnováhy.
  • Jak se naučit dosahovat vizuálního balancu.
Začít lekci
Doba čtení
8
min
Publikováno
14.6.2019
Upraveno
16.6.2019

Co je vizuální rovnováha?

Když se podíváte na design webu nebo aplikace a porovnáte mezi sebou prvky, nesmí se navzájem vizuálně přebíjet a působit rušně pro vaše oko. Při pohledu na ně musí každý prvek nést stejnou váhu vaší pozornosti. Tedy kromě těch prvků, které chceme, aby vynikly. Všechny prvky se musí navzájem doplňovat, musí spolu ladit a být v souhře.

Pro následující vysvětlování si vždy představujte dětskou houpačku. Ve fyzice se tomu říká „páka“. Na jednom rameni se nachází  jeden objekt a na druhém rameni druhý. Pokud jsou oba od středu houpačky stejně vzdálené a oba váží stejně, nachází se v rovnováze.

Pokud bude jeden z objektů těžší, rovnováha se naruší. Jak dostat houpačku zpět do rovnováhy? Jsou tři možnosti:

1) Těžší objekt posunute více ke středu houpačky.

2) K lehčímu objektu přidáte další objekt/y, které jeho váhu dorovnají.

3) Posunete pevný střed, na kterém jsou ramena páky.

V grafickém designu je to podobné. Pokud mezi sebou porovnáváte prvky, vždy si na ramenech houpačky představte prvky UI. Nebudete pracovat s reálnou váhou tělesa ale s tzv. vizuální váhou.

Vizuální váha

Co si představit pod vizuální váhou? Vizuální váha udává, jak moc daný prvek v rozhraní zaujme vaše oko. Na některé prvky se zaměřujete více a na některé méně. Cílem je dostat prvky do vizuální rovnováhy.

Představte si pro demonstraci, že bychom vizuální váhu vyjadřovali kilogramy. Kolik by mohly vážit prvky rozhraní?

Faktory, které ovlivňují vizuální balanc

Abyste získali perfektní návrh a vyvážené prvky, můžete pracovat s několika faktory, které když vhodně nakombinujete, dosáhnete požadované vizuální rovnováhy.

U všech uvedených příkladů jsou demonstrovány pouze principy. Ukázané změny neznamenají, že jde o nejlepší řešení. Mají ukázat, jak se dá s prvky manipulovat a měnit mezi nimi vizuální balanc. Je pak na každém z vás a na vašem citu, s jakým řešením přijdete a co bude vypadat lépe.

Pozice prvků

Vizuální balanc ovlivňuje pozice prvků. Když si opět představíte páku (houpačku) a na obou koncích ramen prvky rozhraní, kde na jedné straně je prvek těžší, co musíte udělat, abyste mezi nimi získali rovnováhu? Můžete pomyslně protahovat délku ramen nebo pevný střed, na kterém je páka umístěna a pak po ramenech prvky posouvat.

Velikost prvků

Velké prvky jsou těžší a logicky budou poutat více vaší pozornosti.

Barva prvků

Některé barevné tóny navozují pocit, že jsou těžší a některé lehčí (např. červená je těžší než žlutá). Roli hraje sytost a tmavost. Sytější a tmavší barvy působí, že jsou vizuálně těžší než ty bledé a světlé.

Také dost záleží, na jakém pozadí barvy porovnáváme. Na světlém pozadí je sice červená vizuálně těžší než žlutá, ale pokud pod barevné objekty přidáme jiné pozadí, karty se mohou obrátit.

Textura na prvcích

Pokud existují stejné barevné prvky, ale jeden z nich má znázorněný povrch (obsahuje texturu), působí, že je těžší.

Tučnost / obsah prvků

Prvky, které na stejném povrchu zabírají více pixelů (zabírají větší plochu), jsou výraznější. Ty které zabírají menší plochu, jsou méně zřetelné. Například tučnější ikony nebo písmo vypadá, že je těžší a tím i výraznější.

Tvar prvků

Pravidelné tvary jako kruh nebo čtverec působí, že jsou těžší než nepravidelné. U pravidelného prvku je co nejvíce pozornosti směřováno k jeho centru a tím získává větší vizuální váhu. Nepravidelné tvary nabávají dojmu „ztráty hmoty“ a působí lehčeji.

Hustota prvků

Shluk více prvků se zdá být vizuálně těžší.

Bílý prostor okolo prvků

Pokud si představíte prázdný prostor, zřejmě vás nezaujme. Pokud ale tento prázdný (bílý) prostor přidáte kolem nějakého prvku, vizuální váha prvku se zvětší.

Platí, že prvky, které kolem sebe mají více bíleho místa, jsou těžší než prvky, které kolem sebe tolik prostoru nemají.

Typy vizuální rovnováhy

Symetrická rovnováha

Symetrická rovnováha nastává v momentě, kdy na obou stranách houpačky máte dva totožné prvky nebo skupinu prvků o stejné váze a vlastnostech. Kompozice v rozhraní je zrcadlová. Proto jsme schopni druhou část rozhraní při skenování očima lehce předvídat.

Symetrická rovnováha je spíš formální a elegantní a nic jí nezkazíte. Použijete ji při vážnějších návrzích UI. Někdy působí až nudně. Ale to není na škodu.

Asymetrická rovnováha

Asymetrická rovnováha nastává, když na jedné straně houpačky existuje například dominantní prvek o nějaké vizuální váze a druhou stranu vyrovnává skupina jiných prvků o menší vizuální váze.

Asymetrická rovnováhá je modernějšího rázu. Je dynamičtější, živější a méně nudná.

Radiální (paprskovitá) rovnováha

Radiální rovnováha nastává, když jsou prvky umístěny paprskovitě od pomyslného středu. Pomyslný střed je vždy předmětem vaší pozornosti.

Mozaicka / chaotická rovnováha

U mozaické rovnováhy jsou různé prvky náhodně rozmístěny. Jde o řízený chaos prvků. Nemusí existovat žádná pravidla. Prvky jsou ale rozmístěny dle svých vizuálních vah tak, že je kompozice celá v rovnováze a žádný prvek nevyčnívá.

Vizuální vlastnosti prvků vhodně kombinujte

Rovnováhy můžete dosáhnout mnoha kombinacemi vlastností prvků. Hrajte si s jejich umístěním, velikostí, barvou, tloušťkou, apod. Je pouze na vás, kterou kombinaci si vyberete, abyste rovnováhy dosáhli.

Položky seznamu můžete od sebe oddělit několika způsoby tak, aby byla zachována stejná vizuální rovnováha. V prvním příkladu je použita dělicí čára o 1 px v tmavší barvě, ve druhém příkladu je použita dělicí čára o 2 px ve světlejší barvě a ve třetím příkladu je použita dělicí čára o 3 px v nejsvětlejší barvě. Přestože dělící čára bledne, její výraznost je vykompenzována její tloušťkou.

Při úpravě optického balancu si řekněte, co vás limituje

Často se stává, že s určitou vlastností daného prvku nemůžete pohnout. Skvělé na tom je to, že můžete pohnout s těmi ostatními. Optického balancu lze dosáhnout vždy.

Při navrhování je potřeba si říct, se kterými vlastnostmi prvků můžete hýbat a se kterými ne.

Dobrými příklady, kde narazíte na limity, jsou použité sady ikon nebo písma. Můžete si u těchto prvků klást tyto otázky.

Limity ikon

Budete používat již hotovou sadu ikon? Jste schopni změnit tloušťku jejich čar? Můžete upravit barvu ikon? Můžete je bez problému zvětšovat nebo změnšovat? Pokud ne, budete muset optické rovnováhy docílit úpravou ostatních prvků.

Limity textu

Máte k dispozici dostatek řezů, díky kterým text zjemníte nebo ho naopak zvýrazníte? Pokud ne, můžete pravděpodobně hýbat s velikostí textu, jeho barvou nebo s vlastnostmi ostatních prvků.

Zvýraznit prvky znamená porušit vizuální balanc

Na každém webu nebo v aplikaci máte nějaký cíl. Chcete uživatele někam navést. Pokud by byl každý prvek v rovnováze, uviděl by uživatel sice krásné plátno s rozhraním, ale nikam by ho nevedlo. Musíte zvýraznit důležité prvky (hlavní obsah). Nadpisy, texty, tlačítka, apod. Vždy při navrhování přemýšlejte a u každého prvku si řekněte: „Potřebuji, aby si tohoto prvku uživatel všimnul a nepřehlédnul ho?“. Pokud ano, zvýrazněte ho změnou jeho vlastností (velikost, barva, …). Porušte vizuální rovnováhu.

Jak se naučit tvořit vizuální balanc?

Do začátku je dobré, abyste pochopili alespoň základní principy. Naučit se tvořit vizuální balanc chce trochu cviku. Pravidla vám v tom mohou pomoct. Časem to začnete dělat „od oka“. Čím víc budete navrhovat, tím víc začnete tvořit návrhy automaticky v rovnováze.

Při navrhování se nezaměřujte očima pouze na jediný prvek. Dívejte se rovnoměrně očima na celé plátno. Představujte si na plátně pomyslné váhy. Kontrolujte, kde něco vizuálně vyčnívá. Pokud vás do očí něco bije a není to záměrem, už víte, pomocí jakých principů dosáhnout toho, abyste daný prvek utlumili.

Cvičení

  1. 01 Cvičení

    Otevřete si grafický editor, nakreslete si vedle sebe dva stejné čtverce o libovolné barvě. Jeden čtverec zmenšete na polovinu. Tím porušíte vizuální balanc. Zkuste se zmenšeným čtverem manipulovat tak, abyste dosáhli vizuální rovnováhy. Zkuste mu nastavit jinou barvu nebo k němu přikreslete další prvky.

  2. 02 Cvičení

    Při navrhování vašeho dalšího webu nebo aplikace se zkuste dívat na plátno rovnoměrně. Je všude zachována vizuální rovnováha?

  3. 03 Cvičení