Visuaalse hierarhia põhimõtted disaineritele

Disainerite visuaalse hierarhia põhimõtted on kujunduskontseptsioon, mida kasutatakse selleks, et suunata vaataja pilku läbi kujunduse ja määrata, millised elemendid on kõige olulisemad või visuaalselt atraktiivsemad.

Algul olid seal kivitahvlid, papüürusrullid ja paber. Siis tulid arvutiekraanid ja elektroonilised tahvelarvutid. Lehe kuvamise tehnoloogia arenedes jääb disaineritele selge viis sisu korraldamiseks. Aga kumb on parem? Lühidalt , visuaalne hierarhia.

Siin on visuaalse hierarhia määratlus: Visuaalne hierarhia on paigutus graafilised elemendid disainis iga elemendi tähtsuse järjekorras. Visuaalne kaal määrab elemendi tähtsus kujunduse hierarhias, öeldes vaatajale, millele keskenduda ja mis järjekorras.

Vahendid disaineritele. 50 tasuta

See on muutumas üha olulisemaks, kuna reageerivad raamistikud sunnivad disainereid mõtlema korraga paljudele erinevatele lehtedele. Tiheda teksti ja lühikese tähelepanuga silmitsi seistes töötasid disainerid välja 6 põhimõtet, et suunata lugeja pilk kõige olulisemale teabele.

Need 6 visuaalse hierarhia põhimõtet aitavad teil kujundada kõike alates brošüüridest kuni rakendusteni, tagades lõppkasutajale disainerite jaoks positiivse lugemiskogemuse.

Kõiki kultuure loetakse ülalt alla ja enamikke kultuure loetakse vasakult paremale. Kuid kuigi need teadmised on olulised lehe kujundus, disainerid teavad, et ülesanne on palju keerulisem.

Hiljutised uuringud on näidanud, et inimesed skannivad enne lehe lugemist, kas nad on sellest huvitatud. Skannimismustrid kipuvad võtma ühe kahest kujust, "F" ja "Z", ja saate seda oma kujunduses ära kasutada.

F-mustrid. Visuaalse hierarhia põhimõtted

F-mallid rakendatakse traditsioonilistele tekstilehtedele, nagu artiklid või ajaveebi postitused. Lugeja skannib vasakut poolt lehekülg otsib huvitavaid märksõnu vasakule joondatud pealkirjadest või algsetest teemalausetest, seejärel peatub ja loeb (paremal), kui midagi huvitavat kohtab. Tulemus näeb välja nagu F (või E või midagi veelgi horisontaalsemate triipudega, kuid termin "F" jäi kinni).

Kuidas saate seda kasutada? Joondage oluline teave vasakule ja kasutage lõiguplokkide eraldamiseks lühikesi paksus kirjas pealkirju, täppe ja muid sarnaseid tähelepanu äratavaid elemente.

Z-mudel. Visuaalse hierarhia põhimõtted

Z-mustrid kohaldatakse muud tüüpi lehtedele, nagu reklaamid või veebisaidid, kus teavet ei pruugita esitada plokkidena. Lugeja skannib esmalt lehe ülaosa, kust leiab tõenäoliselt olulist infot, seejärel liigub diagonaalselt vastasnurka ja teeb sama lehe allservas.

Veebidisainerid kujundavad tavaliselt oma lehed nii, et need vastavad selgelt sellele käitumisele, asetades kõige olulisema teabe nurkadesse ja suunates muu olulise teabe piki ülemist ja alumist riba ning ühendades diagonaali.

Allpool 2010. aasta konverentsiassamblee kujunduses on olulised elemendid logo (üleval vasakul), nupp "registreeru kohe" (paremal ülaosas) ja kõlarite loend (all), mis on strateegiliselt paigutatud kenadesse Z-kujulistesse kohtadesse.

2. Suurus loeb. Visuaalse hierarhia põhimõtted
_

See on üsna lihtne: inimesed loevad kõigepealt suuri asju. Kui teie pilk tõmbab "etenduse" poole, enne kui "lahkute" allolevasse Young Vici reklaami, peaksite viivitamatult ühendust võtma tajupsühholoogiga: tõenäoliselt võite teenida palju raha, kui teid testitakse kui haruldast anomaaliat.

Huvitav on see, et see tendents on tegelikult piisavalt tugev, et ülalt-alla reeglit tagasi lükata. Ülaltoodud pildil alistab "häkkimine" "aja tegutsemiseks", kuna see on suurem ja vasakule (nii aitab vasakult paremale reegel).

Kuid aastaaruande järgmisel leheküljel: Inimõiguste kampaania 2012 (välja töötatud viiendas meediaveerus) loeme suurelt font "Võitlus võrdõiguslikkuse eest kampaania rajal" enne teksti otse kohal "Valimised 2012". Visuaalse hierarhia põhimõtted

"Valimised 2012" on teabe kõrgeim järjekord: see ütleb meile üldise teema, millega allolev teave on seotud. Kuid kujundaja otsustas, et artikli pealkiri oli lugejatele huvitavam, ja hindas seda nii, et seda loetaks esimesena.

3. Ruum ja tekstuur. Visuaalse hierarhia põhimõtted

Teine viis tähelepanu saamiseks on anda sisule piisavalt ruumi hingamiseks . Kui nupu ümber on märkimisväärne negatiivne tühik või tekstiploki ridu järgitakse laialdaselt, on need elemendid lugejatele kergemini nähtavad.

Nagu näete alloleval pildil (osa DrawtoClicki saidist), võib vahekaugus olla elegantne alternatiiv või täiendus suuruse kasutamisele. Siin on müügiargument “Notre agence vouscompagne...” kirjutatud väga väikeses kirjas, kuid seda ümbritseb ohtralt tühikuid, mis viitab selle tähtsusele. Allpool saavad täiendavat rõhku fraasid "Le Compendre", "Le Réaliser" ja "Le Partager", mis on ümbritsevast ruumist eraldatud.

Kui inimesed räägivad "tekstuurist" seoses visuaalse hierarhiaga, ei pea nad silmas tekstuuri graafilisi efekte. Pigem viitab seda tüüpi "tekstuur" ruumi, teksti ja muude detailide üldisele paigutusele või struktuurile lehel. See Bright Pinki näide illustreerib kontseptsiooni hästi:

Esimesel pildil on sõna "Sport" hierarhias kõrgemal kui "sulgpall", kuna see on pikem, suurem ja julgem. Pildil 2 on need kaks sõna ligikaudu samaväärsed tänu mustale ristkülikule, mis muudab sulgpalli silmapaistvaks ja asetab selle oma kohale.

Kolmandal pildil katkestab taustakritseldus "Spordi" ruumi, kuid mitte "sulgpalli" ruumi ja põhjustab seetõttu pöördumise, kus "sulgpall" on hierarhias kõrgeim. Seda arengut on raske ennustada, nii et disainerid seostavad seda sageli tervikliku "tekstuuri" tunnetusega.

4. Fondi kaal ja sidumine. Visuaalse hierarhia põhimõtted

Fondivalik on visuaalse hierarhia loomisel kriitilise tähtsusega. Fondi kõige olulisemate atribuutide hulgas on kaal, selle tähti moodustavate tõmmete laius ja stiil (nt serif ja sans serif). Oma osa võivad mängida ka muud muudatused, näiteks kaldkiri.

Pange tähele, kuidas peakomplekt mõjutab sõnade hierarhia järjekorda The Tea Factory allolevas veebidisainis: "perfect teas to help you sooje" on mängu nimi, kuid erinevused fondi kaalus ja kaldkirjas, lisaks sõnade paigutusele, loovad dünaamiline, vähem lineaarne lugemiskogemus. "://azbyka.com.ua/foto/tea-factory.jpg" />

Mõnel juhul on eesmärk esitada mitmesugust teavet sama kiireloomulisena. Kõigi ühesuguse suuruse ja kaalu määramine tagab samaväärsuse, kuid muudab selle ka monotoonseks. Fontide eristamine on üks viis selle vältimiseks, nagu allpool ajakirja Trendi kaanel. Visuaalse hierarhia põhimõtted

Brošüüri ettevalmistamine trükkimiseks.

Siin on viis lehe äärealadel olevat tiiserit hierarhias samad, kuid saavutavad mitmekesisuse, muutes kahte hästi seotud fonti – üks keskmise kaaluga serif ja teine ​​kerge, kuid kõrge ilma serifita.

5. Värv ja toon. 

Siin on veel üks asjatu: erksad värvid paistavad vaigistatud värvide või hallide varjundite hulgast silma, heledamad toonid paistavad aga "kaugemad" ja langevad seega hierarhias madalamale kui rikkalikumad ja tumedamad toonid. Veebisait Where Are They vastandab eredat valgust ja värvilist taustvalgustust mustvalge ruudustiku efektiga heleduse mõjule:

Guggenheimi veebisait kasutab värve, et rõhutada olulist teavet, nagu asukoha valik, praegu vaadatavate näituste loend ja lingid erinäitustele. Visuaalse hierarhia põhimõtted

Parim font kohandatud pakendamiseks

Whitney muuseumi veebisait seevastu kehtestab hierarhia ühe fondi, kaalu ja tooni (must) piires, kasutades tooni (mis tähendab valge lisamist põhitoonile, muutes selle heledamaks). "Cory Archangel on popkultuur" on visuaalses hierarhias selgelt allpool "New on Whitney Stories" mitte ainult seetõttu, et see on madalam, vaid ka seetõttu, et selle toon on heledam, muutes selle valgel taustal vähem silmatorkavamaks. Visuaalse hierarhia põhimõtted

Värvil on eriline tähendus mobiilne disain rakendused, kus väike ekraani suurus piirab teie võimalust kasutada muid strateegiaid, nagu suuruse varieerumine ja lai vahekaugus. Rakenduses Grainger Industrial Supply on nupp "Jätka kassasse" punaseks värvitud, muutes selle silmapaistvaks igal lehel, kus see kuvatakse. Kitsaste otsingutulemuste paneel on seevastu hall, mistõttu on see hierarhias ligikaudu samaväärne muude elementidega, nagu otsinguriba ja tootelingid.

6. Suund disaineritele.

Leheküljed kujundatakse tavaliselt vertikaalsete ja horisontaalsete joonte ruudustiku järgi, nii kokkuleppeliselt kui ka seetõttu, et see on kõige loetavam formaat. Sellises süsteemis on hierarhia loomiseks uus viis: ruudustiku katkestamine.

Tekst, mis on paigutatud piki kõverat või diagonaali, eristub automaatselt ümbritsevast ruudustikuga blokeeritud tekstist, võttes keskpunkti. See on pikka aega olnud tõhus reklaamistrateegia, näiteks Frost Designi bussipeatuse plakat.