Princípy vizuálnej hierarchie pre dizajnérov sú konceptom dizajnu, ktorý sa používa na usmernenie toho, ako sa oči diváka pohybujú v dizajne a určujú, ktoré prvky sú najdôležitejšie alebo vizuálne príťažlivé.
Najprv tam boli kamenné tabuľky, papyrusové zvitky a papier. Potom prišli počítačové obrazovky a elektronické tablety. Ako sa technológia zobrazovania stránok vyvíja, dizajnéri majú jasný spôsob, ako organizovať obsah. Ale čo je lepšie? Stručne , vizuálna hierarchia.
Tu je definícia vizuálnej hierarchie: Vizuálna hierarchia je usporiadanie grafické prvky v dizajne v poradí dôležitosti každého prvku. Rozhoduje vizuálna váha dôležitosť prvku v hierarchii dizajnu, ktorý divákovi hovorí, na čo sa má zamerať a v akom poradí.
Zdroje pre dizajnérov. 50 zadarmo
Toto sa stáva čoraz dôležitejším problémom, pretože responzívne rámce nútia dizajnérov premýšľať o mnohých rôznych stránkach naraz. Tvárou v tvár hustému textu a krátkym rozsahom pozornosti dizajnéri vyvinuli 6 princípov, aby upriamili zrak čitateľa na najdôležitejšie informácie.
Týchto 6 princípov vizuálnej hierarchie vám pomôže navrhnúť všetko od brožúr až po aplikácie a zaistí, že koncový používateľ bude mať pre dizajnérov pozitívny zážitok z čítania.
Všetky kultúry sa čítajú zhora nadol a väčšina kultúr sa číta zľava doprava. Ale hoci je toto poznanie dôležité pre dizajn stránky, dizajnéri vedia, že úloha je oveľa ťažšia.
Nedávne štúdie ukázali, že ľudia najprv naskenujú stránku, aby zistili, či ich zaujíma, skôr než si ju prečítajú. Vzory skenovania majú tendenciu mať jeden z dvoch tvarov, „F“ a „Z“, a môžete to využiť vo svojom návrhu.
F-vzory. Princípy vizuálnej hierarchie
F-šablóny použiť na tradičné textové stránky, ako sú články alebo blogové príspevky. Čítačka skenuje ľavú stranu stránky hľadá zaujímavé kľúčové slová v nadpisoch zarovnaných doľava alebo úvodných tematických vetách, potom sa zastaví a prečíta (sprava), keď narazí na niečo zaujímavé. Výsledok vyzerá ako F (alebo E, alebo niečo s ešte viac vodorovnými pruhmi; ale výraz „F“ zostal).
Ako to môžete použiť? Dôležité informácie zarovnajte doľava a použite krátke, tučné nadpisy, odrážky a iné podobné prvky, ktoré upútajú pozornosť na rozdelenie blokov odsekov.
Z-model. Princípy vizuálnej hierarchie
Z-vzory sa vzťahujú na iné typy stránok, ako sú reklamy alebo webové stránky, kde informácie nemusia byť nevyhnutne uvedené v blokových odsekoch. Čítačka najprv naskenuje hornú časť stránky, kde sa pravdepodobne nachádzajú dôležité informácie, potom sa diagonálne presunie do opačného rohu a to isté urobí v spodnej časti stránky.
Weboví dizajnéri zvyčajne navrhujú svoje stránky tak, aby výslovne zodpovedali tomuto správaniu, pričom najdôležitejšie informácie umiestňujú do rohov a ďalšie dôležité informácie orientujú pozdĺž horných a spodných pruhov a spájajú uhlopriečku.
V nižšie uvedenom V dizajne konferenčného zhromaždenia v roku 2010 sú dôležitými prvkami logo (vľavo hore), tlačidlo „zaregistrovať sa teraz“ (vpravo hore) a zoznam reproduktorov (dole), ktoré sú strategicky umiestnené na pekných miestach so vzorom Z.
2. Na veľkosti záleží. Princípy vizuálnej hierarchie
_
Je to celkom jednoduché: ľudia najprv čítajú veľké veci. Ak vaše oči priťahuje „výkon“ predtým, ako sa „rozdelíte“ do nižšie uvedeného inzerátu pre Young Vic, mali by ste okamžite kontaktovať percepčného psychológa: pravdepodobne by ste mohli zarobiť dobré peniaze testovaním ako zriedkavá anomália.
Zaujímavé je, že táto tendencia je v skutočnosti dostatočne silná na to, aby odmietla pravidlo zhora nadol. Na obrázku vyššie „hackovanie“ prepíše „čas konať“, pretože je väčšie a vľavo (takže pomáha pravidlo zľava doprava).
Ale na ďalšej strane Výročnej správy: Kampaň za ľudské práva 2012 (rozvinutá v piatom stĺpci médií) čítame vo veľkom písmo „Boj za rovnosť na stope kampane“ pred textom priamo nad ním „Voľby 2012“. Princípy vizuálnej hierarchie
„Voľby 2012“ predstavujú poradie informácií najvyššej úrovne: hovorí nám o všeobecnej téme, ktorej sa nižšie uvedené informácie týkajú. Dizajnér sa ale rozhodol, že pre čitateľov je zaujímavejší názov článku, a preto ho ohodnotil tak, aby bol prečítaný ako prvý.
3. Priestor a textúra. Princípy vizuálnej hierarchie
Ďalším spôsobom, ako upútať pozornosť, je dať obsahu dostatok priestoru na dýchanie . Ak je okolo tlačidla výrazný negatívny priestor alebo sú riadky v textovom bloku široko sledované, tieto prvky budú čitateľom ľahšie viditeľné.
Ako môžete vidieť na obrázku nižšie (súčasť stránky DrawtoClick), medzery môžu byť elegantnou alternatívou alebo doplnkom k použitiu veľkosti. Tu je predajný bod „Notre agence vouscompagne...“ napísaný veľmi malým písmom, ale je obklopený množstvom bielych miest, čo naznačuje jeho dôležitosť. Nižšie sú výrazy „Le Compendre“, „Le Réaliser“ a „Le Partager“ dodatočne zdôraznené, pretože sú oddelené od okolitého priestoru.
Keď ľudia hovoria o „textúre“ vo vzťahu k vizuálnej hierarchii, nemajú na mysli grafické efekty textúry. Tento typ „textúry“ skôr odkazuje na celkové usporiadanie alebo štruktúru priestoru, textu a iných detailov na stránke. Tento príklad z Bright Pink tento koncept dobre ilustruje:
Na prvom obrázku je slovo „Šport“ vyššie v hierarchii ako „bedminton“, pretože je vyššie, väčšie a odvážnejšie. Na obrázku 2 sú tieto dve slová približne ekvivalentné vďaka čiernemu obdĺžniku, ktorý dáva „badmintonu“ vyniknúť a vkladá ho do vlastného priestoru.
Na treťom obrázku čmáranica na pozadí prerušuje priestor „Šport“, ale nie priestor „bedminton“, a preto vedie k obratu, kde je „badminton“ najvyššie v hierarchii. Tento vývoj je ťažké predvídať, preto ho dizajnéri často spájajú s holistickým zmyslom pre „textúru“.
4. Hmotnosť písma a párovanie. Princípy vizuálnej hierarchie
Výber písma je rozhodujúci pre vytvorenie vizuálnej hierarchie. Medzi najdôležitejšie atribúty písma patrí hmotnosť, šírka ťahov, ktoré tvoria jeho písmená, a štýl, ako je pätka a bezpätka. Úlohu môžu zohrávať aj iné úpravy, ako napríklad kurzíva.
Všimnite si ako headset ovplyvňuje poradie hierarchie slov vo webovom dizajne nižšie pre The Tea Factory: „dokonalé čaje, ktoré vám pomôžu zahriať sa“ je názov hry, ale rozdiely v hrúbke písma a kurzíve, okrem umiestnenia slov, vytvárajú dynamický, menej lineárny zážitok z čítania. "://azbyka.com.ua/foto/tea-factory.jpg" />
V niektorých prípadoch je cieľom prezentovať rôzne informácie ako rovnako naliehavé. Nastavenie všetkých na rovnakú veľkosť a váhu zabezpečí rovnocennosť, no zároveň bude pôsobiť monotónne. Rozlišovanie písma je jedným zo spôsobov, ako sa tomu vyhnúť, ako napríklad obálka časopisu Trendi nižšie. Princípy vizuálnej hierarchie
Tu je päť upútavok na okraji stránky rovnakých v hierarchii, ale rozmanitosť dosiahnete zmenou dvoch dobre spárovaných písiem – jedného stredne ťažkého pätkového a druhého ľahkého, ale vysokého bezpätkového písma.
5. Farba a odtieň.
Tu je ďalšia vec: jasné farby vyčnievajú z tlmených farieb alebo odtieňov sivej, zatiaľ čo svetlejšie odtiene pôsobia „vzdialenejšie“, a tak klesajú v hierarchii nižšie ako sýtejšie, tmavšie odtiene. Webová stránka Where Are They dáva do kontrastu jasné svetlo a farebné podsvietenie s efektom čiernobielej mriežky s efektom svietivosti:
Webová stránka Guggenheim používa farby na zdôraznenie dôležitých informácií, ako je výber miesta, zoznam aktuálne prezeraných výstav a odkazy na špeciálne výstavy. Princípy vizuálnej hierarchie
Najlepšie písmo pre vlastné balenie
Na druhej strane, webová stránka Whitney Museum vytvára hierarchiu v rámci jedného písma, hmotnosti a tónu (čierne) pomocou odtieňa (čo znamená pridanie bielej k základnému tónu, čím sa stáva svetlejším). „Cory Archangel on Pop Culture“ je vo vizuálnej hierarchii jasne pod „New on Whitney Stories“ nielen preto, že je nižšia, ale aj preto, že jej odtieň je svetlejší, vďaka čomu je na bielom pozadí menej nápadný. Princípy vizuálnej hierarchie
Farba má osobitný význam mobilný dizajn aplikácie, kde malá veľkosť obrazovky obmedzuje vašu schopnosť používať iné stratégie, ako sú variácie veľkosti a široké rozstupy. V aplikácii Grainger Industrial Supply má tlačidlo „Pokračovať k pokladni“ červenú farbu, vďaka čomu vynikne na každej stránke, kde sa objaví. Panel Úzke výsledky vyhľadávania je naopak sivý, vďaka čomu je v hierarchii zhruba ekvivalentný iným prvkom, ako je napríklad panel vyhľadávania a odkazy na produkty.
Dizajn aplikácie pre Grainger
6. Smer pre dizajnérov.
Rozloženia stránok sa zvyčajne navrhujú podľa mriežky zvislých a vodorovných čiar, a to podľa konvencie a preto, že ide o najčitateľnejší formát. V takomto systéme existuje nový spôsob, ako vytvoriť hierarchiu: prerušenie siete.
Text, ktorý je umiestnený pozdĺž krivky alebo uhlopriečky, automaticky vyniká oproti okolitému textu blokovanému mriežkou a dostáva sa do centra pozornosti. Toto je už dlho efektívna stratégia v reklame, ako napríklad plagát autobusovej zastávky Frost Design.
Оставить комментарий