Principy vizuální hierarchie pro designéry jsou konceptem designu, který se používá k vedení toho, jak se oči diváka pohybují designem a určují, které prvky jsou nejdůležitější nebo vizuálně přitažlivé.
Nejprve tam byly kamenné desky, papyrusové svitky a papír. Pak přišly počítačové obrazovky a elektronické tablety. Jak se technologie zobrazování stránek vyvíjí, návrháři mají jasný způsob, jak organizovat obsah. Ale co je lepší? Zkrátka , vizuální hierarchie.
Zde je definice vizuální hierarchie: Vizuální hierarchie je uspořádání grafické prvky v designu v pořadí důležitosti každého prvku. Vizuální váha určuje důležitost prvku v hierarchii designu, sdělující divákovi, na co se má zaměřit a v jakém pořadí.
Zdroje pro designéry. 50 zdarma
To se stává stále důležitějším problémem, protože responzivní frameworky nutí designéry přemýšlet o mnoha různých stránkách najednou. Tváří v tvář hustému textu a krátkým intervalům pozornosti vyvinuli designéři 6 principů, které nasměrují zrak čtenáře k nejdůležitějším informacím.
Těchto 6 principů vizuální hierarchie vám pomůže navrhnout vše od brožur po aplikace a zajistí, že koncový uživatel bude mít pro designéry pozitivní zážitek ze čtení.
Všechny kultury se čtou shora dolů a většina kultur se čte zleva doprava. Ale i když je tato znalost důležitá pro design stránky, designéři vědí, že úkol je mnohem obtížnější.
Nedávné studie ukázaly, že lidé nejprve naskenují stránku, aby zjistili, zda je zajímá, než si ji přečtou. Vzory skenování mají tendenci mít jeden ze dvou tvarů, „F“ a „Z“, a toho můžete využít ve svém návrhu.
F-vzory. Principy vizuální hierarchie
F-šablony platí pro tradiční textové stránky, jako jsou články nebo blogové příspěvky. Čtečka skenuje levou stranu strana hledá zajímavá klíčová slova v nadpisech zarovnaných doleva nebo úvodních tematických větách, pak se zastaví a čte (vpravo), když narazí na něco zajímavého. Výsledek vypadá jako F (nebo E, nebo něco s ještě vodorovnějšími pruhy; ale výraz "F" zůstal).
Jak to můžete použít? Důležité informace zarovnejte doleva a pomocí krátkých, tučných nadpisů, odrážek a dalších podobných prvků, které přitahují pozornost, rozdělte bloky odstavců.
Z-model. Principy vizuální hierarchie
Z-vzory se vztahují na jiné typy stránek, jako jsou reklamy nebo webové stránky, kde informace nemusí být nutně uvedeny v blokových odstavcích. Čtenář nejprve naskenuje horní část stránky, kde se pravděpodobně najdou důležité informace, poté se diagonálně přesune do protějšího rohu a totéž provede ve spodní části stránky.
Weboví designéři obvykle navrhují své stránky tak, aby výslovně odpovídaly tomuto chování, umisťují nejdůležitější informace do rohů a další důležité informace orientují podél horního a spodního pruhu a spojují úhlopříčku.
Níže v designu montážní konference 2010 jsou důležitými prvky logo (vlevo nahoře), tlačítko „zaregistrovat se nyní“ (vpravo nahoře) a seznam reproduktorů (dole), které jsou strategicky umístěny na pěkných místech se vzorem Z.
2. Na velikosti záleží. Principy vizuální hierarchie
_
Je to docela jednoduché: lidé nejprve čtou velké věci. Pokud vaše oči upoutá „představení“ předtím, než se „rozdělíte“ do níže uvedeného inzerátu na Young Vic, měli byste okamžitě kontaktovat percepčního psychologa: pravděpodobně byste mohli vydělat dobré peníze tím, že budete testováni jako vzácná anomálie.
Zajímavé je, že tato tendence je ve skutečnosti dostatečně silná na to, aby odmítla pravidlo shora dolů. Na obrázku výše „hack“ přepíše „čas na akci“, protože je větší a vlevo (takže pomáhá pravidlo zleva doprava).
Ale na další stránce Výroční zprávy: Kampaň za lidská práva 2012 (rozvinuté v pátém sloupci médií) čteme ve velkém písmo „Boj za rovnost na stopě kampaně“ před textem přímo nad ním „Volby 2012“. Principy vizuální hierarchie
„Volby 2012“ je pořadí informací nejvyšší úrovně: sděluje nám obecné téma, ke kterému se vztahují níže uvedené informace. Designér se ale rozhodl, že pro čtenáře je zajímavější název článku, a proto jej ohodnotil tak, aby byl přečten jako první.
3. Prostor a textura. Principy vizuální hierarchie
Dalším způsobem, jak upoutat pozornost, je dát obsahu dostatek prostoru k dýchání . Pokud je kolem tlačítka výrazný záporný prostor nebo jsou řádky v textovém bloku široce sledovány, budou tyto prvky pro čtenáře snadněji viditelné.
Jak můžete vidět na obrázku níže (součást webu DrawtoClick), mezery mohou být elegantní alternativou nebo doplňkem k použití velikosti. Zde je prodejní místo „Notre agence vouscompagne...“ napsáno velmi malým písmem, ale je obklopeno množstvím bílého místa, což naznačuje jeho důležitost. Níže jsou fráze „Le Compendre“, „Le Réaliser“ a „Le Partager“ dodatečně zdůrazněny, protože jsou odděleny od okolního prostoru.
Když lidé mluví o „textuře“ ve vztahu k vizuální hierarchii, nemají na mysli grafické efekty textury. Tento typ "textury" spíše odkazuje na celkové uspořádání nebo strukturu prostoru, textu a dalších detailů na stránce. Tento příklad z Bright Pink tento koncept dobře ilustruje:
Na prvním obrázku je slovo „Sport“ v hierarchii výše než „badminton“, protože je vyšší, větší a odvážnější. Na obrázku 2 jsou tato dvě slova zhruba ekvivalentní díky černému obdélníku, který dává „badmintonu“ vyniknout a umísťuje jej do vlastního prostoru.
Na třetím obrázku čmáranice na pozadí přerušuje prostor „Sport“, ale ne prostor „badminton“, a proto vede k obrácení, kde je „badminton“ v hierarchii nejvýše. Tento vývoj je obtížné předvídat, takže jej designéři často spojují s holistickým smyslem pro „texturu“.
4. Tloušťka písma a párování. Principy vizuální hierarchie
Výběr písma je zásadní pro vytvoření vizuální hierarchie. Mezi nejdůležitější atributy písma patří váha, šířka tahů, které tvoří jeho písmena, a styl, jako je patka a patka. Svou roli mohou hrát i další úpravy, jako je kurzíva.
Všimněte si jak sluchátka ovlivňuje pořadí hierarchie slov ve webovém designu níže pro The Tea Factory: „dokonalé čaje, které vám pomohou zahřát se“ je název hry, ale rozdíly ve váze písma a kurzívě, kromě umístění slov, vytvářejí více dynamický, méně lineární zážitek ze čtení. "://azbyka.com.ua/foto/tea-factory.jpg" />
V některých případech je cílem prezentovat různé informace jako stejně naléhavé. Nastavením všech na stejnou velikost a váhu zajistíte rovnocennost, ale také to bude vypadat monotónně. Rozlišení písem je jedním ze způsobů, jak se tomu vyhnout, jako je obálka časopisu Trendi níže. Principy vizuální hierarchie
Zde je pět upoutávek na okraji stránky stejných v hierarchii, ale rozmanitosti dosáhnete změnou dvou dobře spárovaných písem – jednoho středně těžkého patkového a druhého lehkého, ale vysokého bezpatkového písma.
5. Barva a odstín.
Zde je další nepodstatná věc: světlé barvy vyčnívají z tlumených barev nebo odstínů šedé, zatímco světlejší odstíny působí „vzdáleněji“ a tím pádem klesají v hierarchii níže než odstíny sytější, tmavší. Web Where Are They staví do kontrastu jasné světlo a barevné podsvícení s efektem černobílé mřížky s efektem svítivosti:
Web Guggenheim používá barvy ke zdůraznění důležitých informací, jako je výběr místa, seznam aktuálně prohlížených výstav a odkazy na speciální výstavy. Principy vizuální hierarchie
Nejlepší písmo pro vlastní balení
Web Whitney Museum na druhé straně stanoví hierarchii v rámci jednoho písma, gramáže a tónu (černé) pomocí odstínu (což znamená přidání bílé k základnímu tónu a jeho zesvětlení). „Cory Archangel on Pop Culture“ je ve vizuální hierarchii jasně pod „New on Whitney Stories“, nejen proto, že je nižší, ale také proto, že jeho odstín je světlejší, takže je na bílém pozadí méně nápadný. Principy vizuální hierarchie
Barva má zvláštní význam mobilní design aplikace, kde malá velikost obrazovky omezuje vaši schopnost používat jiné strategie, jako jsou variace velikosti a široké mezery. V aplikaci Grainger Industrial Supply je tlačítko „Proceed to Checkout“ zbarveno červeně, takže vynikne na každé stránce, kde se objeví. Panel Úzké výsledky vyhledávání je naopak šedý, takže je v hierarchii zhruba ekvivalentní ostatním prvkům, jako je vyhledávací lišta a odkazy na produkty.
Návrh aplikace pro Grainger
6. Směr pro projektanty.
Rozvržení stránek jsou obvykle navržena tak, aby sledovala mřížku svislých a vodorovných čar, a to jak podle konvence, tak i proto, že jde o nejčitelnější formát. V takovém systému existuje nový způsob, jak vytvořit hierarchii: rozbití mřížky.
Text, který je umístěn podél křivky nebo úhlopříčky, automaticky vystupuje proti okolnímu textu blokovanému mřížkou a dostává se do centra pozornosti. To je již dlouho efektivní strategie v reklamě, jako je například plakát autobusové zastávky Frost Design.
Zanechat komentář