Načela vizualne hierarhije za oblikovalce so koncept oblikovanja, ki se uporablja za usmerjanje, kako se gledalčeve oči premikajo skozi dizajn, in določa, kateri elementi so najbolj pomembni ali vizualno privlačni.
Sprva so bile kamnite plošče, zvitki papirusa in papir. Potem so prišli računalniški zasloni in elektronske tablice. Z razvojem tehnologije prikazovanja strani je oblikovalcem prepuščen jasen način organiziranja vsebine. Toda kateri je boljši? Na kratko , vizualna hierarhija.
Tukaj je definicija vizualne hierarhije: Vizualna hierarhija je ureditev grafični elementi v oblikovanju po pomembnosti vsakega elementa. Vizualna teža določa pomembnost elementa v hierarhiji oblikovanja, ki gledalcu pove, na kaj naj se osredotoči in v kakšnem vrstnem redu.
Viri za oblikovalce. 50 brezplačno
To postaja vse bolj pomembno vprašanje, saj odzivni okviri silijo oblikovalce, da razmišljajo o več različnih straneh hkrati. Ob soočenju z gostim besedilom in kratkimi razponi pozornosti so oblikovalci razvili 6 načel za usmeritev bralčevega pogleda na najpomembnejše informacije.
Teh 6 načel vizualne hierarhije vam bo pomagalo oblikovati vse, od brošur do aplikacij, s čimer boste končnemu uporabniku zagotovili pozitivno bralno izkušnjo za oblikovalce.
Vse kulture se berejo od zgoraj navzdol, večina kultur pa od leve proti desni. A čeprav je to znanje pomembno za oblikovanje strani, oblikovalci vedo, da je naloga veliko težja.
Nedavne študije so pokazale, da ljudje najprej pregledajo stran, da ugotovijo, ali jih zanima, preden jo preberejo. Vzorci skeniranja so ponavadi v eni od dveh oblik, "F" in "Z", in to lahko izkoristite v svojem dizajnu.
F-vzorci. Načela vizualne hierarhije
F-šablone veljajo za tradicionalne besedilne strani, kot so članki ali objave v spletnih dnevnikih. Bralec skenira levo stran strani išče zanimive ključne besede v levo poravnanih naslovih ali začetnih tematskih stavkih, nato pa se ustavi in bere (na desno), ko naleti na kaj zanimivega. Rezultat je videti kot F (ali E, ali nekaj s še več vodoravnimi črtami; vendar se je izraz "F" obdržal).
Kako lahko to uporabite? Poravnajte pomembne informacije na levo in uporabite kratke, krepke naslove, oznake in druge podobne elemente, ki pritegnejo pozornost, da razbijete bloke odstavkov.
Z-model. Načela vizualne hierarhije
Z-vzorci veljajo za druge vrste strani, kot so oglasi ali spletna mesta, kjer informacije niso nujno predstavljene v blokih. Bralec najprej pregleda vrh strani, kjer se najverjetneje nahajajo pomembne informacije, nato se diagonalno premakne v nasprotni kot in enako naredi na dnu strani.
Spletni oblikovalci običajno oblikujejo svoje strani tako, da se eksplicitno ujemajo s tem vedenjem, najpomembnejše informacije postavijo v vogale, druge pomembne informacije pa usmerijo vzdolž zgornje in spodnje vrstice ter povezujejo diagonalo.
Spodaj Pri oblikovanju konferenčnega zbora 2010 je pomemben element logotip (zgoraj levo), gumb "registracija zdaj" (zgoraj desno) in seznam zvočnikov (spodaj), ki so strateško postavljeni na lepa mesta z vzorcem Z.
2. Velikost je pomembna. Načela vizualne hierarhije
_
Preprosto je: ljudje najprej berejo velike stvari. Če vaše oči pritegne "predstava", preden se "razdelite" v spodnji oglas za Young Vic, se takoj obrnite na zaznavnega psihologa: verjetno bi lahko dobro zaslužili s testiranjem kot redko anomalijo.
Zanimivo je, da je ta težnja dejansko dovolj močna, da zavrne pravilo od zgoraj navzdol. Na zgornji sliki "hack" preglasi "čas za ukrepanje", ker je večji in levo (zato pomaga pravilo od leve proti desni).
Toda na naslednji strani letnega poročila: Kampanja za človekove pravice 2012 (razvito v petem medijskem stolpcu) beremo v velikem pisava »Boj za enakost na poti kampanje« pred besedilom neposredno nad njim »Volitve 2012.« Načela vizualne hierarhije
"Volitve 2012" so informacije na najvišji ravni: pove nam splošno temo, na katero se nanašajo spodnje informacije. Toda oblikovalec se je odločil, da je naslov članka bolj zanimiv za bralce, in ga je zato ocenil tako, da bo prvi prebran.
3. Prostor in tekstura. Načela vizualne hierarhije
Drug način za pridobivanje pozornosti je dajte vsebini dovolj prostora za dihanje . Če je okoli gumba veliko negativnega prostora ali če vrstice v besedilnem bloku sledijo široko, bodo ti elementi bralcem lažje vidni.
Kot lahko vidite na spodnji sliki (del spletnega mesta DrawtoClick), je lahko razmik elegantna alternativa ali dopolnilo k uporabi velikosti. Tukaj je prodajna točka »Notre agence vouscompagne ...« napisana z zelo majhnim tiskom, vendar je obkrožena z obilico belega prostora, kar kaže na njeno pomembnost. Spodaj so izrazi »Le Compendre«, »Le Réaliser« in »Le Partager« deležni dodatnega poudarka, saj so ločeni od okoliškega prostora.
Ko ljudje govorijo o "teksturi" v povezavi z vizualno hierarhijo, ne mislijo na grafične učinke teksture. Namesto tega se ta vrsta "teksture" nanaša na celotno ureditev ali strukturo prostora, besedila in drugih podrobnosti na strani. Ta primer iz Bright Pink dobro ponazarja koncept:
Na prvi sliki je beseda "šport" višja v hierarhiji kot "badminton", ker je višja, večja in drznejša. Na sliki 2 sta besedi približno enakovredni, zahvaljujoč črnemu pravokotniku, zaradi katerega beseda "badminton" izstopa in jo postavlja v svoj prostor.
Na tretji sliki čečkanje v ozadju prekine prostor »Šport«, ne pa tudi prostora »badminton«, kar povzroči preobrat, kjer je »badminton« najvišji v hierarhiji. Ta razvoj je težko predvideti, zato ga oblikovalci pogosto povezujejo s celostnim občutkom "teksture".
4. Teža pisave in seznanjanje. Načela vizualne hierarhije
Izbira pisave je ključnega pomena za vzpostavitev vizualne hierarhije. Med najpomembnejšimi lastnostmi pisave so teža, širina črt, ki sestavljajo črke, in slog, kot sta serif in sans serif. Druge spremembe, kot je poševni tisk, lahko prav tako igrajo vlogo.
Opazite, kako slušalke vpliva na vrstni red besedne hierarhije v spodnjem spletnem oblikovanju za The Tea Factory: "popolni čaji, ki vam bodo pomagali pri ogrevanju" je ime igre, vendar razlike v debelini pisave in poševnem tisku poleg postavitve besed ustvarijo bolj dinamična, manj linearna bralna izkušnja. "://azbyka.com.ua/foto/tea-factory.jpg" />
V nekaterih primerih je cilj predstaviti različne informacije kot enako nujne. Nastavitev enake velikosti in teže za vse bo zagotovila enakovrednost, hkrati pa bo videti monotono. Razlikovanje pisave je eden od načinov, kako se temu izogniti, kot je spodnja naslovnica revije Trendi. Načela vizualne hierarhije
Tukaj je pet dražljivk po obodu strani enakih v hierarhiji, vendar dosežejo raznolikost s spreminjanjem dveh dobro povezanih pisav – ena je srednje debel serif in druga je lahka, a visoka sans-serif.
5. Barva in odtenek.
Tukaj je še ena neumnost: svetle barve izstopajo iz zamolklih barv ali odtenkov sive, medtem ko so svetlejši odtenki videti bolj "oddaljeni" in tako padejo nižje v hierarhiji kot bogatejši, temnejši odtenki. Spletno mesto Where Are They nasprotuje močni svetlobi in barvni osvetlitvi ozadja s črno-belim mrežnim učinkom z učinkom svetilnosti:
Spletna stran Guggenheim uporablja barvo za poudarjanje pomembnih informacij, kot so izbira lokacije, seznam trenutno ogledovanih razstav in povezave do posebnih razstav. Načela vizualne hierarhije
Najboljša pisava za pakiranje po meri
Spletna stran muzeja Whitney na drugi strani vzpostavlja hierarhijo znotraj ene pisave, teže in tona (črnega) z uporabo odtenka (kar pomeni dodajanje bele barve osnovnemu tonu, zaradi česar je svetlejši). »Cory Archangel on Pop Culture« je jasno pod »New on Whitney Stories« v vizualni hierarhiji, ne samo zato, ker je nižji, ampak tudi zato, ker je njegov odtenek svetlejši, zaradi česar je manj vpadljiv na belem ozadju. Načela vizualne hierarhije
Barva ima poseben pomen v mobilno oblikovanje aplikacije, kjer majhna velikost zaslona omejuje vašo zmožnost uporabe drugih strategij, kot sta variacija velikosti in širok razmik. V aplikaciji Grainger Industrial Supply je gumb »Nadaljuj na blagajno« obarvan rdeče, zaradi česar izstopa na kateri koli strani, kjer se pojavi. Plošča z rezultati ozkega iskanja je nasprotno siva, zaradi česar je v hierarhiji približno enakovredna drugim elementom, kot so iskalna vrstica in povezave do izdelkov.
Oblikovanje aplikacije za Grainger
6. Navodila za oblikovalce.
Postavitve strani so običajno zasnovane tako, da sledijo mreži navpičnih in vodoravnih črt, tako po dogovoru kot tudi zato, ker je to najbolj čitljiva oblika. V takem sistemu obstaja nov način za vzpostavitev hierarhije: prekinitev mreže.
Besedilo, ki je postavljeno vzdolž krivulje ali diagonale, samodejno izstopa pred okoliškim besedilom, blokiranim z mrežo, in zavzema osrednje mesto. To je že dolgo učinkovita strategija v oglaševanju, kot je na primer plakat za avtobusno postajo Frost Design.
Оставить комментарий