A vizuális hierarchia alapelvei a tervezők számára olyan tervezési koncepció, amelyet arra használnak, hogy a néző szemei hogyan mozogjanak a tervben, és meghatározzák, mely elemek a legfontosabbak vagy a legvonzóbbak.
Eleinte kőtáblák, papirusztekercsek és papír voltak. Aztán jöttek a számítógép-képernyők és az elektronikus táblagépek. Az oldalmegjelenítési technológia fejlődésével a tervezőknek egyértelmű módja van a tartalom rendszerezésére. De melyik a jobb? Röviden , vizuális hierarchia.
Íme a vizuális hierarchia meghatározása: A vizuális hierarchia az elrendezés grafikai elemek a tervezésben az egyes elemek fontossági sorrendjében. A vizuális súly határozza meg elem fontossága a tervezés hierarchiájában, megmondva a nézőnek, hogy mire és milyen sorrendben kell összpontosítania.
Források tervezőknek. 50 ingyenes
Ez egyre fontosabb kérdéssé válik, mivel a reszponzív keretrendszerek arra kényszerítik a tervezőket, hogy egyszerre több különböző oldalon gondolkodjanak. A sűrű szöveggel és a rövid figyelemfelkeltéssel szemben a tervezők 6 alapelvet dolgoztak ki, hogy az olvasó tekintetét a legfontosabb információkra irányítsák.
A vizuális hierarchia 6 alapelve segít a brosúráktól az alkalmazásokig mindent megtervezni, biztosítva, hogy a végfelhasználó pozitív olvasási élményben legyen a tervezők számára.
Minden kultúrát fentről lefelé olvasunk, a legtöbb kultúrát pedig balról jobbra olvassuk. De bár ez a tudás azért fontos oldal kialakítása, a tervezők tudják, hogy a feladat sokkal nehezebb.
A legújabb tanulmányok kimutatták, hogy az emberek először átnéznek egy oldalt, hogy megnézzék, érdekli-e őket, mielőtt elolvasnák. A szkennelési minták általában a két alak, az "F" és a "Z" egyikét veszik fel, és ezt kihasználhatja a tervezés során.
F-minták. A vizuális hierarchia alapelvei
F-sablonok hagyományos szöveges oldalakra, például cikkekre vagy blogbejegyzésekre vonatkozik. Az olvasó beolvassa a bal oldalt oldalakat érdekes kulcsszavakat keres a balra igazított címsorokban vagy kezdő témamondatokban, majd megáll, és olvas (jobbra), ha valami érdekesre bukkan. Az eredmény úgy néz ki, mint egy F (vagy egy E, vagy valami még több vízszintes csíkkal; de az "F" kifejezés megmaradt).
Hogyan tudod ezt használni? Igazítsa a fontos információkat balra, és használjon rövid, félkövér címsorokat, felsorolásjeleket és más hasonló figyelemfelkeltő elemeket a bekezdésblokkok felosztásához.
Z-modell. A vizuális hierarchia alapelvei
Z-minták más típusú oldalakra, például hirdetésekre vagy webhelyekre vonatkozik, ahol az információk nem feltétlenül blokk bekezdésekben jelennek meg. Az olvasó először az oldal tetejét szkenneli, ahol valószínűleg fontos információk találhatók, majd átlósan a szemközti sarokba lép, és ugyanezt teszi az oldal alján.
A webtervezők általában úgy alakítják ki oldalaikat, hogy kifejezetten megfeleljenek ennek a viselkedésnek, a legfontosabb információkat a sarkokban helyezik el, a többi fontos információt pedig a felső és alsó sávok mentén irányítják, és összekapcsolják az átlót.
Az alábbiakban A 2010-es konferencia összeállítás tervezésében fontos elem a logó (bal felső sarokban), egy "Regisztráció most" gomb (jobbra fent) és a hangszórók listája (lent), amelyek stratégiailag jó Z-mintás helyeken vannak elhelyezve.
2. A méret számít. A vizuális hierarchia alapelvei
_
Nagyon egyszerű: az emberek először olvasnak el nagy dolgokat. Ha a szemét az "előadás" vonzza, mielőtt "bevágna" a Young Vic alábbi hirdetésébe, azonnal forduljon észlelési pszichológushoz: valószínűleg jó pénzt kereshet, ha ritka anomáliaként tesztelik.
Az érdekes az, hogy ez a tendencia valójában elég erős ahhoz, hogy elutasítsa a felülről lefelé irányuló szabályt. A fenti képen a "hack" felülírja a "time to act" kifejezést, mert nagyobb és balra (tehát a balról jobbra szabály segít).
De az Éves Jelentés: Emberi Jogi Kampány 2012 (az ötödik médiarovatban kidolgozott) következő oldalán nagy terjedelemben olvashatunk betűtípus „Az egyenlőségért folytatott harc a kampány nyomában” a közvetlenül felette lévő „Választás 2012” szöveg előtt. A vizuális hierarchia alapelvei
A "2012-es választás" a legmagasabb szintű információ: azt az általános témát adja meg, amelyhez az alábbi információk kapcsolódnak. A tervező azonban úgy döntött, hogy a cikk címe érdekesebb az olvasók számára, ezért úgy értékelte, hogy először olvassák el.
3. Tér és textúra. A vizuális hierarchia alapelvei
A figyelem felkeltésének másik módja az adjon elegendő teret a tartalomnak a lélegzéshez . Ha jelentős negatív szóköz van a gomb körül, vagy a szövegblokk sorait széles körben követik, ezek az elemek könnyebben láthatók az olvasók számára.
Amint az alábbi képen látható (a DrawtoClick webhelyének része), a térköz elegáns alternatívája vagy kiegészítése lehet a méret használatának. Itt az eladási pont, a „Notre agence vouscompagne...” nagyon apró betűkkel van írva, de rengeteg fehér szóköz veszi körül, jelezve annak fontosságát. Az alábbiakban a „Le Compendre”, „Le Réaliser” és „Le Partager” kifejezések kapnak további hangsúlyt, elszakadva a környező tértől.
Amikor az emberek a „textúráról” beszélnek a vizuális hierarchiával kapcsolatban, akkor nem a textúra grafikus hatásaira gondolnak. Ez a fajta "textúra" inkább a tér, a szöveg és egyéb részletek általános elrendezésére vagy szerkezetére utal az oldalon. A Bright Pink példája jól illusztrálja a koncepciót:
Az első képen a "Sport" szó magasabban van a hierarchiában, mint a "tollaslabda", mert magasabb, nagyobb és merészebb. A 2. képen a két szó nagyjából egyenértékű, köszönhetően a fekete téglalapnak, amely kiemeli a „tollaslabdát”, és a saját helyére helyezi.
A harmadik képen a háttérfirka megszakítja a "Sport" mezőt, de nem a "tollaslabda" mezőt, és ezért egy megfordulást eredményez, ahol a "tollaslabda" a legmagasabb a hierarchiában. Ezt a fejlődést nehéz megjósolni, ezért a tervezők gyakran a "textúra" holisztikus érzésével társítják.
4. Betűsúly és párosítás. A vizuális hierarchia alapelvei
A betűtípus kiválasztása kritikus fontosságú a vizuális hierarchia kialakításához. A betűtípus legfontosabb jellemzői közé tartozik a súly, a betűket alkotó körvonalak szélessége és a stílus, például a serif és a sans serif. Más módosítások, például a dőlt betűk is szerepet játszhatnak.
Figyeld meg, hogyan fejhallgató befolyásolja a The Tea Factory alábbi webdizájnjában a szóhierarchia sorrendjét: "tökéletes teák segítik a bemelegítést" a játék neve, de a betűsúly és a dőlt betűk közötti különbségek a szavak elhelyezése mellett további dinamikus, kevésbé lineáris olvasási élmény. "://azbyka.com.ua/foto/tea-factory.jpg" />
Egyes esetekben az a cél, hogy sokféle információt egyformán sürgősnek mutassanak be. Ha mindenkit azonos méretre és súlyra állít be, akkor az egyenértékűséget biztosít, de egyhangúnak is tűnik. A betűtípusok megkülönböztetése az egyik módja ennek elkerülésére, például a Trendi magazin alábbi borítóján. A vizuális hierarchia alapelvei
Prospektus készítése nyomtatáshoz.
Itt az oldal perifériáján lévő öt előzetes hierarchiában megegyezik, de változatosságot ér el két jól párosított betűtípus megváltoztatásával – az egyik közepes súlyú, a másik pedig egy könnyű, de magas sans-serif.
5. Szín és árnyalat.
Íme, egy újabb gond nélkül: az élénk színek kiemelkednek a tompa színekből vagy a szürke árnyalataiból, míg a világosabb árnyalatok „távolibbnak” tűnnek, és így lejjebb esnek a hierarchiában, mint a gazdagabb, sötétebb árnyalatok. A Where Are They webhely az erős fényt és a színes háttérvilágítást fekete-fehér rácshatással állítja szembe a fényerő hatásával:
A Guggenheim webhely színeket használ a fontos információk kiemelésére, mint például a helyszín kiválasztása, az éppen megtekintett kiállítások listája és a különleges kiállításokra mutató hivatkozások. A vizuális hierarchia alapelvei
A legjobb betűtípus egyéni csomagoláshoz
A Whitney Museum weboldala ezzel szemben hierarchiát hoz létre egy betűtípuson belül, súlyon és tónuson (fekete) árnyalat használatával (ami azt jelenti, hogy fehéret adnak az alaptónushoz, így világosabbá teszik azt). A „Cory Archangel on Pop Culture” egyértelműen a „New on Whitney Stories” alatt van a vizuális hierarchiában, nemcsak azért, mert alacsonyabb, hanem azért is, mert az árnyalata világosabb, így kevésbé feltűnő a fehér háttér előtt. A vizuális hierarchia alapelvei
A színnek különleges jelentése van mobil tervezés olyan alkalmazások, ahol a kis képernyőméret korlátozza az egyéb stratégiák, például a méretváltoztatás és a széles térköz használatának lehetőségét. A Grainger Industrial Supply alkalmazásban a „Tovább a pénztárhoz” gomb piros színű, így minden olyan oldalon kiemelkedik, ahol megjelenik. A Szűk keresési eredmények panel ezzel szemben szürke, így a hierarchiában nagyjából egyenértékű más elemekkel, például a keresősávval és a termékhivatkozásokkal.
Alkalmazástervezés Graingerhez
6. Irány a tervezőknek.
Az oldalelrendezések általában úgy vannak kialakítva, hogy függőleges és vízszintes vonalak rácsát kövessék, mind a megegyezés miatt, mind azért, mert ez a legolvashatóbb formátum. Egy ilyen rendszerben a hierarchia létrehozásának új módja van: a rács feltörése.
A görbe vagy átló mentén elhelyezett szöveg automatikusan kiemelkedik a környező rács által blokkolt szövegből, és a középpontba kerül. Ez régóta hatékony stratégia a reklámozásban, mint például a Frost Design buszmegálló plakátja.
Szólj hozzá!