Šiais laikais įprasta kurti svetainę ar programą, kuri koreguoja vartotojo sąsają priklausomai nuo naršyklės ar įrenginio. Šiam tikslui pasiekti yra du būdai. Pirmasis apima skirtingų svetainės ar programos versijų kūrimą skirtingiems įrenginiams. Bet tai neefektyvu ir gali sukelti nenuspėjamų klaidų.
Ieškant patikimo, į ateitį orientuoto požiūrio, buvo sukurtas reaguojantis arba prisitaikantis dizainas. Jame pagrindinis dėmesys skiriamas vienos išdėstymo versijos kūrimui, kuri automatiškai prisitaiko prie skirtingų naršyklių ar įrenginių.
Šiame straipsnyje mes sužinosime apie reaguojantį interneto dizainą ir pagrindinius principus, kurie padės jums sukurti nuostabią svetainę.
Reaguojantys interneto dizaino ingredientai
Atsakingas interneto dizainas nėra toks sudėtingas, kaip atrodo. Tai praktikos rinkinys, kurį galite naudoti rašydami CSS, o ne atskira technologija, kurios turėsite išmokti nuo nulio. Galbūt jau laikotės kelių šių principų to nesuvokdami. Galite suprasti interaktyvų žiniatinklio dizainą tyrinėdami keturis jo ingredientus: sklandų išdėstymą, reaguojančius vienetus, lanksčius vaizdus ir medijos užklausas.
Skysčių išdėstymas
Naudodami sklandų išdėstymą, galite sukurti tinklalapius, kurie prisitaiko prie dabartinio peržiūros srities pločio ir aukščio. Įprasta praktika apima naudojimą maks. plotis savybė, užuot suteikęs elementui fiksuotą plotį. Be to, naudojant procentus (%), peržiūros srities aukštis (vh) arba peržiūros srities plotis (vw) padeda pagerinti prisitaikymą, kurio neįmanoma su pikseliais (px). Taigi, kai kitą kartą kuriate maketą, būtinai įveskite šiuos nedidelius pakeitimus ir pradėkite pasinaudoti reaguojančio dizaino metodais.
Reaguojantys vienetai
Kai pereisite prie sudėtingesnio CSS, dažnai matysite, kaip naudojamas rem ir em vietoj ilgio vienetų px vienetų. Taip yra todėl, kad rem vienetas leidžia labai lengvai pakeisti viso išdėstymo mastelį. Pagal numatytuosius nustatymus 1rem yra 16 pikselių, nes jis yra proporcingas elemento šrifto dydis, paprastai 16 taškų. Tačiau, norėdami lengviau apskaičiuoti, galite nustatyti 1rem lygų 10 taškų (arba bet kurią kitą vertę), pakoreguodami aukščiausio lygio šrifto dydį.
Lankstūs vaizdai
Vaizdai yra pagrindinis rūpestis kuriant net elementariausią išdėstymą. Jūs visada turite pasirūpinti, kad jų dydis būtų tinkamas, kad jie atitiktų dizainą. Be to, pagal numatytuosius nustatymus jie nesikeičia keičiant peržiūros sritį. Taigi, turėtumėte naudoti % pagal jūsų vaizdų matmenis, kartu su maks. plotis nuosavybė.
Galite atgaivinti reaguojančias svetaines naudodami medijos užklausas. Skysčių tinkleliai yra gerai pradėti, tačiau pastebėsite, kad yra keletas taškų, kuriuose išdėstymas pradeda sugesti. Pridėjus šių peržiūros srities pločių pertraukos taškus, derinamas skirtingų įrenginių išdėstymas. Žiniasklaidos užklausos padeda pasirinktinai taikyti CSS, remiantis žiniasklaidos funkcijų testų rezultatais. Galite tyrinėti naujus CSS funkcijos, leidžiančios sukurti reaguojančią svetainę per trumpesnį laiką.
Reaguojantys interneto dizaino principai
Nors reaguojantis žiniatinklio dizainas yra gelbėtojas sprendžiant kelių ekranų problemas, gali būti, kad neturite fiksuoto fizinio suvaržymo. Todėl yra šeši pagrindiniai interaktyvaus žiniatinklio kūrimo principai, nuo kurių reikia pradėti kuriant reaguojantį maketą.
Naudokite turiniu pagrįstus lūžio taškus
Vienas iš pagrindinių dizaino principų teigia, kad jūsų svetainės dizainas turėtų palaikyti turinį, o ne atvirkščiai. Medijos turinys, pvz., Vaizdo įrašai, nuotraukos ir teksto turinys, pvz., Ilgos ir trumpos žiniatinklio kopijos, turėtų būti optimaliai pateikiamas visuose ekranuose. Reaguojančio žiniatinklio dizaino raktas yra naudoti turinio, o ne įrenginio, ribinius taškus.
Išmintingai pasirinkite žiniatinklio šriftus ir sistemos šriftus
Žiniatinklio šriftai atrodo nuostabiai! Turite daugybę galimybių keisti dizainą naudodami šauniai atrodančius žiniatinklio šriftus. Tačiau turėtumėte žinoti, kad naršyklės turės atsisiųsti kiekvieną žiniatinklio šriftą. Daugiau žiniatinklio šriftų, daugiau atsisiuntimo laiko. Priešingai, sistemos šriftai yra žaibiški. Jei naudotojas neturi įvardyto sistemos šrifto savo vietiniame įrenginyje, jis grįš prie kito šrifto šriftų šeimos krūva. Todėl rinkdamiesi šriftus būtinai atsižvelkite į įkėlimo laiką ir dizaino poreikį.
Optimizuokite „Bitmap“ vaizdus ir vektorius
Ar jūsų svetainėje yra skirtingų piktogramų, palaikančių turinį? Dažnai gera praktika yra naudoti bitmap formatą, jei jūsų piktogramos turi daug detalių. Kita vertus, vektoriniai formatai yra būdas pasirinkti piktogramas, kurios gražiai didėja ir mažėja. Vektoriai dažnai yra maži, tačiau trūkumas yra tas, kad kai kurios senesnės naršyklės gali jų nepalaikyti. Be to, pasitaiko atvejų, kai vektoriai yra sunkesni už bitų žemėlapius, pavyzdžiui, kai vaizdas yra labai išsamus. Todėl visada įsitikinkite, kad optimizuojate savo bitmap atvaizdus ir vektorius, kol jie prisijungia prie interneto.
Atlikite reaguojančio pirmojo lankstymo testus
Pirmasis svetainės lankstas yra vaizdas, kurį lankytojai mato pirmą kartą įkeliant, prieš slinkdami. Jame dažnai yra herojaus skyrius su reaguojanti naršymo juosta, įvadinė kopija ir laikmena bei CTA. Reagavimas neapsiriboja vien mobiliaisiais įrenginiais. Taip pat turėtumėte apsvarstyti planšetinius kompiuterius, žaidimų pultus ir kitus ekranus. Taigi svarbiausia yra dažnai atlikti bandymus bent jau pirmą kartą peržiūrint svetainę. Galite naudoti „Chrome DevTools“ (Švyturys), norėdami patikrinti tinklalapio kokybę.
Neslėpkite turinio mažesniuose ekranuose
Daugelis žmonių manė, kad mobiliųjų telefonų vartotojai visada skuba ir ieško įkandamo dydžio informacijos, o stalinių kompiuterių vartotojai labiau mėgsta ilgos formos turinį. Dabar suprantame, kad tai nėra tiesa šiandieniniame pasaulyje. Žmonės visur naudoja mobiliuosius įrenginius, ieško visiško turinio ir visiškos prieigos prie visų paslaugų. Turėtumėte įsitikinti, kad užuot slėpę turinį, tvarkote išdėstymą ir lūžio taškus, kad pateiktumėte jį kuo paprasčiau ir be pastangų.
Tvarkykite išdėstymą naudodami įdėtus objektus
Tinkamas svetainės išdėstymo ir elementų išdėstymas reikalauja tinkamų pastangų. Taip pat gali kilti sunkumų valdant daugelį vienas nuo kito priklausomų elementų. Todėl turėtumėte apsvarstyti susijusių elementų įvyniojimą į konteinerį arba. Tai padeda sumažinti kelių elementų išdėstymo užduotį iki tos, kurioje išdėstote tik vieną elementą.
Atsakingas dizainas: ar pirmiausia turėtumėte naudotis darbalaukiu ar mobiliuoju?
Pirmasis darbalaukio metodas reiškia, kad parašysite CSS dideliems ekranams ir pritaikysite medijos užklausas, kad sumažintumėte mažesnių ekranų dizainą. Priešingai, pirmasis mobiliųjų įrenginių metodas apima CSS rašymą mobiliesiems įrenginiams su mažesniais ekranais, o tada žiniasklaidos užklausų taikymą, siekiant išplėsti didesnių ekranų dizainą. Pagrindinis tikslas yra sumažinti svetainę ir programas iki būtiniausių dalykų.
Jei tik pradedate kurti interaktyvų žiniatinklio kūrimą, pirmiausia turėtumėte pasirinkti darbalaukį dienos pabaigoje turėsite sudėti konteinerį vienas ant kito mobiliajame telefone įrenginiai. Nors tai yra visiškai asmeninis sprendimas, pirmasis mobilusis metodas padeda jums susisteminti HTML geresniu būdu, o požiūris į darbalaukį pirmiausia padės išdėstyti ir atskirti technikos.
Jei norite išmokti UX dizaino ar patobulinti savo įgūdžius, čia yra šeši geriausi internetiniai kursai, kuriuos galite atlikti.
Skaityti toliau
- Programavimas
- Žiniatinklis
- Interneto svetainės dizainas
- CSS
„Naincy“ specializuojasi kuriant labai reaguojančias svetaines ir efektyvią turinio strategiją kartu su žiniatinklio kopijomis. Ji yra laisvai samdoma technologijų rašytoja, kuri atidžiai stebi populiarias technologijas.
Prenumeruokite mūsų naujienlaiškį
Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!
Norėdami užsiprenumeruoti, spustelėkite čia
