Օգտագործելով հակահրթիռային նախապատմություն եւ ֆոնային գույներ Վեբ դիզայնում

Բարելավել Ձեր կայքի ընթերցանության եւ օգտագործողի փորձը `համապատասխան հակադրությունով

Contrast- ը կարեւոր դեր ունի ցանկացած կայքի դիզայնի հաջողության մեջ: Այս կայքի տիպաբանությունից մինչեւ կայքի օգտագործված պատկերները, նախապատմական տարրերի եւ ֆոնային գույների հակադրությունը, լավ տեղակայված կայք պետք է ունենա համապատասխան հակադրություն այս բոլոր ոլորտներում `որակյալ օգտագործողի փորձի եւ երկարաժամկետ կայքի հաջողությունների ապահովման համար:

Ցածր հակադրությունը հավասար է վատ ընթերցանության փորձին

Մենք հակասում ենք շատ ցածր կայքեր, որոնք դժվար է կարդալ եւ օգտագործել, ինչը բացասական ազդեցություն կունենա ցանկացած կայքի հաջողությունների վրա: Վատ գունավոր հակադրություն հարցերը հաճախ պարզ են. Դուք սովորաբար կարող եք դա անել, պարզապես նայելով մի էջ, որը մատուցվում է վեբ բրաուզերում, եւ դուք կարող եք տեսնել, թե արդյոք տեքստը չափազանց դժվար է կարդալ, քանի որ թույլ գունային ընտրության պատճառով: Այնուամենայնիվ, երբ հեշտ է որոշել, թե որ գույները լավ չեն աշխատում, այն կարող է իրականում շատ դժվար է որոշել, թե գույները լավ են աշխատում, ի տարբերություն ուրիշների: Դուք չեք կարող այն, ինչ չի աշխատում, բայց ինչպես եք որոշելու, թե ինչ է աշխատում: Այս հոդվածում պատկերը պետք է օգնի ձեզ ցույց տալ տարբեր գույների եւ ինչպես դրանք նախապատմություն եւ նախապատմություն գույներ: Դուք կարող եք տեսնել որոշ «լավ» զույգերի եւ որոշ «աղքատ» զույգերի, որոնք կօգնեն ձեզ կատարել ճիշտ գունային ընտրություն ձեր ծրագրերում:

Ինչ վերաբերում է հակադրությանը

Մի բան դուք պետք է նշեք, որ հակադրությունը ավելի շատ է, քան պարզապես պայծառ գույնը համեմատած ֆոնի հետ: Ինչպես դուք պետք է տեսնեք վերոնշյալ պատկերով, այս գույներից ոմանք շատ պայծառ ու լուսավոր կերպով ցույց են տալիս ֆոնի գույնի վրա, ինչպիսին է կապույտ սեւը, բայց ես դեռ շարադրեցի այն որպես աղքատ հակադրություն: Ես դա արեցի, քանի որ այն կարող է պայծառ լինել, սակայն գունավոր համադրությունը շարունակում է տեքստը դժվար է կարդալ: Եթե ​​դուք ստեղծեք սեւ էջի բոլոր սեւ տեքստի էջը, ձեր ընթերցողները շատ արագ կլնեին: Սա է պատճառը, որ կոնտրաստը պարզապես սեւ եւ սպիտակ չէ (այո, այդ նախագիծը նախատեսված էր): Կան հակադրություններով կանոններ եւ լավագույն փորձեր, բայց որպես դիզայներ, դուք պետք է միշտ գնահատեք այդ կանոնները, որպեսզի համոզվեք, որ նրանք աշխատում են ձեր կոնկրետ օրինակով:

Ընտրելով գույնը

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

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

Առցանց գործիքներ

Ձեր սեփական նախագծման իմաստից բացի, կան որոշ առցանց գործիքներ, որոնք կարող եք օգտագործել ձեր կայքի գունային ընտրությունը ստուգելու համար:

CheckMyColors.com- ը կփորձի ստուգել ձեր կայքի բոլոր գույները եւ զեկուցել էջի տարրերի հակադրությունների հարաբերակցության մասին:

Բացի այդ, երբ մտածում եք գունային ընտրության մասին, դուք պետք է հաշվի առնեք նաեւ կայքի հասանելիությունը եւ գունային կուրության ձեւեր ունեցող մարդիկ: WebAIM.org- ը կարող է օգնել այս հարցում, ինչպես կարող է ContrastChecker.com- ը, որը կկատարի ձեր ընտրությունը WCAG ուղեցույցներից: