Վեբ կայքերի մշակման տեխնոլոգիան շատ բազմակողմ գործընթաց է: Բայց այնուամենայնիվ, դրա բոլոր փուլերը կարելի է բաժանել երկու հիմնական բաղադրիչի` ֆունկցիոնալ և արտաքին պատյան: Կամ, ինչպես ընդունված է վեբ վարպետների շրջանում, համապատասխանաբար back-end և front-end: Մարդիկ, ովքեր պատվիրում են իրենց կայքերը վեբ մշակման ստուդիաներից, հաճախ միամտաբար կարծում են, որ արժե կենտրոնանալ միայն ֆունկցիոնալության վրա, և դա կլինի ճիշտ որոշումը։ Բայց դա ճիշտ է շատ, շատ հազվադեպ դեպքերում, սովորաբար բետա փորձարկման փուլում գտնվող ստարտափ նախագծերի համար: Հակառակ դեպքում, գրաֆիկական դիզայնը և օգտատիրոջ միջերեսը պարզապես պահանջվում են, որպեսզի համապատասխանեն վեբ զարգացման ստանդարտներին և լինեն հարմար:
Առաջին հիմնաքարը, որին բախվում է ինտերֆեյսի դիզայները կամ դիզայները, կայքի դասավորության լայնությունն է: Ի վերջո, դրա համար անհրաժեշտ է միջերեսներ նկարել: Զուտ ինտուիտիվ կերպով առաջանում է երկու մոտեցում՝ կա՛մ էկրանի յուրաքանչյուր հայտնի լուծաչափի համար առանձին դասավորություններ անել, կա՛մ ստեղծել կայքի մեկ տարբերակ բոլոր ցուցադրումների համար: Եվ երկու տարբերակներն էլ սխալ կլինեն, բայց առաջին հերթին:
Կայքի ստանդարտ լայնությունը պիքսելներովRunet-ի համար
Մինչ հարմարվողական դասավորության մշակումը հազար պիքսել լայնությամբ կայքի զարգացումը զանգվածային երեւույթ էր։ Այս ցուցանիշն ընտրվել է մեկ պարզ պատճառով՝ որպեսզի կայքը տեղավորվի ցանկացած էկրանին: Եվ սա ունի իր տրամաբանությունը, բայց եկեք ենթադրենք, որ մարդը դեռ ունի առնվազն HD մոնիտոր աշխատասեղանի վրա: Այս դեպքում ձեր դասավորությունը կթվա որպես մի փոքրիկ շերտ էկրանի մեջտեղում, որտեղ ամեն ինչ խրված է մեկ կույտում, իսկ կողքերում կա հսկայական չօգտագործված տարածություն: Հիմա ենթադրենք, որ մարդը մուտք է գործում ձեր կայք 800px լայն էկրանով պլանշետով, և կարգավորումներում ստուգվում է «Ցույց տալ ամբողջական կայքը»: Այս դեպքում ձեր կայքը նույնպես սխալ կցուցադրվի, քանի որ այն պարզապես չի տեղավորվի էկրանին։
Այս նկատառումներից կարող ենք եզրակացնել, որ դասավորության համար ֆիքսված լայնությունը հաստատ մեզ հարմար չէ, և մենք պետք է այլ ճանապարհ փնտրենք: Եկեք վերլուծենք յուրաքանչյուր էկրանի լայնության առանձին դասավորության գաղափարը:
Դասավորություններ բոլոր առիթների համար
Եթե դուք որպես ռազմավարություն ընտրել եք շուկայում բոլոր էկրանների չափերի դասավորությունը ստեղծելու համար, ապա ձեր կայքը կլինի ամենայուրահատուկը ողջ համացանցում: Ի վերջո, այսօր պարզապես անհնար է ընդգրկել սարքերի ամբողջ տեսականին, փորձելով ճշգրտել յուրաքանչյուր տարբերակի համար: Բայց եթե կենտրոնանաք մոնիտորների և սարքերի էկրանների ամենատարածված լուծումների վրա, ապա գաղափարը վատ չէ: Դրա միակ թերությունը ֆինանսական ծախսերն են: Ի վերջո, երբ ինտերֆեյսի դիզայները, դիզայները և կոդավորողը ստիպված են լինում կատարել նույն աշխատանքը 5 կամ 6 անգամ, ապա նախագիծը կարժենա.անհամաչափ բարձր է սկզբնական բյուջեով նախատեսված գնից։
Հետևաբար, միայն մեկ էջանոց կայքերը կարող են պարծենալ տարբեր էկրանների տարբերակների առատությամբ, որոնց նպատակն է վաճառել մեկ ապրանք և անպայման լավ անել։ Դե, եթե դուք ունեք այս վայրէջքներից ոչ մեկը, այլ բազմաէջանոց կայք, ապա պետք է ավելին մտածեք:
Կայքի ամենահայտնի չափերը
Երկու ծայրահեղությունների միջև փոխզիջումը ներկայացնում է դասավորությունը էկրանի երեք կամ չորս չափերի համար: Դրանցից մեկը պետք է լինի շարժական սարքերի դասավորություն: Մնացածը պետք է հարմարեցվի փոքր, միջին և մեծ աշխատասեղանի էկրաններին: Ինչպե՞ս ընտրել կայքի լայնությունը: Ստորև ներկայացնում ենք HotLog ծառայության վիճակագրությունը 2017 թվականի մայիսի համար, որը ցույց է տալիս սարքերի էկրանի տարբեր լուծումների հանրաճանաչության բաշխվածությունը, ինչպես նաև այս ցուցանիշի դինամիկան։
Աղյուսակից կարող եք պարզել, թե ինչպես կարելի է որոշել կայքի չափը, որը ցանկանում եք օգտագործել: Բացի այդ, մենք կարող ենք եզրակացնել, որ այսօր ամենատարածված ձևաչափը 1366 x 768 պիքսել էկրանն է: Նման էկրանները տեղադրվում են բյուջետային նոթբուքերում, ուստի դրանց ժողովրդականությունը բնական է։ Հաջորդ ամենահանրաճանաչը Full HD մոնիտորն է, որը տեսահոլովակների, խաղերի և, հետևաբար, կայքերի դասավորության ստեղծման ոսկե ստանդարտն է: Այնուհետև աղյուսակում մենք տեսնում ենք շարժական սարքերի լուծաչափը 360 x 640 պիքսել, ինչպես նաև աշխատասեղանի և շարժական էկրանների տարբեր տարբերակներ դրանից հետո:
Դիզայնի դասավորություն
ԱյսպեսՎիճակագրությունը վերլուծելուց հետո կարող ենք եզրակացնել, որ կայքի օպտիմալ լայնությունը ունի 4 տատանումներ՝
- Նոթբուքի տարբերակ 1366px լայնությամբ։
- Full HD տարբերակ։
- 800px լայն դասավորություն՝ փոքր աշխատասեղանի մոնիտորների վրա ցուցադրելու համար:
- Կայքի բջջային տարբերակ - 360 պիքսել լայնություն։
Ենթադրենք, մենք որոշել ենք, թե ինչ չափս ենք օգտագործել կայքի համար ստեղծված աղբյուրի համար: Բայց նման նախագիծը դեռ թանկ կարժենա։ Այսպիսով, եկեք նայենք ավելի շատ տարբերակների, այս անգամ առանց ֆիքսված լայնության օգտագործման:
Դարձնում ենք դասավորությունը ճկուն
Գոյություն ունի այլընտրանքային մոտեցում, երբ արժե հարմարվել միայն էկրանի նվազագույն չափին, իսկ կայքի չափերն իրենք կսահմանվեն տոկոսներով։ Միևնույն ժամանակ, ինտերֆեյսի այնպիսի տարրեր, ինչպիսիք են ընտրացանկերը, կոճակները և պատկերանշանը, կարող են սահմանվել բացարձակ արժեքներով՝ կենտրոնանալով էկրանի լայնության նվազագույն չափի վրա՝ պիքսելներով: Բովանդակություն ունեցող բլոկները, ընդհակառակը, կձգվեն ըստ էկրանի լայնության նշված տոկոսի։ Այս մոտեցումը թույլ է տալիս դադարեցնել կայքերի չափը որպես սահմանափակում ընկալել դիզայների համար և հմտորեն հաղթահարել այս նրբերանգը։
Ի՞նչ է ոսկե հարաբերակցությունը և ինչպե՞ս կարող է այն կիրառվել վեբ էջի դասավորության մեջ:
Նույնիսկ Վերածննդի դարաշրջանում շատ ճարտարապետներ և նկարիչներ փորձում էին իրենց ստեղծագործություններին տալ կատարյալ ձև և համամասնություն: Նման համամասնության արժեքների վերաբերյալ հարցերին պատասխանելու համար նրանք դիմեցին բոլոր գիտությունների թագուհուն՝ մաթեմատիկայի:
Հնուց ի վեր հորինվել է մի համամասնություն, որը մեր աչքն ընկալում է որպես ամենաբնական և էլեգանտ,քանի որ այն ամենուր է իր բնույթով: Նման հարաբերակցության բանաձեւի հայտնագործողը հին հույն տաղանդավոր ճարտարապետ Ֆիդիասն էր: Նա հաշվարկել է, որ եթե համամասնության մեծ մասը կապված է փոքրի հետ, ինչպես ամբողջը կապված է մեծի հետ, ապա այդպիսի համամասնությունը լավագույն տեսք կունենա։ Բայց սա այն դեպքն է, եթե ուզում եք օբյեկտը բաժանել ասիմետրիկ: Այս համամասնությունը հետագայում անվանվեց ոսկե հատված, որը մինչ օրս չի գերագնահատում դրա նշանակությունը համաշխարհային մշակույթի պատմության համար։
Վերադառնալ վեբ դիզայն
Դա շատ պարզ է՝ օգտագործելով ոսկե հարաբերակցությունը, դուք կարող եք նախագծել էջեր, որոնք հնարավորինս հաճելի կլինեն մարդու աչքին: Հաշվարկելով ոսկե հարաբերակցության բանաձևի սահմանմանը՝ ստանում ենք իռացիոնալ թիվը 1, 6180339887 …, բայց հարմարության համար կարող ենք օգտագործել 1, 62 կլորացված արժեքը։ Դա կնշանակի, որ մեր էջի բլոկները պետք է լինեն 62։ % և ամբողջի 38%-ը, անկախ նրանից, թե ինչ չափի է ստեղծվել աղբյուրը կայքի համար, որը դուք օգտագործում եք: Դուք կարող եք օրինակ տեսնել այս գծապատկերում՝
Օգտագործեք նոր տեխնոլոգիաներ
Կայքերի դասավորության ժամանակակից տեխնոլոգիաները հնարավորություն են տալիս ճշգրիտ փոխանցել պլանավորողի և դիզայների գաղափարը, ուստի այժմ կարող եք ձեզ թույլ տալ ավելի համարձակ գաղափարներ իրականացնել, քան ինտերնետ տեխնոլոգիաների արշալույսին: Այլևս կարիք չկա լավ մտածել այն մասին, թե որքան պետք է լինի կայքի չափը: Նման բաների գալուստով, ինչպիսիք են բլոկների հարմարվողական դասավորությունը, բովանդակության և տառատեսակների դինամիկ բեռնումը, վեբկայքի զարգացումը շատ ավելի հաճելի է դարձել: Ի վերջո, այս տեխնոլոգիաներն ենավելի քիչ սահմանափակումներ, թեև դրանք դեռ կան: Բայց ինչպես գիտեք, առանց սահմանների արվեստ չէր լինի։ Առաջարկում ենք օգտագործել դիզայնի մեկ իսկապես կրեատիվ մոտեցում՝ ոսկե հարաբերակցությունը: Դրա միջոցով դուք կարող եք արդյունավետ և գեղեցիկ կերպով լրացնել աշխատանքային տարածքը, անկախ նրանից, թե կայքի ինչ չափսեր եք սահմանել ձեր ձևանմուշներում:
Ինչպես մեծացնել կայքի աշխատանքային տարածքը
Լավ հավանականություն կա, որ դուք բավարար տեղ չեք ունենա միջերեսի բոլոր տարրերը փոքր դասավորության մեջ տեղավորելու համար: Այս դեպքում դուք պետք է սկսեք մտածել ստեղծագործաբար կամ նույնիսկ ավելի ստեղծագործական, քան նախկինում էիք անում:
Կայքում առավելագույն տարածք ազատեք՝ թաքցնելով նավարկությունը բացվող ընտրացանկում: Տրամաբանական է օգտագործել այս մոտեցումը ոչ միայն շարժական սարքերի, այլև աշխատասեղանի վրա: Ի վերջո, օգտվողը կարիք չունի անընդհատ նայելու, թե ինչ վերնագրեր կան ձեր կայքում. նա եկել է բովանդակության համար: Իսկ օգտագործողի ցանկությունները պետք է հարգվեն։
Մենյու թաքցնելու լավ միջոցի օրինակ է հետևյալ դասավորությունը (ստորև նկարը):
Կարմիր հատվածի վերին անկյունում կարող եք տեսնել խաչ, որի վրա սեղմելով մենյուը կթաքցվի փոքր պատկերակի մեջ՝ օգտատերին թողնելով միայն կայքի բովանդակության հետ:
Սակայն սա կամընտիր է, կարող եք թողնել նավիգացիան, որը միշտ տեսադաշտում կլինի: Բայց դուք կարող եք այն դարձնել դիզայնի գեղեցիկ տարր, և ոչ միայն կայքի հայտնի հղումների ցանկ: Օգտագործեք ինտուիտիվ պատկերակներ՝ ի լրումն կամ նույնիսկ տեքստային հղումների փոխարեն: դա նույնն էթույլ կտա ձեր կայքին ավելի արդյունավետ օգտագործել օգտատիրոջ սարքի էկրանի տարածությունը:
Լավագույն կայքը ռեսպոնսիվ է
Եթե չգիտեք, թե որ դասավորությունը ընտրել կայքի համար, ապա ձեզ համար ամեն ինչ պարզ է: Որպեսզի խնայեք զարգացման ծախսերը և միևնույն ժամանակ չկորցնեք ձեր լսարանը որոշ սարքերի վատ դասավորության պատճառով, օգտագործեք արձագանքող դիզայն:
Արձագանքող դիզայնը դիզայն է, որը հավասարապես լավ տեսք ունի տարբեր սարքերում: Այս մոտեցումը թույլ կտա ձեր կայքին հասկանալի և հարմար լինել նույնիսկ նոութբուքի, նույնիսկ պլանշետի, նույնիսկ սմարթֆոնի վրա: Այս էֆեկտը ձեռք է բերվում ավտոմատ կերպով փոխելով էկրանի աշխատանքային տարածքի լայնությունը: Օգտագործելով ձեր կայքի համար ռեսպոնսիվ ոճային թերթիկները, դուք կայացնում եք հնարավոր լավագույն որոշումը:
Ո՞րն է տարբերությունը ռեսպոնսիվ դիզայնի և կայքի տարբերակների միջև
Responsive դիզայնը տարբերվում է կայքի բջջային տարբերակից նրանով, որ վերջին դեպքում օգտատերը ստանում է html կոդ, որը տարբերվում է աշխատասեղանից։ Սա թերություն է սերվերի աշխատանքի օպտիմալացման, ինչպես նաև որոնման համակարգի օպտիմալացման առումով: Բացի այդ, ավելի դժվար է դառնում կայքի տարբեր տարբերակների վիճակագրության հաշվարկը։ Հարմարվողական մոտեցումը չունի այս թերությունները։
Արձագանքումը տարբեր սարքերի համար ձեռք է բերվում դասավորության միջոցով՝ նշված լայնության տոկոսով կամ բլոկները հասանելի տարածություն տեղափոխելու միջոցով (սմարթֆոնի փոխարեն ուղղահայաց հարթությունում):հորիզոնական աշխատասեղանին), կամ ստեղծելով անհատական դասավորություններ տարբեր էկրանների համար:
Իմացեք ավելին արձագանքող դիզայնի և զարգացման մասին մեր ձեռնարկներում:
