A vizuális hierarchia a tervezési elemek fontossági sorrendbe rendezésének módszere. Más szóval olyan elvek összessége, amelyek befolyásolják, hogy milyen sorrendben vesszük észre, amit látunk.
Ebben az útmutatóban felsoroljuk a vizuális hierarchia 12 alapelvét, amelyeket minden kezdő tervezőnek ismernie kell.
Bőven van mit átvennünk, úgyhogy vágjunk bele.
- Tartalomjegyzék
- Mi a vizuális hierarchia?
- 1 A méret befolyásolja a láthatóságot
- 2 A perspektíva a mélység illúzióját kelti
- 3 A szín és a kontraszt felhívja a figyelmet
- 4 betűtípus szervezi a designt
- 5 A tér biztosítja a hangsúlyt és a mozgást
- A tér szabálya
- Az oldalpásztázási minták
- F-minták
- Z-minták
- 6 A közelség kapcsolatokat sugall
- 7 A negatív tér kiemel
- 8 Az igazítás irányítja a szemet
- 9 Páratlan számozású csoportok fókuszt teremtenek
- 10 Az ismétlődés egységesíti a kompozíciót
- 11 A vonalak mozgást sugallnak
- 12 Rácsok szervezik a designt
- Alternatív rácsdizájnok
- A rács megtörése
- Visual Hierarchy Infographic
Tartalomjegyzék
Mi az a vizuális hierarchia?
1. alapelv: A méret befolyásolja a láthatóságot
2. alapelv: A perspektíva a mélység illúzióját kelti
3. alapelv: A szín és a kontraszt felhívja a figyelmet
4. alapelv: A betűtípusok szervezik a designt
5. alapelv: A tér hangsúlyt és mozgást biztosít
6. alapelv: A közelség kapcsolatokat sugall
7. alapelv: A negatív tér kiemel
8. alapelv: Az összehangolás irányítja a tekintetet
9. alapelv: A páratlan számozású csoportok fókuszt teremtenek
10. alapelv: Az ismétlődés egységesíti a kompozíciót
11. alapelv: A vonalak mozgást sugallnak
12. alapelv: A rácsok szervezik a designt
Vizuális hierarchia infografika
Mi a vizuális hierarchia?
A vizuális hierarchia egy tervezési elv, amely arra utal, hogy az elemek hogyan vannak elrendezve a designban. A vizuális hierarchia segít a tervezőknek és a fejlesztőknek abban, hogy az egyes elemeket logikusan rendezzék el, ami segíti a vizuális anyag megfelelő emésztését.
Egy designban ez azt jelenti, hogy a fejléc lesz a tetején, a legnagyobb betűtípussal, és minden további elemet a fontosság alapján méreteznek. Ez segít a felhasználónak jobban megérteni az áramlást, hogy tudja, hova nézzen először.
A vizuális hierarchia azért ilyen fontos alapelv, mert a tervező feladata, hogy a hierarchiát úgy alakítsa ki, hogy a nézőnek ne is kelljen gondolkodnia azon, hova nézzen először. A szemük automatikusan az egyes elemekre irányul, pontosan abban a sorrendben, ahogyan azokat meg kell nézniük.
Ez a blogbejegyzés egy videós változatát is elkészítettük, hogy még jobban megértse a vizuális hierarchiát. Az alábbiakban megnézheti.
1 A méret befolyásolja a láthatóságot
A nagyobb jobb, igaz? Bár a klasszikus mondás még mindig vitatható, a méret vitathatatlanul a leghatékonyabb módja a vizuális elemek kiemelésének. Egyszerűen fogalmazva, a nagyobb elemek nagyobb figyelmet vonzanak, mint a kisebbek.
Ez a pontos oka annak, hogy az újságok címlapjai nagyobb betűtípussal jelennek meg, és a nagyobb történetek gyakran még nagyobb címlapokat kapnak, mint a cikkek az oldal többi részén. Bármilyen designban a nagyobb elemek – legyenek azok szavak vagy képek – nem csak a legfeltűnőbbek, de a legerősebb üzenetet is hordozzák.
Nézze meg a fenti példában, hogy a legnagyobb szó egyben a legmarkánsabb és legérzelmesebb is. Az olvasók sokkal nagyobb valószínűséggel reagálnak gyorsan a “repedés” szóra, mint a második legnagyobb szóra, a “teljesítmény” alapszóra. A design közel sem lenne ilyen hatásos, ha a szavak azonos méretűek lennének, vagy ha egy másik szó az oldalon, például az “act” vagy az “time” még nagyobb lenne.
Egy másik fontos, ehhez a koncepcióhoz kapcsolódó elv a méretarány, amely egy tárgy méretét jelenti egy másikhoz viszonyítva. Egyetlen tárgynak, legyen az bármilyen nagy vagy kicsi, nincs léptéke, amíg nem hasonlítjuk egy másikhoz. Ez lehetővé teszi számunkra, hogy egyensúlyt teremtsünk egy dizájnban, és a domináns elemekre összpontosítsunk. Minél nagyobb a méretarány, annál nagyobb a hangsúly.
2 A perspektíva a mélység illúzióját kelti
A perspektíva alkalmazásával a tervezők a mélység illúzióját teremthetik meg, néhány centimétertől akár több mérföldig. Mivel a való világban hasonló illúziókat látunk, a nagyobb tárgyakat általában közelebbinek érzékeljük, mint a hasonló kisebb tárgyakat, és ezért általában előbb kapnak figyelmet, mint bármely más tárgy az oldalon.
Egy út illusztrációja például a legalacsonyabb pontján általában szélesebb lesz, és fokozatosan szűkül, minél magasabbra húzódik a vásznon. Hasonlóképpen, a nézőhöz legközelebbi tárgy mindig nagyobbnak fog tűnni, mint ugyanez a távolabbi tárgy.
A megfelelő perspektíva mind a méretarányokat, mind az arányokat alkalmazza a megfelelő távolság pontos érzékeltetése érdekében. Egy ötmérföldes útszakasz rajza sokkal élesebben távolodik, mint egy ugyanolyan méretű vászonra rajzolt félmérföldes szakasz.
3 A szín és a kontraszt felhívja a figyelmet
Ahogyan a nagyobb elemeket fontosabbnak érzékeljük, mint a kisebbeket, az élénk színek általában nagyobb figyelmet keltenek, mint a tompább árnyalatok. Ha például egy szövegrészletben egyetlen mondat élénk színnel van kiemelve, az azonnal megragadja az olvasók figyelmét.
Spotify’s Found Them First
Gondoljunk a fenti designra. Észrevetted, hogy sokkal nagyobb figyelmet kelt, amikor a természetes tónusokat neonszínekkel emelték ki? Ezt a színsémát duotone-nak nevezik, ami egy egyre népszerűbb webdesign-trend. A hatás, amely egy pár kontrasztos színt rétegez egy fotóra, olyan feltűnő dizájnokat eredményez, amelyek képletesen kiugranak az oldalról vagy a képernyőről.
A drámaian kontrasztos színek bizonyos elemeket is jobban ki tudnak emelni, mint egy szelídebb skálán mozgó spektrum. Egy piros tárgy elhelyezése zöld vagy fekete háttér előtt nagyobb figyelmet fog kelteni, mint ugyanez a piros tárgy narancssárga vagy lila háttéren.
A designban használt színkombinációkat, és azt, hogy hogyan viszonyulnak egymáshoz, színsémának nevezzük. A tervező által választott színséma egységet, harmóniát, ritmust és egyensúlyt teremthet egy alkotáson belül, de kontrasztot és hangsúlyt is létrehozhat.
A túl sok kontrasztos színt használó design gyakran szervezetlennek és összefüggéstelennek tűnik. Ugyanez néha elmondható azokról a tervekről is, amelyek olyan színsémát használnak, amely nem tartja be a színelméletet. A legjobb paletta kiválasztása azonban sokkal többről szól, mint a monokróm, komplementer vagy tetradikális kombináció véletlenszerű kiválasztásáról.
A hasonló színeket használhatjuk a rokon elemek csoportosítására a dizájnban, és a színválasztás még súlyt és távolságot is sugallhat. A melegebb színek, mint például a piros és a sárga, egy sötét háttérrel rendelkező dizájn előterébe nyomulnak, míg a hideg színek, mint például a kék vagy a zöld, általában háttérbe húzódnak. Ennek ellenkezője történik egy világos hátterű dizájn esetében: A hűvös színek, például a kék és a zöld, közelebb jelennek meg, mint a meleg színek. Az emberi szem egyszerűen így érzékeli ezt.
Színmélységtáblázat
A színválasztás tehát valóban befolyásolhatja a nézők azon képességét, hogy egy alakot azonosítani tudjanak a háttérből egy dizájnon belül. A meleg és hideg színek keverése mélységet hozhat létre, akárcsak a perspektíva.
A hatékony színkombinációk nemcsak az egyes árnyalatoknak a színkörön elfoglalt helyétől, hanem a melegségtől és a környező színekkel való kontrasztjától is függnek. Tekintse meg a Visme bemutatóját a hatásos színsémák kiválasztásáról.
4 betűtípus szervezi a designt
Gondoljon egy vázlatra, egy hagyományos önéletrajzra vagy egy tartalomjegyzékre. Általában mindegyik többféle betűméretből áll, a főcímek nagyobb betűmérettel, mint az alfejezetek és a kisebb részletek. A különböző betűméretek használata nemcsak a legfontosabbakat emeli ki, hanem a dokumentum általános felépítését is rendezi.
A betűméretek hierarchiája különböző méretű, súlyú és térközű szöveggel – vagy az egyes elemek kombinációjával – hozható létre. Még ha egyetlen betűtípust használunk is az egész dizájnban, a méret és a súly variálása nemcsak a fontosabb elemekre irányítja a figyelmet, hanem olyan átfogó kompozíciót hoz létre, amely könnyen olvasható és érthető.
Képzeljünk csak el egy olyan önéletrajzot, amelyben a referenciákhoz nagyobb, merészebb betűtípust használunk, mint a pályázó nevéhez. Ez nem csak hanyagnak tűnhet, de valószínűleg nagy zavart okozna azok számára, akik gyorsan átfutnak egy hegynyi jelentkezést.
Hasonlóképpen, egy olyan design, amely egy sor azonos méretű, betűtípusú és súlyú betűtípust tartalmaz, nem fogja hatékonyan felhívni a figyelmet sok mindenre – ez egy olyan kihívás, amelyet gyorsan kell megoldani, mivel a közönség a másodpercek töredékét tölti a design minőségének felmérésével.
Ez az oka annak, hogy a legtöbb webtervezési program nem csak a betűtípusok attribútumainak kézi kiválasztását kínálja, hanem egy előre beállított hierarchiát is, amely az alapszöveg mellett cím-, alcím- és tagolt címsor betűtípusokból áll.
Nézze meg a fenti designt! Rendezettebbnek és könnyebben olvashatónak tűnik, ha minden szó azonos méretű, vagy ha a hierarchia elveit alkalmazzuk?
5 A tér biztosítja a hangsúlyt és a mozgást
A tér szabálya
A vizuális kompozíció egyik legalapvetőbb alapelve azzal foglalkozik, hogy mit hagyunk ki a tervezésből. A tér szabálya szerint egy esztétikailag tetszetős dizájnnak szüksége van a megfelelő mennyiségű, rendezetlen negatív térre, amelyet gyakran “fehér térnek” neveznek, függetlenül a dizájn tényleges háttérszínétől.
A kompozíció elemeinek elrendezésekor a tervezők a tartalom körüli teret arra használhatják, hogy felhívják a figyelmet bizonyos elemekre – gondoljunk csak egy üres oldalon lévő egyetlen elemre -, vagy arra, hogy teljesen külön vizuális üzenetet küldjenek, mint például a híres FedEx-logóban található rejtett “nyíl”.
A stratégiai térközök még a nézők tekintetét is célzott sorrendben terelhetik az oldalon, hozzájárulva az oldalpásztázási mintákhoz.
Az oldalpásztázási minták
Az olvasók hajlamosak bizonyos minták alapján pásztázni az oldalakat, amelyeket a szemmozgásukkal figyelhetnek meg. Amikor a tervezők azt szeretnék, hogy a közönség egy bizonyos sorrendben vegye észre az elemeket, gyakran a leggyakoribb mintákra támaszkodnak.
Az angol anyanyelvűek például balról jobbra olvasnak. Ezért jellemzően hasonló pásztázási mintát mutatnak, amikor egy oldalnyi szöveggel szembesülnek. Az arabot viszont jobbról balra írják. Azok, akik hozzászoktak ennek a nyelvnek az olvasásához, nagyobb valószínűséggel ebben az “ellentétes” irányban pásztázzák az oldalakat. A tervezőknek szem előtt kell tartaniuk ezeket a különbségeket, amikor globális közönség számára készítenek tartalmat.
F-minták
Az angol olvasók leggyakoribb szemmozgásmintája az F-mintázat. Hogy miért? Mert pontosan így olvasunk egy könyvet, egy levelet vagy egy weboldalt. Balról jobbra haladva végigpásztázzuk az oldalt a tetején, majd minden egyes szövegrésznél újra, amíg el nem érjük az oldal alját.
Ez a természetes tendencia miatt a tervezők leggyakrabban az F-mintát használják a weboldalak és más, nagymértékben szövegre támaszkodó illusztrációk megalkotásakor. Mert más irányban olvasni egyszerűen kényelmetlen, ha nem ehhez vagyunk szokva.
Z-minták
Az inkább képekre támaszkodó terveket gyakran Z-mintában állítják össze. Mivel az agy gyorsabban dolgozza fel a képeket, mint a szöveget, az olvasók gyorsan át tudják pásztázni az oldalt, ha balról jobbra átnéznek a tetején, majd átlósan lefelé, mielőtt a pásztázást ismét balról jobbra (vagy jobbról balra, ha a közönség jellemzően ebben az irányban olvas) átkelve fejezik be.
A tervezők a kompozíció bizonyos elemeit hangsúlyozhatják úgy, hogy e gyakori “Z” szemmozgásminták mentén helyezik el őket. Gondoljunk egy címsorra, egy képre és egy alcímre.
6 A közelség kapcsolatokat sugall
A közelség, vagyis hogy az elemek hol jelennek meg egymáshoz képest, a kompozíció egyik legalapvetőbb eleme. Egyszerűen szólva, az egymáshoz kapcsolódó elemek egymáshoz közeli elhelyezése azt sugallja az olvasóknak, hogy azok valóban kapcsolatban állnak egymással.
Gondolj egy fehér képernyőre, amelynek egyik oldalán egy öt pontból álló csoport, a másik oldalán pedig egyetlen pont van. Az első feltételezésünk mindig az lesz, hogy az öt pont valóban egy csoportot alkot.
Az elemek egymáshoz közeli elhelyezése más üzeneteket is közvetíthet. Például az elemek bizonyos helyeken való elhelyezése a térképen a közönség számára a távolságot érzékelteti, legyen az közel vagy távol. Ez természetesen a térkép méretétől és méretarányától is függ. Egy hüvelyk nem mindig egy mérföld.
Az elemek meghatározott közelségben történő elhelyezésével hozzáadott képek és üzenetek hozhatók létre. Gondoljon arra, milyen gyakran lát három kört és egy vonalat úgy elhelyezve, hogy az egy boldog vagy szomorú arc formáját sugallja? A sugallt kép ilyenkor gyakran nagyobb figyelmet kap, mint az egyes elemei. Egy boldog arcot lát, vagy három kört és egy vonalat?
7 A negatív tér kiemel
Ahogyan az elemek egymás melletti csoportosítása is utal a kapcsolatukra, a fehér tér bevonása az elemek köré különálló információcsoportokként emeli ki őket. A negatív, üres tér nemcsak könnyebben emészthetővé teszi az információt az olvasók számára azáltal, hogy rekeszekbe csoportosítja azt, hanem fókuszt is teremt, mivel segít a szemnek az egyes elemekre összpontosítani.
A bőséges negatív tér nélküli kompozíciók kusza, zavaros és kaotikus designt eredményezhetnek. Más szóval, a kevesebb több. Az ügyes tervezők még arra is felhasználhatják az üres teret, hogy további vizuális üzenetet sugalljanak. Gondoljunk csak a híres FedEx-logó közepén lévő “nyílra”, vagy a fenti Coca-Cola-dizájnra.
8 Az igazítás irányítja a szemet
Az igazítás része annak a struktúrának, amely alapján az elemek elhelyezésre kerülnek a designban. Azt diktálja, hogy a vizuális elemek – legyen szó szövegről vagy képről – ne legyenek önkényesen elhelyezve a kompozícióban. Egy tipikus szöveges oldal például balra van igazítva, így az objektumok osztoznak a bal oldali margón.
Néhány vizuális design középre van állítva vagy igazítva, ami azt jelenti, hogy úgy vannak elhelyezve az oldalon, hogy osztoznak a bal és a jobb oldali margón. Ha a szavakat véletlenszerűen szórnák szét az oldalon minden irányban, akkor elég zavaros forgatókönyvet hoznának létre.
Az F-mintás mintákban az objektumok általában balra vannak igazítva, míg a Z-mintás minták gyakran a bal, középső és jobb oldali igazítások kombinációját alkalmazzák, mint például a fenti hirdetésben.
Az egyszerű vizuális minták leggyakrabban a keret közepén igazodnak, ez a formátum egyensúlyt és harmóniát biztosít, és esztétikailag is tetszetős.
A legtöbb nyugati olvasó hozzászokott ahhoz, hogy az oldal balról a jobb oldali méretben olvassa. Ezért a szöveget tartalmazó terveket gyakran ugyanígy a bal margóhoz igazítják.
A jobb oldali igazítást gyakran azért alkalmazzák, hogy egyensúlyt teremtsenek egy olyan általános tervhez, amely vizuálisan súlyosabb lehet a bal oldalon. Hasonlóképpen, a bal oldali igazítások fordított esetben ugyanezt a hatást érhetik el.
9 Páratlan számozású csoportok fókuszt teremtenek
A páratlan számozás szabálya lehetővé teszi a tervezők számára, hogy bizonyos képeket úgy emeljék ki, hogy azokat egy csoport közepére helyezik. Azáltal, hogy a fő fókuszpont mindkét oldalán egyenlő számú szomszédos tárgyat helyezünk el – így létrehozva egy páratlan számú csoportot -, az eredmény egyértelműen rámutat a középen található legfontosabb vizuális elemre.
Egy vagy három elemből álló csoport például sokkal feltűnőbb, mint egyetlen pár. Hasonlóképpen a páratlan számú tárgyakból álló csoportokat szinte mindig érdekesebbnek és esztétikusabbnak tartják, mint a páros számú csoportokat. Hogy miért? Az emberek jobban érzik magukat az egyensúlyban.
10 Az ismétlődés egységesíti a kompozíciót
Amiként a kontraszt kiemeli és felhívja a figyelmet a tervezési elemekre, az ismétlődés egységet teremt, ami fokozza a megértést és a felismerést.
Gondoljunk csak a legtöbb megjelent szövegre. Az oldalkialakítások úgy vannak megszervezve, hogy a törzsszöveg mind egy betűtípus, a fejezetcímek egy másik, a lábjegyzetek pedig egy harmadik, különböző betűtípusúak – mindez az egész kiadványban egységes. Ez a stílusismétlés egységes, egészként felismerhető művet hoz létre.
Az egységes design érdekében ismételjünk meg valamilyen elemet – legyen az betűtípus, szín, forma vagy méret – az egész kompozícióban. Az egységes stílusok segítenek egyértelműen meghatározni bármely design vizuális hierarchiáját.
Vegyük például a bevezetőben található infografikát, amely a 12 vizuális hierarchia-elvünket mutatja be. Az azonos betűtípusok és stílusok ismétlése az egész dokumentumban egyértelműen egységesíti a listát, és azt üzeni az olvasóknak, hogy minden egyes bejegyzés egy egész része.
Az ismétlés új jelentést is adhat az elemeknek. Hányszor látja, hogy a kékkel aláhúzott szöveg kiemelkedik egy oldalon? Eléggé ahhoz, hogy azonnal felismerje a betűtípust hiperhivatkozásként, igaz? Ennek a stílusnak a megismétlése egy dizájnban azt üzeni a közönségnek, hogy hova kell kattintania további információkért. Milyen más népszerű stílusok adhatnak további jelentést a dizájnodnak?
11 A vonalak mozgást sugallnak
A mozgás az egyik leghatékonyabb módja a nézők figyelmének felkeltésének, különösen akkor, ha egy mozdulatlan dizájnban is megjelenik. A vonalak nyilvánvalóan hatékonyak a hangsúlyos elemekre való rámutatásban – gondoljunk csak egy nyílra -, de nem kell fizikailag megjelenniük az oldalon ahhoz, hogy elérjék a céljukat.
A vezető vonalakat az ismétlődő elemek – gondoljunk csak a pontok sorára -, a tárgyak vagy alakzatok közelsége, valamint a pozitív és negatív tér viszonya révén lehet sugallni. Például egy tárgy felfelé vagy lefelé dőlésével olyan vonalak hozhatók létre, amelyek repülést vagy ereszkedést sugallnak.
12 Rácsok szervezik a designt
A leghatékonyabb designt valamilyen rács segítségével állítják össze. A legjellemzőbb rács a klasszikus, függőleges és vízszintes vonalak keresztezéséből álló moduláris kompozíció.
A művészek, fotósok és grafikusok már régóta alkalmazzák a harmadok szabályát, hogy javítsák kompozícióik általános egyensúlyát. A szabály lényege, hogy a kompozíciót mentálisan két vízszintes és két függőleges vonalból – vagy kilenc különálló részből – álló rácsra osztják.
A fontos vizuális elemek a vonalak mentén helyezkednek el, kiemelve a négy pontot, ahol a vonalak találkoznak. A középponton kívüli kompozíciókat általában esztétikusabbnak tartják azokhoz a tervekhez képest, amelyekben a fő fókuszpont a keret közepén helyezkedik el. A szabály ösztönzi a negatív tér használatát, az elemek okos közelségét és a hatékony igazítást.
Nem csak a legelterjedtebb, de a moduláris rács általában a legolvashatóbb kialakítás is. Néha mégis az a legjobb módja a hangsúlyozásnak, ha megszegjük a szabályokat.
Alternatív rácsdizájnok
A klasszikus függőleges-horizontális rács helyett a tervezők választhatnak átlós irányú kompozíciót, hogy alkotásuk kiemelkedjen egy oldalon, és felhívja a nézők általános figyelmét.
A rács megtörése
Néhány tervező úgy dönt, hogy teljesen megszegi a rácsot, és véletlenszerűen helyezi el a vizuális elemeket az oldalon, hogy a legjobban kiemelkedjenek a környező, rácsba zárt szövegből. Ez a környező szöveg lehet ugyanabban a dizájnban vagy egy környező oldalon.
Ne tévesszen meg a véletlenszerűség fogalma. Az elemek véletlenszerű szétszórása a háttérben mindenféle konkrét ok vagy stratégia nélkül nem fog csodával határos módon Jackson Pollock remekművé alakulni. A rács megtörésekor minden választásnak továbbra is kiszámítottnak és céltudatosnak kell lennie.
A vizuális hierarchia elvei a leghatékonyabb stratégiák közé tartoznak a design elemeinek kiemelésére és a vizuális üzenet egyértelművé tételére. De mint az életben sok mindenben, a jóból is lehet túl sok.
A tervezőknek bölcsen kell megválasztaniuk, hogy milyen elveket alkalmaznak, különben azt kockáztatják, hogy felhígul a hangsúly és megbomlik a vizuális hierarchia. Ha minden kiemelkedik, akkor semmi sem kiemelkedik.
Nem biztos benne, hogy a hierarchia hatékony? Akkor tesztelje. Egyszerűen csak bámulja az oldal vagy a képernyő előtti teret, és hagyja, hogy a tényleges dizájn háttérbe szoruljon, amíg formák és színek homályává nem válik. Mi tűnik ki?
Vagy, hogy ne kelljen kancsalnak lenned, használhatod az elmosódási tesztet, ha készítesz egy képernyőképet a dizájnodról, megnyitod a Photoshopban, és alkalmazod a Gaussian Blur szűrőt.
Ha a fő attrakció még mindig az az elem(ek), amelyet hangsúlyozni akartál, akkor a vizuális hierarchiád hatékony.
Visual Hierarchy Infographic
Get an at-a-glance understanding of what visual hierarchy means and how it can be implemented by scrolling through this infographic below.
Embed on your site:
<script src=”//my.visme.co/visme.js”></script><div class=”visme_d” data-url=”ep88eydm-12-visual-hierarchy-principles-every-non-designer-needs-to-know” data-w=”800″ data-h=”6404″></div><p style=”font-family: Arial; font-size: 10px; color: #333333″ >Created using <a href=”http://www.visme.co/make-infographics” target=”_blank” style=”color: #30a0ea”><strong>Visme</strong></a>. An easy-to-use Infographic Maker.</p>