Standartiniai matmenys svetainės: funkcijos, reikalavimai ir rekomendacijos

Technologijos vystymasis svetainių - labai įvairiapusė procesas. Tačiau visos jos etapai gali būti suskirstyti į dvi pagrindines sudedamąsias dalis - funkcinis ir išorinio apvalkalo. Arba, kaip vidutinės webmaster elgetauti pabaigoje ir Priekiniai End atitinkamai. Žmonės, kurie pirko savo svetaines Web Development studijos, dažnai naiviai tiki, kad būtina sutelkti dėmesį tik į funkcionalus, ir tai bus teisingas sprendimas. Bet tai yra tiesa labai, labai retais atvejais, dažniausiai steigiamų projektų Pasibaigus beta testavimo stadijoje. Grafinio dizaino ir vartotojo sąsaja poilsio tiesiog privalo laikytis interneto plėtros standartus ir būti patogi.

Pirmasis akmuo susiduria su sąsajos dizaineris, arba dizaineris - yra svetainę išdėstymo plotis. Galų gale, tai yra būtina atkreipti sąsajas jai. Intuityviai yra du požiūriai - arba padaryti atskirus maketus už kiekvieną iš populiariausių ekrano rezoliucijas, arba galite sukurti vieną versiją svetainėje visiems žemėlapius. Abu variantai būtų neteisinga, bet Pirmasis dalykus.

Standartinis plotis pikseliais teritorijai jums kada nors reikės

Prieš prisitaikanti išdėstymo masinio reiškinio vystymosi buvo iš svetainės kūrimas su tūkstančiais pikselių pločio. Šis skaičius buvo pasirinkta dėl vienos paprastos priežasties - kad svetainė buvo padėtas ant bet ekrane. Ir yra tam tikras loginis, bet tarkime, kad asmuo yra dar bent HD monitorius ant darbastalio. Tokiu atveju, jūsų išdėstymas atrodo mažytė juostelę ekrano, kur viskas yra išlietas vienoje krūvoje viduryje, ir ant didžiulio ne kosmoso pusių. Dabar tarkime, kad žmogus atėjo į jūsų svetainę iš tabletės su 800 pikselių pločio ekrane, ir tikrinamas nustatymus "Rodyti Svetaine pilną versiją." Tokiu atveju, jūsų svetainė bus taip pat rodomas neteisingai, nes tiesiog netelpa į ekraną.

Iš šių svarstymų, galime daryti išvadą, kad fiksuotas plotis už išdėstymas, mes tiesiog netelpa ir norite rasti kitą būdą. Leiskite analizuoti atskiras išdėstymą kiekvienoje ekrano plotį idėją.

Maketai visoms progoms

Jei pasirinkote kaip strategija sukurti maketai visiems ekrano dydžių rinkoje, tada jūsų svetainė bus labiausiai unikalus internete. Galų gale, šiandien jis yra tiesiog neįmanoma padengti visą spektrą įrenginiams, bandant padaryti tikslią nustatymą kiekvieną variantą. Bet jei jums sutelkti dėmesį į populiariausių monitorius sprendimo ir ekranu, idėja yra gera. Jo vienintelis trūkumas - finansinės sąnaudos. Galų gale, kai dizaineris sąsaja dizaineris ir programuotojas bus priversta 5 ar 6 kartus atlikti tą patį darbą, projektas kainuos neproporcingai pradžių sodinami biudžeto kainas.

Todėl gali pasigirti versijų skirtingų ekranų gausa gali būti išskyrus tai, kad svetainės-odnostranichniki kurio tikslas - parduoti vieną produktą ir būtinai tai daryti gerai. Na, jei nesate vienas iš tų Landing, multi-svetainę, tai reiškia, kad dar viena priežastis.

Populiariausi dydžiai svetainių

Kompromisas tarp dviejų kraštutinumų yra išdėstymo brėžinys trijų ar keturių ekrano dydžio. Tarp jų vienas turi būti išdėstymas mobiliesiems įrenginiams. Likusi reikia pritaikyti mažų, vidutinių ir didelių darbastalio ekrano. Kaip pasirinkti svetainės plotį? Žemiau mes pateikiame HotLog paslaugų statistiką 2017 gegužės, kuris rodo mums apie prietaiso įvairių ekrano rezoliuciją populiarumo paskirstymo, taip pat pasikeitus šio rodiklio dinamiką.

Iš lentelės galima sužinoti, kaip nustatyti, svetainės, kurią norite naudoti dydį. Be to, galima daryti išvadą, kad labiausiai paplitęs formatas šiandien yra per 1366 ekranas 768 taškų. Šie ekranai yra įrengti biudžeto nešiojamas, todėl jų populiarumas yra natūralus. Kitas populiariausias yra "Full HD" monitorių, kuris yra aukso standartas filmus, žaidimus, ir todėl sukurti svetainės maketus. Toliau pateiktoje lentelėje matome leidžia mobiliuosius įrenginius 360 x 640 taškų, taip pat įvairių įgyvendinimo variantų darbastalio ir mobiliųjų ekranus vėliau.

dizaino maketą

Taigi, išanalizavus statistinius duomenis, galime daryti išvadą, kad optimalus plotis svetainėje turi 4 variantus:

1. Versija nešiojamieji kompiuteriai su 1366 pikselių pločio.
2. "Full HD" versija.
3. 800 pikselių pločio dydžio išdėstymą ekrane dėl mažų darbastalio monitorių.
4. Mobili portalo versija svetainę - 360 pikselių pločio.

Tarkime, mes nusprendėme, ką norite naudoti generuojamos kodo dydį svetainėje. Bet toks projektas dar būtų brangu. Todėl mano, kad daugiau galimybių, šį kartą be fiksuotą pločio naudojimo.

Padaryti lankstų išdėstymą

Yra alternatyva požiūris, kad mums reikia tik prisitaikyti minimalaus dydžio ekrano, o absoliutus dydis svetainių bus paprašyta proc. Šiuo atveju sąsajos elementus, pavyzdžiui, meniu, mygtukų ir logotipai, gali būti apibrėžta absoliučiais skaičiais, sutelkiant dėmesį į minimalaus dydžio pikseliais ekrano plotį. Blokai su turiniu, priešingai, bus tiesiamas pagal procentus ekrano zonos plotis nurodyta. Šis metodas leidžia ne aptikti svetainėje dydis kaip suvaržymų dizainerio ir talento ritmas šį niuansą.

Kas yra aukso santykis, ir kaip naudoti tinklalapius išdėstymą?

Net Renesanso daug architektai ir menininkai bandė suteikti savo kūrinius tobulas formos ir proporcijos. Atsakymų į klausimus apie tokių proporcijų pasekmes, jie kreipėsi į visų mokslų karalienė - matematika.

Nuo Antikos dienų išrado proporcingai kurį mūsų akis suvokia kaip pati natūraliausia ir elegantiškas, nes jis yra visur gamtoje. Atradėjas iš šio santykio formulę buvo talentingas graikų architektas pavadino Phidias. Jis apskaičiavo, kad jei dauguma proporcijomis susijęs su žema, kaip visuma, suteikia didesnį, tai dalis atrodys gerai. Tačiau šiuo atveju, jei norite padalinti asimetriškai objektą. Ši dalis vėliau tapo vadinamas aukso santykį, kad vis dar nėra pervertinti savo svarbą pasaulio kultūros istorijoje.

Grįžkime prie web dizainas

Tai labai paprasta - naudojant aukso santykį, galite sukurti puslapius, bus labiausiai patinka žmogaus akis. Apskaičiuojamas pagal į aukso pjūvio formulė, randame neracionalus skaičius 1,6180339887 ..., bet dėl patogumo galite naudoti suapvalintą reikšmę 1,62. Tai reiškia, kad mūsų puslapis blokai turėtų būti 62% ir 38% nuo visos, nesvarbu, kokio dydžio generuoja kodą už svetainėje jūs naudojate. Pavyzdžiui, jūs galite pamatyti tokią schemą:

Naujų technologijų naudojimas

Šiuolaikinės technologijos išdėstymo svetainių leidžia jums tiksliai perteikti idėjas projektuotojo ir dizainerio, todėl dabar galite sau leisti drąsesni idėjų kaip ne iš interneto technologijų aušros įgyvendinimą. Nebereikia daug galvosūkį, ką turėtų būti svetainę dydis. Su tokiais dalykais, kaip blokas atėjimas prisitaikanti išdėstymą, dinaminei apkrovai turinio ir šriftais, interneto svetainių kūrimas tapo daug kartų malonesnis. Galų gale, šios technologijos turi mažiau apribojimų, nors jie yra. Bet kaip jūs žinote, bet neapsiribojant, nebūtų meno. Mes rekomenduojame jums naudoti tikrai kūrybingą požiūrį į projektavimo - aukso skyrių. Su juo jūs galėsite efektyviai ir gražiai užpildyti darbo sritį, nesvarbu, kokio dydžio ar svetaines paprašė savo šablonus.

Kaip padidinti darbo srities svetainė

Yra tikimybė, kad jūs neturite pakankamai erdvės, kad tilptų visas sąsajos elementus į mažo dydžio maketą. Tokiu atveju, jums reikės pradėti galvoti kūrybiškai, ar net daugiau kūrybiškumo, nei jūs veikėte anksčiau.

Maksimalus atlaisvinti erdvę svetainėje, kaip įmanoma, slepiasi į pop-up meniu navigaciją. Šis požiūris yra logiškas naudoti ne tik mobili, bet ir ant stalo. Galų gale, vartotojas nereikia visą laiką žiūrėti į tai, ką turi rubrikas savo svetainėje - jis atėjo už turinį. Vartotojas nori būti gerbiamas.

Kurio geras būdas paslėpti meniu pavyzdys yra šis išdėstymas (nuotraukoje žemiau).

Viršutiniame kampe raudonu srityje, jūs galite pamatyti kryžius, spauskite ant meniu, kuris slepia mažą piktogramą, paliekant vartotojui vien su svetainės turinį.

Tačiau tai nebūtina, galite palikti navigacija, kuri yra visada akyse. Bet jūs galite padaryti jį gražus dizaino elementas, o ne tik Nuorodų į populiariausių svetainės sąrašą. Naudoti intuityvi piktogramas be tekstines nuorodas ar net juos pakeisti. Ji taip pat leis savo svetainę efektyviau naudoti ekrano erdvę ant jūsų prietaise.

Geriausios svetainės - prisitaikanti

Jei jūs nežinote, kuris iš jų pasirinkti išdėstymą svetainėje, visa tai tik už jus. Sutaupyti plėtros išlaidas ir tuo pačiu metu negali prarasti auditoriją, nes prastos išdėstymą tam tikru prietaisu, naudokite reaguoja web dizainas.

Prisitaikanti vadinamas dizainu, atrodo skirtingų įrenginių vienodai gerai. Šis metodas leis jūsų svetainė turi būti aiški ir lengvai net nešiojamas, bent jau ant tabletės, net ant telefono. Tai pasiekti šis poveikis yra dėl automatinių pokyčių darbo srityje ekrano plotį. Naudojant prisitaikanti stiliaus lapus svetainėje, jūs vartojate teisingą sprendimą galimą.

Kas išskiria prisitaikanti konstrukcija skirtingų versijų savo svetainės prieinamumą

Reaguoja dizainas skiriasi nuo mobiliojo svetainę, kad pastaruoju atveju vartotojas gauna html kodas, kuris skiriasi nuo darbastalio. Tai trūkumas iš siekiant optimizuoti serverio našumą, taip pat paieškos optimizavimas taško. Be to, tuo sunkiau tampa apsvarstyti statistiką pagal skirtingų versijų svetainėje. Pritaikoma požiūris neturi trūkumų.

Prisitaikyti skirtingiems įrenginiams pasiekiamas dėl to, kad išdėstymo plotį arba procentai per transporto blokų laisvo ploto (vertikalioje plokštumoje, o ne horizontalios smartfon ant stalo), arba atskirų išdėstymus sukuriant įvairius ekranus.

Galite sužinoti daugiau apie interaktyvų dizainą ir kurti galite iš knygų.