Տեսողական հիերարխիայի սկզբունքներ դիզայներների համար

Դիզայներների համար տեսողական հիերարխիայի սկզբունքները դիզայնի հայեցակարգ են, որն օգտագործվում է դիտողի աչքերի դիզայնի միջով տեղաշարժվելը ուղղորդելու և որոշելու համար, թե որ տարրերն են ամենակարևորը կամ տեսողականորեն գրավիչ։ Սկզբում կային քարե տախտակներ, պապիրուսային գլանափաթեթներ և թուղթ։ Ապա ի հայտ եկան համակարգչային էկրաններն ու էլեկտրոնային պլանշետները։ Էջի ցուցադրման տեխնոլոգիայի զարգացմանը զուգընթաց, դիզայներներին մնում է հստակ կազմակերպել բովանդակությունը։ Բայց ո՞րն է ավելի լավը: Կարճ ասած , տեսողական հիերարխիա։ Ահա տեսողական հիերարխիայի սահմանումը. Տեսողական հիերարխիան դասավորությունն է գրաֆիկական տարրեր դիզայնի մեջ ըստ յուրաքանչյուր տարրի կարևորության. Տեսողական քաշը որոշում է տարրի կարևորությունը դիզայնի հիերարխիայում՝ հեռուստադիտողին ասելով, թե ինչի վրա պետք է կենտրոնանալ և ինչ հերթականությամբ: Ռեսուրսներ դիզայներների համար. Սա գնալով ավելի կարևոր հարց է դառնում, քանի որ արձագանքող շրջանակները ստիպում են դիզայներներին միաժամանակ մտածել բազմաթիվ տարբեր էջերի մասին: Խիտ տեքստի և կարճ ուշադրության տևողության պայմաններում դիզայներները մշակել են 6 սկզբունք՝ ընթերցողի աչքը ամենակարևոր տեղեկատվությանը ուղղորդելու համար: Տեսողական հիերարխիայի այս 6 սկզբունքները կօգնեն ձեզ նախագծել ամեն ինչ՝ բրոշյուրներից մինչև հավելվածներ, ապահովելով, որ վերջնական օգտագործողը դիզայներների համար ունենա դրական ընթերցանության փորձ: Բոլոր մշակույթները կարդացվում են վերևից ներքև, իսկ մշակույթների մեծ մասը՝ ձախից աջ: Բայց չնայած այս գիտելիքը կարևոր է էջի ձևավորում, դիզայներները գիտեն, որ առաջադրանքը շատ ավելի դժվար է։ Վերջերս կատարված ուսումնասիրությունները ցույց են տվել, որ մարդիկ նախ սկանավորում են էջը՝ տեսնելու համար, թե արդյոք հետաքրքրված են դրանով, նախքան այն կարդալը։ Սկանավորման նախշերը հակված են ընդունել երկու ձևերից մեկը՝ «F» և «Z», և դուք կարող եք օգտվել դրանից ձեր դիզայնում։

F- Patterns. Տեսողական հիերարխիայի սկզբունքները

F-կաղապարներ կիրառել ավանդական տեքստային էջեր, ինչպիսիք են հոդվածները կամ բլոգային գրառումները: Ընթերցողը սկանավորում է ձախ կողմը էջեր փնտրում է հետաքրքիր հիմնաբառեր ձախ դասավորված վերնագրերում կամ սկզբնական թեմայի նախադասություններում, այնուհետև կանգ է առնում և կարդում (դեպի աջ), երբ նա հանդիպում է որևէ հետաքրքիր բանի: Արդյունքը նման է F-ի (կամ E-ի, կամ էլ ավելի հորիզոնական շերտերով մի բանի, բայց «F» տերմինը մնացել է): Ինչպես կարող եք օգտագործել սա: Կարևոր տեղեկատվությունը հավասարեցրեք ձախ կողմում և օգտագործեք կարճ, թավ վերնագրեր, պարբերակներ և ուշադրություն գրավող այլ նմանատիպ տարրեր՝ պարբերությունների բլոկները բաժանելու համար:

Z-մոդել. Տեսողական հիերարխիայի սկզբունքները.

Z- նախշեր կիրառել այլ տեսակի էջեր, ինչպիսիք են Գովազդ կամ կայքեր, որտեղ տեղեկատվությունը պարտադիր չէ, որ ներկայացված լինի բլոկային պարբերություններում: Ընթերցողը սկզբում սկանավորում է էջի վերևը, որտեղ, հավանաբար, կգտնվեն կարևոր տեղեկություններ, այնուհետև շարժվում է դեպի հակառակ անկյուն անկյունագծով և նույնն անում էջի ներքևում: Վեբ դիզայներները սովորաբար իրենց էջերը նախագծում են այս վարքագծին հստակորեն համապատասխան՝ տեղադրելով ամենակարևոր տեղեկատվությունը անկյուններում և մյուս կարևոր տեղեկատվությունը կողմնորոշելով վերին և ստորին շերտերի երկայնքով և միացնելով անկյունագծով։ Հետևյալում Կոնֆերանսի ձևավորման մեջ կարևոր տարրեր են լոգոն (վերևի ձախ կողմում), «գրանցվել հիմա» կոճակը (վերևի աջ կողմում) և բարձրախոսների ցանկը (ներքևում), որոնք ռազմավարականորեն տեղադրված են գեղեցիկ Z-պատկերի կետերում:

2. Չափը կարևոր է: Տեսողական հիերարխիայի սկզբունքները.

Դա բավականին պարզ է՝ մարդիկ նախ մեծ բաներ են կարդում: Եթե ​​ձեր աչքերը ձգվում են դեպի «տեսքը», նախքան «բաժանվելը» ստորև գովազդ Young Vic Theatre-ի համար դուք պետք է անմիջապես դիմեք ընկալման հոգեբանի. հավանաբար կարող եք լավ գումար վաստակել՝ որպես հազվագյուտ անոմալիա փորձարկվելով: Հետաքրքիր է, որ այս միտումն իրականում բավականաչափ ուժեղ է վերևից ներքև կանոնը չեղյալ համարելու համար։ Վերևում գտնվող պատկերում «hack»-ը գերակշռում է «գործելու ժամանակն է» արտահայտությանը, քանի որ այն ավելի մեծ է և ձախ կողմում է (այսինքն՝ ձախից աջ կանոնը օգնում է): Սակայն «Տարեկան զեկույց. Մարդու իրավունքների արշավ 2012»-ի հաջորդ էջում (մշակված է Մեդիայի հինգերորդ սյունակում) մենք մեծատառերով կարդում ենք. տառատեսակ «Հավասարության համար պայքարը քարոզարշավի ուղու վրա» տեքստից առաջ «Ընտրություններ 2012» տեքստից առաջ: Տեսողական հիերարխիայի սկզբունքները «Ընտրություններ 2012»-ը տեղեկատվության ամենաբարձր մակարդակն է. այն մեզ ասում է այն ընդհանուր թեման, որին առնչվում է ստորև բերված տեղեկատվությունը: Բայց դիզայները որոշեց, որ հոդվածի վերնագիրն ավելի հետաքրքիր է ընթերցողների համար, և, հետևաբար, այն գնահատեց այնպես, որ այն առաջինը կարդացվի:

3. Տարածություն և հյուսվածք: Տեսողական հիերարխիայի սկզբունքները

Ուշադրություն գրավելու մեկ այլ միջոց է բովանդակությանը շնչելու համար բավականաչափ տեղ տալ . Եթե ​​կոճակի շուրջ զգալի բացասական տարածություն կա կամ տեքստային բլոկի տողերը լայնորեն հետևված են, այս տարրերն ավելի հեշտությամբ տեսանելի կլինեն ընթերցողներին: Ինչպես տեսնում եք ստորև նկարում (DrawtoClick-ի կայքի մի մասը), տարածությունը կարող է էլեգանտ այլընտրանք լինել կամ լրացնել չափը օգտագործելու համար: Ահա, կետ վաճառք, «Notre agence vouscompagne...», գրված է շատ մանրատառով, բայց այն շրջապատված է սպիտակ տարածության առատությամբ՝ մատնանշելով դրա կարևորությունը։ Ստորև լրացուցիչ շեշտադրումներ են ստանում «Le Compendre», «Le Réaliser» և «Le Partager» արտահայտությունները՝ անջատվելով շրջակա տարածությունից։ Երբ մարդիկ խոսում են «հյուսվածքի» մասին՝ կապված տեսողական հիերարխիայի հետ, նրանք նկատի չունեն հյուսվածքի գրաֆիկական էֆեկտները: Ավելի շուտ, այս տեսակի «հյուսվածքը» վերաբերում է էջի տարածության, տեքստի և այլ մանրամասների ընդհանուր դասավորությանը կամ կառուցվածքին: Սա Bright Pink-ի օրինակը լավ է պատկերացնում հայեցակարգը: Առաջին պատկերում «Սպորտ» բառը հիերարխիայում ավելի բարձր է, քան «բադմինտոնը», քանի որ այն ավելի բարձրահասակ է, ավելի մեծ և համարձակ։ 2 պատկերում երկու բառերը մոտավորապես համարժեք են՝ շնորհիվ սև ուղղանկյան, որը ընդգծում է «բադմինտոնը» և տեղադրում այն ​​առանձին տարածքում։ Երրորդ պատկերում ֆոնային խզբզոցը ընդհատում է «Սպորտ» բառի տարածությունը, բայց ոչ «բադմինտոն», և, հետևաբար, հանգեցնում է շրջադարձի, որտեղ «բադմինտոնը» հիերարխիայում ամենաբարձրն է։ Այս զարգացումը դժվար է կանխատեսել, ուստի դիզայներները հաճախ այն կապում են «հյուսվածքի» ամբողջական զգացողության հետ։

4. Տառատեսակի քաշը և զուգավորումը: Տեսողական հիերարխիայի սկզբունքները

Տառատեսակի ընտրությունը կարևոր նշանակություն ունի տեսողական հիերարխիա հաստատելու համար: Տառատեսակի ամենակարևոր ատրիբուտներից են քաշը, տառերը կազմող տառերի լայնությունը և ոճը, օրինակ՝ serif և sans serif։ Այլ փոփոխությունները, ինչպիսիք են շեղատառերը, նույնպես կարող են դեր խաղալ: Ուշադրություն դարձրեք, թե ինչպես ականջակալ ազդում է «Թեյի գործարանի» վեբ դիզայնի բառերի հիերարխիայի կարգի վրա. «իդեալական թեյեր ձեզ տաք պահելու համար»՝ սա գլխավորն է, բայց տառատեսակի հաստության և թեքատառերի տարբերությունները, բացի բառերի տեղադրումից, ստեղծում են ավելի դինամիկ, պակաս գծային ընթերցանության փորձ։ «://azbyka.com.ua/foto/tea-factory.jpg” /> Որոշ դեպքերում նպատակն է բազմազան տեղեկատվությունը ներկայացնել որպես հավասարապես հրատապ: Ամեն ինչ նույն չափի և քաշի սահմանելը կապահովի համարժեքություն, բայց նաև կդարձնի այն միապաղաղ: Տառատեսակների տարբերակումը դրանից խուսափելու միջոցներից մեկն է, ինչպես ստորև նշված Trendi ամսագրի շապիկին: Տեսողական հիերարխիայի սկզբունքները Այստեղ էջի ծայրամասում գտնվող հինգ թիզերները հավասար են հիերարխիայի առումով, բայց բազմազանություն են ձեռք բերում՝ հերթագայելով երկու լավ զույգ տառատեսակներ՝ մեկը միջին քաշի սերիֆով, իսկ մյուսը՝ թեթև, բայց բարձր sans-serif-ով:

5. Գույն և երանգ:

Ահա ևս մեկ անհեթեթություն. վառ գույներն առանձնանում են խլացված գույներից կամ մոխրագույնի երանգներից, մինչդեռ բաց երանգներն ավելի «հեռավոր» են թվում և այդպիսով հիերարխիայում ավելի ցածր են ընկնում, քան ավելի հարուստ, մուգ երանգները: Where Are They կայքը հակադրում է պայծառ լույսը և գունավոր հետին լուսավորությունը սև և սպիտակ ցանցային էֆեկտով պայծառության ազդեցությանը. Գուգենհայմի վեբկայքն օգտագործում է գույնը՝ ընդգծելու կարևոր տեղեկությունները, ինչպիսիք են՝ տեղանքի ընտրությունը, ներկայումս դիտվող ցուցահանդեսների ցանկը և հատուկ հղումներ։ ցուցահանդեսներ. Տեսողական հիերարխիայի սկզբունքները Մյուս կողմից, Whitney Museum-ի կայքը սահմանում է հիերարխիա մեկ տառատեսակի, քաշի և տոնի (սև) շրջանակներում՝ օգտագործելով երանգը (որը նշանակում է սպիտակ գույն ավելացնել հիմնական տոնին, դարձնելով այն ավելի թեթև): «Կորի Հրեշտակապետը փոփ մշակույթի մասին» տեսողական հիերարխիայում ակնհայտորեն ցածր է «Նոր Ուիթնիի պատմություններից» ոչ միայն այն պատճառով, որ այն ավելի ցածր է, այլ նաև այն պատճառով, որ դրա երանգն ավելի բաց է, ինչը այն դարձնում է ավելի քիչ աչքի ընկնող սպիտակ ֆոնի վրա: Տեսողական հիերարխիայի սկզբունքները Գույնը հատուկ նշանակություն ունի բջջային դիզայն հավելվածներ, որտեղ փոքր էկրանի չափը սահմանափակում է այլ ռազմավարություններ օգտագործելու ձեր հնարավորությունը, ինչպիսիք են չափի տատանումները և լայն տարածությունը: Grainger Industrial Supply հավելվածում «Շարունակել վճարել» կոճակը կարմիր գունավորված է, ինչի շնորհիվ այն առանձնանում է ցանկացած էջում, որտեղ այն հայտնվում է: Նեղ որոնման արդյունքների վահանակը, ընդհակառակը, մոխրագույն է, ինչը հիերարխիայում այն ​​մոտավորապես համարժեք է այլ տարրերի, ինչպիսիք են որոնման տողը և արտադրանքի հղումները:

6. Ուղղություն դիզայներների համար.

Էջի դասավորությունները սովորաբար նախագծվում են ուղղահայաց և հորիզոնական գծերի ցանցի համաձայն՝ և՛ կոնվենցիայի համաձայն, և՛ այն պատճառով, որ դա ամենաընթեռնելի ձևաչափն է։ Նման համակարգում ի հայտ է գալիս հիերարխիա հաստատելու նոր եղանակ՝ ցանցը քանդելը։ Կորի վրա կամ անկյունագծով տեղադրված տեքստը ավտոմատ կերպով առանձնանում է շրջապատող տեքստից՝ փակված ցանցով, զբաղեցնելով կենտրոնական տեղ։ Սա վաղուց արդյունավետ ռազմավարություն է եղել գովազդի մեջ, ինչպիսին է Frost Design-ի այս ավտոբուսի կանգառի պաստառը։

ՀՏՀ։ Դիզայներների համար տեսողական հիերարխիայի սկզբունքները.

1. Ի՞նչ է տեսողական հիերարխիան:

Տեսողական հիերարխիան դիզայնի սկզբունք է, որի նպատակն է էջի վրա տարրեր դասավորել այնպես, որ ընդգծի դրանց նշանակությունը և ուղղորդի օգտատիրոջ ուշադրությունը: Այն օգնում է օգտվողներին արագ հասկանալ տեղեկատվության հիերարխիան և արդյունավետորեն փոխազդել բովանդակության հետ:

2. Ինչու՞ է վիզուալ հիերարխիան կարևոր դիզայնի մեջ:

Տեսողական հիերարխիայի կարևորությունը կայանում է նրանում.

• Բարելավված օգտագործելիություն. Օգնում է օգտվողներին գտնել իրենց անհրաժեշտ տեղեկատվությունը ավելի արագ:
• Բարելավված ընկալում. Բովանդակությունը դարձնում է ավելի հասկանալի և գրավիչ:
• Փոխազդեցության խթանում. Ուշադրություն է հրավիրում հիմնական տարրերի վրա և խրախուսում է գործողությունները:
• Պարզեցրեք նավարկությունը. Հեշտացնում է էջի նավարկությունը և նավարկությունը:

3. Որո՞նք են տեսողական հիերարխիայի հիմնական սկզբունքները:

Հիմնական սկզբունքները ներառում են.

• Չափը և մասշտաբը. Ավելի մեծ տարրերն ավելի մեծ ուշադրություն են գրավում և համարվում են ավելի կարևոր:
• Գույն և հակադրություն. Պայծառ ու հակապատկեր տարրերն աչքի են ընկնում ու ուշադրություն գրավում։
• Գտնվելու վայրը և բնակեցումը. Այն տարրերը, որոնք ավելի բարձր են էջում կամ ավելի մոտ են կենտրոնին, ընկալվում են որպես ավելի կարևոր:
• Տարածություն և դատարկություն. Տարրերի շուրջ տարածություն թողնելն օգնում է նրանց առանձնանալ:
• Գրատպություն. Օգտագործելով տարբեր տառատեսակներ, չափեր և տեքստային ոճեր՝ ընդգծելու տեղեկատվության կարևորությունը:
• Ձևեր և գծեր. Օգտագործելով ձևեր և գծեր՝ ուղեցույցներ և շեշտադրումներ ստեղծելու համար:

4. Ինչպե՞ս եք օգտագործում չափը և մասշտաբը տեսողական հիերարխիա ստեղծելու համար:

Կիրառման չափը և մասշտաբը.

• Վերնագրեր և ենթավերնագրերՕգտագործեք ավելի մեծ չափսեր վերնագրերի համար և ավելի փոքր չափեր՝ ենթավերնագրերի համար՝ հստակ կառուցվածք ստեղծելու համար:
• Հիմնական տարրերՄեծացրեք կարևոր կոճակների կամ հղումների չափը, որպեսզի դրանք առանձնանան այլ տարրերից:
• Պատկերներ և գրաֆիկաՕգտագործեք մեծ պատկերներ՝ ուշադրություն հրավիրելու բովանդակության հիմնական մասերի վրա:

5. Ինչպե՞ս են գույնը և հակադրությունն ազդում տեսողական հիերարխիայի վրա:

Գույնի և հակադրության ազդեցությունը.

• Գունավոր շեշտադրումներՀիմնական տարրերն ընդգծելու համար օգտագործեք վառ կամ հագեցած գույներ:
• Կոնտրաստի համակցություններՕգտագործեք հակապատկեր գույներ տեքստի և ֆոնի համար՝ ընթեռնելիությունը բարելավելու համար:
• Գունավոր ներդաշնակությունՀամոզվեք, որ ձեր ընտրած գույները ներդաշնակ են միմյանց հետ և չեն շեղում հիմնական տեղեկատվությունից:

6. Ինչպե՞ս ճիշտ օգտագործել տարրերի դասավորությունը և տեղադրումը:

Տեղադրման սկզբունքները.

• Կարևոր տարրեր վերևումՏեղադրեք հիմնական տեղեկատվությունը էջի վերևում, որտեղ այն անմիջապես տեսանելի է:
• Կենտրոնական գտնվելու վայրըԿենտրոնին ավելի մոտ տեղադրված տարրերը ավելի մեծ ուշադրություն են գրավում:
• Տեղադրման հաջորդականությունըՆյութերը տրամաբանական հերթականությամբ դասավորելը կարող է բարելավել տեղեկատվության ըմբռնումը:

7. Ինչպե՞ս է սպիտակ տարածությունն օգնում ստեղծել տեսողական հիերարխիա:

Դատարկ տարածության դերը.

• Տարանջատող տարրերՏարրերի միջև դատարկ տարածություն ստեղծելն օգնում է դրանք հստակորեն առանձնացնել և բարելավել ընկալումը:
• Ուշադրության կենտրոնացումԿարևոր տարրի շուրջ տարածություն թողնելը այն առանձնանում է և ուշադրություն գրավում:
• Մաքրություն և կոկիկությունՍպիտակ տարածության օգտագործումը դիզայնը դարձնում է ավելի կոկիկ և կազմակերպված:

8. Ինչպե՞ս օգտագործել տպագրությունը տեսողական հիերարխիա ստեղծելու համար:

Տպագրության կիրառում.

• Տառատեսակներ և ոճերՕգտագործեք տարբեր տառատեսակներ և ոճեր վերնագրերի, ենթավերնագրերի և հիմնական տեքստի համար:
• Տեքստի չափը և քաշըԲարձրացրեք տեքստի չափը և քաշը կարևոր տեղեկատվության համար:
• ԸնտրությունՀիմնական բառերը կամ արտահայտությունները շեշտելու համար օգտագործեք շեղ, թավ կամ ընդգծված:

9. Ինչպե՞ս կարող են ձևերն ու գծերը ազդել տեսողական հիերարխիայի վրա:

Ձևերի և գծերի ազդեցությունը.

• Ուղղորդող տողերՕգտագործեք գծեր՝ ուղեցույցներ ստեղծելու համար, որոնք կօգնեն օգտվողին հետևել էջ.
• Ձևերը որպես շեշտադրումներԵրկրաչափական ձևերը կարող են ընդգծել կարևոր տարրեր կամ ստեղծել շեշտադրումներ:
• Բովանդակության տարանջատումՏողերը կարող են օգտագործվել բովանդակության տարբեր մասեր առանձնացնելու համար՝ ստեղծելով հստակ կառուցվածք:

10. Ի՞նչ գործիքներ և մեթոդներ կարող են օգտագործվել տեսողական հիերարխիան ստուգելու համար:

Փորձարկման մեթոդներ.

• Փորձարկում օգտվողների հետՀետադարձ կապ ստանալու համար իրական օգտատերերի հետ փորձարկում անցկացրեք:
• Վարքագծի վերլուծությունՕգտագործում վերլուծական գործիքներ ուսումնասիրել օգտվողի վարքագիծը էջում:
• Արձագանք գործընկերներիցԽնդրեք, որ դիզայնը վերանայվի գործընկերների կողմից՝ լրացուցիչ կարծիքների և առաջարկությունների համար:
• Ջերմային քարտեզներՎերլուծեք ջերմային քարտեզները՝ որոշելու համար, թե որ տարրերն են առավել մեծ ուշադրություն գրավում:
• A/B թեստավորումԴիզայնի տարբեր տարբերակների համեմատություն՝ լավագույն տարբերակը որոշելու համար:

Հետևելով այս սկզբունքներին և ուղեցույցներին՝ դիզայներները կարող են ստեղծել տեսողականորեն գրավիչ և ինտուիտիվ միջերեսներ, որոնք բարելավում են օգտատերերի փորձը և բովանդակության փոխազդեցության արդյունավետությունը: