Մեր աչքերը տարօրինակ օրգաններ են և հաճախ «ստում» են։ Բայց, եթե դու գիտես մարդու տեսողական ընկալման յուրահատկությունները, դու կարող ես ստեղծել ավելի մաքուր և հասանելի դիզայն։ Սա օգտակար է ոչ միայն տառատեսակներ նախագծող դիզայներների համար, այլ նաև ինտերֆեյս նախագծողների համար, ովքեր ստեղծում են մեքենա-օգտատեր կոմունիկացիաներ։
1. Ճշտգրիտ և օպտիկական չափեր
Ո՞ր մարմինն է ավելի մեծ․ 400px կողով քառակուսին, թե՞ 400px տրամագծով շրջանը։ Եթե խոսենք երկրաչափության լեզվով, ապա երկու պատկերների բարձրություններն ու լայնությունները հավասար են։ Եկեք նայենք Նկար 1-ին։ Մեր աչքերը վայրկյանական նկատում են, որ քառակուսին ավելի մեծ է քան շրջանը: Հարկ է նշել, որ օպտիկական էֆեկտները բնութագրելու համար ավելի հարմար է օգտագործել «զանգված» կամ «կշիռ» տերմիները։
Հավաստիանալու համար դիտեք նույն նկարը ուղորդող գծերով և երկրաչափական չափերով(նկար 2)։
Իսկ հիմա եկեք ևս մեկ նկար դիտենք։ Ի՞նչ եք կարծում․ նկարում պատկերված քառակուսին և շրջանը հավասա՞ր տեսողական զանգված (visual weight) ունե՞ն (Նկար 3):
Իմ կարծիքով, անշուշտ, այո՛։ Վատագույն դեպքում դժվար է առաջին հայացքից որոշել, թե որն է ավելի նշմարելի։ Զարմանալի չէ, քանի որ ես մեծացրել եմ շրջանի տրամագիծը 50px-ով (Նկար 4)։
Այս ամենը բացատրելու համար ես առաջին (քառակուսի` 400px, շրջան՝ 400px) և երկրորդ (քառակուսի` 400px, շրջան՝ 450px) օրինակի պատկերները մեկը մյուսի վրա եմ տեղադրել (Նկար 5)։ Ինչպես նկատեցիք, քառակուսին a մակերեսով գերակշռում է շրջանին, միևնույն ժամանակ շրջանը քառակուսուն՝ b մակերեսով։ Ձախ կողմում քառակուսին ամբողջությամբ գերակշռում է՝ ընդգրկելով շրջանը ամբողջությամբ։ Աջ կողմում շրջանն ու քառակուսին հավասարակշռված են, պատկերներից ոչ մեկը չի ընդգրկում մյուսին, երկուսն էլ ունեն ոչ ընդհանուր տարածքներ։ Ըստ էության՝ ձախ կողմում գտնվող պատկերները ունեն գրեթե հավասար մակերես, մինչդեռ դրանց բարձրություններն ու լայնություներն տարբեր են։
Նույնը կարելի է նկատել շեղանկյան և եռանկյան դեպքում (Նկար 6)։ Քառակուսուն հավասար տեսողական կշիռ ստանալու համար հարկավոր է մեծացնել դրանց չափերը մոտավոր հավասար մակերես ստանալու համար։ Մակերեսի վրա հիմնված մոտեցումը լավ է աշխատում բավականաչափ պարզ պատկերների դեպքում։
Ինչպե՞ս կարելի է օգտագործել այս հնարքը ինտերֆեյսում։ Օրինակ՝ երբ դու պատկերակների շարք ես տեղադրում, դրանք բոլորը պետք է այնպես հավասարակշռված լինեն, այնպես, որ դրանցից ոչ մեկը մեծ կամ փոքր չթվա։
Ես առաջարկւոմ եմ փոխհատուցել տարբեր վիզուալ քաշ ունեցող պատկերակների(icons) զանգվածը` համապատասխանաբար վիզուալ փոքր պատկերակները նախատեսված սահմաններից դուրս թողնելով, իսկ մեծերը՝ ներս (Նկար 8):
Ահա մի քանի հավասարակշռված պատկերակներ (icons):
Հիմա պարզ է՝ ինչու է պատկերակի համար նախատեսված տարածքը ավելի մեծ քան պատկերակը․ որպեսզի տարաձև պատկերակները ճիշտ ներդրվեն և փոքր չթվան(Նկար 10)։
Պատկերակների տեսողական հավասարակշռությունը ստուգելու լավագույն եղանակը դրանք աղավաղելն է (blurring): Եթե աղավաղելուց հետո ստացված հետքեր քիչ թե շատ միանման են, ապա դրանք ունեն հավասար տեսողական կշիռ(Նկար 11)։
Երբեմն մենք աշխատում ենք արդեն գոյություն ունեցող գրաֆիկայի հետ։ Օրինակ՝ սոցիալական ցանցերի լոգոները՝ օգտագործված որպես կիսվելու(share) կամ հավանելու(like) կոճակներ։ Facebook-ի, Instagram-ի դեպքում խնդիրներ չեն լինի, մինչ դեռ Twitter-ի լոգոտիպը նկարված է թռչնակի տեսքով կամ Pinterest-ինը շրջանի մեջ առնված լատինատառ ‘P’ տառ Է։ Այդ պատճառով է, որ դրանք պետք է ավելի մեծացնել քան Facebook-ի, Instagram-ի լոգոները, որպեսզի դրանք հավասարակշիռ երևան (Նկար 12)։
Օպտիկական հավասարակշռության մեկ այլ խնդրի ենք հանդիպում տեքստի համար նախատեսված դաշտի հետ կլոր կոճակ օգտագործելիս։ Եթե շրջանաձև կոճակի տրամագիծը հավասար է տեքստի մուտքագրման համար նախատեսված դաշտի լայնությանը, այն մեզ փոքր կթվա, բայց կոճակը փոքր-ինչ մեծացնելու դեպքում ամբողջն ավելի հավասարակշռված տեսք կունենա (Նկար 13).
Բայց եթե դուք փոխեք կոճակի ոճը, ապա չափերը մեծացնելու կարիք չի լինի։ Ներքևի նկարում կոճակը և տեքստի դաշտը ունեն 60px բարձրություն, բայց կոճակը տեսողականորեն չի կորչում սև գույնի շնորհիվ(Նկար 14)։
Ամփոփում
- Օպտիկական կշիռը օբյեկտի չափի և արտահայտիչ լինելու չափի ընկալումն է:
- Շրջանները, շեղանկյունները, եռանկյունները և քառակուսուց տարբրեր այլ պատկերները պետք է ավելի մեծ լինեն օպտիկորեն ավելի հավասարակշռված լինելու համար:
- Պատկերակների համար նախատեսված դաշտերը պետք լրացուցիչ մակերես ներառեն պատկերակներն օպտիկապես հավասարակշռելու համար։ Սա, հատկապես, կարևոր է պատկերակների շարանների համար, որոնք պետք է համակարգված տեսք ունենան:
2. Տարբեր պատկերների տողաշտկումը, հավասարեցումը (alignment)
Օպտիկական հավասարեցումը օպտիակական հավասարակշռության և օպտիկական կշռի ֆենոմենի տրամաբանական շարունակությունն է։ Նայեք ներքևի շերտագծերին( Նկար 15)։ Արդյո՞ք նրանք հավասար են։
Երկրաչափական տեսանկյունից, անշուշտ, այդպես է։ Բայց առաջին հայացքից առաջինը ավելի երկար է թվում երկրորդից.
Դիտենք ևս մեկ նկար երկու շերտագծերով (Նկար 17): Իսկ հիմա ի՞նչ կասեք։
Երկու շերտագծերն օպտիկորեն հավասարակշռելու համար կարելի է ներքևի շերտագծի ճեղքը փոխհատուցել՝ այն 20px-ով ավելի երկար դարձնելով (Նկար 18)։
Մի քանի բարդ շերտագծեր ևս(Նկար 19):
Այսպիսով, եթե դուք շերտագծերով պաստառ եք նախագծում կամ ինտերնետ խանութի ապրանքի քարտի համար վառ զեղչի նշան , ապա դրանք պետք է օպտիկորեն հավասարակշռված լինեն։ Սուր անկյունները պետք է քիչ ավելի երկար լինեն մյուս օբյեկտից՝ հատկապես, եթե ուղղանկյունաձև է (Նկար 20)։
Իսկ ինչպես վարվել տեքստում այլ գույնով նշված պարբերության հավասարեցման դեպքում։ Այս դեքում ամեն ինչ կախված է ֆոնի մգությունից։ Եթե այն բաց է (Նկար 21), կարելի է ուղղակի հավասարացնել տեքստի մնացած մասի հետ։
Քանի դեռ ֆոնը բաց է, այն չի առանձնանում ընդհանուր տեքստից։
Սև ֆոնի դեպքում այլ մոտեցում է անհրաժեշտ։ Նկար 23-ում սև ֆոնը հավասարեցված է մնացած տեքստի հետ, իսկ ֆոնի և տեքստի միջև տարածություն կա։
Ի տարբերություն սպիտակ ֆոնի սևն ունի նկատելի օպտիկական կշիռ և եթե նպատակն է, որ պարբերությունը ոչ շատ նշմարելի լինի, ապա պետք է վարվել ինչպես նկար 24-ում։
Նույն օրինաչափությունը գործում է նաև կոճակների և տեքստային դաշտերի համար։ Սա, իհարկե, դոգմա չէ, այլ օպտիկորեն հիմնավորված ինտերֆեյսի տեսլական(vision)։
Ձախ կողմի տարբերակում տեքստային դաշտերը հավասարեցված չեն պիտակների հետ և Send կոճակը նույնպես քիչ հեռու է տեքստային դաշտի եզրից, քանի որ այն բաց գույնի է և չունի մեծ օպտիկական կշիռ։
Աջ կողմում տեքստային դաշտերը եզրագծված են, և ես դրանք հավասարեցրել եմ պիտակների հետ, իսկ քանի որ Send կոճակը սև է և ձախ կողմից սուր է, ուստի քիչ ավելի աջ եմ տեղափոխել։
Եվ հիմա մենք մոտենում ենք հավասարեցման մեկ այլ դրսևորման․ կոճակի և գրվածքի հավասարեցմանը։ Նայենք ներքևի նկարին (Նկար 27). տեքստրը կոճակի կենտրոնում է , այնպես չ՞է։
Մի փոքրիկ հնարք է կիրառված․ աջ կոճակի տեքստը քիչ դեպի ձախ եմ տեղափոխել՝ քանի որ աջ կողմը սրեցված է։ Ասեմ ավելին, ձախ կոճակը 40px-ով ավելի երկար է՝ օպտիկորեն հավասարակշռված տեսք հաղորդելու համար(Նկար 28)։
Այս դեպքում նաև ուղղահայաց հավասարեցման խնդիր կա։ Առաջին մոտեցումը, որին կցանկանայի անդրադառնալ, մեծատառի բարձրության հիման վրա հավասարեցումն է (այսպես կոչված՝ cap heigth).Այն օգտագործվում է տարատեսակ օպերացիոն համակարգերում, կայքերում և հավելվածներում։ Անշուշտ «P» տառից վերև և ներքև ընկած տարածությունները հավասար են (Նկար 29)։
Այսպիսի մոտեցումը հարմար է, քանի որ հրամանները հիմանականում սկսվում են մեծատառով և անգլերենում վերին լրացուցիչ տարր ունեցող տառերն ավելի շատ են (l, t, d, b, k, h), քան ստորին լրացուցիչ տարրեր ունեցողները (y, j, g, p)։
Մեկ այլ մոտեցում է փոքրատառի բարձրությոմբ կոճակի և նկարագրության հավասարեցումը (այսպես կոչված x-height)։ Այս մոտեցումը նույնպես իրավունք ունի լինել, քանի-որ տեքստի տեսողական կշռի մեծ մասն ապահովվում է հենց փոքրատառերով։
Կա, արդյո՞ք տարբերություն այս մոտեցումների մեջ(Նկար 31)։ Պատասխանն ակնհայտ է․ այո։ Սակայն տարբերությունը մեծ չէ։
Ներկայացնենք ևս մի քանի օրինակ(Նկար 32)։ Մեծատառով հավասարեցման մոտեցումն, որը ներկայացված է ձախ սյունակում, ավելի հարմար է «OK» և «Cancel» բառերի համար, քանի-որ «OK»-ը բաղկացած է միայն մեծատառերից, իսկ «Cancel»-ը չունի դեպի ներքև ուղղված տարրեր։ Նման տրամաբանությամբ x-ի բարձրությամբ հավասարեցման մեթոդը, որը ներկայացված է աջ սյունակում, ավելի հարմար է «Sync» բառի համար, քանի-սոր այն ունի ինչպես դեպի վերև, այնպես էլ դեպի ներքև ուղղված տարրեր։ Այս դեպքում թվում է, թե «OK» և «Cancel» բառերը վերև են տեղաշարժված։
Ի տարբերություն տեքստային կոճակների, պատկերային կոճակների դեպքում իրավիճակն այլ է։ Եկեք դիտարկենք բավականին տարածված ուղարկելու կոճակը (Նկար 33)։
Հույս ունեմ նկատեցիք, որ ձախ կոճակը տարօրինակ տեսք ունի։ Պատճառը կիրառված հավասարեցման տարբեր մեթոդներն են(Նկար 34)։ Առաջին դեպքում պատկերը հավասարեցված է կոճակի հետ ասես ներգծված է քառակուսուն։ Որոշակի դեպքերում դա հասկանալի է․ օրինակ տվյալ դեպքում ծրագրավորողին .svg կամ ․png ֆորմատով ուղարկվող պատկերակը ուղղանկյունաձև էջ է , որի վրա նկարված է թղթե ինքնաթիռ։ Աջ տարբերակում պատկերակի բոլոր սուր եզրերը հավասարաչափ են հեռացած շրջանաձև կոճակի սահմաններից։
Այսպիսով պատկերակը ծրագրավորողների համար պատրաստելիս պետք է համապատասխան տարածություն թողնել, որպեսզի նրանք կարողանան օպտիկորեն այն ճիշտ հավասարեցնել(Նկար 35)։
Նմանատիպ իրավիճակ է «Play» կոճակի հավասարեցման դեպքում։ Երբ մենք հավասարեցնենք այն ներգծելով ուղղանկյանը կամ անմիջապես որպես եռանկյուն, ապա կոճակը տարօրինակ տեսք կունենա(Նկար 36,37)։
Օպտիկապես ճիշտ հավասարեցնելու համար անհրաժեշտ է պատկերակը ներգծել շրջանի մեջ և միայն հետո այն հավասարեցնել կոճակի հետ։
Ամփոփում
- Սուր անկյուններ ունեցող օբյեկտները պետք է քիչ ավելի մեծ լինեն ուղղանկյունաձև օբյեկտներից ավելի հավասարակշիռ տեսք ունենալու համար
- Կոճակների տեքստային բնութագրերը ավելի ճիշտ է հավասարեցնել մեծատառերի բարձրությունը հաշվի առնելով
- Եռանկյունաձև պատկերակները կոճակների հետ հավասարեցման տարբերակներից մեկը այն շրջանագծին ներգծելն ու հետո հավասարեցնելն է կոճակին։
3․ Անկյունների օպտիկական հարթեցումը
Ի՞նչը կարող է ավելի շրջանաձև լինել, քան՝ շրջանը։ Ես մտածում էի, որ ոչինչ , բայց ինչպես ասեցի հոդվածի սկզբում, մեր տեսողությունը «խենթ» է և երբեմն մենք այն չենք տեսնում, ինչ սպասում էինք։ Այսպիսով ո՞ր շրջանն է ավելի սահուն ներքոհիշյալ նկարում։
Մարդիկ ում ես հարցնում էի, ընտրում էին 3-րդ կամ 4-րդ տարբերակները։ Առաջին երկուսը ավելի «նիհար» են, իսկ 4-րդը և 5-րդը՝ «գեր»։ Երբ մենք 3-րդ(երկրաչափորեն ճշտգրիտ) և 4-րդ (ձևափոխված)շրջանները մեկը մյուսի վրա պատկերենք, կտեսնենք ՝ որ 4-րդը(ձևափոխված) օպտիկորեն ավելի մեծ զանգված ունի, քան 3-րդը(երկրաչափորեն ճշտգրիտ), հետևաբար ավելի սահուն է ընկալվում(Նկար 38)։
Որպեսզի ասելիքն ավելի հասկանալի լինի եկեք դիտարկենք «օ» տառը բավականին հայտնի «Futura», «Circe», և «Geometria» տառատեսակներից(Նկար 39). Հաշվի առնելով փաստը, որ որակյալ տառատեսակները հիմնված են մարդկանց տեսողական ընկալման վրա և բարդ օպտիկական համակարգերի օգտագործմամբ, ես ենթադրում եմ, որ այս շրջանաձև պատկերները ավելի սահուն տեսք ունեն քան երկրաչափական շրջանը։ Հաճելի՞ են, արդյոք, այս տառերը Ձեզ։
Եկեք տառերը համեմատենք երկրաչափական շրջանի հետ(Նկար 40)։ Նույնիսկ ամենաերկրաչափական «Futura»-ի դեպքում «օ»-ն 4 ուղղություններով դուրս է գալիս երկրաչափական շրջանի սահմաններից։ «Circe», և «Geometria»-ի տառերը ավելի լայն են երկրաչափական շրջանից, բայց եթե նույնիսկ նրանք նույն բարձրությունն ու լայնությունն ունենային, ապա մենք կտեսնեինք նրանց դուրս պրծած «փորերը»․․․ 😀
Այսպիսով, «օպտիկորեն արտահայտվելով» ձևափոխված շրջանը (Նկար 41, աջ կողմում) ավելի շրջանաձև է քան՝ երկրաչափականը (Նկար 41, ձախ կողմում)։
Ինչպե՞ս կարելի է օգտագործել այս ֆենոմենը։ Իհարկե անկյունների հարթեցման համար։ Եթե մենք օգտագործենք ժամանակակից գրաֆիկական ծրագրերում ներդրված անկյունների հարթեցման ֆունկցիաները, կտեսնենք, որ արդյունքը օպտիկորեն բավարար չէ (Նկար 42)։
Անմիջապես կարելի է տեսնել այն կետը, որտեղ ուղիղը վերածվում է կորի։ Այսպիսի կլորացումը անբնական տեսք ունի։
Ես լուծել եմ այս խնդիրը՝ հաշվի առնելով մեր տեսողական ընկալումը։
Այսպիսի կլորացումը լրացուցիչ մակերես է զբաղեցնում, այդպիսով ուղիղից կորի անցումը դարձնելով անտեսանելի։
Եկեք փորձենք համեմատել կլորեցման այս երկու եղանակները(Նկար 46)։
Հիմա մենք կարող ենք այս մեթոդը կիրառել կլորացված կոճակներում (Նկար 47)։
Դուք երևի նկատեցիք, որ աջ կողմի կոճակներն ավելի սահուն անցումներ ունեն և նրանք ավելի ակնահաճո են։
Նմանատիպ խնդիր կա հավելվածների պատկերակների(App icon) դեպքում: Իդեալական արդյունքի հասնելու համար ստանդարտ անկյան կլորացումն օգտագործելը բավարար չէ։ Մինչ այս թեմայի խորը ուսումնասիրությանն անցնելը եկեք դիտարկենք անկյունների կլորեցման երկու տարբերակ։ (Նկար 48)։
Առաջին տարբերակում քառակուսի է, որը ես կլորացրել եմ «Sketch» ծրագրով, իսկ երկրորդը սուպերէլիպս է կամ Լամեի կորը։ Այն հայտնագործել է ֆրանսիացի մաթեմատիկոս Գաբրիել Լամեն և բանաձևի արժեքներից կախված այն կարող է նման լինել քառաթև աստղից մինչև անկյունները կլորացված քառակուսու։
Մարկ Էդվարդսը Լամեի կորի համար այնպիսի արժեքներ է առաջարկել, որոնց դեպքում ստացվում է սահուն և օպտիկորեն իդեալական պատկեր(Նկար 50)։ iOS 7-ից սկսած օգտագործվում են այս սկզբունքի հիման վրա նախագծված պատկերակներ։
Ավելի ուշ այս ձևին ավելացվել են նաև ոսկե հատման համաչափությունը և ցանց՝ դիզայներին նոր պատկերակ ստեղծելու գործում ուղղորդելու համար, բայց սա արդեն այլ պատմություն է (Նկար 51)։
Մի կողմից սուպերէլիպսի պես պատկերները սահուն անցումներ ստանալու հնարավորություն են տալիս, բայց մյուս կողմից այս ոչ սովորական պատկերները դժվար է կիրառել ինտերֆեյսում։ Կիրառելու համար պետք է կամ մի քանի .svg համատեղել, կամ օգտագործել հատուկ բանաձևեր և կոդ, կամ էլ պատկերները ․png ֆորմատով ներդնել՝ ինչպես Apple-ն ՝ իր հավելվածներում։
Դիզայն պրոցեսում կարելի այս խնդիրը լուծել հեշտ եղանակով։ Ուղղակի պետք է ստանդարտ կլորեցված պատկերը կորի վերափոխել, անցնել պատկերի ձևափոխման ռեժիմ և ձևափոխման սլաքները մոտեցնել միմյանց(Նկար 52)։
Այս եղանակի կիրառման տարբերությունն ավելի վառ երևում սուր անկյունների կլորացման ժամանակ(Նկար 53)։ Այս խնդիրը հաճախ հանդիպում է ճանապարհային կամ մետրոյի քարտեզներ գծելիս։
Ամփոփում
- Անկյունների երկրաչափական կլորացումը արհեստական տեսք ունի, քանի որ մենք կարող ենք տեսնել այն կետերը, որտեղ ուղիղը կորի է վերածվում։
- Անկյունները օպտիկորեն ճիշտ կլորեցնելու համար պետք է կիրառել հատուկ բանաձևեր կամ ստանդարտ կլորացումը ճշտգրտել ուղղակիորեն ներգործելով։
Հավելյալ նյութ (Բոնուս)
Երբեմն երկրաչափորեն ոչ ճշտգրիտ քառակուսին ավելի քառակուսի տեսք ունի քան ճշտգրիտը։ Դուք կարող եք մտածել․
-Ինչպիսի՞ ծիծաղելի անհեթեթություն։
Ասպիսով, ներքոհիշյալ պատկերներից ո՞րն է ավելի քառակուսի (Նկար 54)։
Եթե Դուք ընտրել եք ձախը, ապա դուք վստահել եք ձեր անաչառ տեսողական ընկալմանը։
Ես զարմացել էի, երբ իմացա, որ մեր աչքերը պատկերի բարձրության նկատմամբ ավելի զգայուն են քան լայնության նկատմամբ։ Սա բացատրում է, թե ինչու երկրաչափական տառատեսակներում «օ» տառը ավելի լայն և «H»-ի ուղղահայաց գծերն ավելի լայն քան հորիզոնականը։
Ընթերցանության համար
Այս հոդվածը բավականին մակերեսային պատկերացում է տալիս թեմայի մասին։ Այդ պատճառով խրախուսում եմ Ձեզ շարունակել բացահայտել այն։ Ներքևում ներկայացված է գրքերի և հոդվածների ցանկ գելշտատ հոգբանության և դրա հիմնային գաղափարների մասին․
Թարգմանությունը՝ Արամ Սողոմոնյան
Խմբագրությունը՝ Քրիստինե Ասատրյան
Բնօրինակ՝ Optical Effects in User Interfaces: An Illustrated Guide
