Načela vizualne hijerarhije za dizajnere koncept su dizajna koji se koristi za usmjeravanje kretanja očiju gledatelja kroz dizajn i određivanje elemenata koji su najvažniji ili vizualno privlačni.
Isprva su postojale kamene ploče, svici papirusa i papir. Zatim su došli računalni zasloni i elektronički tableti. Kako se tehnologija prikaza stranica razvija, dizajnerima ostaje jasan način organiziranja sadržaja. Ali što je bolje? Ukratko , vizualna hijerarhija.
Evo definicije vizualne hijerarhije: Vizualna hijerarhija je raspored grafički elementi u dizajnu prema važnosti svakog elementa. Vizualna težina određuje važnost elementa u hijerarhiji dizajna, govoreći gledatelju na što se treba usredotočiti i kojim redoslijedom.
Resursi za dizajnere. 50 besplatno
Ovo postaje sve važnije pitanje jer responzivni okviri tjeraju dizajnere da razmišljaju o mnogo različitih stranica odjednom. Suočeni s gustim tekstom i kratkim rasponom pozornosti, dizajneri su razvili 6 načela za usmjeravanje pogleda čitatelja na najvažnije informacije.
Ovih 6 načela vizualne hijerarhije pomoći će vam da dizajnirate sve, od brošura do aplikacija, osiguravajući krajnjem korisniku pozitivno iskustvo čitanja za dizajnere.
Sve kulture čitaju se odozgo prema dolje, a većina kultura slijeva nadesno. Ali iako je ovo znanje važno za dizajn stranice, dizajneri znaju da je zadatak mnogo teži.
Nedavne studije pokazale su da ljudi prvo skeniraju stranicu kako bi vidjeli zanima li ih prije nego što je pročitaju. Uzorci skeniranja obično imaju jedan od dva oblika, "F" i "Z", a to možete iskoristiti u svom dizajnu.
F-uzorci. Načela vizualne hijerarhije
F-predlošci primijeniti na tradicionalne tekstualne stranice kao što su članci ili postovi na blogu. Čitač skenira lijevu stranu stranica tražeći zanimljive ključne riječi u lijevo poravnatim naslovima ili početnim tematskim rečenicama, zatim se zaustavlja i čita (desno) kada naiđe na nešto zanimljivo. Rezultat izgleda kao slovo F (ili slovo E, ili nešto s još više vodoravnih pruga; ali izraz "F" ostao je).
Kako ovo možete koristiti? Poravnajte važne informacije ulijevo i koristite kratke, podebljane naslove, grafičke oznake i druge slične elemente koji privlače pažnju kako biste razbili blokove odlomaka.
Z-model. Načela vizualne hijerarhije
Z-uzorci primijeniti na druge vrste stranica, kao što su oglasi ili web stranice, gdje informacije nisu nužno prikazane u blok paragrafima. Čitatelj najprije skenira vrh stranice, gdje se vjerojatno nalaze važne informacije, zatim se dijagonalno pomiče u suprotni kut i isto radi na dnu stranice.
Web dizajneri obično dizajniraju svoje stranice tako da eksplicitno odgovaraju ovom ponašanju, postavljajući najvažnije informacije u kutove i usmjeravajući druge važne informacije duž gornje i donje trake i povezujući dijagonalu.
U nastavku U dizajnu skupa konferencije 2010. bitni elementi su logotip (gore lijevo), gumb "registriraj se sada" (gore desno) i popis govornika (dolje), koji su strateški raspoređeni na zgodnim mjestima u obliku slova Z.
2. Veličina je bitna. Načela vizualne hijerarhije
_
Vrlo je jednostavno: ljudi prvo čitaju velike stvari. Ako vam pogled privuče "izvedba" prije nego što se "podijelite" u donjem oglasu za Young Vic, trebali biste odmah kontaktirati perceptivnog psihologa: vjerojatno biste mogli dobro zaraditi ako vas testiraju kao rijetku anomaliju.
Zanimljivo je da je ta tendencija zapravo dovoljno jaka da odbaci pravilo od vrha prema dolje. Na gornjoj slici, "hack" nadjačava "vrijeme za djelovanje" jer je veće i lijevo (tako da pravilo slijeva nadesno pomaže).
Ali na sljedećoj stranici Godišnjeg izvješća: Kampanja za ljudska prava 2012. (razvijenog u petom medijskom stupcu) čitamo u velikom font “Borba za ravnopravnost na tragu kampanje” prije teksta neposredno iznad “Izbori 2012.” Načela vizualne hijerarhije
"Izbori 2012." redoslijed je informacija najviše razine: govori nam o općoj temi na koju se odnose informacije u nastavku. No, dizajnerica je odlučila da je naslov članka zanimljiviji čitateljima, pa ga je ocijenila tako da bude prvi čitan.
3. Prostor i tekstura. Načela vizualne hijerarhije
Drugi način za privlačenje pozornosti je dati sadržaju dovoljno prostora za disanje . Ako postoji značajan negativni prostor oko gumba ili su reci u bloku teksta široko praćeni, ti će elementi biti lakše vidljivi čitateljima.
Kao što možete vidjeti na slici ispod (dio stranice DrawtoClick), razmak može biti elegantna alternativa ili nadopuna korištenju veličine. Ovdje je prodajna točka, "Notre agence vouscompagne...", napisana vrlo sitnim slovima, ali je okružena obiljem bijelog prostora, što ukazuje na njenu važnost. U nastavku, izrazi “Le Compendre”, “Le Réaliser” i “Le Partager” dobivaju dodatni naglasak, budući da su odvojeni od okolnog prostora.
Kada ljudi govore o "teksturi" u odnosu na vizualnu hijerarhiju, ne misle na grafičke efekte teksture. Umjesto toga, ova vrsta "teksture" odnosi se na cjelokupni raspored ili strukturu prostora, teksta i drugih detalja na stranici. Ovaj primjer iz Bright Pink dobro ilustrira koncept:
Na prvoj slici, riječ "Sport" je viša u hijerarhiji od "badminton" jer je viša, veća i hrabrija. Na slici 2, dvije su riječi otprilike jednake, zahvaljujući crnom pravokutniku koji ističe "badminton" i stavlja ga u vlastiti prostor.
Na trećoj slici, pozadinska škrabotina prekida prostor "Sport", ali ne i prostor "badminton", te stoga rezultira preokretom gdje je "badminton" najviši u hijerarhiji. Taj je razvoj teško predvidjeti, pa ga dizajneri često povezuju s holističkim osjećajem "teksture".
4. Težina fonta i uparivanje. Načela vizualne hijerarhije
Odabir fonta ključan je za uspostavljanje vizualne hijerarhije. Među najvažnijim atributima fonta su težina, širina poteza koji čine njegova slova i stil, kao što su serif i sans serif. Ostale izmjene, poput kurziva, također mogu igrati ulogu.
Primijetite kako slušalice utječe na redoslijed hijerarhije riječi u donjem web dizajnu za The Tea Factory: "savršeni čajevi koji će vam pomoći da se zagrijete" naziv je igre, ali razlike u težini fonta i kurzivu, uz položaj riječi, stvaraju više dinamično, manje linearno iskustvo čitanja. "://azbyka.com.ua/foto/tea-factory.jpg" />
U nekim slučajevima cilj je predstaviti različite informacije kao jednako hitne. Postavljanje svima iste veličine i težine osigurat će jednakost, ali će također izgledati monotono. Razlikovanje fontova jedan je od načina da se to izbjegne, poput naslovnice časopisa Trendi u nastavku. Načela vizualne hijerarhije
Ovdje je pet teasera oko periferije stranice iste u hijerarhiji, ali postižu raznolikost mijenjanjem dva dobro uparena fonta — jedan je serif srednje težine, a drugi lagani, ali visoki sans-serif.
5. Boja i sjena.
Evo još jedne zabune: svijetle boje ističu se od prigušenih boja ili nijansi sive, dok se svjetlije nijanse čine "udaljenije" i stoga padaju niže u hijerarhiji od bogatijih, tamnijih nijansi. Web stranica Gdje su oni kontrastira jako svjetlo i pozadinsko osvjetljenje u boji s efektom crno-bijele mreže s efektom svjetline:
Web stranica Guggenheima koristi boju za naglašavanje važnih informacija kao što su odabir lokacije, popis izložbi koje se trenutno gledaju i poveznice na posebne izložbe. Načela vizualne hijerarhije
Najbolji font za prilagođeno pakiranje
Whitney Museum web stranica, s druge strane, uspostavlja hijerarhiju unutar jednog fonta, težine i tona (crnog) pomoću nijanse (što znači dodavanje bijele osnovnom tonu, čineći ga svjetlijim). “Cory Archangel on Pop Culture” jasno je ispod “New on Whitney Stories” u vizualnoj hijerarhiji, ne samo zato što je niži, već i zato što mu je nijansa svjetlija, što ga čini manje upadljivim na bijeloj pozadini. Načela vizualne hijerarhije
Boja ima posebno značenje u mobilni dizajn aplikacije u kojima mala veličina zaslona ograničava vašu mogućnost korištenja drugih strategija kao što su varijacije veličine i veliki razmak. U aplikaciji Grainger Industrial Supply, gumb "Pristupi naplati" obojen je crvenom bojom, što ga čini istaknutim na svakoj stranici gdje se pojavi. Za razliku od toga, ploča s uskim rezultatima pretraživanja je siva, što je u hijerarhiji čini otprilike ekvivalentnom drugim elementima kao što su traka za pretraživanje i veze proizvoda.
Dizajn aplikacije za Grainger
6. Smjer za dizajnere.
Izgledi stranica obično su dizajnirani tako da slijede mrežu okomitih i vodoravnih linija, i prema konvenciji i zato što je to najčitljiviji format. U takvom sustavu postoji novi način uspostavljanja hijerarhije: razbijanje mreže.
Tekst koji je postavljen duž krivulje ili dijagonale automatski se ističe naspram okolnog teksta blokiranog mrežom, zauzimajući središnje mjesto. Ovo je dugo bila učinkovita strategija u oglašavanju, poput plakata za autobusnu stanicu tvrtke Frost Design.
Ostavite komentar