Vizuális hierarchia alapelvei tervezők számára

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 vonatkozik, mint pl hirdetés vagy olyan webhelyek, 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 a "nézet" vonzza, mielőtt "hasadna" az alábbiakra hirdető a Young Vic Theatre esetében 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. Tessék, pont értékesítés, „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. Ez 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 szóhierarchia sorrendjét a The Tea Factory alábbi webdizájnjában: "tökéletes teák segítenek felmelegedni" a játék neve, de a betűsúly és a dőlt betűk közötti különbségek a szóelhelyezésen túl 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, mint a Trendi magazin alábbi címlapján. A vizuális hierarchia alapelvei

Itt az oldal perifériáján található ö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 hivatkozások. kiállítások. A vizuális hierarchia alapelvei

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.

GYIK. A vizuális hierarchia alapelvei a tervezők számára.

1. Mi a vizuális hierarchia?

A vizuális hierarchia egy olyan tervezési elv, amelynek célja az elemek olyan elrendezése az oldalon, amely kiemeli azok jelentőségét és irányítja a felhasználó figyelmét. Segítségével a felhasználók gyorsan megérthetik az információhierarchiát, és hatékonyan léphetnek kapcsolatba a tartalommal.

2. Miért fontos a vizuális hierarchia a tervezésben?

A vizuális hierarchia jelentősége a következőkben rejlik:

• Továbbfejlesztett használhatóság: Segít a felhasználóknak gyorsabban megtalálni a szükséges információkat.
• Javított érzékelés: A tartalmat érthetőbbé és vonzóbbá teszi.
• Stimuláló interakció: Felhívja a figyelmet a legfontosabb elemekre és cselekvésre ösztönöz.
• Egyszerűsítse a navigációt: Megkönnyíti a navigálást és az oldalon való navigálást.

3. Melyek a vizuális hierarchia alapelvei?

Az alapelvek a következők:

• Méret és lépték: A nagyobb elemek nagyobb figyelmet vonzanak, és fontosabbnak tartják őket.
• Szín és kontraszt: A világos és kontrasztos elemek kiemelkednek, és vonzzák a figyelmet.
• Helyszín és szállás: Az oldalon magasabban vagy a középponthoz közelebbi elemeket a rendszer értelmesebbnek tekinti.
• Tér és üresség: Ha helyet hagy az elemek körül, az segít kiemelkedni.
• Tipográfia: Különböző betűtípusok, méretű és szövegstílusok használata az információ fontosságának hangsúlyozására.
• Formák és vonalak: Alakzatok és vonalak használata irányvonalak és ékezetek létrehozásához.

4. Hogyan használja a méretet és a léptéket a vizuális hierarchia létrehozásához?

Méret és lépték alkalmazása:

• Címsorok és alcímek: Használjon nagyobb méreteket a címsorokhoz és kisebb méreteket az alcímekhez, hogy áttekinthető szerkezetet hozzon létre.
• Kulcselemek: Növelje a fontos gombok vagy hivatkozások méretét, hogy kiemelkedjenek a többi elem közül.
• Képek és grafika: Használjon nagy képeket, hogy felhívja a figyelmet a tartalom legfontosabb részeire.

5. Hogyan befolyásolja a szín és a kontraszt a vizuális hierarchiát?

A szín és a kontraszt hatása:

• Színes ékezetek: Használjon világos vagy telített színeket a kulcsfontosságú elemek kiemeléséhez.
• Kontraszt kombinációk: Használjon kontrasztos színeket a szöveghez és a háttérhez az olvashatóság javítása érdekében.
• Színharmónia: Ügyeljen arra, hogy a választott színek összhangban legyenek egymással, és ne vonják el a figyelmet a fő információkról.

6. Hogyan kell helyesen használni az elemek elrendezését és elhelyezését?

Elhelyezési elvek:

• Fontos elemek a tetején: Helyezze el a legfontosabb információkat az oldal tetejére, ahol azonnal látható.
• Központi elhelyezkedés: A középponthoz közelebb elhelyezett elemek általában jobban felkeltik a figyelmet.
• Az elhelyezés sorrendje: Az elemek logikai sorrendbe rendezése javíthatja az információ megértését.

7. Hogyan segíti a szóköz a vizuális hierarchia létrehozását?

Az üres hely szerepe:

• Elválasztó elemek: Ha üres teret hoz létre az elemek között, az segít világosan elkülöníteni őket, és javítja az észlelést.
• A figyelem összpontosítása: Ha helyet hagy egy fontos elem körül, az kiemeli és felkelti a figyelmet.
• Tiszta és rendezett: A szóközök használata rendezettebbé és rendezettebbé teszi a designt.

8. Hogyan használjuk a tipográfiát vizuális hierarchia létrehozásához?

A tipográfia alkalmazása:

• Betűtípusok és stílusok: Használjon különböző betűtípusokat és stílusokat a címsorokhoz, alcímekhez és törzsszövegekhez.
• A szöveg mérete és súlya: Növelje a szöveg méretét és súlyát a fontos információkért.
• Kiválasztás: Használjon dőlt, félkövér vagy aláhúzott kulcsszavakat vagy kifejezéseket.

9. Hogyan befolyásolhatják a formák és vonalak a vizuális hierarchiát?

A formák és vonalak hatása:

• Útmutató vonalak: Használjon vonalakat útmutatók létrehozásához, amelyek segítik a felhasználót a követésben oldal.
• A formák ékezetként: A geometriai formák kiemelhetik a fontos elemeket, vagy kiemelhetnek.
• Tartalmi szétválasztás: A sorok segítségével a tartalom különböző részei elválaszthatók, áttekinthető szerkezetet alkotva.

10. Milyen eszközök és technikák használhatók a vizuális hierarchia tesztelésére?

Vizsgálati módszerek:

• Tesztelés felhasználókkal: Végezzen tesztelést valódi felhasználókkal, hogy visszajelzést kapjon.
• Viselkedéselemzés: Analitikai használat szerszámok hogy tanulmányozza a felhasználói viselkedést az oldalon.
• Visszajelzés a kollégáktól: Kérje, hogy a tervezést szakértők vizsgálják felül további vélemények és ajánlások érdekében.
• Hőtérképek: Elemezze a hőtérképeket, hogy meghatározza, mely elemek vonzzák a legtöbb figyelmet.
• A/B tesztelés: A terv különböző verzióinak összehasonlítása a legjobb megoldás meghatározásához.

Ezen elvek és irányelvek követésével a tervezők tetszetős és intuitív felületeket hozhatnak létre, amelyek javítják a felhasználói élményt és a tartalmi interakciók hatékonyságát.