Ֆոնի գույնը. Գույնի ֆոն եւ հագեցում

Ընտրում եք ձեր ինտերֆեյսի գույները, որոնք խստացնում են օգտագործողի աչքերը:

Եթե \u200b\u200bֆոնի համար օգտագործում եք պայծառ եւ հարուստ գույն, ապա այն դժվարացնում եք օգտագործողների համար. Նրանք անմիջապես դժվարանում են էջը դիտել: Պայծառ, հագեցած գույները գրավում են ամենամեծ ուշադրությունը: Բայց եթե այդպիսի պայծառ գույնը շատ է, ապա այն մեծ բեռ է ստեղծում ցանցաթաղանթի վրա, դուք պետք է չափազանց շատ լարեք ձեր աչքերը:

Օրինակ, դիտեք վերը նշված պատկերով գունավոր նմուշները: Ձախ սյունը բաղկացած է ծաղիկներից առավելագույն պայծառություն եւ հագեցվածություն: Right իշտ սյունը բաղկացած է ծաղիկներից `80% պայծառությամբ եւ հագեցած 80%: Ձախ սյունակի նկատմամբ հանդուրժողականությունը ցածր կլինի, քան աջից, քանի որ պայծառ հագեցած գույները շատ կտրված են ձեր աչքերի համար:

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

Եկեք սկսենք տեսությունից:

Պայծառություն ընդդեմ Հագեցում

Պայծառությունն ու հագեցվածությունը տարբեր գույնի հատկություններ են: Առաջինը այն է, թե որքան սպիտակ կամ սեւ խառնվում է այս գույնի մեջ, իսկ երկրորդը պատկանում է մոխրագույնի քանակին:

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

Դուք օգտագործում եք գույնը ձեր ինտերֆեյսը, որը շտկում է օգտագործողի աչքերը:

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

Ինչ սյունակ կարող եք ավելի երկար դիտել:

Օրինակ, Վերեւից ուշադիր նայեք պատկերի գույների վրա:

Ձախ սյունը պարունակում է գույներ առավելագույն պայծառությամբ եւ հագեցվածությամբ: Right իշտ սյունը գույներ է պարունակում պայծառությամբ եւ հագեցվածությամբ 80%:

Ձախ սյունակի վրա ձեր ուշադրությունը ցածր կլինի, քան աջից, քանի որ պայծառ գույները ուժեղ սեղմված են:

Պայծառություն հագեցվածության դեմ

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

Մեծացնելով պայծառությունը. Դուք չեք նվազեցնում հագեցվածությունը: Երբ իջնում \u200b\u200bեք հագեցվածություն, գույնը խառնեք մոխրագույն երանգով: Երբ պայծառությունն եք բարձրացնում, ապա գույնը թեթեւացնում եք, բայց մի դարձրեք այն մոխրագույն:

Վերեւից. Պայծառության աճը ավելի սպիտակ է: Ներքեւում. Հագեցման կրճատում - ավելի մոխրագույն

Գույնի ազդեցությունը ուշադրության եւ հուզմունքի վրա

Ուսումնասիրության արդյունքների համաձայն, «ստվերի, հագեցվածության եւ պայծառության» ուսումնասիրությունների «Ստվերի, հագեցվածության եւ պայծառության ազդեցությունը» պարզվեց, որ գույները բարձր հագեցվածությամբ եւ պայծառությամբ գրավում են առավել ուշադրությունը: Այս ուսումնասիրության հեղինակը եկել է այն եզրակացության, որ այս գունային հատկությունները ամենակարեւորն են ուշադրություն գրավելու համար:

Երկու այլ ուսումնասիրություններ `« Գույնի հագեցվածության »հուզիչ ազդեցությունը եւ« Գույնը եւ հույզերը »ցույց տվեցին, որ հագեցած գույները կապված են ամենամեծ հուզմունքի հետ: Tints- ը (Huue) նույնպես ազդում է հուզմունքի վրա, բայց հագեցվածությունն ու պայծառությունն ամենաուժեղ ազդեցությունն ունեն:

Կոճակներով օգտագործեք պայծառ եւ հագեցած գույներ:

Պայծառ եւ հարուստ գույները գրավում են օգտագործողի ուշադրությունը, բայց երկար չեն հետաձգում իրենց համար: Նման գույների օգտագործումը նման է օգտագործողի կողքին ճիչ: Դուք նրանց ուշադրությունը կգրավի միայն որոշ ժամանակ:

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

Ձախ, ֆոն պայծառ եւ հարուստ ֆոն: Հետեւաբար, բոլոր ուշադրությունը ֆոնին, եւ ոչ թե կոճակը: Right իշտ. Կոճակը օգտագործում է պայծառ եւ հարուստ գույն: Նա գրավում է օգտագործողի ուշադրությունը

Ֆոնի համար օգտագործեք մուգ եւ պակաս հարուստ գույն

Ավելի լավ է ֆոնի գույնը ավելի մուգ եւ ավելի հագեցած դարձնել: Երբ գույնը մթնեցնում է, գույնի սպիտակ պարունակությունը կրճատվում է: Մինչ հագեցվածության կրճատումը մեծացնում է մոխրագույնի քանակը:

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

Ձախ. Տհաճ աչքերին: Նախապատմությունը պայծառ ու հարուստ է: Ձախ պայծառությունն ու հագեցվածությունը ձախ կողմում պատկերով: Right իշտ է, հաճելի է աչքերի համար: Մութ եւ պակաս հագեցած ֆոն: Պայծառություն եւ հագեցվածություն ներքեւում

Փնտրում եմ օպտիմալ ֆոն

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

Նախ ընտրեք հիմնական ստվերը եւ դրա վրա տեղադրեք առավելագույն պայծառություն եւ հագեցվածություն: Ստվերի արժեքը պահպանվում է եւ ծառայում է որպես վերահսկիչ կետ `պայծառությունն ու հագեցածությունը կարգավորելու համար:

Կրկնօրինակեք գույնի հիմնական ստվերը (նմուշ) `ցածր հագեցած եւ պայծառության մակարդակով ստեղծելու համար չորս նոր գունային նմուշ:

Նվազեցրեք պայծառության մակարդակը երկու ստեղծված գույնի նմուշներում: Եւ կրճատել հագեցվածությունը երկու այլ նմուշներում: Գույնը կարգավորելու ժամանակ օգտագործեք մի քայլ, տասը:

Տեղադրեք հագեցած գույնի նմուշները բնօրինակ ստվերի ձախ մասում `պայծառությամբ եւ հագեցմամբ 100%: Right անկի գույնի նմուշներ `նվազագույն եւ առավելագույն պայծառությամբ:

Այժմ ստեղծեք գունային նմուշների երկրորդ տեսականի: Նվազեցրեք պայծառությունն ու հագեցվածությունը գույների առաջին շարքի համեմատ: Արժեքների նվազման ժամանակ օգտագործեք նույն արժեքը գույնի նմուշների յուրաքանչյուր փաթեթի համար:

Արդյունքում, երկրորդ շարքի գույներից ոչ մեկը չունի 100% հագեցվածություն եւ պայծառություն: Այսպիսով, այս գույներն առավել հարմար են գործողության օգտագործման համար:

Կարող եք փորձել ստեղծել մեկ այլ շարքի գույնի նմուշներ, եթե արդյունքի չհամապատասխանեք: Դա անելու համար ստեղծեք գույնի նմուշների երրորդ մակարդակ եւ նվազեցրեք դրանցից յուրաքանչյուրի պայծառությունն ու հագեցվածությունը:

Այժմ դուք ունեք ընդհանուր առմամբ ութ օպտիմալ գույներ, տարբեր պայծառությամբ եւ հագեցվածության գործակիցներով:

Կայքի ֆոնին օգտագործելու համար լավ եւ վատ գույնի օրինակներ

Ստորեւ բերված են էջերի օրինակներ, որոնք հաճելի եւ տհաճ են աչքերի համար: Ուշադրություն դարձրեք, թե որքան ժամանակ կարող եք օրինակներ նայել օրինակներից յուրաքանչյուր էջում:

Ձախ - վատ կանաչ (խուճապ կամ պրիզմայով): Right իշտ - լավ կանաչ (

Ամբողջ գույնի պատկերի ուրվագծային կտրուկության առանձնահատկություն

1. Գույնի տոնայնություն եւ հագեցվածություն

2. Եզրագծային կտրուկություն

3. Ավտոմատ շտկում

Գույնի ֆոն եւ հագեցում

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

Այս մեթոդը իրականացվում է գրաֆիկական խմբագրություններում, քանի որ պատկերի շտկում գույնի մոդել HSL- ում:

Նման համակարգչային գույնի մոդելը հիմնված է HSB- ի (HSV) վրա: Բայց դրա հիմնական պարամետրերն են, տոնայն, թեթեւ եւ հագեցվածություն: Եթե \u200b\u200bներկայում եք HSL- ի գունային մոդելը գործչի տեսքով, դա կլինի կրկնակի (արտացոլված) վեցանկյուն կոն: Դրա հիմքը, ինչպես HSB- ն, ծառայում է հիմնական գույներին եւ ուղղահայացներին. Սպիտակ, կարգավորելի հագեցվածություն եւ սեւ, որը բնութագրվում է լույսի ներքո: Այսպիսով, Color Model HSL- ը ինտուիտիվ տոնայնական հասկացությունների, հագեցման եւ պայծառության ամենավառ օրինակներից մեկն է:

Պատկերում կամ իր ընտրած տարածքում գույնի հագեցվածության բարձրացումն իրականացվում է պիքսելների պարամետրերի գունային բանաձեւի արժեքը բարձրացնելով:

Պատկերի ուղղման միջերես HSL գույնի մոդելի մեջ օրինակով

Հագեցումը կարգավորող Adobe Photoshop CS6- ի օրինակին

Գույնի հագեցածության բարձրացումով պետք է զգուշություն ընդունվի, որպեսզի չկատարվի այն սարքի գունային ծածկույթից այն կողմ, որի ենթադրվում է պատկերը:

Նորմալ գույնի հագեցվածություն

Արդյունք, գունային ծածկույթից դուրս

Թեթեւ թեթեւ եւ գույնի հագեցվածությունը շտկելու համար անհրաժեշտ չէ պատկերը վերափոխել HSL գույնի մոդելին, բայց դա կարող է տեղին լինել, Եզրագծային կտրուկության շտկումը կատարելու համար:

Տեղադրության ընտրացանկի ուրվագիծ Սեղրություն

Ֆիլտրի գործողությունների արդյունքում ծրագիրը տեղի է ունենում, ծրագիրը կազմում է պատկերի պատճենը, գտնում է տարածքի պատճենը `գույնի եւ տոնայնության էական փոփոխություններով (կտրուկ անցում, ուժեղ հակադրություն) Եզրագծերի կտրուկության բարձրացում (սահմանների վրա հակադրություն ") եւ չի ազդում մնացածի վրա (« հարթ ») բաժինների վրա: Այս հստակ պատկերի հիման վրա ստեղծվում է անտեղյակ դիմակ, որը գերակշռում է ինչ-որ կերպ blurred աղբյուրի պատկերով:

Ինտերֆեյսի Եզրագծային կտրուկություն

Եզրագծային կտրուկությունը սիմուլյացիայի մեջ ուրվագծերի երկայնքով կտրուկությունը կառուցված է կսպանսերի տարածքներով, կրճատված եւ կարեւորագույն կետերով: Լրիվ գույնի պատկերների պիքսելով, կարող են առաջանալ գունային աղավաղումներ, որոնց արդյունքը դրսեւորողների երկայնքով կհայտնվի: Համակարգչային գրաֆիկայի մեջ նման արտեֆակտները անվանում են գույնի հալո կամ գույնի հալո .

Ֆոնի գույնը ցանկացած վեբ էջի բավականին կարեւոր տարր է: Նախ, այն սահմանում է ցանկալի տրամադրությունը եւ կայքի ընդհանուր տրամադրությունը, եւ երկրորդ, հեշտացնում է տեքստի ընկալումը:

Վեբ էջի գույնը սահմանվում է, օգտագործելով BGCOLOR Tag հատկանիշը .

Օրինակ 1. Փոխել գույնի ֆոնը

Գույնը կարելի է հստակեցնել Hexadecimal արժեքով կամ նրա անունով:

Չնայած այն հանգամանքին, որ ֆոնի համար կարող եք նշել ցանկացած գույն, հիմնականում սպիտակ ֆոններն ու սեւ տառերը օգտագործվում են կայքերի մեծ մասում, որպես առավել լավ սահմանված տարբերակ:

Ֆոնային նկարչություն

Որպես ֆոն, դրա համար կարող եք օգտագործել ցանկացած հարմար պատկեր: Նախապատմությունը չպետք է ուշադրություն դարձնի տեքստից, այն պետք է լավ համակցված լինի վեբ էջի գունային սխեմայի հետ եւ փոքր չափի լինի `արագ բեռնելու համար: Եթե \u200b\u200bթվարկվածից հետո ձեզ դեռ ցանկանում եք էջի ֆոնային օրինաչափություն ավելացնել, ապա պետք է օգտագործեք ֆոնային պիտակի հատկանիշը .

Օրինակ 2. Հիմնական ֆոնի օրինակ ավելացնելը

Եթե \u200b\u200bպատկերը ավելի փոքր է, քան մոնիտորի էկրանի չափը, այն բազմապատկվելու է հորիզոնական եւ ուղղահայացով:

Քանի որ ֆոնային նկարը ծանրաբեռնված է, քան ֆոնի գույնը, կարող է պարզվել, որ տեքստը որոշ ժամանակ չի կարդա մինչեւ նկարներ: Նույնը կարող է պատահել զննարկիչում անջատված գծագրերի հետ: Հետեւաբար, առաջարկվում է միշտ սահմանել ֆոնային գույնը հետագա ֆոնային օրինաչափության հետ միասին (օրինակ 3):

Օրինակ 3. Նախապատմական նկարների եւ ֆոնի օգտագործումը

Ֆիքսված ֆոն

Լռելյայն, ոլորման բար օգտագործելիս ֆոնային օրինակը շարժվում է համացանցային էջի բովանդակության հետ միասին: Internet Explorer- ը թույլ է տալիս ֆոնին ֆոնային դարձնել BGProperties \u003d "Fixed" Attribute Tag .

Օրինակ 4. Սահմանված ֆոն սահմանելը

BGProperties հատկանիշը հստակեցնելիս, ինչպես ցույց է տրված 4-ը, ֆոնային օրինակը համացանցային էջում կմնան ֆիքսված, եւ տեքստը, նկարները եւ այլ տարրերը կտեղափոխվեն ոլորման բարով: