Գույնը վեբ դիզայնում. ինչպես ճիշտ էմոցիաներ առաջացնել օգտատիրոջ մեջ

2024 Հեղինակ: Malcolm Clapton | [email protected]. Վերջին փոփոխված: 2023-12-17 03:59

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

Մարդկության պատմության ընթացքում վարպետ նկարիչները համընդհանուր ճանաչում են ստացել գույների հետ աշխատելու ունակությամբ: Ժամանակակից աշխարհում հավասարապես ճանաչված են մասնագետները, ովքեր գիտեն, թե ինչպես համատեղել գույները կոմերցիոն և բիզնես նպատակներով՝ գովազդի և վեբ դիզայնի ոլորտում:

Գույների օգտագործման ունակությունը կարող է անորոշ ժամանակով պոմպացվել: Սա մարդու վրա ազդելու հնարավորությունների իսկական անդունդ է։

Մենք կանդրադառնանք գունային տեսության և գունային սխեմայի հիմունքներին, իսկ հետո կխոսենք որոշակի գույների հուզական ազդեցության մասին:

Գույնի տեսություն

Գույնի թեմային կարելի է նվիրել մի ամբողջ գիրք, ուստի մենք այն ամբողջությամբ չենք վերցնի, այլ սահմանափակվենք միայն օգտակար տեղեկություններով, որոնք կարող են օգտագործվել ինտերֆեյսի դիզայն մշակելիս:

Գույնի տեսությունը կարելի է բաժանել երեք մասի.

հակադրություն

Յուրաքանչյուր երանգ ունի հակադիր, այսպես ասած, իր «նեմեսիսը», որը կազմում է այս գույնի ամենամեծ հակադրությունը: Նման գույն գտնելու համար կարող եք օգտագործել գունավոր անիվը: Պարզապես ընտրեք գույնը շրջանագծի հակառակ կողմում:

Հավելում

Այս գույները միշտ չէ, որ հակասում են միմյանց: Լրացուցիչ գույներն ընդգծում են միմյանց՝ ի տարբերություն հակապատկերների։ Գունավոր անիվի մեջ այս գույները հաջորդում են միմյանց, օրինակ՝ յասամանի լրացուցիչ գույները՝ կապույտը և վարդագույնը։

Ռեզոնանս

Յուրաքանչյուր գույն առաջացնում է որոշակի տրամադրություն: Վառ տաք գույները (կարմիր, նարնջագույն, դեղին) մարդուն լցնում են էներգիայով, արթնացնում նրան, իսկ սառը մուգ երանգները (կանաչ, կապույտ, մանուշակագույն), ընդհակառակը, հանգստացնում ու հանգստացնում են։

Օրինակ, նրանք օգտագործում են կարմիր նավիգացիոն սանդղակը` ընթերցողին արթնացնելու և նրա գրգռվածությունը բարձրացնելու համար: Հաշվի առնելով կայքի առանձնահատկությունը՝ աղմկահարույց նորություն, կարմիրը տրամաբանական որոշում է թվում։

Գույնի տեսությունը վեբ դիզայնում ավելին է, քան պարզապես ձևավորում: Գույնը կարող է փոխել ձեր կայքի ընկալումը և կարևոր դեր խաղալ ձեր բիզնեսում:

Գույնի զգացմունքային ընկալում

Ոչ ոք չի ժխտի գույների և զգացմունքների սերտ փոխազդեցությունը: Եվ, իհարկե, ցանկացած վեբ դիզայներ ցանկանում է օգտագործել այս ազդեցությունը յուրաքանչյուր կայքի համար ճիշտ մթնոլորտ ստեղծելու համար:

Հիմնվելով մի քանի ուսումնասիրությունների վրա՝ կայքում տեղադրված վերլուծություն և գույների մասին գրառում, մենք կբացատրենք, թե ինչպես են գույներն ազդում զգացմունքների վրա և օգնում են ստեղծել UX դիզայն:

Կարևոր է հիշել, որ աշխարհի տարբեր մշակույթներ գույները տարբեր կերպ են ընկալում: Մենք նկարագրելու ենք հուզական ասոցիացիաները, որոնք հատուկ են արևմտյան մշակույթին:

Կարմիր

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

Օրինակ, կարմիր գույնը շատ հարմար է կայքի համար, որի նպատակն է նախազգուշացնել ընկալվող սպառնալիքների մասին:

Էջի վերևում շատ կարմիր օգտագործելը հիանալի է, քանի որ այն ուշադրություն է հրավիրում ձեր հաղորդագրության կարևոր տեղեկատվության վրա: Միևնույն ժամանակ, մարդիկ հակված են արագ հեռանալ կարմիր «վտանգի գոտուց» և ոլորել ներքև։ Իսկ դա իր հերթին թույլ է տալիս օգտատիրոջը ավելի շատ բովանդակություն ցույց տալ։

Բայց այս գույնը կարող է աշխատել նաև ձեր դեմ, քանի որ կարող է առաջացնել ագրեսիա կամ գերգրգռում: Եթե ցանկանում եք ստեղծել ավելի հանգստացնող մթնոլորտ, փորձեք օգտագործել կարմիրը չափավոր և ընտրեք կարմիրի ավելի բաց երանգներ։

Նարնջագույն

Որպես տաք երանգներից ամենահանգիստը, նարնջագույնն ի վիճակի է առաջացնել մի շարք տարբեր զգացմունքներ:Որպես հիմնական գույն՝ այն կարող է հետաքրքրություն առաջացնել և աշխուժացնել, իսկ որպես երկրորդական գույն՝ կարող է պահպանել այդ հատկությունները, բայց ավելի աննկատ:

Բացի այդ, նարնջագույնն օգնում է ստեղծել շարժման զգացում և էներգիա: Օրինակ, այն հիանալի տեսք ունի ընկերության մուլտֆիլմերի կայքում, որը հուշում է երիտասարդության և շարժման մասին: Գույնը կապված է կրեատիվության հետ՝ պահպանելով ապրանքանիշի ծանոթ զգացողությունը:

Դեղին

Այն ամենաբազմակողմանի գույներից մեկն է, և այն զգացմունքները, որոնք առաջացնում է, ավելի շատ կախված են ստվերից:

Վառ դեղինը էներգիա է ավելացնում, բայց առանց կարմիրի սրության և սրության: Դեղինի միջին երանգները հարմարավետության զգացողություն են առաջացնում՝ միևնույն ժամանակ առույգացնող: Մուգ երանգները (ներառյալ ոսկեգույնը) հնության զգացում են հաղորդում՝ լցնելով տարածությունը անժամանակ, իմաստությամբ և հետաքրքրասիրությամբ:

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

Կանաչ գույն

Կանաչը կամուրջ է տաք և սառը երանգների միջև, թեև ավելի ցուրտ է: Սա նշանակում է, որ կանաչն ունի կապույտի հանգստացնող ազդեցություն, բայց նաև մի քիչ էներգիա ունի դեղինից:

Արդյունքում շատ հավասարակշռված ու կայուն մթնոլորտ է ստեղծում։ Կանաչի ավելի մուգ երանգները հարստության և առատության տպավորություն են թողնում, ինչպես կայքը:

Կապույտ գույն

Ինչպես դեղինի դեպքում, կապույտի ազդեցությունը մեծապես կախված է երանգից: Կապույտի բոլոր երանգները համընդհանուր են հանգստի և անվտանգության տեսանկյունից, սակայն բաց երանգները կապված են ընկերասիրության, իսկ մուգները՝ տխրության հետ:

Սոցիալական ցանցերը, ինչպիսիք են Twitter-ը և Facebook-ը, օգտագործում են կապույտի ավելի բաց և միջին երանգներ, մինչդեռ կորպորատիվ կայքերը նախընտրում են ուժի և հուսալիության ավելի մուգ երանգներ:

Միջոցառումների նախագծման գործակալությունը հիանալի օրինակ է: Օգտագործելով կապույտ ծաղիկները որպես ֆոն, նրանք տեսողականորեն ակնարկեցին ծաղկաբանության մեջ իրենց գիտելիքներն ու հմտությունը, ինչպես նաև ստեղծեցին հուսալիության և վստահության զգացում:

Սա մեծ նշանակություն ունի, քանի որ նրանք աշխատում են այնպիսի միջոցառումների հետ, որտեղ վիզուալը շատ կարևոր է, ինչպիսիք են հարսանիքները:

Մանուշակագույն

Մանուշակագույն գույնը պատմականորեն կապված է թագավորական վեհության հետ՝ ակնարկելով շքեղության մասին: Մանուշակագույնի երանգներն արտացոլում են առատաձեռնությունն ու հարստությունն ընդհանրապես՝ դրանք դարձնելով հիանալի ընտրություն նորաձևության և շքեղ ապրանքների համար (նույնիսկ շոկոլադը, ինչպիսին է ապրանքանիշի գույնի ընտրությունը):

Ավելի բաց երանգները, ինչպիսիք են նարդոսը (մանուշակագույնը վարդագույնի հպումով) ռոմանտիկ մտքեր են առաջացնում, մինչդեռ ավելի մուգ երանգներն ավելի շքեղ և խորհրդավոր են թվում:

Սեվ

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

Սևի ուժն ու չեզոքությունը դարձնում է այն հիանալի ընտրություն տեքստի մեծ բլոկների համար, բայց որպես հիմնական գույն այն կարող է նյարդայնության զգացում առաջացնել կամ նույնիսկ կապված լինել չարի հետ:

Կայքերի մեծ մասի համար սևն օգտագործվում է բարդության զգացում ստեղծելու համար: Սևի և սպիտակի համադրությունը մինիմալիստական դիզայնում թողնում է էլեգանտության և ոճի տպավորություն, ինչպես BOSE կայքում:

Սպիտակ

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

Բացի այդ, ոչ մի գույն թույլ չի տա այնքան ուշադրություն դարձնել այլ գույների, որքան սպիտակը: Օրինակ, Awwwards-ի հաղթող Կլոին Տոշևի համար նրա բոլոր աշխատանքները դրված են սպիտակ ֆոնի վրա, ինչը միայն աչքի է ընկնում նկարազարդումներով և թողնում է էլեգանտ պատկերասրահի տպավորություն։

Մոխրագույն գույն

Չնայած այն հանգամանքին, որ որոշ իրավիճակներում մոխրագույնը կարող է ստեղծել մռայլ և տխուր մթնոլորտ, այն դեռ հաճախ օգտագործվում է պրոֆեսիոնալ դիզայներների կողմից:

Ամեն ինչ վերաբերում է երանգներին. դրանք փոխարինելով՝ դուք կարող եք ստանալ բոլոր այն էմոցիաները, որոնք առաջանում են ինչպես սևից, այնպես էլ սպիտակից: Ընդհանուր առմամբ, մոխրագույնը հզոր գործիք է ճիշտ ձեռքերում:

Իսկ դիզայնի ավելի վառ գույների հետ համակցված՝ մոխրագույն ֆոնը ժամանակակից է թվում, և ոչ մռայլ, օրինակ՝ վրա։

Բեժ

Բեժն ինքնին բավականին ձանձրալի է և արտահայտիչ, բայց այն ունի մեկ ուշագրավ հատկություն. բեժն ընդունում է իրեն շրջապատող ծաղիկների բնույթը: Հետեւաբար, եթե այն նախատեսված չէ զսպվածություն արտահայտելու համար, բեժը ծառայում է որպես ֆոն կամ երկրորդ գույն:

Բեժի մուգ երանգները ստեղծում են ավանդույթի և հողեղենության զգացողություն, հաղորդում են թղթային զգացողություն, մինչդեռ բաց երանգները ավելի թարմ և ժամանակակից են թվում:

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

Փղոսկր

Փղոսկրը, ինչպես նաև կրեմը առաջացնում են գրեթե նույն զգացմունքները, ինչ սպիտակը: Այնուամենայնիվ, փղոսկրը ավելի տաք է (կամ պակաս ստերիլ), քան սպիտակը, ինչը ստեղծում է հարմարավետության ավելի մեծ զգացողություն՝ պահպանելով մինիմալիզմը:

Սպիտակի փոխարեն կարող եք օգտագործել փղոսկրը՝ դրա և ավելի մուգ գույների միջև եղած հակադրությունը մեղմելու համար: Օրինակ, կայքում շագանակագույն-նարնջագույն տարրերը տեղադրվում են փղոսկրի ֆոնի վրա (որը մոխրագույն տեսք ունի) ջերմության զգացումը պահպանելու համար:

Գունավոր սպեկտր

Յուրաքանչյուր կայք ունի գունային սխեման, որն օգտագործում է հիմնական գույները՝ ավելի շատ տարածք լրացնելու համար: Ինչպես արդեն ասացինք, այս գույների օգտագործումը հիմնականում ենթագիտակցորեն ազդում է մարդու մտքի և տրամադրության վրա: Այսպիսով, ընտրեք դրանք ուշադիր:

Թեև գույները համադրելու բազմաթիվ եղանակներ կան, մենք կկենտրոնանանք ամենահաջող և հաճախ օգտագործվող երեքի վրա:

Եռյակ (եռակի ներդաշնակություն, եռանկյուն)

Եռյակը երեք գույների հիմնական և ամենահավասարակշռված համակարգն է: Այն օգտագործում է ռեզոնանս և գունային լրացում, բայց չունի բարդ հակադրություն, ինչը եռյակը դարձնում է ամենահուսալի գամումը:

12 գույն ունեցող անիվի վրա ընտրեք ցանկացած երեք 120 աստիճան հեռավորության վրա՝ մեկը առաջին պլանի համար և երկուսը բովանդակության և նավիգացիոն գծի համար:

Կրկնակի կոմպլեմենտար համակարգ

Այս տեսականին ավելի դժվար է իրականացնել, բայց այն կարող է շահավետ լուծում լինել։ Օգտագործված է չորս գույն՝ երկու հակապատկեր և երկու լրացնող։

Ստուգեք, թե ինչ տեսք ունի Ֆլորիդայի ծաղկման հիանալի էջը այս դասավորության հիման վրա: Կարմիր և կանաչ գույները հակադրվում են բույսերի և տեքստային բլոկների մեջ, մինչդեռ կապույտ ֆոնն ու նարնջագույն անապատը արդյունավետ կերպով լրացնում են նկարը:

Անալոգներ (սերիական համակարգ)

Նմանատիպ գույների շարքը հիմնականում օգտագործում է լրացուցիչ երանգներ: Սա թույլ է տալիս հատկապես հստակ ընդգծել որոշ որակներ և առաջացնել որոշակի հույզեր։

Օրինակ՝ կարմիր, նարնջագույն և դեղին գույների համադրությունը ընդգծում է էներգիան և կենսունակությունը։ Նման կշեռքներ օգտագործելը շատ պարզ է, բայց դժվար է ընտրել, թե որ գույները կներառվեն համադրության մեջ։ Դրանց ազդեցությունը չափազանցված կլինի, այնպես որ դուք չեք կարող սխալվել:

Օրինակ՝ վեբկայքի դիզայնում կապույտ, փիրուզագույն և կանաչ գույների օգտագործումը հանգստության և հանգստության մթնոլորտ է ստեղծել։ Ուշադրություն դարձրեք, թե ինչպես է դեղինն օգտագործվում կարևոր կետերն ընդգծելու համար:

Սրանք միայն գունային տեսության հիմունքներն են, որոնք կարող են օգնել ձեզ ստեղծել տպավորիչ անհատական դիզայն, և չկա սահմանափակում, թե որքան հեռու կարող եք գնալ ձեր կայքի գույնի առումով:

Գույնի ընտրիչի օգնական գործիքներ

Բարեբախտաբար, կան մի քանի գործիքներ, որոնք կօգնեն ձեզ կիրառել գունային տեսությունը գործնականում: Փորձեք այս գունապնակները, որպեսզի չսկսեք զրոյից՝ ձերը ստեղծելու համար.

1. նախկինում հայտնի է որպես Adobe Kuler: Այն գույների հավաքման ամենահուսալի գործիքներից մեկն է:
2. … Եթե ցանկանում եք պարզ գործիք ընտրել գույնը հնարավորինս արագ, Paletton-ը հիանալի է:
3. … Օգտագործողի միջերեսի գույնը ընտրելու հիանալի գործիք:

Եվ եթե այս գործիքները ձեզ մոտ չեն աշխատում, ահա տարբեր գույների ընտրող գործիքները:

Գույնի և հույզերի միջև ուղղակի կապ

Հիշեք. օգտատերերը հազվադեպ են նկատում և գնահատում ֆոնի գույնը, նավիգացիոն գոտին, առանձին մանրամասները, բայց դա չի նշանակում, որ գույնը չի ազդում նրանց վրա: Դա ուղղակի ենթագիտակցորեն է տեղի ունենում:

Օգտագործողը որոշակի հույզեր ունի, վերաբերմունք է զարգացնում կայքի կամ ապրանքանիշի նկատմամբ, նա կատարում է որոշակի գործողություններ՝ ոլորում է ներքև, սեղմում է գործողություն հրահրող կոճակները կամ, ընդհակառակը, չի նկատում դրանք։ Եվ այս ամենում գույնը հսկայական դեր ունի։

Եթե վեբ դիզայնում գույն օգտագործելու խորհուրդներ ունեք, խնդրում ենք կիսվել մեկնաբանություններում: