Svetainių kūrimo technologija yra labai daugialypis procesas. Tačiau vis tiek visus jo etapus galima suskirstyti į du pagrindinius komponentus – funkcinį ir išorinį apvalkalą. Arba, kaip įprasta žiniatinklio valdytojams, atitinkamai back-end ir front-end. Žmonės, užsisakantys savo svetaines iš interneto svetainių kūrimo studijų, dažnai naiviai tiki, kad verta orientuotis tik į funkcionalumą, ir tai bus teisingas sprendimas. Tačiau tai galioja labai, labai retais atvejais, dažniausiai pradedantiesiems projektams beta versijos testavimo etape. Kitu atveju grafinis dizainas ir vartotojo sąsaja tiesiog turi atitikti žiniatinklio kūrimo standartus ir būti patogūs.
Pirmasis kertinis akmuo, į kurį susiduria sąsajos kūrėjas arba dizaineris, yra svetainės išdėstymo plotis. Juk tam būtina nubrėžti sąsajas. Grynai intuityviai atsiranda du būdai – arba sukurti atskirus išdėstymus kiekvienai populiariai ekrano skyrai, arba sukurti vieną svetainės versiją visiems ekranams. Ir abi parinktys bus neteisingos, bet pirmiausia viskas.
Standartinis svetainės plotis pikseliaisskirta Runet
Prieš kuriant adaptyvųjį išdėstymą, tūkstančio pikselių pločio svetainės kūrimas buvo masinis reiškinys. Ši figūra pasirinkta dėl vienos paprastos priežasties – kad svetainė tilptų į bet kurį ekraną. Ir tai turi savo logiką, bet tarkime, kad žmogus vis tiek turi bent HD monitorių darbalaukyje. Tokiu atveju jūsų išdėstymas atrodys kaip mažytė juostelė ekrano viduryje, kur viskas sulipusi į vieną krūvą, o šonuose – didžiulė nenaudojama erdvė. Dabar tarkime, kad asmuo jūsų svetainę pasiekia planšetiniame kompiuteryje su 800 pikselių plačiu ekranu ir nustatymuose pažymėta parinktis „Rodyti visą svetainę“. Tokiu atveju jūsų svetainė taip pat bus rodoma neteisingai, nes ji tiesiog netilps į ekraną.
Iš šių svarstymų galime daryti išvadą, kad fiksuotas plotis išdėstymui mums tikrai netinka ir reikia ieškoti kito būdo. Išanalizuokime atskiro kiekvieno ekrano pločio išdėstymo idėją.
Išdėstymai visoms progoms
Jei pasirinkote kaip strategiją kurti maketus visiems rinkoje esantiems ekranų dydžiams, jūsų svetainė bus unikaliausia visame internete. Juk šiandien tiesiog neįmanoma aprėpti viso įrenginių asortimento, stengiantis tiksliai sureguliuoti kiekvieną variantą. Bet jei sutelkiate dėmesį į populiariausias monitorių ir įrenginių ekranų raiškas, idėja nėra bloga. Vienintelis jo trūkumas yra finansinės išlaidos. Juk kai sąsajos dizaineris, dizaineris ir programuotojas bus priversti tą patį darbą atlikti 5 ar 6 kartus, projektas kainuosneproporcingai didesnė nei iš pradžių numatyta kaina.
Todėl tik vieno puslapio svetainės gali pasigirti skirtingų ekranų versijų gausa, kurių tikslas – parduoti vieną produktą ir būtinai tai padaryti gerai. Na, jei turite ne vieną iš šių nukreipimų, o kelių puslapių svetainę, turėtumėte galvoti toliau.
Populiariausi svetainių dydžiai
Kompromisas tarp dviejų kraštutinumų yra trijų ar keturių ekrano dydžių išdėstymas. Tarp jų turi būti mobiliųjų įrenginių išdėstymas. Likusi dalis turėtų būti pritaikyta mažiems, vidutiniams ir dideliems darbastalio ekranams. Kaip pasirinkti svetainės plotį? Žemiau pateikiame 2017 m. gegužės mėnesio HotLog paslaugos statistiką, kuri parodo įvairių įrenginių ekranų raiškos populiarumo pasiskirstymą bei šio rodiklio dinamiką.
Iš lentelės galite sužinoti, kaip nustatyti norimos naudoti svetainės dydį. Be to, galime daryti išvadą, kad šiandien labiausiai paplitęs formatas yra 1366 x 768 pikselių ekranas. Tokie ekranai montuojami į biudžetinius nešiojamuosius kompiuterius, todėl jų populiarumas yra natūralus. Kitas populiariausias yra Full HD monitorius, kuris yra auksinis vaizdo įrašų, žaidimų, taigi ir svetainių maketų kūrimo standartas. Toliau lentelėje matome mobiliųjų įrenginių skiriamąją gebą 360 x 640 pikselių, taip pat įvairias darbalaukio ir mobiliųjų įrenginių ekranų parinktis po jos.
Išdėstymo kūrimas
TaigiIšanalizavę statistiką, galime daryti išvadą, kad optimalus svetainės plotis turi 4 variantus:
- Nešiojamojo kompiuterio versija su 1366 piks. pločio.
- Full HD versija.
- 800 pikselių pločio išdėstymas, skirtas rodyti mažuose stalinių kompiuterių monitoriuose.
- Mobilioji svetainės versija – 360 pikselių pločio.
Tarkime, nusprendėme, kokį dydį naudoti sugeneruotam svetainės š altiniui. Tačiau toks projektas vis tiek brangiai kainuotų. Taigi pažvelkime į daugiau parinkčių, šį kartą nenaudodami fiksuoto pločio.
Padaryti lankstų išdėstymą
Yra alternatyvus būdas, kai verta prisitaikyti tik prie minimalaus ekrano dydžio, o patys svetainių dydžiai bus nustatomi procentais. Tuo pačiu metu tokie sąsajos elementai kaip meniu, mygtukai ir logotipas gali būti nustatomi absoliučiomis reikšmėmis, sutelkiant dėmesį į minimalų ekrano pločio dydį pikseliais. Priešingai, blokai su turiniu bus ištempti pagal nurodytą ekrano srities pločio procentą. Šis metodas leidžia nustoti suvokti svetainių dydį kaip dizainerio apribojimą ir sumaniai įveikti šį niuansą.
Kas yra auksinis pjūvis ir kaip jį pritaikyti tinklalapio išdėstymui?
Net Renesanso laikais daugelis architektų ir menininkų stengėsi savo kūriniams suteikti tobulą formą ir proporcijas. Dėl atsakymų į klausimus apie tokios proporcijos reikšmes jie kreipėsi į visų mokslų karalienę – matematiką.
Nuo senovės buvo išrasta proporcija, kurią mūsų akis suvokia kaip natūraliausią ir elegantiškiausią,nes jis yra visur gamtoje. Tokio santykio formulės atradėjas buvo talentingas senovės graikų architektas, vardu Phidias. Jis apskaičiavo, kad jei didesnė proporcijos dalis yra susijusi su mažesne, kaip visuma yra susijusi su didesne, tada tokia proporcija atrodys geriausiai. Bet taip yra, jei norite padalinti objektą asimetriškai. Ši proporcija vėliau buvo pavadinta aukso pjūviu, kuris vis dar nepervertina savo svarbos pasaulio kultūros istorijai.
Atgal į interneto dizainą
Tai labai paprasta – naudodami auksinį pjūvį galite sukurti puslapius, kurie būtų kuo malonesni žmogaus akiai. Skaičiuodami pagal aukso pjūvio formulės apibrėžimą, gauname neracionalųjį skaičių 1, 6180339887 …, tačiau patogumui galime naudoti suapvalintą reikšmę 1, 62. Tai reikš, kad mūsų puslapio blokai turėtų būti 62 % ir 38 % visos, nesvarbu, kokio dydžio sugeneruotas jūsų naudojamos svetainės š altinis. Šioje diagramoje galite pamatyti pavyzdį:
Naudokite naujas technologijas
Šiuolaikinės svetainės maketavimo technologijos leidžia tiksliai perteikti planuotojo ir dizainerio idėją, todėl dabar galite sau leisti įgyvendinti drąsesnes idėjas nei interneto technologijų aušroje. Jums nebereikia sunkiai galvoti, koks turėtų būti svetainės dydis. Atsiradus tokiems dalykams kaip blokų adaptyvus išdėstymas, dinaminis turinio ir šriftų įkėlimas, svetainių kūrimas tapo daug malonesnis. Juk šios technologijos yramažiau apribojimų, nors jie vis dar yra. Bet, kaip žinote, be ribų nebūtų meno. Siūlome naudoti vieną tikrai kūrybišką dizaino metodą – aukso pjūvį. Su juo galite efektyviai ir gražiai užpildyti darbo sritį, nesvarbu, kokius svetainės dydžius nustatėte savo šablonuose.
Kaip padidinti svetainės darbo erdvę
Tikėtina, kad neturėsite pakankamai vietos visiems vartotojo sąsajos elementams sutalpinti į mažą išdėstymą. Tokiu atveju turėsite pradėti mąstyti kūrybiškai ar net kūrybiškiau nei darėte anksčiau.
Daugiausia atlaisvinkite vietos svetainėje paslėpę naršymą iššokančiajame meniu. Logiška naudoti šį metodą ne tik mobiliuosiuose įrenginiuose, bet ir staliniuose kompiuteriuose. Juk vartotojui nereikia visą laiką žiūrėti, kokios antraštės yra jūsų svetainėje – jis atėjo dėl turinio. Ir vartotojo norai turi būti gerbiami.
Gero būdo paslėpti meniu pavyzdys yra toks išdėstymas (nuotrauka žemiau).
Viršutiniame raudonos srities kampe matote kryžiuką, kurį spustelėjus meniu bus paslėpta mažoje piktogramoje, o vartotojas bus paliktas vienas su svetainės turiniu.
Tačiau tai neprivaloma, galite išeiti iš navigacijos, kuri visada bus matoma. Bet jūs galite padaryti jį gražiu dizaino elementu, o ne tik populiarių nuorodų sąrašu svetainėje. Be teksto nuorodų arba net vietoj jų naudokite intuityvias piktogramas. tai tas patsleis jūsų svetainei efektyviau išnaudoti ekrano vietą naudotojo įrenginyje.
Geriausia svetainė yra jautri
Jei nežinote, kokį svetainės išdėstymą pasirinkti, tada jums viskas paprasta. Jei norite sutaupyti kūrimo išlaidų ir tuo pačiu neprarasti auditorijos dėl prasto kai kurių įrenginių išdėstymo, naudokite prisitaikantį dizainą.
Reaguojantis dizainas yra dizainas, kuris vienodai gerai atrodo skirtinguose įrenginiuose. Šis metodas leis jūsų svetainei būti suprantamai ir patogiai net nešiojamajame kompiuteryje, net planšetiniame kompiuteryje, net išmaniajame telefone. Šis efektas pasiekiamas automatiškai keičiant ekrano darbo srities plotį. Savo svetainėje naudodami interaktyvius stiliaus lapus priimate geriausią įmanomą sprendimą.
Kuo skiriasi interaktyvus dizainas ir svetainės versijos
Reaktyvus dizainas skiriasi nuo mobiliosios svetainės versijos tuo, kad pastaruoju atveju vartotojas gauna html kodą, kuris skiriasi nuo darbalaukio. Tai yra trūkumas serverio našumo optimizavimo ir paieškos sistemų optimizavimo požiūriu. Be to, tampa sunkiau apskaičiuoti skirtingų svetainės versijų statistiką. Pritaikomas metodas neturi šių trūkumų.
Reagavimas į įvairius įrenginius pasiekiamas naudojant išdėstymą su nurodyto pločio procentais arba perkeliant blokus į laisvą vietą (vertikalioje plokštumoje išmaniajame telefone, o nehorizontaliai darbalaukyje) arba sukurti atskirus skirtingų ekranų išdėstymus.
Sužinokite daugiau apie interaktyvų dizainą ir kūrimą mūsų mokymo programose.
