Ինչպե՞ս է գործում բլոկի դասավորությունը:

Նախքան դասավորությունը սկսելը, կայքի ավարտված psd դասավորությունը գրաֆիկական խմբագրիչում կտրված է բլոկների (շերտերի): Կտրված ֆոնային նկարները տեղադրվում են առանձին թղթապանակում, որը առանձին կցվելու է յուրաքանչյուր շերտին.

Օրինակ, եկեք վերցնենք այս վեբ կայքի դասավորությունը, որը ստեղծվել է Photoshop- ում: Նախ, տեքստային խմբագրիչում, օգտագործելով div- ը, մենք սահմանում ենք ապագա ռեսուրսի կառուցվածքը և յուրաքանչյուր շերտի վերագրում ենք իր id ընտրիչը: Ստացվում է հետևյալ կառուցվածքը.

Այնուհետև գծի հետ html- ում ավարտված կայքի կառուցվածքը կցել css ֆայլը: Այնուհետև դրան ավելացնում ենք յուրաքանչյուր շերտի ոճի նկարագրությունը ՝ դիրքավորվելով այլ տարրերի և դրա չափերի համեմատ:

Բոլոր css հատկությունների մասին կարող եք ավելին իմանալ լեզվի տեխնիկական փաստաթղթերից:

Index.html- ի ամբողջական կոդը. Օրինակ.

Style.css ֆայլի բովանդակությունը.

մարմին (ֆոն ՝ # f3f2f3; գույնը ՝ # 000000; տառատեսակ ՝ Trebuchet MS, Arial, Times New Roman; տառաչափը ՝ 12px;) # բեռնարկղ (ֆոն ՝ # 99CC99; լուսանցք ՝ 30px ավտոմատ; լայնություն ՝ 900px; բարձրություն ՝ 600px;) # գլուխ (ֆոն ՝ # 66CCCC; բարձրություն ՝ 100px; լայնություն ՝ 900px;) # նավարկություն (ֆոն ՝ # FF9999; լայնություն ՝ 900px; բարձրություն ՝ 20px;) # մենյու (ֆոն ՝ # 99CC99; բոց ՝ ձախ; լայնություն ՝ 200px; բարձրություն ՝ 400px;) #բովանդակություն (ֆոն ՝ #d2d0d2; բոց ՝ աջ; լայնություն ՝ 700px; բարձրություն ՝ 400px;) #պարզ (պարզ ՝ երկուսն էլ;) #ոտք (ֆոն ՝ #0066FF; բարձրություն ՝ 80px; լայնությունը `900 պիքս;)

Այսպես է դիտվում կայքի արգելափակման դասավորության մեր օրինակը դիտարկիչի պատուհանում.

Իհարկե, այս օրինակը պարզապես տեսողական օգնություն է ՝ ցույց տալու համար, թե ինչպես է աշխատում բլոկի դասավորությունը: Իրական դասավորությունը կատարվում է css- ում ներառված ֆոնային պատկերների և պատկերանշանների միջոցով: Եվ նաև HTML և css ծածկագրերում հաքերների ներառմամբ `բոլոր բրաուզերներում ցուցադրումը օպտիմալացնելու համար:

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

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

• Տեսողական ուղիների ստեղծում ՝ օգտվողներին ուղղորդելու համար
• Տարբեր բաղադրիչների համադրումը համահունչ ամբողջության մեջ
• Տեղեկատվության տեսակավորում

Եվ, իհարկե, ցանցը կատարյալ է ուղիղ գծերի գեղեցկությունը ցուցադրելու համար: Ստորև մենք պատրաստել ենք կայքեր, որոնցում ցանցը ավելին է, քան պարզապես հիմնական ձևավորում:

Եզրակացություն

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

Ոչ, դա ամենևին չի նշանակում, որ կայքի արտաքին տեսքը պետք է լինի գծային և պարզ: Երբեմն նույնիսկ պարզ երկրաչափական ձևերը, որոնք հմտորեն «նոսրացված» են գույներով, պատկերներով և գրաֆիկայով (հիշեք հարթ դիզայնը), կարող են իսկապես գրավիչ լինել: Ինչ եք կարծում? Արդյո՞ք բլոկների նման հստակ բաժանումը գրավիչ տեսք չունի:

Ողջույն, Ընթերցող:

Ինչու՞ մեզ պետք են վայրէջքի էջեր 10 բլոկներում, եթե կարևոր տեղեկությունները առաջին էկրանին են, և դուք կարող եք սահմանափակվել «Մեր մասին», «Servicesառայություններ», «Գներ» և «Կոնտակտներ» բաժիններով: Պատասխանը պարզ է ուշադրություն գրավելգնորդ և մոտիվացնել հարաբերությունների մեջ մտնել արտադրանքի հետ և դրդել գնել ապրանք:

Առավել օգտագործված այցելուների ներգրավման տեխնիկաապրանք գնելու գործընթացում է AIDA(անգլ. Attention-Interest-Desire-Action- ից) և PMPHS(Painավ-Ավելի ցավ-հույս-լուծում): Այս տեխնիկայի հիման վրա կառուցվում է վայրէջքի էջի տրամաբանական կառուցվածքը և որոշվում են այն բլոկները, որոնք ներկա կլինեն վայրէջքի վրա:

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

Այս գրառման մեջ դուք կծանոթանաք առաջին կեսին `10 բլոկ: Մնացած 10 օրինակների համար սպասեք հաջորդ հոդվածին օգոստոսին:

Վայրէջքի էջերի 20 բլոկ - ընտրեք ձերն

1. Ապրանքի բլոկ-բաղադրիչ մասեր, ամբողջական փաթեթ;
2. Արգելափակման երաշխիքներ (եռակի);
3. Արգելափակեք ձեր ընկերության ձեռքբերումների / առավելությունների մասին.
4. Արգելափակել ընկերության աշխատակիցների մասին;
5. Արգելափակել ընկերության ծառայությունները / բաժինները.
6. Արգելափակել գործընկերների / հաճախորդների մասին;
7. CTA (Գործողության կոչ, գործողության կոչ);
8. Հաճախորդի բլոկ-առավելությունները ձեր արտադրանքի օգտագործումից («Ինչու՞ մեզ»);
9. Արգելափակել ծառայության մատուցման գործընթացը (առաքում, գործարք կատարելու եղանակ);
10. Արգելափակել հաշվիչը;
11. Արգելափակել հատուկ առաջարկով + ժամանակի սահմանափակումով;
12. Արգելափակել նվերով + նվեր ստանալու պայմանները;
13. Արգելափակել ընկերության գտնվելու վայրի քարտեզով («Ինչպես հասնել այնտեղ»);
14. Արգելափակել կոնտակտային տվյալներով;
15. Արգելափակել համեմատության աղյուսակը;
16. Արգելափակել նույնականացումը «Ո՞ւմ համար»;
17. Արգելափակել ՀՏՀ -ն:

* Արգելափակման համարակալումը մոտավոր է. Վայրէջքի էջում բլոկների կարգը կախված է խորշից: Դուք կարող եք որոշել բլոկների կարգը ՝ օգտագործելով միևնույն Yandex Metrics գործիքները (ոլորման քարտեզ, ջերմային քարտեզ), այս հոդվածը կօգնի ձեզ:

Պարունակում է հիմնական տեղեկատվություն վայրէջքի էջի այցելուի ՝ ձեր ընկերության USP- ի համար: Desirableանկալի է, որ այս տեղեկատվությունը նույնպես մրցունակ լինի: Կախված նիշից, նման տեղեկությունները կարող են լինել `ապրանքի գինը (1 հատի համար 488 ռուբլիից), առաքման ժամանակը (առաքումը 2 օրում), արտադրության վայրը (անմիջապես Գերմանիայից): կարող եք ավելին իմանալ նախորդ հոդվածից:

Հարմար:մեծածախ թեմաներ; խորշեր, որտեղ գնորդը բավարար չափով տեղյակ չէ ապրանքի (հիմնականում ապրանքի) առավելությունների մասին:

Բլոկը կարող է լինել գնորդի «Ինչու՞ է այդքան թանկ» հարցի պատասխանը, եթե այն պարունակում է ապրանքի բնութագրերի մանրամասն նկարագրություններ: Սա անհրաժեշտ է պոտենցիալ հաճախորդի գլխում ցանկության օբյեկտի ավելի հստակ պատկեր ստեղծելու համար:

3. Ապրանքի բլոկ-բաղադրիչ մասեր, ամբողջական փաթեթ

Հարմար:բարդ ծառայությունների նկարագրություններ; հանգույցներ ժամանցի կազմակերպման համար. ապրանքների փաթեթի նկարագրություններ:

Եթե ​​ապրանքի բնութագրիչների մասին բլոկը ցույց է տալիս արտադրանքը ամբողջությամբ, ապա բաղադրամասերի մասին բլոկը ապրանքը (ապրանքը կամ ծառայությունը) տրոհում է տերմինների:

4. Արգելափակման երաշխիքներ (եռակի)

Հարմար:ցանկացած վայրէջքի էջ:

Ամենից հաճախ այն գտնվում է բլոկից հետո `ապրանքի արժեքով: Այն կառուցված է թիրախային լսարանի առարկությունների հիման վրա և փակում դրանք ՝ ցուցադրելով ձեր ընկերության ծառայության առավելությունները:

5. Արգելափակել ձեռքբերումները / օգուտները

Հարմար:ցանկացած վայրէջքի էջ; ֆիրմային արտադրանք հայտնի ընկերության կողմից; հատկապես կարևոր է խիստ մրցունակ խորշում:

Հատկապես կարևոր է բարձր մրցունակության մեջ գտնվող բիզնեսի համար: Օրինակ, եթե մի քանի ընկերություններ առաջարկում են նույն արտադրանքը, ապա նա, ով ապահովում է գործարքի համար առավել հարմար պայմաններ և ցույց է տալիս իր ընկերության աշխատանքի իրավասությունը (ո՞ր տարվանից է ընկերությունը, իրականացված նախագծերի թիվը, զեղչեր և նվերներ մշտական ​​հաճախորդներին, վաճառքի կետերի քանակը և այլն):

6. Արգելափակել ընկերության աշխատակիցների մասին

Հարմար:ծառայությունների մատուցման ոլորտները

Օգտագործումը նպատակահարմար է այնպիսի իրավիճակում, երբ դա կարևոր չէ ԻՆՉգնորդը կստանա, և ԻՆՉՊԵՍարդյունքը կհասնի:

7. Արգելափակել ընկերության ծառայությունների / բաժինների մասին

Հարմար:բարդ ծառայությունների թեմաներ; վայրէջքի էջեր բազմաթիվ արտադրանքներով մեկ կիրառման տարածքում:

8. Արգելափակել գործընկերներին

Հարմար: ցանկացած վայրէջքի էջ:

Բլոկը մեծացնում է այցելուների վստահությունը, եթե դուք օգտագործում եք հայտնի հաճախորդների լոգոները:

Հարմար:տեղեկատվական-բիզնես; սպասարկման ոլորտ; տեղեր, որտեղ գործընթացը կարևոր է (ԻՆՉՊԵՍ)ստանալով արդյունքը:

Գործերի հիանալի հավելում `տեսողական ցուցադրում ԵԼ / ԷԼ Է, ինչպես նաև վիճակագրությամբ ինֆոգրաֆիկա և տպագիր էկրաններ:

Nicույցեր, որտեղ ցույցը կարևոր է.

Շարունակելի…

Այսօր մենք քննարկեցինք վայրէջքի էջի առաջին 10 բլոկները, առաջիկայում ավելի շատ կհրապարակենք.

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

Կայքը գրավիչ է անիմացիոն ֆոնով, ինտերակտիվ էֆեկտներով

Ավելի գեղեցիկ գրատպություն

Պարզեցված ինտերֆեյսերը ճանապարհ բացեցին գեղեցիկ տիպագրության գաղափարի համար (ինչպես նաև հեշտ օգտագործվող վեբ գործիքներ, ինչպիսիք են Google Fonts- ը և Adobe Typekit- ը-ընդլայնելով զարգացման հնարավորությունները հսկայական առցանց գրադարաններով): Գրությունների (կարդալու և հասկանալու համար) պարզությունը «գեղագրություն» հասկացության մեջ տարածք է ազատում այլ տարրերի համար: Այն, ինչ դուք պետք է փորձեք կապել, ընթեռնելի տառատեսակն է և ընտրանքների զվարճալի նորությունը:

գյուղական ոճի ռեստորանային կայք. չափված և անշտապ, առանց աղմուկի (գրավիչ հակադրություններ) `լավ ընտրված գույներով և տառատեսակներով: Երկրի ոճը (գեղջուկ ոճ) բնության հետ մտերմության զգացում է հաղորդում: Թռչունների հետ կապված բրենդավորումը արտացոլված է գրաֆիկականորեն (նկարազարդումներ, հետնաշերտի գծագրեր): Ընդհանրապես, սա ինքնության մի մասն է ՝ «բազե և հավ» (անգլ. Hawk and Hen) ՝ որպես հաջող որսի խորհրդանիշ

Պատկերազարդումներ և գծանկարներ

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

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

Կայքն ունի գեղեցիկ միկրոկառուցվածքներ և նկարազարդումներ: և ամբողջ կայքի «Baby-style»-ը դիզայնը վերածում է խաղի

Նախկինում ինտերնետում տարածված էր դասավորության աղյուսակային տեսակը, որին այն նվիրված է: Այնուամենայնիվ, ժամանակի ընթացքում կայքի կառուցվածք ստեղծելու այս մոտեցումը հնացավ և փոխարինվեց բլոկի դասավորությամբ:

Տարբերությունները բլոկի դասավորության և աղյուսակի դասավորության միջև

Եթե ​​սեղանի դասավորությունը ենթադրում է, որ էջի բովանդակությունը պիտակի ներսում է

Բլոկի դասավորությունը զուրկ է սեղանի դասավորության թերություններից. Այն ավելի լավ է ինդեքսավորվում որոնիչների կողմից, դրա ծածկագիրը այնքան էլ տարածված չէ, և բլոկները

Վերջնական HTML փաստաթուղթը բլոկների հավաքածու է