Mūsdienās ir ierasta prakse veidot vietni vai lietotni, kas pielāgo lietotāja saskarni atkarībā no pārlūkprogrammas vai ierīces. Šī mērķa sasniegšanai ir divas pieejas. Pirmais ietver dažādu jūsu vietnes vai lietotnes versiju izveidi dažādām ierīcēm. Bet tas ir neefektīvi un var izraisīt neparedzamas kļūdas.
Meklējot uzticamu, nākotnei drošu pieeju, tika radīts atsaucīgais vai adaptīvais dizains. Tā koncentrējas uz vienas izkārtojuma versijas izveidi, kas automātiski pielāgojas dažādām pārlūkprogrammām vai ierīcēm.
Šajā rakstā mēs uzzināsim par atsaucīgu tīmekļa dizainu un pamatprincipiem, kas palīdzēs jums izveidot lielisku vietni.
Atsaucīgas tīmekļa dizaina sastāvdaļas
Atsaucīgs tīmekļa dizains nav tik sarežģīts, kā izklausās. Tas ir prakses kopums, ko varat izmantot, rakstot CSS, nevis atsevišķa tehnoloģija, kas jums jāiemācās no nulles. Jūs, iespējams, jau ievērojat vairākus no šiem principiem, to neapzinoties. Jūs varat saprast atsaucīgu tīmekļa dizainu, izpētot tā četras sastāvdaļas: plūstošu izkārtojumu, adaptīvas vienības, elastīgus attēlus un multivides vaicājumus.
Šķidruma izkārtojumi
Izmantojot vienmērīgu izkārtojumu, varat izveidot tīmekļa lapas, kas pielāgojas pašreizējam skata platumam un augstumam. Kopējā prakse ietver maksimālais platums tā vietā, lai elementam piešķirtu fiksētu platumu. Izmantojot procentus (%), skatu punkta augstums (vh) vai skata atveres platumu (vw) palīdz uzlabot pielāgojamību, kas nav iespējama ar pikseļiem (px). Tātad, nākamreiz, kad veidojat izkārtojumu, noteikti veiciet šīs nelielās izmaiņas un sāciet gūt labumu no atsaucīgām dizaina metodēm.
Atsaucīgas vienības
Pārejot uz progresīvāku CSS, jūs bieži redzēsit tā izmantošanu rem un em garuma vienības, nevis px vienības. Tas ir tāpēc, ka rem vienība ļauj ļoti viegli mērogot visu izkārtojumu. Pēc noklusējuma 1rem ir vienāds ar 16 pikseļiem, jo tas ir proporcionāls elementa fonta lielums, parasti 16 pikseļi. Tomēr, lai atvieglotu aprēķinus, varat iestatīt 1rem vienādu ar 10 pikseļiem (vai jebkuru citu vērtību), pielāgojot augstākā līmeņa fonta lielumu.
Elastīgi attēli
Attēli ir galvenā problēma, veidojot pat visvienkāršāko izkārtojumu. Jums vienmēr ir jārūpējas par to pareizo izmēru, lai tie atbilstu dizainam. Turklāt pēc noklusējuma tie netiek pielāgoti skata loga izmaiņām. Tātad, jums vajadzētu izmantot % attēlu izmēriem, kā arī maksimālais platums īpašums.
Izmantojot plašsaziņas līdzekļu vaicājumus, varat atdzīvināt atsaucīgas vietnes. Šķidruma režģi ir labi, lai sāktu, taču jūs atradīsit, ka ir daži punkti, kur izkārtojums sāk sabrukt. Pievienojot pārtraukumpunktus šiem skatu platuma platumiem, tiek pielāgots dažādu ierīču izkārtojums. Multivides vaicājumi palīdz atlasīt CSS, pamatojoties uz multivides funkciju testu rezultātiem. Jūs varat izpētīt jaunu CSS funkcijas, lai izveidotu atsaucīgu vietni īsākā laikā.
Atsaucīgi tīmekļa dizaina principi
Lai gan atsaucīgs tīmekļa dizains ir glābējs, kad runa ir par vairāku ekrānu problēmām, iespējams, jums nav fiksētu fizisku ierobežojumu, uz kuriem atsaukties. Tāpēc, izstrādājot adaptīvu izkārtojumu, ir seši atsaucīgi tīmekļa dizaina pamatprincipi.
Izmantojiet uz saturu balstītus pārtraukuma punktus
Viens no dizaina pamatprincipiem nosaka, ka jūsu vietnes dizainam jāatbalsta saturs, nevis otrādi. Multivides saturam, piemēram, videoklipiem, fotogrāfijām un teksta saturam, piemēram, garai un īsai tīmekļa kopijai, jābūt optimāli atveidotam visos ekrānos. Atsaucīga tīmekļa dizaina pamatā ir izmantot uz saturu balstītus pārtraukuma punktus, nevis uz ierīci balstītus.
Gudri izvēlieties Web fontus un sistēmas fontus
Tīmekļa fonti izskatās satriecoši! Jums ir daudz iespēju modificēt savu dizainu, izmantojot foršus tīmekļa fontus. Bet jums jāzina, ka pārlūkprogrammām būs jālejupielādē katrs tīmekļa fonts. Vairāk tīmekļa fontu, vairāk lejupielādes laika. Turpretī sistēmas fonti ir zibenīgi ātri. Ja lietotāja lokālajā ierīcē nav nosaukts sistēmas fonts, tas atgriezīsies pie nākamā fonta fontu saimes kaudze. Tāpēc, izvēloties fontus, noteikti ņemiet vērā ielādes laiku un dizaina prasības.
Optimizējiet Bitmap attēlus un vektorus
Vai jūsu vietnē ir dažādas ikonas, kas atbalsta saturu? Bieži vien laba prakse ir izmantot bitkartes formātu, ja jūsu ikonās ir daudz detaļu. No otras puses, vektoru formāti ir veids, kā izvēlēties ikonas, kas skaisti augšu un uz leju. Vektori bieži ir niecīgi, bet mīnuss ir tas, ka dažas vecākas pārlūkprogrammas tos var neatbalstīt. Ir arī gadījumi, kad vektori ir smagāki par bitkartēm, piemēram, ja attēls ir ļoti detalizēts. Tāpēc vienmēr pārliecinieties, ka optimizējat savus bitkartes attēlus un vektorus, pirms tie nonāk tiešsaistē.
Veiciet adaptīvas pirmās reizes testus
Tīmekļa vietnes pirmā locīšana ir skats, ko apmeklētāji redz, pirmo reizi ielādējot, pirms ritināšanas. Tas bieži ietver varoņu sadaļu ar atsaucīga navigācijas josla, ievadkopija un plašsaziņas līdzekļi, kā arī CTA. Atsaucība neaprobežojas tikai ar mobilajām ierīcēm. Jums vajadzētu apsvērt arī planšetdatorus, spēļu konsoles un citus ekrānus. Tātad, galvenais ir veikt biežas pārbaudes vismaz vietnes pirmajam skatam. Varat izmantot Chrome DevTools (Bāka), lai pārbaudītu tīmekļa lapas kvalitāti.
Neslēpiet saturu mazākos ekrānos
Daudzi cilvēki agrāk uzskatīja, ka mobilo ierīču lietotāji vienmēr steidzas un meklē koduma informāciju, bet galddatoru lietotāji vairāk interesējas par garas formas saturu. Tagad mēs saprotam, ka mūsdienu pasaulē tas nav taisnība. Cilvēki visur izmanto mobilās ierīces, meklējot pilnīgu saturu un pilnu piekļuvi visiem pakalpojumiem. Jums jāpārliecinās, ka satura slēpšanas vietā jūs pārvaldāt izkārtojumu un pārtraukuma punktus, lai to parādītu pēc iespējas vieglāk un bez piepūles.
Pārvaldiet izkārtojumu, izmantojot ligzdotus objektus
Vietnes izkārtojuma un pareizu pozicionēšanas elementu izveide prasa pienācīgas pūles. Iespējams, ka jums ir bijušas grūtības pārvaldīt daudzus elementus, kas ir atkarīgi viens no otra. Tāpēc jums vajadzētu apsvērt saistīto elementu iesaiņošanu traukā vai. Tas palīdz samazināt vairāku elementu izvietošanas uzdevumu līdz vienam, kurā izkārtojat tikai vienu elementu.
Atsaucīgs dizains: vai vispirms izmantot galddatoru vai mobilo?
Darbvirsmas pirmā pieeja nozīmē, ka rakstīsit CSS lieliem ekrāniem un pēc tam lietosit multivides vaicājumus, lai samazinātu mazāku ekrānu dizainu. Turpretī pirmā mobilā pieeja ietver CSS rakstīšanu mobilajām ierīcēm ar mazākiem ekrāniem un pēc tam multivides vaicājumu izmantošanu, lai paplašinātu lielāku ekrānu dizainu. Galvenais mērķis ir samazināt vietni un lietotnes līdz absolūti nepieciešamajām lietām.
Ja jūs tikko sākat darbu ar atsaucīgu tīmekļa izstrādi, vispirms dodieties uz darbvirsmu dienas beigās konteiners mobilajā ierīcē būs jāsakrauj viens uz otra ierīces. Lai gan tas ir pilnīgi personisks lēmums, pirmā mobilā pieeja palīdz jums strukturēt HTML labāk, bet pieeja darbvirsmai vispirms palīdzēs izkārtojumā un atstarpēs tehnikas.
Ja vēlaties apgūt UX dizainu vai uzlabot savas prasmes, šeit ir seši labākie tiešsaistes kursi, kurus varat apgūt.
Lasīt Tālāk
- Programmēšana
- Tīmeklis
- Web dizains
- CSS
Naincy specializējas ļoti atsaucīgu vietņu veidošanā un efektīvā satura stratēģijā, kā arī tīmekļa kopijās. Viņa ir ārštata tehnoloģiju rakstniece, kas rūpīgi seko līdzi tendencēm.
Abonējiet mūsu biļetenu
Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!
Noklikšķiniet šeit, lai abonētu
