Ստանդարտ չափսերի կայքեր: հատկանիշները, պահանջներ եւ առաջարկություններ

Մեխանիկա զարգացումը կայքերում շատ բազմակողմանի գործընթաց է. Դեռ նրա բոլոր փուլերը կարելի է բաժանել երկու հիմնական բաղադրիչների մի ֆունկցիոնալ եւ արտաքին շապիկ: Կամ, քանի որ միջին webmaster Beg End եւ Front End համապատասխանաբար: Մարդիկ, ովքեր գնել են իրենց կայքերը վեբ զարգացման ստուդիաներում, հաճախ միամտորեն կարծում են, որ դա անհրաժեշտ է կենտրոնանալ միայն ֆունկցիոնալ, եւ դա կլինի ճիշտ որոշում. Բայց սա ճիշտ է մի շատ, շատ հազվադեպ առիթներով, սովորաբար սկսնակ նախագծերի փուլում է բետա փորձարկման. Մնացած է գրաֆիկական դիզայնի եւ ինտերֆեյսի, պարզապես պարտավոր են պահպանել վեբ զարգացման չափանիշներին եւ պետք է հարմարավետ.

Առաջին անկյունաքարը կանգնած է ինտերֆեյսի դիզայներ, կամ դիզայներ - Սա լայնությունը կայքի դիրքով: Ի վերջո, դա անհրաժեշտ է հրավիրել ինտերֆեյս նրա համար: Intuitively կան երկու մոտեցումներ, կամ կատարել առանձին դասավորության համար յուրաքանչյուր հայտնի էկրանի բանաձեւերի, կամ դուք կարող եք ստեղծել մի տարբերակը կայքի բոլոր քարտեզների. Երկու տարբերակները սխալ կլիներ, սակայն առաջին բաներ առաջին.

Ստանդարտ լայնությունը պիքսել համար կայքը ձեզ երբեւէ անհրաժեշտ

Մինչեւ զարգացման գործում հարմարվողական շեղման զանգվածային երեւույթի եղել զարգացումը կայքի հետ հազարավոր փիքսել լայն. Այս ցուցանիշը ընտրվել է մեկ պարզ պատճառով, - որ կայքը տեղադրված է եղել ցանկացած էկրանին. Եւ կա որոշակի տրամաբանություն, բայց եկեք ընդունենք, որ մարդը դեռ առնվազն HD մոնիտորի վրա աշխատասեղանին: Այս դեպքում, ձեր դասավորությունը կարող է թվալ, փոքրիկ շերտի կեսին էկրանին, որտեղ ամեն ինչ molded մի կույտ, եւ կողմերի հսկայական ոչ-տարածության. Այժմ եկեք ենթադրենք, որ մի մարդ եկել է Ձեր վեբ կայքը մի դեղահատ հետ էկրանի 800 պիքսել լայնությամբ, եւ ստուգվում է պարամետրերը "Ցույց տվեք Վեբ կայքի ամբողջական տարբերակը»: Այս դեպքում, Ձեր կայքը կցուցադրվի նաեւ սխալ է, քանի որ պարզապես չի տեղավորվում էկրանին:

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

Դասավորության բոլոր առիթներով

Եթե դուք ընտրել որպես ռազմավարության ստեղծելու դասավորության համար բոլոր էկրանի չափերի հասանելի է շուկայում, ապա Ձեր կայքը կլինի առավել եզակի է Ինտերնետում: Ի վերջո, այսօր դա պարզապես անհնար է ծածկել ամբողջ շրջանակը սարքերի `փորձելով կատարել ճշգրիտ համար, յուրաքանչյուր տարբերակը. Սակայն, եթե դուք կենտրոնանալ ամենատարածված մոնիտոր կարգավորման եւ էկրանի սարքերի, որ գաղափարը լավն է: Նրա միակ թերություն - ի ֆինանսական ծախսերը: Ի վերջո, երբ դիզայներ ինտերֆեյսը դիզայներ եւ ծածկագրողը ստիպված կլինի 5 կամ 6 անգամ կատարել է նույն աշխատանքը, որ նախագիծը կարժենա անհամաչափորեն սկզբանե տնկել բյուջեի գներով:

Հետեւաբար պարծենալ առատությունը տարբերակների համար տարբեր էկրանների կարող է լինել, բացի այդ կայքերը-odnostranichniki որի նպատակն է վաճառել մեկ ապրանքի եւ վստահ լինել, որ դա անել լավ. Դե, եթե դուք չեք մեկն է այն Landing, բազմազգ կայքը, այն կանգնած է պատճառը, հետագայում:

Ամենատարածված չափերը կայքերի

Փոխզիջում երկու ծայրահեղությունների է խաղարկություն դասավորության համար երեք կամ չորս էկրանի չափերի. Նրանց թվում է, մեկը պետք է լինի դասավորությունը շարժական սարքերի համար. Մնացածը պետք է հարմարեցված է փոքր, միջին եւ խոշոր սեղանադիր էկրանին. Ինչպես ընտրել լայնությունը կայքում: Ստորեւ ներկայացնում ենք HotLog սպասարկման վիճակագրություն մայիսի 2017, որը ցույց է տալիս մեզ բաշխումը ժողովրդականությունը տարբեր էկրանի բանաձեւի սարքի, ինչպես նաեւ դինամիկան փոփոխության այս ցուցանիշի.

Է սեղանի դա հնարավոր է սովորել, թե ինչպես պետք է որոշելու չափը կայքում դուք ուզում եք օգտագործել. Բացի այդ, դա կարող է եզրակացնել, որ առավել տարածված ձեւաչափը այսօր այն է, որ էկրանի է 1366-ի 768 միավոր: Այս էկրաններ են տեղադրվել են բյուջեի նոուտբուքի, ուստի նրանց ժողովրդականությունը է բնական: Հաջորդ ամենատարածված ը Full HD-մոնիտոր, որը հանդիսանում է ոսկու ստանդարտ ֆիլմերի, խաղերի, եւ, հետեւաբար, պետք է ստեղծել կայքի դասավորության. Հետագա սեղանի շուրջ մենք տեսնում ենք թույլատրել շարժական սարքերի 360 x 640 փիքսել, ինչպես նաեւ տարբեր մարմնավորումներից աշխատասեղանին եւ բջջային էկրանների հետո.

դիզայն դասավորությունը

Այնպես որ, այն բանից հետո, վերլուծելով վիճակագրությունը, մենք կարող ենք եզրակացնել, որ օպտիմալ լայնությունը Կայքը ունի 4 տատանումները:

1. Տարբերակ laptop հետ լայնությամբ 1366 պիքսել.
2. Full HD տարբերակը.
3. 800 փիքսել լայնությամբ չափի դասավորությունը ցուցադրվում փոքր desktop մոնիտորների.
4. Ալբոմներ Ծանոթություններ Մեսսենջեր Օգտվող կայքի - 360 պիքսել լայնությամբ.

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

Կատարել է ճկուն դասավորությունը

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

Որն է ոսկե հարաբերակցությունը, եւ թե ինչպես պետք է օգտագործել վեբ էջերը դասավորության.

Նույնիսկ Վերածննդի բազմաթիվ ճարտարապետներ ու արվեստագետները փորձել է տալ իր ստեղծագործությունների կատարյալ ձեւը եւ համաչափությունը. Պատասխանները հարցերին հետեւանքների նման համամասնությամբ, նրանք դիմել են թագուհուն բոլոր գիտությունների գծով.

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

Եկեք վերադառնանք վեբ դիզայնի

Դա շատ պարզ է, օգտագործելով ոսկե հարաբերակցությունը, դուք կարող եք նախագծել էջերը, որոնք կլինեն առավել հաճելի է մարդու աչքի. Հաշվարկվում է հետեւյալ բանաձեւով `ոսկե բաժնում, մենք գտնում ենք, որ իռացիոնալ թիվ 1,6180339887 ..., բայց հարմարության համար, դուք կարող եք օգտագործել կլորացվում արժեքը 1.62: Սա նշանակում է, որ մեր էջը արգելափակում պետք է լինի 62% եւ 38% - ը, ընդհանուր առմամբ, անկախ նրանից, թե ինչ չափի գեներացվել ելակետային կոդը համար կայքում դուք օգտագործում. Օրինակ, դուք կարող եք տեսնել հետեւյալ սխեմայով:

Նոր տեխնոլոգիաների կիրառումը

Ժամանակակից տեխնոլոգիաների դասավորությունը վեբ կայքերը թույլ են տալիս Ձեզ ճշգրիտ փոխանցել գաղափարները դիզայներ եւ դիզայներ, այնպես որ այժմ դուք կարող եք թույլ տալ իրականացումը համարձակ գաղափարների, քան արշալույսի ինտերնետ տեխնոլոգիաների. Այլեւս կարիք չկա շատ է Փազլ է այն, ինչ պետք է լինի չափի կայքում. Հետ գալուստը այնպիսի բաներ, ինչպիսիք են արգելափակել հարմարվողական դիրքով, դինամիկ բեռնման բովանդակության եւ տառատեսակների, վեբ կայքի զարգացման դարձել շատ անգամ ավելի հաճելի: Ի վերջո, այդ տեխնոլոգիաները ավելի քիչ սահմանափակումներ, թեեւ նրանք. Բայց ինչպես Դուք գիտեք, առանց սահմանափակման, չէր լինի ոչ մի արվեստ է: Մենք առաջարկում ենք Ձեզ օգտագործել իսկապես ստեղծագործական մոտեցում նախագծման - ի ոսկե բաժինը: Դրա հետ, դուք կկարողանաք արդյունավետ եւ լավ լրացնել աշխատանքային, անկախ նրանից, թե ինչ չափի կամ կայքեր դուք, որ ձեր կաղապարներ.

Թե ինչպես կարելի է բարձրացնել աշխատատարածք

Շանսերը են, որ դուք ստիպված չեք լինի բավարար տարածք տեղավորել բոլոր ինտերֆեյսի տարրերը դասավորությունը փոքր չափի. Այս դեպքում, դուք պետք է սկսել մտածել, ստեղծագործ, կամ նույնիսկ ավելի ստեղծագործական, քան արեցիք:

Առավելագույն ազատ տարածություն կայքում, ինչպես հնարավոր է, թաքցնելու նավարկություն է pop-up ցանկի. Այս մոտեցումը տրամաբանական է օգտագործել ոչ միայն բջջային, այլ նաեւ աշխատասեղանին: Ի վերջո, օգտագործողը չի պետք է ամբողջ ժամանակ նայում, թե ինչ ունի վերնագրեր Ձեր կայքում, դա եկել է բովանդակության. A օգտագործողը ցանկանում է հարգվեն:

Մի օրինակ է լավ միջոց է թաքցնել մենյուն հետեւյալն է դասավորությունը (պատկերված է ստորեւ):

Ի վերին անկյունում կարմիր տարածքում, դուք կարող եք տեսնել մի խաչ, սեղմեք մենյուն, որը hides մի փոքր պատկերակը, թողնելով օգտվողին մենակ կայքի բովանդակության.

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

Լավագույն կայք - հարմարվողական

Եթե Դուք չգիտեք, թե որն է ընտրել դասավորությունը, կայքի ամենը պարզապես ձեզ համար. Փրկել է զարգացման ծախսերը եւ միեւնույն ժամանակ չի կորցնում հանդիսատեսին, քանի որ աղքատ դիրքով որոշ սարքի, օգտագործել պատասխան վեբ դիզայն.

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

Ինչ տարբերակում հարմարվողական նախագծման առկայության տարբեր տարբերակների Ձեր կայքը

Արձագանքող դիզայն տարբերվում է բջջային կայքում, որպեսզի վերջինիս դեպքում օգտագործողը ստանում է HTML- կոդ, որը տարբերվում է աշխատասեղան. Սա թերություն է տեսակետից օպտիմալացնել կատարումը սերվերի, ինչպես նաեւ որոնման համակարգի օպտիմալացում. Բացի այդ, ավելի դժվար է դառնում է հաշվի առնել վիճակագրություն, ըստ տարբեր տարբերակների կայքում. Հարմարվողական մոտեցումը զուրկ թերությունների.

Կիրառելիություն տարբեր սարքերի շնորհիվ է շեղման լայնությամբ կամ տոկոսը միջոցով տրանսպորտային բլոկների մատչելի տարածքը (ուղղահայաց հարթությունում փոխարեն հորիզոնական սմարթֆոնի վրա Desktop), կամ անհատական Layouts ստեղծելով տարբեր էկրանները:

Դուք կարող եք ավելին իմանալ այն մասին արձագանքող դիզայնի եւ զարգացնել դուք կարող եք գրքերից: