Ինչպե՞ս ստեղծել արձագանքող դիզայն:

2024 Հեղինակ: Trinity Chesterton | [email protected]. Վերջին փոփոխված: 2023-12-16 08:19

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

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

Արձագանքող վեբ դիզայնի բնութագրերը

Դիզայնի հարմարավետությունը բնութագրվում է մի քանի հիմնական չափանիշներով:

1. Չափ. Պատասխանող վեբ կայքի ձևավորումը պետք է փոքր տարբերություններ ունենա էջը տարբեր սարքերում ցուցադրելիս, այնպես որ պատկերների, տեքստի և դիտված այլ տարրերի չափերը պետք է համապատասխանեն հենց սարքերի չափերին: Դա անելու համար վեբ մշակողները հարմարեցնում են դիզայնն այնպես, որ այն ունենա բազմաթիվ դիտումների տարբերակներ:
2. Բովանդակության հարմարեցում. Նյութ, որը լրացնում է կայքը (պատկերներ, տեսանյութերև այլ մուլտիմեդիա տարրեր) նույնպես պետք է համապատասխանեն էկրանի պահանջվող լուծաչափերին՝ չկորցնելով ցուցադրման որակը:
3. Դիզայնի ճկունություն: Ներառում է այնպիսի տարրերի մշակման մեջ, որոնք թույլ են տալիս արագորեն հարմարեցնել կայքի դիզայնը, երբ փոխում եք ձեր դիտած վեբ էջը: Օրինակ՝ օգտատերը ոլորում է էջը վերև վար, նավարկում է տարբեր բաժիններով կամ փոխում է էկրանի դիրքը ուղղահայացից հորիզոնական և հակառակը:
4. Պարզեցրեք տարրերն ըստ սարքի ավելի լավ օգտագործելիության համար:
5. Թաքցնել անկարևոր բլոկները փոքր էկրանների վրա:

Հիմունքներ

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

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

CSS-ը, մյուս կողմից, դիզայնի անփոխարինելի գործիք է: Ունի HTML-ին գերազանցող հատկանիշների մեծ փաթեթ՝

1. Ապահովում է դիզայնի հետևողականությունը բազմաթիվ էջերում, կայքի տեսքը և վերահսկում է HTML փաստաթղթերի ցուցադրումը:
2. Ձեզ հնարավորություն է տալիս միաժամանակ զբաղվել դիզայնով և բովանդակությամբ:
3. Կիրառում է բազմաթիվ ոճեր և հնարավորությունդիտում տարբեր սարքերում։
4. Կայացնում է դիզայնի բարդ որոշումներ:
5. Բնորոշվում է բարձր արագությամբ։

Վեբկայք մշակելու համար դուք պետք է իմանաք մի քանի հիմնական հասկացություններ:

CSS ընտրիչը նշվում է ոճի անունով, որը սահմանում է հատկություններ և ձևաչափման տարբերակներ: Այն զննարկիչին ասում է, թե կոնկրետ որ տարրի վրա են կիրառվում հատկությունները:

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

Կա սահմանված CSS հատկությունների մի շարք, որոնք նկարագրում են մեկ օբյեկտ արտաքին տեսքով և դիրքով:

Այս տարրերը միասին կազմում են հետևյալ սխեման՝

Ընտրիչ { հատկություն1: արժեք; սեփականություն 2; արժեքը }.

Դասավորության չափերը և լուծումները

Դիզայնի զարգացումը սկսվում է Photoshop-ում կամ այլ գրաֆիկական ծրագրերում դասավորության պատրաստումից: Հարմարության համար կտավի մեջ մտցվում են մոդուլային ցանցի հատուկ գծանշումներ, նկատվում են հատուկ գծեր։ Այսպիսով, վեբ դիզայները դասավորության դիզայներին ցույց է տալիս ապագա կայքի կառուցվածքի և վեբ տարրերի ճիշտ դասավորության սկզբունքները։

Վեբ դիզայնի պատասխանող լուծումներ և չափսեր հիմնական սարքերի տեսակների համար.

• Այս դիզայնը հավատարիմ է բջջայինի թույլտվությամբ աշխատանք սկսելու սկզբունքին: Սմարթֆոնի դասավորությունը ստեղծվել է 460 × 960 px չափերով:
• Պլանշետի դասավորության չափը 768 × 1024 է:
• Նոթատետրի չափսը՝ 1280 × 802։
• Համակարգչի չափսը՝ 1600 × 992։

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

Ադապտիվ բովանդակության մեջ, օգտագործելով html կոդը, դուք կարող եք թաքցնել որոշ տարրեր, որոնք իրականում անհրաժեշտ չեն: Օրինակ՝ բարձր լուծաչափով կայքը ցուցադրում է ապրանքի քարտ՝ իր նկարագրությամբ, գնով, առաքման տեղեկություններով և «Զամբյուղում» ավելացնելու հնարավորությամբ։ Բջջային լուծաչափով գործընթացը պարզեցված է լուսանկարի, գնի և գնման կոճակի տեսքով:

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

Դասավորություն

Դիզայնի հարմարվողական դասավորության նպատակը ճկուն դասավորություն ստեղծելն է, կամ ինչպես ընդունված է ասել՝ «ռետինե կաղապար»: Հիմնական գիծը ոչ թե միանիշ էջերի չափերն է, այլ ձևանմուշի համաչափ սեղմելիությունը՝ բոլոր սարքերում հեշտ դիտելու համար:

Այն կառուցված է հիմնականում CSS-ի վրա։ Մշակման ընթացքում որոշվում են էկրանի չափսերի կառավարման կետերը: Այսպիսով, որոշվում է մնացած օբյեկտների լայնությունը: Դա անելու համար էջի լայնությունը սահմանվում է css max-width հատկությամբ, այս չափանիշներից կախված այլ տարրերի չափը ընտրվում է որպես տոկոս։ Օրինակ, բլոկի չափը հիմնականի վրաէջը 600px է, իսկ կողագոտի բլոկի լայնությունը (կայքի կողագոտի) համապատասխանաբար 400px է, բովանդակության լայնությունը կկազմի 60%, իսկ կողագոտի լայնությունը՝ 40%։

Գոյություն ունեն արձագանքող դասավորությունների մի քանի տեսակներ: Յուրաքանչյուրն ընտրվում է առանձին՝ կախված առանձնահատկություններից և կառուցվածքից:

Դիտումներ՝

1. Դասավորության տեսակ, որը թույլ է տալիս բլոկներին փաթաթվել, երբ էկրանի լուծաչափը նվազում է: Բազմասյունակ կայքերում լրացուցիչ բլոկները տեղափոխվում են էկրանի ներքևի մաս:
2. Երբ յուրաքանչյուր թույլտվության համար մշակվում է առանձին օրինակ: Արձագանքող դիզայնի այս տեսակն ավելի երկար է տևում, բայց ամենաընթեռնելին է:
3. Դիզայնի պարզ տեսակ, որի նպատակն է մասշտաբավորել բոլոր տարրերը: Այն ճկուն չէ։
4. Վահանակի տեսակը հարմար է բջջային հավելվածներում օգտագործելու համար, երբ էկրանի դիրքը փոխելիս լրացուցիչ գործառույթներ են հայտնվում։

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

Մեկ պատկերը պետք է հստակ ցուցադրվի էկրանի տարբեր լուծաչափերով: Այստեղ խնդիր կա՝ ինչպես համոզվել, որ նկարը միշտ նույնը մնա՝ անկախ լուծաչափի փոփոխությունից։ Պարզ CSS կոդի մուտքագրումն այս դեպքում բավարար չի լինի:

Օրինակ՝ img {max-width: 250px;} - այստեղ դուք պետք է կիրառեք մի մեթոդ, որի դեպքում պատկերը պարունակող տարայի չափը սահմանափակ է, և ոչ թե պատկերն ինքնին: Այն կունենա մոտավորապես այսպիսի տեսք՝ div img {max-width՝ 250px;}: Այս մեթոդը լուծում է խնդիրըփոքր պատկերների դասավորություն, բայց հարմար չէ մեծ նկարազարդումների համար:

Հետևաբար, շատ ծրագրավորողներ նախընտրում են օգտագործել javascript լեզուներ, որոնք թույլ են տալիս հարմարեցնել ցանկացած պատկեր՝ առանց սերվերի ծանրաբեռնման: Javascript-ն առաջարկում է մեծ թվով այլընտրանքային սցենարներ:

Արձագանքող դասավորության առավելություններն ու թերությունները

Դրականներ.

• Պահպանել բոլոր տարրերի գտնվելու վայրը: Սա հարմար է, երբ օգտատերը սովոր է կայքի ամբողջական տարբերակին:
• Պահպանել տիրույթները և հասցեները։
• Լրիվ հարմարեցում այլ թույլտվությունների ձևաչափերի համար:

Բացասականներ.

• Ֆունկցիոնալ ճկունությունը կորել է
• Ցանկացած տեղեկատվական ծանրաբեռնվածություն հղի է վեբ ռեսուրսի երկար գործարկմամբ, ինչը ստիպում է շատ օգտատերերի անցնել ավելի արագ տարբերակների:

Կայքի ստեղծում

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

Օժանդակ պիտակներ գրելու համար.

• wrapper - պիտակ, որը միավորում է կաղապարի բոլոր տարրերը;
• header h1 - logo;
• header - մենյուի և այլ կարևոր տարրերի վերնագիր;
• բովանդակություն - արգելափակում;
• colLeft - բովանդակության չափ;
• colRight - կողագոտ (կողային սյունակ);
• footer - կայքի վերջին մասը;
• մեդիա էկրան - հավաքածուներցանկալի լուծում։

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

• viewport - պիտակ, որը թույլ է տալիս պահպանել տեքստի չափը դիզայնի ավելի փոքր տարբերակում: Այն գտնվում է պիտակների միջև.
• max-width - կայքի օպտիմալացում՝ 1000 պիքսելից ավելի լուծաչափերով ձգվելուց խուսափելու համար:

Դասավորությունն իրականացնելիս jQuery գրադարանը շատ է օգնում, երբ անհրաժեշտ է փոխել բլոկների ոճն ու կառուցվածքը:

Ո՞րն է տարբերությունը արձագանքող և բջջային դիզայնի միջև

Լրիվ հասկանալու համար, հաշվի առեք մի քանի պատկերավոր օրինակներ, քանի որ այս երկու հասկացությունների միջև շփոթությունը հազվադեպ չէ:

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

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

Սրանք կայքի երկու տարբեր ներկայացումներ են, որոնց շուրջ անխոնջ վեճեր են բորբոքվում, թե որն է ավելի լավը: Նշենք, որ դեռևս հստակ որոշում չի կայացվել։ Ինչ-որ մեկը գովաբանում է այս դիզայնը՝ մատնանշելով նորաձևության միտումը և շատ առավելություններ։Բջջային տարբերակն ունի նաև մի քանի առավելություններ, որոնք արձագանքող դիզայնը չունի: Հետևաբար, սկզբից դուք պետք է հասկանաք հիմնական կարիքները:

Օգուտներ

Ինչպե՞ս է արձագանքող դիզայնն ավելի լավ, քան բջջային հեռախոսը:

Բազմակողմանիություն. Մեր ժամանակներում, շուկայի նման կատաղի աճի պայմաններում, պարզապես անհրաժեշտ է տեղեկատվությունը ներկայացնել այլ կերպ՝ բավարարելով սպառողների ցանկությունները։ Պատասխանատու դիզայնը լուծում է այս խնդիրը:

Արդյունավետ խթանում որոնման համակարգերում: Ինչը չի կարելի վերագրել հարմարվողական սարքի հիմնական առավելություններին: Որոնման համակարգերը նախընտրում են օգտատերերին տրամադրել ռեսպոնսիվ կայքեր:

Օգտագործելիություն. Պատասխանատու դիզայնը սովորաբար նախագծված է լավագույն դիզայներական լուծումներով, ինչը հաճելի նվեր է օգտատերերի տեսողական ընկալման համար:

Հեշտություն և պարզություն ինչպես նախագծի իրականացման, այնպես էլ դրա օգտագործման մեջ:

Լավ փոխակերպման տեմպեր: Քանի որ հարմարվողական դիզայնի դեպքում ցուցադրման ավելի շատ հնարավորություններ կան, փոխակերպումն ինքնին մեծանում է:

Տնտեսություն. Այն համեմատաբար ավելի էժան է, քան առանձին բջջային տարբերակ ստեղծելն ու գովազդելը:

Բջջային տարբերակի դրական և բացասական կողմերը

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

Կան որոշակի առավելություններ և թերություններ բջջային արձագանքող դիզայնի համար:

Կողմ՝

1. Եթե ունեք պատրաստի կայք, ապա կարիք չկա զրոյից դիզայն մշակել բջջային տարբերակի համար։ Միայն մի քանի փոփոխություններ կարող են կատարվել՝ ազատելով այս դասավորությունը չպահանջվող ֆունկցիոնալությունից:
2. Բոլոր տեսակի պարզեցումների շնորհիվ բջջային տարբերակը ներբեռնելիս համարվում է ավելի արագ։
3. Օգտատերը տեսնում է տեղեկատվության ամենակարևոր մասը ամբողջ բովանդակության մեջ:
4. Արագ իրականացում. Կան փլագիններ, որոնցով կարող եք իրականացնել շարժական ադապտացիա, նույնիսկ եթե չգիտեք պիտակներ և կոդեր:
5. Որոնման համակարգերի ընտրությունը նախընտրում է հարմարվողական տարբերակները, քանի որ դրանք ավելի քիչ ժամանակ են պահանջում վերլուծելու համար:

դեմ.

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

Իրագործման եղանակներ

Իրագործման հիմնական մեթոդները՝

• Դասավորությունների և դասավորության դիզայնը ստեղծելուց հետո այն բեռնվում է պահանջվող չափսերով՝ օգտագործելովօպերատորի կայքը և հիմնական կոդը: Սա դասական մեթոդ է, որն օգտագործվում է միջին և փոքր տարբերակների (պլանշետներ, սմարթֆոններ և այլն) ստեղծման ժամանակ։
• BootStrap-ը հարմարեցման գործիքների պարզ և հստակ հավաքածու է: Հարմար է Landing Page և այլ ոչ շատ բարդ վեբ նախագծերի տարբերակներ ստեղծելու համար։ Այն լավ հնարավորություն է տալիս ինտերֆեյսի գործառույթներում կիրառել բազմաթիվ տարբեր ոճեր:
• Responsive Grid System-ը բազմակողմանի գործիքների հանրաճանաչ հավաքածու է: Հեշտ է կիրառելի և չի պահանջում խորը գիտելիքներ: Ներառում է ինֆոգրաֆիկայի լայն տեսականի:
• GUMBY - CSS շրջանակ, որը պարծենում է ճկուն արձագանքողությամբ և հիանալի գործիքակազմով:
• Cookies - թույլ է տալիս իրականացնել պատասխանող պատկերներ: Ավտոմատ կերպով ուղեկցում է դիտարկիչի կողմից պահանջվող ֆայլերը:
• ExpressionEngine-ը արձագանքող պատկերներ ստեղծելու ևս մեկ միջոց է: Որոշում է, թե արդյոք սարքը շարժական է, ի վիճակի է փոխել պատկերները պահանջվող լուծաչափով:
• ProtoFluid - Ապահովում է արագ նախատիպավորում: Հարմար է բոլոր տեսակի սարքերի համար։