Kā izmantot tīklus, veidojot lapu prototipus

Šis raksts būs noderīgs, ja jūs izveidosiet vietņu prototipus, lai jūsu idejas tiktu ievietotas web dizaineriem un izstrādātājiem. Apmācība jums iemācīs, kā prototipa acs.

Atruna: ja jūs izveidojat prototipu bez režģa, nekas briesmīgs nenotiks. Profesionāls dizaineris vai tīmekļa izstrādātājs jums pievienos tīklu. Bet, ja jūs uzzināsiet, kā strādāt ar tīkliem, prototipu kvalitāte dramatiski palielināsies, un jūs aplūkojat vietņu lapas citādi.

Kas ir režģis un kāpēc to izmantot

Režģis ir vertikālu vai vertikālu un horizontālu līniju sistēma, kas sadala lapu kolonnās vai šūnās. Izveidots, izmantojot tīkla kolonnu vai šūnu, veidojot lapas struktūru vai skeletu, ar kuru dizaineri organizē saturu.

Tas ir, ar režģu palīdzību jūs izveidojat rāmi, kurā jūs lietojat visus lapas elementus: logotipu, izvēlni, slīdni, formu, attēlu un tā tālāk. Pateicoties skeletam, lapas elementus var harmoniski novietot, izvēlēties to relatīvo un absolūtos izmērus, iestatīt vizuālo ritmu.

Svarīgs punkts: režģi nodrošina dizaina elastību, kas nepieciešama, lai pielāgotu izkārtojumu dažādiem ekrāna izmēriem. Tas ir, kadra izmantošana - solis, lai izveidotu atsaucīgu lapu.

Gatavajā lapā režģi parasti nav redzami. Bet tos var redzēt prototipos un izkārtojumos.

Kādi ir režģi

Ja neesat profesionāli iesaistījies dizaina un web izstrādes jomā, pietiek ar divu veidu tīklu esamību: kolonnveida un moduļu.

Kolonnas režģis ir vertikālu līniju sistēma, kas sadala lapu kolonnās un ievilkumos.

Tumšas un plašas zonas attēlā ir kolonnas, vieglas un šauras ir ievilkumi.

Moduļu režģis ir vertikālu un horizontālu līniju sistēma, kas lapu sadala moduļos.

Šādā gadījumā moduļi ir taisnstūri ar 20 pikseļiem, kas apzīmēti ar biezākām līnijām.

Ja neesat profesionāls web dizainers un izstrādātājs, izmantojiet kolonnu režģi, lai izveidotu prototipus. Tam ir vismaz divi iemesli. Pirmkārt: kolonnas režģi ir ļoti populāri tīmeklī. Tās veido populāras sistēmas, piemēram, Bootstrap, Bulma, Skeleton, kuras tīmekļa izstrādātāji izmanto lapu izkārtojumam.

Otrais iemesls: lapas prototips ir pietiekami, lai izmantotu kolonnas režģi. Ja nepieciešams, profesionāls web dizainers pievienos moduļu tīklu, kad jūsu skice kļūst par pilnvērtīgu izkārtojumu.

Kā izmantot acis prototipēšanas laikā

Šī ir praktiska sadaļa, kas māca izmantot acis, veidojot prototipus.

Kur piesaistīt tīklus

Atbilde ir atkarīga no instrumentiem, ko izmantojat prototipēšanai. Ja prototips atrodas uz papīra lapas, režģi var būt ar roku. Ja skice tiek veidota, izmantojot īpašas programmas un pakalpojumus, ienāciet iestatījumos. Vispopulārākās prototipēšanas programmatūras rīkiem ir tīkli. Turpmāk minētie piemēri.

Lai iespējotu režģi Moqups, noklikšķiniet uz ikonas Workspace un atzīmējiet opciju Show layout grid. Ja jums ir nepieciešams moduļu tīkls, pārbaudiet opciju Rādīt papīra režģi.

Lai iespējotu tīklus Proto.io, atlasiet izvēlni Preferences - Grid settings.

Pārbaudiet opciju Rādīt izkārtojumu. Izvēlieties kolonnu skaitu, to platumu un ievilkumu platumu starp kolonnām un lapas malām. Šie iestatījumi tiks aplūkoti turpmāk.

Ja jums ir nepieciešams moduļu tīkls, pārbaudiet opciju Rādīt režģi un norādiet iestatījumus.

Ja izmantojat Justinmind Prototype, redaktorā atlasiet cilni Veidnes un izmantojiet vienu no veidņu režģiem: 12 vai 16 slejas.

Ja izmantojat citu prototipēšanas programmatūru, atrodiet acis pats.

Kā veidot režģi

Veidot režģi - izvēlieties kolonnu skaitu, to platumu, kā arī ievilkumu platumu starp kolonnām un lapas malām.

Jautājums: cik kolonnu jābūt kolonnu tīklam? Īsā atbilde ir 12. Jautājums nav pat tāds, ka lielākā daļa CSS ietvarstruktūru, ko tīmekļa izstrādātāji izmanto, ir veidotas uz 12 kolonnu tīkliem. Nepieciešamības gadījumā tiek mainīti ietvarstruktūru noklusējuma iestatījumi.

Numurs 12 ir gandrīz maģisks: tas ir sadalīts 6, 4, 3 un 2. Tas nozīmē, ka lapā, kurā vienā rindā ir 12 sleju režģis, varat harmoniski sakārtot sešus, četrus, trīs vai divus elementus. Tā kā šis numurs vienmēr ir dalāms ar vienu un vienu, varat ievietot 12 vai vienu elementu pēc kārtas.

Turklāt, ja jūs nepievēršat uzmanību galējām kolonnām, 12 kolonnu režģis ļauj harmoniski izvietot piecu vai desmit elementu rindā.

Režģi ar atšķirīgu kolonnu skaitu nenodrošina šādu elastību. Piemēram, 16 ir sadalīts 8, 4 un 2. Lai harmoniski novietotu trīs vai sešus elementus pēc kārtas, varat nomest divas ārējās kolonnas.

Bet, lai ievietotu rindā piecus vai desmit elementus, jums ir jānogriež trīs galējās kolonnas. Tas nav ļoti ērti.

Izvēloties kolonnu skaitu tīklā, izspiediet saturu, kuru plānojat izvietot lapā. Piemēram, ja satura lapu izveidojat bez sānjoslas, pietiek ar vienu kolonnu vai plašu taisnstūra vietu lapas centrā. Un, ja jūs izveidosiet portfeļa lapu vai foto galeriju, jums būs nepieciešams sarežģīts moduļu tīkls.

Bet, lai izveidotu prototipu 99 gadījumos no 100, ir ērti strādāt ar 12 kolonnu režģi. Profesionāls dizainers vai tīmekļa izstrādātājs, pateicoties kolonnu tīklam, pārvērš jūsu prototipu vairākos izkārtojumos dažādiem ekrāna izmēriem.

Veidojot režģi, jums jāizvēlas ievilkumu platums lapas malās, ievilkumu platums starp kolonnām un pašu kolonnu platums. Kopumā prototipēšanas laikā nav nepieciešams noteikt šīs vērtības ar pikseļu precizitāti. Vēlāk par to rūpēsies dizainers un tīmekļa izstrādātājs. Bet ērtības labad izmantojiet šādus ieteikumus:

  • Izvēlētajā prototipēšanas programmā strādājiet ar darbvirsmas veidnes lapu. Lapas platumam jābūt vismaz 960 pikseļiem. Atstājiet mobilo profesionāļu pieeju.
  • Maržām jābūt vismaz divreiz lielākām par ievilkumu platumu starp kolonnām (notekcaurulēm). Šķiet, ka šī metode vada apmeklētāja skatu lapā.
  • Jo plašāka ir telpa starp kolonnām, jo ​​lielāka ir “gaisa” lapa vai brīva telpa.

Attēlā redzams režģa piemērs, ar kuru strādāt.

Kā izmantot kolonnu režģi elastīgi, plānojot lapas izkārtojumu

Kolonnas režģis - lapas izkārtojuma pamats. To var ilustrēt ar tipisku izkārtojumu no raksta "Kā izveidot prototipa lapas" (skat. Foto).

Šajā gadījumā galvene un kājene aizņem visas 12 slejas. Galvenā vienība un sānjosla var aizņemt attiecīgi 9 un 3 vai 10 un 2 kolonnas.

Ar kolonnas režģa palīdzību ir iespējams veidot sarežģītākus izkārtojumus, piemēram, sadalot 5–5–2, 3–6–3 kolonnas utt.

Tas ir, izmantojot režģi ar 12 kolonnām, ir iespējams izveidot izkārtojumus, kas sastāv no blokiem ar dažādiem platumiem. Var būt vairāki bloki pēc kārtas.

Izvēloties bloku skaitu un platumu, vadieties pēc satura, kuru plānojat publicēt lapā. Reāli piemēri palīdzēs to saprast.

Lapā "Savienots" ir navigācijas izvēlne un kategoriju kartes.

Šādu izkārtojumu var attēlot četru bloku formā trīs kolonnās platumā.

Vēl viens piemērs no "Svyaznoy" vietnes: viena ražotāja tālruņu katalogs ar navigācijas izvēlni un četrām produktu kartēm pēc kārtas.

Šīs lapas izkārtojumu var izdarīt uz režģa ar 16 slejām. Navigācijas izvēlne aizņems četras kolonnas un produktu kartes - trīs kolonnas.

Tālāk sniegtais praktiskais piemērs palīdzēs labāk izprast principus, kas saistīti ar kolonnu tīklu.

Izmantojot tīklu: prototipa lapas piemērs

Lai izveidotu lapas prototipu, es izmantoju režģi ar 12 kolonnām. Ieslēgts un papīra režģis, lai atvieglotu elementu sakārtošanu vertikālā virzienā.

Virsrakstam pievienoju logotipu, reklāmguvumu pogu un navigācijas izvēlni. Pievērsiet uzmanību režģa izlīdzināšanai: elementi aizņem attiecīgi 4, 4 un 9 kolonnas.

Zem galvenes pievienojiet lielu slīdni. Tas aizņem 10 centrālos skaļruņus.

Zem slīdņa es pievienoju trīs produktu kartes, kas sastāv no fotoattēla, teksta un navigācijas pogas. Kartes aizņem četras kolonnas.

Zem karšu lapa ir sadalīta divos vertikālos blokos: galvenais un sānjoslas. Tās aizņem attiecīgi 8 un 4 slejas.

Kājenē pievienojiet informāciju par pakalpojumu. Lapas prototipu var apskatīt, izmantojot pogu Priekšskatījums ekrāna augšējā labajā stūrī.

Priekšskatījuma režīmā režģis netiek rādīts. Tas ļauj novērtēt prototipu bez vizuāliem traucējumiem un, ja nepieciešams, atgriezties rediģēšanā. Piemēram, priekšskatījuma režīmā slīdnis šķita pārāk šaurs.

Es palielinu slīdņa platumu līdz 12 kolonnām vai noņemiet kontrolierus no attēliem tīkla ārējās kolonnās. Es atceros, ka blakus navigācijas izvēlnei atstāj vietu meklēšanas formai.

Prototips ir gatavs.

Vienkāršs un spēcīgs instruments

Tā ir tīkla galīgā iezīme. Ar šī rīka palīdzību jebkurš speciālists bez tehniskās apmācības saņem elastīgu ietvaru, uz kura ir ērti veidot lapas prototipus. Jūs varat izmantot režģi uz papīra lapas vai populārās prototipēšanas programmās. Nākotnē dizainers un attīstītājs varēs pārvērst kolonnas režģi, lai pārveidotu prototipu ar zemām detaļām pilnvērtīgā izkārtojumā un adaptīvajā lapā.

Skatiet videoklipu: RTU zinātnieki izveidojuši bezvadu kardiogrāfu (Aprīlis 2020).

Loading...

Atstājiet Savu Komentāru