Ja meklējat vietņu dizaina režģus, esat nonācis īstajā vietā. Šajā ziņojumā mēs esam apsprieduši 5 dažādus vietņu dizaina režģus.
Režģi ir dizaina mugurkauls; tie palīdz jums izveidot kārtību un organizēt jūsu dizaina saturu. Šajā ziņā mēs apspriedīsim, kas ir režģis, kāpēc tas būtu jāizmanto tīmekļa dizainā un kā to izveidot.
Jūs atverat vēlamo dizaina lietojumprogrammu, un tā ir tukša audekls, kas skatās atpakaļ uz jums. Reizēm tas ir biedējoši.
Kā jūs sākat? Kādu pozīciju jūs piešķirat virsrakstam? Kur jūs ievietojat savus mākslas darbus un fotogrāfijas? Režģis ir viss, kas nepieciešams, lai sāktu.
Režģis ir struktūra, ko izmanto dizaina satura organizēšanai; tas nosaka saskaņošanu un kārtību.
Neatkarīgi no tā, vai veidojat izkārtojumu izdrukai, piemēram, žurnālam, vai apvienojat fotoattēlus un tekstu, lai izveidotu galveno lapu, režģis palīdzēs jums izdarīt dizaina izvēli un nodrošināt pozitīvu lietotāja pieredzi.
Apsveriet, kā šīs galvenās lapas dizains izmanto 12 kolonnu režģi, lai sakārtotu tās sastāvdaļas. Izmantojot režģi, tiek novērsta iespēja pieņemt nejaušus lēmumus.
Tā vietā, lai nejauši novietotu gabalus, pareizi izmantojot režģi, jūs precīzi zināt, kur novietot elementus, piemēram, logotipu, izvēlnes vienumus, virsrakstu, pamattekstu un fotogrāfijas. Turklāt tas palīdzēs paātrināt jūsu projektēšanas procesu.
Šajā rakstā es jums pastāstīšu visu, kas jums jāzina par režģa izmantošanu tīmekļa dizainā. Tātad, palieciet ar mani līdz galam.
Saturs
- No kurienes nāk režģi?
- Kāpēc režģi ir svarīgi tīmekļa dizainā?
- 5 dažādi režģu veidi
- 4 Režģu izmantošanas paraugprakse tīmekļa dizainā
- Režģa anatomija – kas jums jāzina?
- Bieži uzdotie jautājumi: Website Design Grids 2024
- 👉 Kāds ir labākais tīmekļa dizaina režģis?
- ✅ Kas ir režģa izkārtojuma vietne?
- 👉 Kā darbojas vietņu režģi?
- 👀 Kā režģa izkārtojums uzlabo tīmekļa dizainu?
- ✅ Kāpēc dizaineri izmanto režģus?
- 👉 Cik kolonnām jābūt režģim tīmekļa dizainā?
- 💁 Kāpēc mēs izmantojam 12 kolonnu režģi?
- ✔️ Kas ir 12 kolonnu režģis?
- 👉 Kā jūs izmantojat režģa veidnes?
- Secinājums: Website Design Grids 2024
No kurienes nāk režģi?
Pirms iedziļināmies režģu ietekmes uz tīmekļa dizainu mūsdienās, īsi apskatīsim režģu vēsturi un to izmantošanu. Režģi ir nepieciešami tipogrāfijas organizēšanai.
Režģi sākotnēji tika izmantoti manuskriptu izkārtojumos pēc pasūtījuma veida. Apsveriet, cik sakārtota ir šī izplatība no agrīnas teksta lapas.
Lai iegūtu padziļinātu ieskatu poligrāfijas vēsturē, skatiet mūsu eseju par grafiskā dizaina vēsturi.
Ātri uz priekšu rūpnieciskā revolūcija un masveida ražošanas parādīšanās, kuras laikā laikraksti, plakāti, reklāmas un citi iespieddarbi tika ražoti lielos daudzumos.
Dizaineriem patīk Jans Čičolds un Jozefs Millers-Brokmans divdesmitajā gadsimtā radīja jaunas režģu sistēmas, kas attīstījās par to, kas tagad ir pazīstams kā Šveices stils vai Starptautiskais tipogrāfijas stils.
Viņi izveidoja modulāru struktūru ar pietiekami daudz atstarpes.
Kāpēc režģi ir svarīgi tīmekļa dizainā?
Runājot par pielietojumu tīmekļa dizaina procesā, režģa sistēma palīdz izlīdzināt lapas komponentus, izmantojot secīgas kolonnas un rindas.
Kad šis hierarhiskais pamats ir izveidots, mēs varam sakārtot tekstu, grafiku un praktiski jebkuru citu dizaina elementu saskarnē konsekventi, sakārtoti.
Veidojot dizainu tīmeklim un mobilajām ierīcēm, mūsu izstrādātās lapas vai saskarnes ir paredzētas dažādu lietotāju plūsmu atvieglošanai.
Režģi atvieglo stiepļu rāmju, veidņu vai standartizētu izkārtojumu izstrādes procesu salīdzināmām vietnēm, jo lietotāju plūsmas bieži vien ietver vairākus ekrānus vai logus, kas atkārto līdzīgas dizaina shēmas un izkārtojumus.
Režģi ļauj horizontāli un vertikāli sadalīt lapas pa rindām un kolonnām. Režģa sistēmas ir sistemātiska tehnika, kas ļauj dizaineriem sakārtot vienumus un moduļu veidā izstrādāt komponentus vairākām lapām vai izkārtojumiem.
Turklāt režģi izveido standartizētu fiksētu mērvienību kopu, kas nosaka katra dizaina elementa izmēru, atstarpi un līdzinājumu.
Režģa izkārtojumi radās drukas dizainā, kad tos izmantoja kopā ar tipogrāfiju, lai sakārtotu rokrakstu uz papīra, īpaši grāmatās un laikrakstos.
Tomēr daudzi mūsdienu dizaina aspekti balstās uz režģa izkārtojumiem un plaukst uz tiem. Tas ietver tīmekļa dizainu, saskarnes dizainu un, pats galvenais, adaptīvo dizainu.
Pirms mēs izpētām, kā un kāpēc uz režģa balstīti izkārtojumi ir tik nenovērtējams rīks mūsu kā tīmekļa izstrādātāju izstrādes procesā, sīkāk apskatīsim fiziskos komponentus, kas veido režģa sistēmu.
5 dažādi režģu veidi
Režģi ir iedalīti piecās atšķirīgās kategorijās. Lai gan daži ir piemērotāki tīmekļa dizainam nekā citi, jūs gandrīz noteikti esat izmantojis visas piecas savas radošās karjeras laikā.
1. Hierarhiskais režģis:
Visizplatītākā izmantošana hierarhiskie režģi strādā tīmekļa dizainā. Šo režģu mērķis ir noteikt vienumu prioritātes. Tie var būt vairāk pielāgojami, taču to organizēšana joprojām ir atkarīga no kolonnām, rindām un moduļiem.
Tie ir dabiski veidoti, vispirms sakārtojot nozīmīgākos elementus lapā un pēc tam aptverot tos ar režģi.
Ziņu un plašsaziņas līdzekļu vietnes bieži izmanto šo režģa stilu, lai palīdzētu pievērst uzmanību noteiktiem rakstiem un ziņām. Apsveriet, kā The New York TimesMājas lapa izmanto hierarhisku režģi.
2. Modulārais režģis:
Moduļu režģi ir līdzīgi kolonnu režģiem, bet ietver rindas. Lai gan laikrakstos un žurnālos materiālu kārtošanai bieži tiek izmantoti moduļu režģi, tos var izmantot arī vietņu un lietotņu dizainā, piemēram, produktu režģa sadaļā.
Apsveriet, kā Everlane organizē savu džinsu kolekciju, izmantojot moduļu režģi. The YouTube sākumlapa ir vēl viens tādas vietnes piemērs, kurā tiek izmantots modulārais režģis.
Lai gan tajos ir iekļauta kreisā sānjosla biežām saitēm, piemēram, tendenču un abonementu sadaļām, viss videomateriāls ir strukturēts četru sleju modulārā režģī, lai palielinātu to videoklipu skaitu, kurus skatītājs var skatīt, pārlūkojot kaut ko skatāmu.
3. Kolonnu režģis:
Kolonnu režģi palīdz organizēt tekstu, attēlus un grafiku. Vietnēm kolonnu skaits, kas aptver galvenās lapas platumu, var būt no divām līdz divpadsmit vai pat sešpadsmit.
Teksts un grafikas var atrasties vienā kolonnā vai aptvert vairākas kolonnas. Notekas ir atstarpes starp kolonnām; tiem jābūt vienāda izmēra visās vietās.
Kolonnu režģiem nav jābūt simetriskiem. Piemēram, varat izmantot asimetrisku kolonnu režģi, kurā dažas kolonnas ir šaurākas nekā citas, kas var būt izdevīgi atkarībā no jūsu dizaina hierarhijas.
Asimetriski kolonnu režģi bieži tiek izmantoti emuāru vietnēs, kur primārais materiāls ir iekļauts izkārtojuma lielākajā divu trešdaļu konteinerā, savukārt mazākajā trešdaļā var tikt parādīta informācija par emuāru un tā autoru.
Apsveriet, kā šī emuāra mājaslapā tiek izmantots asimetrisks kolonnu režģis.
4. Manuskripta josla:
Visas grāmatas, avīzes un periodiskie izdevumi ir veidoti uz manuskriptu režģa. Turklāt šis ir viens no vienkāršākajiem režģa modeļiem, ko dēvē par vienas kolonnas režģi, un ir labi piemērots milzīgiem nepārtrauktiem teksta un grafikas blokiem.
Būtībā tā ir milzīga taisnstūra vieta lapas iekšpusē, kas darbojas kā teksta ierobežojošais lodziņš.
5. Bāzes līnijas režģis:
Bāzes līnijas režģis ir nedaudz tehniskāks; to nosaka teksta atrašanās vieta. Būtībā tas attiecas uz vadošo vai atstarpi starp bāzes līnijām.
Šis režģis palīdz nodrošināt lasītājam pozitīvu lasīšanas pieredzi, jo īpaši, ja ir daudz lasāma satura. Lai gan tas ir ļoti svarīgi drukas dizainam, piemēram, grāmatu izkārtojumam, tas ir vienlīdz svarīgi tiešsaistes dizainam.
Apsveriet rindstarpu ietekmi uz galvenās lapas lasāmību. Ja teksts ir pārāk saīsināts, lietotājs var pilnībā pamest vietni. Saglabājiet atbilstošu teksta un atstarpes sajaukumu.
4 Režģu izmantošanas paraugprakse tīmekļa dizainā
Web dizaina jomā ir vairāki vārdi un idejas, ar ko iepazīties un saprast, taču ne vairāk kā režģu nozīme tīmekļa dizainā.
Starp vairākiem komponentiem, kas veido režģa struktūru, daudzajiem pieejamajiem režģa veidiem un izziņas procesi Lai noteiktu, kurš režģa veids vislabāk atbilst jūsu saturam un dizainam, ir daudz kas jāņem vērā.
1. Ievērojiet trešdaļu likumu:
Vēl viena tīmekļa dizaina koncepcija ir Trešdaļu likums, kas palīdz dizaineriem izveidot estētiski līdzsvarotu režģa izkārtojumu un attēlu izvietojumu.
Šī pieeja pārklāj režģi, kas sadala dizaina apgabalu horizontāli un vertikāli trešdaļās. Tādējādi jebkura attēla vai lapas sadaļa/telpa tiek sadalīta deviņos vienādos segmentos, ko nosaka līniju krustojumi.
Atbilstoši trešdaļas noteikumiem, “interesējošo objektu” ievietošana attēla “trešdaļās”, lietotāja uzmanību uz tiem pievērsīs spēcīgāk, estētiski pievilcīgākā veidā.
Tīmekļa dizainā dizaineri bieži izmanto trešdaļas noteikumu, lai palīdzētu viņiem veikt dažas no vissvarīgākajām režģa un izkārtojuma izvēlēm.
2. Respektējiet zelta attiecību:
Daudzi dizaineri izmanto koncepciju, kas pazīstama kā Golden Ratio, lai optimizētu savu režģa dizainu mērogu, līdzsvaru un izkārtojumu. The Zelta attiecība ir proporcija, kas vienkāršākajā formā ir vienāda ar 1.6180.
Zelta taisnstūris ir taisnstūris, kura garums ir 1.6180 reizes lielāks par tā platumu, pamatojoties uz zelta attiecību. Tas norāda, ka, ja elementa platums ir 100 pikseļi, garums būs 161.80 pikseļi.
Tas attiecas uz blakus esošo attēlu, objektu vai formu platumu un garumu, kā arī vienas formas vai elementa izstrādi.
Izmantojot Golden Ratio, dizaineri var noteikt, kā sadalīt pieejamo horizontālo vietu lapā un cik daudz vietas atvēlēt katram gabalam un ap to, cita starpā.
Viens no gadījumiem, kad tas var notikt, ir vietnes varoņa sadaļas izstrāde. Ja izvēlaties pilna platuma izkārtojumu un sadalāt to vertikāli divās daļās: varoņa attēlā un varoņa tekstā.
Turklāt šajā mikroprojektēšanas procedūrā jums būs jāizlemj par attēla izmēru, teksta lielumu un tā tālāk.
Tomēr vispirms ir jāizlemj par kolonnu attiecību, kas palīdzēs jums noteikt attēla izmēru un burtveidolu, kā arī tos elementus, kurus vēlaties vairāk vai mazāk uzsvērt, vai arī to, vai vēlaties vienādi koncentrēties uz katru.
Šajā brīdī tiek pieņemts lēmums par to, kā sadalīt varoņa daļu, nosakot, kuram komponentam jābūt lielākam vai pamanāmam. Šeit noder Zelta attiecība.
Šajās vadlīnijās ir ņemti vērā dažādi elementi, tostarp lapas platums, satura izmērs, kā arī to moduļu skaits un lielums, kas saturam būs nepieciešami režģī.
Pieejamības ziņā Golden Ratio novirza lietotāja uzmanību uz noteiktiem punktiem vai vietām uz ekrāna, un tieši tas ir tas, ko dizaineri cenšas darīt, izveidojot un ieviešot satura un dizaina shēmas informācijas hierarhiju.
3. Atbrīvojiet vietu baltajai telpai:
Kā tīmekļa dizaineri mēs saprotam, cik svarīga ir atstarpe no lasāmības, informācijas hierarhijas, mērogojamības un vispārējās atpūtas telpas ap un starp dizaina komponentiem.
Ņemot vērā baltās vietas būtisko lomu izkārtojuma izstrādē, ir dabiski, ka vietne un izkārtojuma režģi to izmanto.
Režģa izkārtojumus būtībā nosaka ne tikai to kolonnu un rindu platums un augstums, bet arī starp tām esošās atstarpes platums un augstums, ko dēvē par atstatumu.
Piemēram, viena uz režģi balstīta projektēšanas metode, ko bieži izmanto tīmekļa dizaineri, ir pazīstama kā 8pt režģa sistēma — šis jēdziens ir noteikts Google materiālu dizaina vadlīnijās.
Materiālu dizaina metode izmanto 8 x 8 pt režģi. Katrs tīmekļa vietnes elements praksē būs reizināts/dalāms ar astoņi.
Interesanti ir tas, ka šis noteikums attiecas ne tikai uz režģa vienumiem, piemēram, fotoattēliem, pogām vai tekstu, bet arī uz balto laukuma vienībām, kurām ir jābūt astoņām reizinātām.
Tāpēc, apsverot kolonnu vai rindu izvietošanu, jums ir arī jānosaka un jānorāda atstarpes daudzums, šajā gadījumā ar astoņu reizinājumu.
Tas parāda, cik liela nozīme ir baltajam laukumam režģa dizainā, līdz tā izmēriem un prasībām ir tikpat svarīgas kā kolonnām un rindām.
Elementor Experts mājaslapa parāda, cik spēcīga var būt baltā atstarpe, jo īpaši vietnes sākumlapā.
Tā kā sākumlapas galvenais mērķis ir likt skatītājiem rīkoties un uzzināt par ekspertu platformu, atstarpe atbalsta šo procesu, piešķirot informācijai prioritāti.
Tas nozīmē, ka, tā kā platformas vērtības piedāvājums sākumlapā ir tik izcelts un “laiks spīdēt”, vietnes apmeklētāji uzreiz saprot, kādu vērtību viņi piedzīvos.
4. Atbilstošs dizains:
Adaptīvs dizains attiecas uz lapas vai vietnes izkārtojuma un satura spēju pielāgoties vairākām ierīcēm un pārlūkprogrammas izmēriem. Tas nozīmē, ka mainoties ekrāna izmēram, mainīsies arī kolonnu skaits un, protams, to platums.
Tomēr pastāv būtiska atšķirība starp standarta dizaina režģiem un atsaucīgiem režģiem.
Lai gan dizaina režģi ir iestatīti uz bāzes līnijas režģi, atsaucīgie režģi ir elastīgi, ļaujot režģa kolonnām mainīt izmērus un mainīt to izvietojumu atkarībā no lietotāja skata loga.
Izmantojot fiksētu režģi, ekrāna izmēra samazināšana automātiski novirzīs jūs uz nākamo pārtraukuma punktu, un arī sānu piemales automātiski samazināsies, līdz tiek sasniegts nākamais pārtraukuma punkts.
Adaptīvs režģis jeb mainīgs režģis ir tas, ko redzat, kad vienumi dinamiski mainās, reaģējot uz pārlūkprogrammas/ekrāna saraušanos. Atsaucīgi režģi loģiski izlīdzinās un loģiski sakārtos jūsu materiālu.
Tas nozīmē, ka, samazinoties skata laukumam, proporcionāli saruks arī flīzes un režģa saturs.
Režģa anatomija – kas jums jāzina?
Visiem vietņu dizaina režģiem neatkarīgi no to lieluma vai sarežģītības ir noteiktas sastāvdaļas, kas tos raksturo kā režģa izkārtojumus:
1. Piemales:
Piemales ir negatīvā atstarpe starp formātu un satura ārējo robežu, ko dažkārt sauc par “ārējām notekcaurulēm”. Mobilajās ierīcēs sānu piemales parasti ir 20–30 pikseļus platas un ievērojami atšķiras galddatorā un mobilajā ierīcē.
Margin var būt pazīstams ar HTML un CSS valodu, kur to izmanto kā rekvizītu, lai radītu vietu ap dizaina elementu vai konteineru. Ņemiet vērā, ka piemales lielums neietekmē blakus esošā teksta lielumu.
Tas tikai norāda vietas apjomu ap elementu, kas izkārtojuma režģu kontekstā skaidri norāda uz atstarpi starp formātu un satura ārējo robežu.
2. Notekas:
Notekcaurules ir līnijas, kas sadala kolonnas un rindas atsevišķās vienībās. 20 pikseļi ir diezgan tipisks notekas izmērs. Notekcauruļu mērķis ir nodrošināt negatīvu atstarpi (jebkura izmēra) starp kolonnām un rindām.
Vienkāršākā nozīmē notekas ir zona starp kolonnām un rindām. Notekas ir īpaši svarīgas mūra izkārtojumos, kur notekas platums ir viens no vissvarīgākajiem elementiem.
3. Moduļi:
Moduļi ir telpas aizpildīšanas vienības, ko veido rindu un kolonnu krustojums. Moduļi vai satura moduļi, kā tos bieži dēvē, ir lapas veidošanas bloki, jo katrs dizaina elements (piemēram, teksts, grafika un pogas) iekļaujas moduļos, ko veido režģa taisnstūrveida raksti.
4. Rindas:
Kā jūs varētu pieņemt, rindas ir režģa horizontālās daļas. Pārsteidzoši, ka tīmekļa dizains bieži vien neievēro rindu nozīmi režģī. Tomēr šī nav lieliska prakse.
5. Slejas:
Kolonnas ir vertikālas daļas, kas aptver satura apgabala augstumu un tiek uzskatītas par režģa “veidošanas blokiem”. Kolonnas atšķiras ar to, ka jo vairāk kolonnu režģī, jo elastīgāks režģis kļūst.
Drīzumā mēs to aplūkosim sīkāk. Lai gan kolonnu platumu vienmēr nosaka dizainers, ierastā prakse nosaka, ka 12 kolonnas ir jāizmanto galddatorā, 8 kolonnas planšetdatorā un 4 kolonnas mobilajās ierīcēs.
Lielākajai daļai režģu kolonnu platums ir 60–80 pikseļi. Kolonnas platumam ir būtiska ietekme uz jūsu reālā satura platumu.
Bieži uzdotie jautājumi: Vietņu dizaina režģi 2024
👉 Kāds ir labākais tīmekļa dizaina režģis?
Bootstrap ir gluda, vienkārša un jaudīga mobilajām ierīcēm paredzēta priekšgala sistēma, kas padara tīmekļa izstrādi ātrāku un vienkāršāku. Mums šī ir vispopulārākā izvēle. Bieži vien divpadsmit kolonnas ar atkāpēm. Standartizēta un vienkārša metode.
✅ Kas ir režģa izkārtojuma vietne?
Vietnes režģis ir paņēmiens materiāla sakārtošanai un izlīdzināšanai lapā. Tas kalpo kā jūsu lietotāja interfeisa skelets vai pamatsistēma. Vietņu režģi palīdz dizaineriem izdarīt dizaina izvēli un nodrošināt pozitīvu lietotāja pieredzi.
👉 Kā darbojas vietņu režģi?
Režģa sistēmas ir neredzami ietvari, ko izmanto tīmekļa dizainā un kas sagrupē visus lapas komponentus. Režģis darbojas kā ietvars vai armatūra, ap kuru dizainers var sakārtot vizuālos komponentus (attēlus, glifus, rindkopas utt.) loģiskā, viegli uztveramā veidā.
👀 Kā režģa izkārtojums uzlabo tīmekļa dizainu?
Režģi var ievērojami saīsināt un uzlabot jūsu projektēšanas laiku, darbojoties kā ceļvedis objektu novietošanai, novietošanai un mērogošanai. Tā vietā, lai patvaļīgi liktu detaļas, līdz iegūstat patīkamu kompozīciju, režģim vajadzētu palīdzēt atrast dabisku risinājumu.
✅ Kāpēc dizaineri izmanto režģus?
Režģi ļauj dizaineriem vienkāršāk sadarboties ideju izstrādē, norādot, kur detaļas jānovieto. Režģa sistēmas palīdz atsaistīt saskarnes projektēšanas darbu, ļaujot vairākiem dizaineriem strādāt pie atsevišķiem izkārtojuma komponentiem, vienlaikus saglabājot pārliecību, ka viņu darbs būs vienmērīgi integrēts un konsekvents.
👉 Cik kolonnām jābūt režģim tīmekļa dizainā?
Lai gan nav formālas vajadzības pēc kolonnu skaita, lielākajā daļā vietņu režģa arhitektūru tiek izmantots 12 kolonnu režģis. Turklāt vietnes režģī ir regulāra atstarpe starp kolonnām, ko dēvē par notekcaurulēm, un atstarpes ārpus režģa tiek sauktas par piemalēm.
💁 Kāpēc mēs izmantojam 12 kolonnu režģi?
Lielākajai daļai Bootstrap versiju ir nepieciešamas tikai 12 kolonnas, lai nodrošinātu sekojošo: Izkārtojuma izveide ir vienkāršota. Mobilajām ierīcēm draudzīgs izkārtojums. Proporcionāli bloki, lai saglabātu simetriju.
✔️ Kas ir 12 kolonnu režģis?
Vietnēm dizaineri var izmantot divas līdz divpadsmit vai pat sešpadsmit kolonnas, lai aptvertu galvenās lapas platumu. Viņi var sakārtot tekstu un grafiku vienā kolonnā vai vairākās kolonnās.
👉 Kā jūs izmantojat režģa veidnes?
Atribūts grid-template-areas nosaka režģa izkārtojuma apgabalus. Varat nosaukt režģa vienumus, atsaucoties uz tiem rekvizītā grid-template-areas, izmantojot rekvizītu grid-area. Apostrofi apzīmē katru reģionu. Lai atsauktos uz režģa objektu, kuram nav nosaukuma, izmantojiet punkta simbolu.
Ātrās saites:
Secinājums: Website Design Grids 2024
Tagad, kad saprotat, kāpēc režģi ir ļoti svarīgi tīmekļa dizainā un kā tos izmantot savā vietnē, ir pienācis laiks sākt mērīšanu un izlīdzināšanu.
Ņemiet vērā, ka šis princips attiecas uz katru dizaina elementu: logrīku un komponentu izlīdzināšanu horizontāli un vertikāli, teksta elementu pielīdzināšanu bāzes līnijai un visu veidu satura pareizu centrēšanu vietnē.
Jūsu projektēšanas process un galaprodukts tiks ļoti novērtēti, un mēs ar nepacietību gaidām, kas jums ir pieejams.
