Դիզայներների համար տեսողական հիերարխիայի սկզբունքները դիզայնի հայեցակարգ են, որն օգտագործվում է առաջնորդելու, թե ինչպես են դիտողի աչքերը շարժվում դիզայնի միջով և որոշել, թե որ տարրերն են առավել կարևոր կամ տեսողականորեն գրավիչ:
Սկզբում կային քարե տախտակներ, պապիրուսի մագաղաթներ և թուղթ։ Հետո եկան համակարգիչների էկրաններն ու էլեկտրոնային պլանշետները: Քանի որ էջի ցուցադրման տեխնոլոգիան զարգանում է, դիզայներներին մնում է բովանդակությունը կազմակերպելու հստակ ճանապարհ: Բայց ո՞րն է ավելի լավը: Կարճ ասած , տեսողական հիերարխիա.
Ահա տեսողական հիերարխիայի սահմանումը. Տեսողական հիերարխիան դասավորությունն է գրաֆիկական տարրեր դիզայնի մեջ ըստ յուրաքանչյուր տարրի կարևորության. Տեսողական քաշը որոշում է տարրի կարևորությունը դիզայնի հիերարխիայում՝ հեռուստադիտողին ասելով, թե ինչի վրա պետք է կենտրոնանալ և ինչ հերթականությամբ:
Ռեսուրսներ դիզայներների համար. 50 անվճար
Սա դառնում է ավելի ու ավելի կարևոր խնդիր, քանի որ արձագանքող շրջանակները դիզայներներին ստիպում են մտածել բազմաթիվ տարբեր էջերի մասին միանգամից: Հանդիպելով խիտ տեքստի և ուշադրության կարճ ժամանակահատվածի՝ դիզայներները մշակել են 6 սկզբունք՝ ընթերցողի աչքը ուղղորդելու ամենակարևոր տեղեկատվությանը:
Տեսողական հիերարխիայի այս 6 սկզբունքները կօգնեն ձեզ նախագծել ամեն ինչ՝ բրոշյուրներից մինչև հավելվածներ՝ ապահովելով, որ վերջնական օգտագործողը դիզայներների համար ընթերցելու դրական փորձ ունի:
Բոլոր մշակույթները կարդացվում են վերևից ներքև, իսկ մշակույթների մեծ մասը՝ ձախից աջ: Բայց չնայած այս գիտելիքը կարևոր է էջի ձևավորում, դիզայներները գիտեն, որ առաջադրանքը շատ ավելի բարդ է։
Վերջին ուսումնասիրությունները ցույց են տվել, որ մարդիկ նախքան էջը կարդալուց առաջ սկանավորում են այն, թե արդյոք հետաքրքրված են այն: Սկանավորման նախշերը հակված են ընդունելու երկու ձևերից մեկը՝ «F» և «Z», և դուք կարող եք օգտվել դրանից ձեր դիզայնում:
F- Patterns. Տեսողական հիերարխիայի սկզբունքները
F-կաղապարներ կիրառել ավանդական տեքստային էջեր, ինչպիսիք են հոդվածները կամ բլոգային գրառումները: Ընթերցողը սկանավորում է ձախ կողմը էջեր փնտրում է հետաքրքիր հիմնաբառեր ձախ դասավորված վերնագրերում կամ սկզբնական թեմայի նախադասություններում, այնուհետև կանգ է առնում և կարդում (դեպի աջ), երբ նա հանդիպում է որևէ հետաքրքիր բանի: Արդյունքը նման է F-ի (կամ E-ի, կամ էլ ավելի հորիզոնական շերտերով մի բանի, բայց «F» տերմինը մնացել է):
Ինչպես կարող եք օգտագործել սա: Կարևոր տեղեկատվությունը հավասարեցրեք ձախ կողմում և օգտագործեք կարճ, թավ վերնագրեր, պարբերակներ և ուշադրություն գրավող այլ նմանատիպ տարրեր՝ պարբերությունների բլոկները բաժանելու համար:
Z-մոդել. Տեսողական հիերարխիայի սկզբունքները
Z- նախշեր կիրառել այլ տեսակի էջերի, ինչպիսիք են գովազդները կամ կայքերը, որտեղ տեղեկատվությունը պարտադիր չէ, որ ներկայացվի բլոկային պարբերություններում: Ընթերցողը սկզբում սկանավորում է էջի վերևը, որտեղ, հավանաբար, կգտնվեն կարևոր տեղեկություններ, այնուհետև շարժվում է դեպի հակառակ անկյուն անկյունագծով և նույնն անում էջի ներքևում:
Վեբ դիզայներները սովորաբար նախագծում են իրենց էջերը՝ հստակորեն համապատասխանեցնելով այս վարքագծին՝ տեղադրելով ամենակարևոր տեղեկատվությունը անկյուններում և կողմնորոշելով այլ կարևոր տեղեկություններ վերևի և ներքևի գծերի երկայնքով և միացնելով շեղանկյունը:
Ներքևում 2010 թվականի կոնֆերանսի ժողովի ձևավորման մեջ կարևոր տարրեր են լոգոն (վերևի ձախ կողմում), «գրանցվել հիմա» կոճակը (վերևի աջ կողմում) և բարձրախոսների ցանկը (ներքևում), որոնք ռազմավարականորեն տեղադրված են գեղեցիկ Z-պատկերի կետերում:
2. Չափը կարևոր է: Տեսողական հիերարխիայի սկզբունքները
_
Դա բավականին պարզ է՝ մարդիկ նախ մեծ բաներ են կարդում: Եթե ձեր աչքերը ձգվում են դեպի «ներկայացում» նախքան Young Vic-ի ստորև ներկայացված գովազդի մեջ «բաժանվելը», դուք պետք է անմիջապես դիմեք ընկալման հոգեբանի. հավանաբար կարող եք լավ գումար վաստակել՝ որպես հազվագյուտ անոմալիա փորձարկվելով:
Հետաքրքիրն այն է, որ այս միտումն իրականում բավականաչափ ուժեղ է վերևից վար կանոնը մերժելու համար: Վերոնշյալ պատկերում «հաքը» վերացնում է «գործելու ժամանակը», քանի որ այն ավելի մեծ է և դեպի ձախ (այսպես, ձախից աջ կանոնն օգնում է):
Սակայն տարեկան զեկույցի հաջորդ էջում. Մարդու իրավունքների քարոզարշավ 2012 (մշակված լրատվամիջոցների հինգերորդ սյունակում) մենք կարդում ենք մեծ ծավալով. տառատեսակ «Հավասարության համար պայքարը քարոզարշավի ուղու վրա» տեքստից առաջ «Ընտրություններ 2012» տեքստից առաջ: Տեսողական հիերարխիայի սկզբունքները
«Ընտրություններ 2012»-ը տեղեկատվության ամենաբարձր մակարդակն է. այն մեզ ասում է ընդհանուր թեման, որին առնչվում է ստորև բերված տեղեկատվությունը: Բայց դիզայները որոշեց, որ հոդվածի վերնագիրն ավելի հետաքրքիր է ընթերցողների համար, և հետևաբար այն գնահատեց այնպես, որ այն առաջինը կարդացվի:
3. Տարածություն և հյուսվածք: Տեսողական հիերարխիայի սկզբունքները
Ուշադրություն գրավելու մեկ այլ միջոց է բովանդակությանը շնչելու համար բավականաչափ տեղ տալ . Եթե կոճակի շուրջ զգալի բացասական տարածություն կա կամ տեքստային բլոկի տողերը լայնորեն հետևված են, այս տարրերն ավելի հեշտությամբ տեսանելի կլինեն ընթերցողներին:
Ինչպես տեսնում եք ստորև նկարում (DrawtoClick-ի կայքի մի մասը), տարածությունը կարող է լինել էլեգանտ այլընտրանք կամ լրացնել չափը օգտագործելու համար: Այստեղ վաճառքի կետը՝ «Notre agence vouscompagne...», գրված է շատ մանրատառով, բայց այն շրջապատված է սպիտակ տարածության առատությամբ՝ մատնանշելով դրա կարևորությունը։ Ստորև լրացուցիչ շեշտադրումներ են ստանում «Le Compendre», «Le Réaliser» և «Le Partager» արտահայտությունները՝ անջատվելով շրջապատող տարածությունից։
Երբ մարդիկ խոսում են «հյուսվածքի» մասին՝ կապված տեսողական հիերարխիայի հետ, նրանք նկատի չունեն հյուսվածքի գրաֆիկական էֆեկտները: Ավելի շուտ, այս տեսակի «հյուսվածքը» վերաբերում է էջի տարածության, տեքստի և այլ մանրամասների ընդհանուր դասավորությանը կամ կառուցվածքին: Bright Pink-ի այս օրինակը լավ պատկերացնում է հայեցակարգը.
Առաջին պատկերում «Սպորտ» բառը հիերարխիայում ավելի բարձր է, քան «բադմինտոն», քանի որ այն ավելի բարձր է, ավելի մեծ և ավելի համարձակ: Նկար 2-ում երկու բառերը մոտավորապես համարժեք են՝ շնորհիվ սև ուղղանկյունի, որը առանձնացնում է «բադմինտոնը» և դնում այն իր սեփական տարածության մեջ:
Երրորդ պատկերում ֆոնային խզբզոցը ընդհատում է «Սպորտային» տարածությունը, բայց ոչ «բադմինտոն» տարածությունը, և հետևաբար հանգեցնում է շրջադարձի, որտեղ «բադմինտոնը» ամենաբարձրն է հիերարխիայում: Այս զարգացումը դժվար է կանխատեսել, ուստի դիզայներները հաճախ այն կապում են «հյուսվածքի» ամբողջական զգացողության հետ:
4. Տառատեսակի քաշը և զուգավորումը: Տեսողական հիերարխիայի սկզբունքները
Տառատեսակի ընտրությունը կարևոր նշանակություն ունի տեսողական հիերարխիա հաստատելու համար: Տառատեսակի ամենակարևոր ատրիբուտներից են քաշը, տառերը կազմող տառերի լայնությունը և ոճը, օրինակ՝ serif և sans serif։ Այլ փոփոխությունները, ինչպիսիք են շեղատառերը, նույնպես կարող են դեր խաղալ:
Ուշադրություն դարձրեք, թե ինչպես ականջակալ ազդում է «The Tea Factory»-ի ստորև բերված վեբ դիզայնի հիերարխիայի բառերի կարգի վրա. «կատարյալ թեյեր, որոնք կօգնեն ձեզ տաքանալ» խաղի անվանումն է, սակայն տառատեսակի քաշի և շեղ տառերի տարբերությունները, բացի բառերի տեղադրությունից, ստեղծում են ավելին. դինամիկ, պակաս գծային, ընթերցանության փորձ: «://azbyka.com.ua/foto/tea-factory.jpg» />
Որոշ դեպքերում նպատակ է դրվում բազմաբնույթ տեղեկատվության ներկայացումը նույնքան հրատապ: Բոլորին միևնույն չափի և քաշի վրա դնելը կապահովի համարժեքություն, բայց նաև կդարձնի այն միապաղաղ տեսք: Տառատեսակների տարբերակումը սրանից խուսափելու միջոցներից մեկն է, ինչպես ներքևում գտնվող Trendi ամսագրի շապիկը: Տեսողական հիերարխիայի սկզբունքները
Գրքույկի պատրաստում տպագրության համար։
Այստեղ էջի ծայրամասում գտնվող հինգ թիզերը հիերարխիայում նույնն են, բայց բազմազանության են հասնում՝ փոխելով երկու լավ զուգակցված տառատեսակներ՝ մեկը միջին քաշի սերիֆ, իսկ մյուսը՝ թեթև, բայց բարձրահասակ sans-serif:
5. Գույն և երանգ:
Ահա ևս մեկ անհեթեթություն. վառ գույներն առանձնանում են խլացված գույներից կամ մոխրագույնի երանգներից, մինչդեռ բաց երանգներն ավելի «հեռավոր» են թվում և այդպիսով հիերարխիայում ավելի ցածր են ընկնում, քան ավելի հարուստ, մուգ երանգները: Where Are They կայքը հակադրում է պայծառ լույսը և գունավոր հետին լուսավորությունը սև և սպիտակ ցանցային էֆեկտով պայծառության ազդեցությանը.
Գուգենհայմի վեբկայքն օգտագործում է գույնը՝ ընդգծելու կարևոր տեղեկությունները, ինչպիսիք են տեղանքի ընտրությունը, ներկայումս դիտվող ցուցահանդեսների ցանկը և հատուկ ցուցահանդեսների հղումները: Տեսողական հիերարխիայի սկզբունքները
Լավագույն տառատեսակը հարմարեցված փաթեթավորման համար
Մյուս կողմից, Whitney Museum-ի կայքը սահմանում է հիերարխիա մեկ տառատեսակի, քաշի և տոնի (սև) շրջանակներում՝ օգտագործելով երանգը (որը նշանակում է սպիտակ գույն ավելացնել հիմնական տոնին, դարձնելով այն ավելի թեթև): «Կորի Հրեշտակապետը փոփ մշակույթի մասին» տեսողական հիերարխիայում ակնհայտորեն ցածր է «Նոր Ուիթնիի պատմություններից» ոչ միայն այն պատճառով, որ այն ավելի ցածր է, այլ նաև այն պատճառով, որ դրա երանգն ավելի բաց է, ինչը այն դարձնում է ավելի քիչ աչքի ընկնող սպիտակ ֆոնի վրա: Տեսողական հիերարխիայի սկզբունքները
Գույնը հատուկ նշանակություն ունի բջջային դիզայն հավելվածներ, որտեղ փոքր էկրանի չափը սահմանափակում է այլ ռազմավարություններ օգտագործելու ձեր հնարավորությունը, ինչպիսիք են չափի տատանումները և լայն տարածությունը: Grainger Industrial Supply հավելվածում «Շարունակել վճարել» կոճակը կարմիր գունավորված է, ինչի շնորհիվ այն առանձնանում է ցանկացած էջում, որտեղ այն հայտնվում է: Նեղ որոնման արդյունքների վահանակը, ընդհակառակը, մոխրագույն է, ինչը հիերարխիայում այն մոտավորապես համարժեք է այլ տարրերի, ինչպիսիք են որոնման տողը և արտադրանքի հղումները:
Grainger-ի համար հավելվածի ձևավորում
6. Ուղղություն դիզայներների համար.
Էջի դասավորությունները սովորաբար նախագծված են այնպես, որ հետևեն ուղղահայաց և հորիզոնական գծերի ցանցին, ինչպես պայմանականորեն, այնպես էլ այն պատճառով, որ այն ամենաընթեռնելի ձևաչափն է: Նման համակարգում հիերարխիա հաստատելու նոր միջոց կա՝ ցանցը կոտրելը:
Տեքստը, որը տեղադրված է կորի կամ շեղանկյունի երկայնքով, ինքնաբերաբար առանձնանում է շրջապատող ցանցով արգելափակված տեքստի հետ՝ գրավելով կենտրոնական տեղը: Սա վաղուց արդյունավետ ռազմավարություն է գովազդում, ինչպիսին է Frost Design-ի ավտոբուսի կանգառի պաստառը:
Թողնել մեկնաբանություն