Standartinės svetainės dydžiai: funkcijos, reikalavimai ir rekomendacijos

Interneto svetainių kūrimo technologijos yra labaidaugialypis procesas. Vis dėlto visus savo etapus galima suskirstyti į dvi pagrindines sudedamąsias dalis: funkcinį ir išorinį apvalkalą. Arba, kaip įprasta žiniatinklio valdytojams, "backend" ir "front-end", atitinkamai. Žmonės, kurie užsako savo svetaines iš interneto kūrimo studijų, dažnai naiviai įsitikinę, kad verta dėmesio skirti tik funkcionalumui, ir tai bus tinkamas sprendimas. Bet tai tiesa labai ir labai retais atvejais, dažniausiai paleidimo projektams beta etape. Kitais atžvilgiais grafinis dizainas ir vartotojo sąsaja paprastai turi atitikti interneto kūrimo standartus ir būti patogi vartotojui.

Pirmas kertinis akmuo, su kuriuosąsajos dizaineris ar dizaineris susiduria, yra svetainės išdėstymo plotis. Galų gale, tai būtina užfiksuoti sąsajas. Grynai intuityviai yra du būdai - arba atskiriems išdėstyti kiekvienai populiarią ekrano rezoliuciją arba sukurti vieną svetainės versiją visoms atvaizdavimui. Ir abi parinktys bus neteisingos, bet viskas bus tvarkinga.

Standartinis svetainės plotis, pikseliais RuNet

Prieš adaptuojant masinio reiškinio išdėstymąbuvo svetainės plėtojimas, kurio plotis buvo tūkstantis pikselių. Šis skaičius buvo pasirinktas dėl vienos paprastos priežasties - svetainė tinka bet kokiam ekranui. Ir tai turi savo logiką, bet darome prielaidą, kad kompiuteryje vis dar yra bent HD monitorius. Tokiu atveju jūsų išdėstymas atrodys kaip maža juostelė ekrano viduryje, kur viskas yra suvyniota kartu, o šonuose - didžiulė neužimta erdvė. Dabar darome prielaidą, kad asmuo atvyko į jūsų svetainę iš planšetinio kompiuterio su 800 pikselių pločio ekranu ir nustatymuose pažymėta "Rodyti pilną svetainės versiją". Tokiu atveju jūsų svetainė taip pat bus rodoma neteisingai, nes ji paprasčiausiai netelpa į ekraną.

Remdamiesi šiomis aplinkybėmis galime padaryti išvadą, kadFiksuoto išplanavimo plotis tiksliai neatitinka mūsų ir turime ieškoti kito kelio. Išnagrinėsime kiekvieno ekrano pločio atskiro išdėstymo idėją.

Maketai visoms progoms

Jei pasirinkote kaip maketų kūrimo strategijąvisi dydžiai ekranus pateikiami rinkoje, tada jūsų svetainė taps unikalia visame internete. Galų gale šiandien paprasčiausiai neįmanoma padengti visų prietaisų asortimento, stengdamiesi tiksliai sureguliuoti kiekvieną variantą. Tačiau jei jūs sutelksite dėmesį į populiariausias monitorių ir įrenginių ekranų rezoliucijas, tai idėja nėra bloga. Vienintelis minusas yra finansinės išlaidos. Galų gale, kai sąsajos dizaineris, dizaineris ir maketuotojas yra priverstas atlikti tą patį darbą 5 ar 6 kartus, projektas nesuderiai kainuoja daugiau nei iš pradžių nustatyta biudžete kaina.

Todėl pasigirti įvairių versijų gausaekranai gali išskirti tas vienos puslapio svetaines, kurių tikslas yra parduoti vieną produktą ir būtinai tai padaryti. Na, jei neturite vieno iš šių iškrovimų ir kelių puslapių, tada verta toliau svarstyti.

Populiariausi svetainių dydžiai

Komfortas tarp dviejų kraštutinumų yraNukreipkite tris ar keturis ekrano dydžius išdėstymą. Tarp jų vienas turi būti mobiliųjų įrenginių modelis. Likusi dalis turėtų būti pritaikyta mažam, vidutiniam ir dideliam darbalaukio ekranui. Kaip pasirinkti svetainės plotį? Toliau pateikiama "HotLog" statistinė informacija apie 2017 m. Gegužės mėn., Kurioje pateikiamas skirtingų įrenginių ekranų skirtumų populiarumo pasiskirstymas, taip pat šio pokyčio dinamika.

Iš lentelės galite sužinoti, kaip nustatyti dydįsvetainę, kurią norite naudoti. Be to, galime daryti išvadą, kad labiausiai paplitęs formatas šiandien yra 1366 ekranas ir pasiekia 768 taškus. Tokie ekranai yra įdiegti į nešiojamus kompiuterius, todėl jų populiarumas yra natūralus. Kitas populiariausias yra "Full HD" monitorius, kuris yra auksinis standartas vaizdo įrašams, žaidimams ir todėl kurti svetainių išdėstymus. Toliau lentelėje matome mobiliųjų prietaisų 360 skiriamąją gebą 640 taškų, taip pat įvairius stalinių ir mobiliųjų ekranų variantus po jo.

Išdėstymo projektavimas

Taigi, išnagrinėję statistiką, galime daryti išvadą, kad optimalus svetainės plotis turi 4 variantus:

1. Nešiojamojo kompiuterio versija, kurios plotis yra 1366 pikselių.
2. Full HD versija.
3. 800 pikselių pločio išdėstymas, skirtas rodyti mažuose stalinių kompiuterių monitoriuose.
4. Mobilioji svetainės versija yra 360 pikselių pločio.

Tarkime, mes nusprendėme, kas būtinanaudokite sukurto svetainės dydį. Tačiau toks projektas vis tiek bus brangus. Taigi leiskite apsvarstyti daugiau parinkčių, šiuo metu nenaudodami fiksuoto pločio.

Lankstus išdėstymas

Yra alternatyvus požiūris, kaiKoreguoti reikia tik esant minimaliam ekrano dydžiui, o svetainių dydžiai bus nustatyti procentais. Tokiu atveju tokie sąsajos elementai kaip meniu, mygtukai ir logotipai gali būti nustatyti absoliučiomis vertėmis, daugiausia dėmesio skiriant minimaliam ekrano pločio dydžiui pikseliais. Priešingai, blokai su turiniu bus ištempti pagal nustatytus ekrano pločio procentus. Šis metodas leidžia jums nustoti suvokti svetainių dydį kaip dizainerio ir talentingų apribojimų, kad įveiktų šį niuansą.

Kas yra auksinis santykis ir kaip jį taikyti tinklalapių išdėstymui?

Net Renesanso daugelyje architektų irmenininkai bandė duoti savo kūrinius idealiomis formomis ir proporcijomis. Atsakydami į klausimus apie šios proporcijos reikšmę, jie kreipėsi į visų mokslų karalienę - matematiką.

Nuo senovės buvo išrastasproporcija, kurią mūsų akys laiko natūraliausiu ir elegantiškesniu, nes visur yra gamtoje. Tokio santykio formos atradėjas buvo talentingas senovės graikų architektas Phidias. Jis apskaičiavo, kad jei didžioji proporcijų dalis nurodo mažesnę dalį, nes visa tai reiškia didesnį, tai ši proporcija atrodys geriausiai. Bet taip yra, jei norite objektą suskirstyti asimetriškai. Ši dalis vėliau vadinama auksine dalimi, kuri vis dar nepakankamai įvertino jos svarbą pasaulio kultūros istorijai.

Atgal į interneto dizainą

Tai labai paprasta - naudodamiesi auksine dalimi, tugalite kurti puslapius, kurie labiausiai taps žmogaus akimis. Apskaičiuojant pagal aukso skilties formulę, mes gauname neracionalų skaičių 1.6180339887 ..., bet patogumui galime naudoti apvalią 1,62 vertę. Tai reiškia, kad mūsų puslapio blokai turėtų būti 62% ir 38% viso, nepriklausomai nuo naudojamos svetainės šaltinio kodo dydžio. Pavyzdys, kurį galite pamatyti šioje schemoje:

Naudokite naujas technologijas

Šiuolaikinės svetainių dizaino technologijosleiskite tiksliai perteikti dizainerio ir dizainerio idėją, todėl dabar jūs galite sau leisti įgyvendinti daugiau drąsių idėjų nei interneto technologijų auštoje. Nebereikia rimtai įtikinti, kokio dydžio svetainė turėtų būti. Kai atvyksta tokie dalykai kaip bloko adaptacinis išdėstymas, dinamiškas turinio ir šriftų įkėlimas, svetainės kūrimas tapo daug malonesnis. Galų gale tokios technologijos turi mažiau apribojimų, nors jos ir yra. Tačiau, kaip žinote, be apribojimų nebūtų meno. Mes rekomenduojame naudoti vieną tikrai kūrybišką dizainą - auksinę dalį. Su juo galite efektyviai ir gražiai užpildyti darbo vietą, nesvarbu, kokius dydžius svetainėse nurodote savo šablonuose.

Kaip padidinti svetainės darbo vietą

Tikėtina, kad neturėsitepakankamai vietos, kad visi sąsajos elementai atitiktų mažo dydžio išdėstymą. Tokiu atveju jūs turite pradėti kūrybiškai mesti galvą ar dar kūrybiškiau nei anksčiau.

Maksimaliai padidinkite vietos svetainėje gali būtipaslėpti navigaciją iššokančiojo meniu. Šis metodas yra logiškas naudoti ne tik mobiliuosiuose įrenginiuose, bet ir staliniuose kompiuteriuose. Galų gale vartotojui nereikia visą laiką ieškoti kokių kategorijų jūsų svetainėje - jis atėjo už turinį. Ir vartotojo pageidavimus reikia gerbti.

Gero meniu paslėpimo pavyzdys yra toks išdėstymas (nuotrauka žemiau).

Viršutiniame raudonos srities kampe galite pamatyti kryžių, spustelėję ant kurios meniu paslėps nedidelę piktogramą, paliekant vartotoją atskirai su svetainės turiniu.

Tačiau to nereikia daryti, galitePalikite navigaciją, kuri visada bus matoma. Bet jūs galite padaryti tai gražiu dizaino elementu, o ne tik populiarių svetainės nuorodų sąrašu. Be tekstinių nuorodų ar net vietoj jų naudokite intuityvias piktogramas. Tai taip pat leis jūsų svetainėje efektyviau naudoti ekrano vietą vartotojo įrenginyje.

Geriausia svetainė - prisitaikanti

Jei nežinote, kurį išdėstymą pasirinkti svetainėje,tada viskas tau paprasta. Kad sutaupytumėte plėtros išlaidas ir neprarastumėte auditorijos dėl netinkamo įrenginio išdėstymo, naudokite adaptuotą dizainą.

Adaptyvus vadinamas dizainuvienodai gerai žiūri įvairias priemones. Šis metodas leis jūsų svetainę suprasti ir patogiai net nešiojamame kompiuteryje, bent jau planšetiniame kompiuteryje, net išmaniajame telefone. Šis efektas pasiekiamas automatiškai keičiantis ekrano darbo zonos pločiui. Naudojant tinkamiausius svetainės stiliaus lapus, galite pasirinkti tinkamiausią sprendimą.

Koks skirtumas tarp adaptuoto dizaino ir skirtingų svetainės versijų prieinamumo?

Adaptyvus dizainas skiriasi nuo mobiliosios versijossvetainę, kad pastaruoju atveju vartotojas gauna html kodą, kuris skiriasi nuo darbastalio. Tai yra trūkumas, kaip optimizuoti serverio našumą, taip pat optimizuoti paieškos sistemas. Be to, tampa vis sunkiau skaičiuoti skirtingų svetainės versijų statistinius duomenis. Pritaikomas požiūris neturi tokių trūkumų.

Įranga pritaikyta įvairiems įrenginiamsdėl išdėstymo su pločio procentais arba perkeliant blokus į laisvą erdvę (išmaniojo telefono vertikalioje plokštumoje, o ne horizontalioje ant darbastalio), arba sukurti atskirus išdėstymus skirtingiems ekranams.

Daugiau informacijos apie adaptuotą dizainą ir jos plėtrą galite gauti iš vadovėlių.