Principi vizuelne hijerarhije za dizajnere su koncept dizajna koji se koristi da vodi kako se oči gledaoca kreću kroz dizajn i određuju koji su elementi najvažniji ili vizuelno privlačni.
U početku su postojale kamene ploče, papirusni svici i papir. Zatim su došli kompjuterski ekrani i elektronski tableti. Kako se tehnologija prikaza stranica razvija, dizajnerima ostaje jasan način organiziranja sadržaja. Ali šta je bolje? Ukratko , vizuelna hijerarhija.
Evo definicije vizuelne hijerarhije: Vizuelna hijerarhija je uređenje grafički elementi u dizajnu po redosledu važnosti svakog elementa. Vizuelna težina određuje važnost elementa u hijerarhiji dizajna, govoreći gledaocu na šta da se fokusira i kojim redosledom.
Resursi za dizajnere. 50 besplatno
Ovo postaje sve važnije pitanje jer responzivni okviri prisiljavaju dizajnere da razmišljaju o više različitih stranica odjednom. Suočeni sa gustim tekstom i kratkim rasponom pažnje, dizajneri su razvili 6 principa da usmjere oči čitatelja na najvažnije informacije.
Ovih 6 principa vizualne hijerarhije pomoći će vam da dizajnirate sve, od brošura do aplikacija, osiguravajući da krajnji korisnik ima pozitivno iskustvo čitanja za dizajnere.
Sve kulture se čitaju od vrha do dna, a većina kultura se čita s lijeva na desno. Ali iako je ovo znanje važno za dizajn stranice, dizajneri znaju da je zadatak mnogo teži.
Nedavne studije su pokazale da ljudi prvo skeniraju stranicu kako bi vidjeli da li ih zanima prije nego što je pročitaju. Uzorci skeniranja obično imaju jedan od dva oblika, "F" i "Z", i to možete iskoristiti u svom dizajnu.
F-obrasci. Principi vizuelne hijerarhije
F-šabloni primijeniti na tradicionalne tekstualne stranice kao što su članci ili postovi na blogu. Čitač skenira lijevu stranu stranice traži zanimljive ključne riječi u lijevo poravnatim naslovima ili početnim rečenicama teme, a zatim staje i čita (desno) kada naiđe na nešto zanimljivo. Rezultat izgleda kao F (ili E, ili nešto s još više horizontalnih pruga; ali izraz "F" je ostao).
Kako možete ovo iskoristiti? Poravnajte važne informacije s lijeve strane i koristite kratke, podebljane naslove, oznake i druge slične elemente koji privlače pažnju da biste razbili blokove pasusa.
Z-model. Principi vizuelne hijerarhije
Z-obrasci primjenjuju se na druge vrste stranica, kao što su reklame ili web stranice, gdje informacije nisu nužno predstavljene u blok paragrafima. Čitač prvo skenira vrh stranice, gdje će se vjerovatno naći važne informacije, zatim prelazi u suprotni ugao dijagonalno i čini isto na dnu stranice.
Web dizajneri obično dizajniraju svoje stranice tako da eksplicitno odgovaraju ovom ponašanju, postavljajući najvažnije informacije u uglove i orijentišući druge važne informacije duž gornje i donje trake i povezujući dijagonalu.
U nastavku U dizajnu skupa konferencije 2010. važni elementi su logo (gore levo), dugme "registriraj se sada" (gore desno) i lista zvučnika (dole), koji su strateški postavljeni na lepim mestima u obliku Z.
2. Veličina je bitna. Principi vizuelne hijerarhije
_
Sasvim je jednostavno: ljudi prvo čitaju velike stvari. Ako vam pogled privuče "performans" prije nego što se "podijelite" u donjem oglasu za Young Vic-a, trebali biste odmah kontaktirati perceptivnog psihologa: vjerovatno biste mogli dobro zaraditi ako budete testirani kao rijetka anomalija.
Ono što je zanimljivo je da je ova tendencija zapravo dovoljno jaka da odbaci pravilo odozgo prema dolje. Na gornjoj slici, "hack" nadjačava "vrijeme za djelovanje" jer je veće i lijevo (tako da pravilo s lijeva na desno pomaže).
Ali na sljedećoj stranici Godišnjeg izvještaja: Kampanja za ljudska prava 2012 (razvijenog u petoj medijskoj koloni) čitamo uvelike font “Borba za ravnopravnost na tragu kampanje” prije teksta direktno iznad “Izbori 2012.” Principi vizuelne hijerarhije
„Izbori 2012.“ su informacije najvišeg nivoa: govori nam o opštoj temi na koju se donje informacije odnose. Ali dizajner je odlučio da je naslov članka zanimljiviji za čitatelje, te ga je stoga ocijenio tako da se prvi pročita.
3. Prostor i tekstura. Principi vizuelne hijerarhije
Drugi način da privučete pažnju je dati sadržaju dovoljno prostora za disanje . Ako postoji značajan negativan prostor oko dugmeta ili su redovi u tekstualnom bloku široko praćeni, ovi elementi će biti lakše vidljivi čitaocima.
Kao što možete vidjeti na slici ispod (dio DrawtoClick stranice), razmak može biti elegantna alternativa ili dopuna korištenju veličine. Ovdje je prodajno mjesto, “Notre agence vouscompagne...”, ispisano vrlo sitnim slovima, ali je okruženo obiljem bijelog prostora, što ukazuje na njegovu važnost. U nastavku, fraze “Le Compendre”, “Le Réaliser” i “Le Partager” dobijaju dodatni naglasak, odvojene od okolnog prostora.
Kada ljudi govore o "teksturi" u odnosu na vizuelnu hijerarhiju, ne misle na grafičke efekte teksture. Umjesto toga, ova vrsta "teksture" se odnosi na cjelokupni raspored ili strukturu prostora, teksta i drugih detalja na stranici. Ovaj primjer iz Bright Pink dobro ilustruje koncept:
Na prvoj slici riječ "Sport" je viša u hijerarhiji od "badmintona" jer je viša, veća i hrabrija. Na slici 2, dvije riječi su otprilike ekvivalentne, zahvaljujući crnom pravougaoniku koji izdvaja „badminton“ i stavlja ga u svoj prostor.
Na trećoj slici, pozadinska šara prekida prostor "Sport", ali ne i prostor "badminton", i stoga rezultira preokretom gdje je "badminton" najviši u hijerarhiji. Ovaj razvoj je teško predvidjeti, pa ga dizajneri često povezuju sa holističkim osjećajem "teksture".
4. Težina fonta i uparivanje. Principi vizuelne hijerarhije
Izbor fonta je ključan za uspostavljanje vizuelne 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. Druge modifikacije, kao što je kurziv, također mogu igrati ulogu.
Obratite pažnju kako slušalice utiče na redosled hijerarhije reči u web dizajnu ispod za The Tea Factory: "savršeni čajevi koji će vam pomoći da se zagrejete" je naziv igre, ali razlike u težini fonta i kurzivu, pored položaja reč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. Podešavanje svih na istu veličinu i težinu osigurat će ekvivalentnost, ali će isto tako izgledati monotono. Razlikovanje fontova je jedan od načina da se ovo izbjegne, poput naslovnice časopisa Trendi ispod. Principi vizuelne hijerarhije
Ovdje je pet tizera na periferiji stranice isto u hijerarhiji, ali postižu raznolikost promjenom dva dobro uparena fonta – jedan srednje teški serif, a drugi lagani, ali visoki sans-serif.
5. Boja i nijansa.
Evo još jednog nerazumnog: svijetle boje se izdvajaju od prigušenih boja ili nijansi sive, dok svjetlije nijanse izgledaju „udaljenije“ i stoga padaju niže u hijerarhiji od bogatijih, tamnijih nijansi. Web lokacija Where Are They suprotstavlja jako svjetlo i pozadinsko osvjetljenje u boji s efektom crno-bijele mreže u odnosu na efekat svjetline:
Guggenheim web stranica koristi boju kako bi naglasila važne informacije kao što su odabir lokacije, popis izložbi koje se trenutno gledaju i veze do posebnih izložbi. Principi vizuelne hijerarhije
Najbolji font za prilagođeno pakovanje
Web stranica Whitney Museum, s druge strane, uspostavlja hijerarhiju unutar jednog fonta, težine i tona (crnog) koristeći nijansu (što znači dodavanje bijele boje osnovnom tonu, čineći ga svjetlijim). “Cory Archangel o pop kulturi” je jasno ispod “New on Whitney Stories” u vizuelnoj hijerarhiji, ne samo zato što je niža, već i zato što je njena nijansa svetlija, što ga čini manje upadljivim na beloj pozadini. Principi vizuelne hijerarhije
Boja ima posebno značenje u mobilni dizajn aplikacije u kojima mala veličina ekrana ograničava vašu mogućnost korištenja drugih strategija kao što su varijacija veličine i širok razmak. U aplikaciji Grainger Industrial Supply, dugme "Proceed to Checkout" je obojeno crvenom bojom, čime se ističe na bilo kojoj stranici na kojoj se pojavljuje. Panel uskih rezultata pretrage je, naprotiv, siv, što ga čini otprilike ekvivalentnim u hijerarhiji drugim elementima kao što su traka za pretragu i veze proizvoda.
Dizajn aplikacije za Grainger
6. Smjer za dizajnere.
Izgledi stranica obično su dizajnirani tako da prate mrežu vertikalnih i horizontalnih linija, kako po konvenciji, tako i zato što je to najčitljiviji format. U takvom sistemu postoji novi način uspostavljanja hijerarhije: razbijanje mreže.
Tekst koji je pozicioniran duž krivulje ili dijagonale automatski se ističe u odnosu na okolni tekst blokiran mrežom, zauzimajući središnje mjesto. Ovo je dugo bila efikasna strategija u oglašavanju, kao što je plakat autobuske stanice Frost Design-a.
Оставить комментарий