Kako uporabljati mrežo pri izdelavi prototipov strani

Ta članek bo uporaben, če izdelate prototipe spletnih mest, ki bodo vaše ideje pripeljale do spletnih oblikovalcev in razvijalcev. Vadnica vas bo naučila, kako izdelati mrežo.

Opozorilo: če naredite prototip brez mreže, se ne bo zgodilo nič hudega. Profesionalni oblikovalec ali spletni razvijalec vam bo dodal mrežo. Toda če se boste naučili, kako delati z mrežami, se bo kakovost prototipov dramatično povečala in na straneh strani boste gledali na drugačen način.

Kaj je mreža in zakaj jo uporabljati

Mreža je sistem navpičnih ali navpičnih in vodoravnih črt, ki delijo stran na stolpce ali celice. Ustvarjeno z uporabo stolpca mreže ali celice, ki tvori strukturo ali okostje strani, s katero oblikovalci organizirajo vsebino.

To pomeni, da s pomočjo rešetk naredite okvir, na katerem nosite vse elemente strani: logotip, meni, drsnik, obliko, sliko in tako naprej. Zahvaljujoč skeletu se lahko elementi strani harmonično umeščajo, izberejo njihove relativne in absolutne dimenzije, določijo vizualni ritem.

Pomembna točka: mreže zagotavljajo fleksibilnost oblikovanja, ki je potrebna za prilagoditev postavitve različnim velikostim zaslona. To pomeni, da je uporaba okvira - korak za ustvarjanje odzivne strani.

Na končani strani mreže večinoma niso vidne. Lahko pa jih vidimo na prototipih in postavitvah.

Kakšne so mreže

Če se ne ukvarjate profesionalno z oblikovanjem in spletnim razvojem, je dovolj, da veste o obstoju dveh vrst mrež: stolpni in modularni.

Vrstica stolpca je sistem navpičnih črt, ki delijo stran na stolpce in alineje.

Temna in široka območja na ilustraciji so stolpci, lahki in ozki so alineje.

Modularna mreža je sistem navpičnih in vodoravnih črt, ki stran razdelijo na module.

V tem primeru so moduli pravokotniki velikosti 20 x 20 pik, označeni z debelejšimi črtami.

Če niste profesionalni spletni oblikovalec in razvijalec, uporabite mrežo stolpcev za izdelavo prototipov. Za to obstajata vsaj dva razloga. Prvič: rešetke stolpcev so zelo priljubljene na spletu. Gradijo priljubljene okvire, na primer Bootstrap, Bulma, Skeleton, ki jih spletni razvijalci uporabljajo za postavitev strani.

Drugi razlog: za prototip strani je dovolj, da uporabite mrežo stolpcev. Če je potrebno, bo profesionalni spletni oblikovalec dodal modularno mrežo, ko bo vašo skico spremenil v polnopravno postavitev.

Kako uporabljati očesa med izdelavo prototipov

To je praktični del, ki uči, kako uporabljati mrežice pri izdelavi prototipov.

Kje narisati mreže

Odgovor je odvisen od orodij, ki jih uporabljate za izdelavo prototipov. Mreže je mogoče narisati ročno, če je prototip na listu papirja. Če je skica ustvarjena s posebnimi programi in storitvami, se poglobite v nastavitve. Orodja najbolj priljubljene programske opreme za izdelavo prototipov imajo omrežja. Primeri spodaj.

Če želite omogočiti omrežje v Moqups, kliknite ikono Workspace in označite možnost Show layout grid. Če potrebujete modularno mrežo, označite možnost Prikaži papirno mrežo.

Če želite omogočiti omrežja v Proto.io, izberite meni Nastavitve - Mreža.

Preverite možnost Pokaži postavitev. Izberite število stolpcev, njihovo širino in širino zamikov med stolpci in vzdolž robov strani. Te nastavitve bodo obravnavane spodaj.

Če potrebujete modularno mrežo, označite možnost Prikaži mrežo in določite nastavitve.

Če uporabljate Justinmind Prototype, v urejevalniku izberite zavihek Predloge in uporabite eno od mrežnih predlog: 12 ali 16 stolpcev.

Če uporabljate drugo programsko opremo za izdelavo prototipov, poiščite mrežna očesa.

Kako zgraditi mrežo

Build a grid - izberite število stolpcev, njihovo širino in širino zamikov med stolpci in vzdolž robov strani.

Vprašanje: koliko stolpcev naj bo v mreži stolpcev? Kratek odgovor je 12. Bistvo je, da večina ogrodij CSS, ki jih uporabljajo spletni razvijalci, temelji na mrežah z 12 stolpci. Če je potrebno, se privzete nastavitve okvirjev spremenijo.

Številka 12 je skoraj magična: razdeljena je na 6, 4, 3 in 2. To pomeni, da lahko na strani z mrežo 12 stolpcev v eni vrstici harmonično uredite šest, štiri, tri ali dva elementa. Ker je število vedno deljivo samo zase in eno, lahko postavite 12 ali en element v vrsto.

Poleg tega, če ne boste pozorni na ekstremne stolpce, mreža 12 stolpcev vam omogoča, da se harmonično uvrstite v vrsto petih ali desetih elementov.

Mreže z različnim številom stolpcev ne zagotavljajo takšne prilagodljivosti. Na primer, 16 je razdeljen na 8, 4 in 2. Da bi lahko harmonično postavili tri ali šest elementov v vrsto, lahko spustite dva zunanja stolpca.

Ampak, da bi v vrsto petih ali desetih elementov, morate spustiti tri ekstremne stolpce. To ni zelo priročno.

Ko izberete število stolpcev v mreži, izklopite vsebino, ki jo nameravate postaviti na stran. Na primer, če naredite stran z vsebino brez stranske vrstice, je dovolj en stolpec ali širok pravokoten prostor v središču strani. In če naredite portfeljsko stran ali galerijo fotografij, boste potrebovali kompleksno modularno mrežo.

Toda za izdelavo prototipa v 99 primerih od 100 je priročno delo z mrežo 12 stolpcev. Profesionalni oblikovalec ali spletni razvijalec bo, zahvaljujoč mreži stolpcev, pretvoril vaš prototip v več postavitev za različne velikosti zaslona.

Pri gradnji mreže morate izbrati širino zamikov na robovih strani, širino zamikov med stolpci in širino stolpcev. Na splošno pri določanju prototipov teh vrednosti ni treba določiti s točnostjo pikslov. Kasneje bo oblikovalec in spletni razvijalec poskrbel za to. Za lažje uporabo pa uporabite naslednja priporočila:

  • V izbranem programu za izdelavo prototipov uporabite stran s predlogo za namizje. Širina strani mora biti vsaj 960 slikovnih pik. Pustite pristop mobilnih prvih strokovnjakov.
  • Robovi morajo biti vsaj dvakrat večji od širin zamika med stebri (žlebovi). Zdi se, da ta tehnika usmerja pogled obiskovalca znotraj strani.
  • Čim širši je prostor med stolpci, tem bolj na strani "zrak" ali na prostem.

Primer mreže, s katero lahko delate, je prikazan na sliki.

Kako uporabljati fleksibilno mrežo stolpcev pri načrtovanju postavitve strani

Omrežje stolpcev - osnova postavitve strani. To lahko ponazorimo s tipično postavitvijo iz članka "Kako ustvariti prototipne strani" (glej fotografijo).

V tem primeru glava in noga zasedata vseh 12 stolpcev. Glavna enota in stranska vrstica lahko zasedata 9 in 3 ali 10 in 2 stolpce.

S pomočjo mreže stolpcev je mogoče zgraditi bolj zapletene postavitve, na primer s porazdelitvijo stolpcev 5–5–2, 3-6–3 in tako naprej.

To pomeni, da je mogoče z mrežo s 12 stolpci zgraditi postavitve, sestavljene iz blokov z različnimi širinami. Mogoče je več blokov zapored.

Pri izbiri števila in širine blokov se ravnajte po vsebini, ki jo nameravate objaviti na strani. Pravi primeri bodo pomagali razumeti to.

Na strani »Povezano« sta navigacijski meni in kategorije kartic.

Takšna postavitev je lahko predstavljena v obliki štirih blokov s tremi stolpci po širini.

Še en primer s strani "Svyaznoy": imenik telefonov enega proizvajalca z navigacijskim menijem in štirimi karticami izdelkov v vrsti.

Postavitev te strani se lahko izvede na mreži s 16 stolpci. Navigacijski meni bo sestavljen iz štirih stolpcev, kartice izdelkov pa po tri stolpce.

Praktični primer spodaj bo pomagal bolje razumeti načela dela z mrežo stolpcev.

Uporaba mreže: primer prototipne strani

Za izdelavo prototipa strani sem uporabil mrežo s 12 stolpci. Vkljućena in papirna mreża, ki omogoća lażjo razporeditev elementov v navpićni smeri.

V glavo dodam logotip, gumb za pretvorbo in navigacijski meni. Bodite pozorni na poravnavo mreže: elementi zavzemajo 4, 4 in 9 stolpce.

Pod glavo dodaj velik drsnik. Zaseda 10 osrednjih zvočnikov.

Pod drsnikom dodam tri kartice izdelkov, ki so sestavljene iz fotografije, besedila in navigacijskega gumba. Kartice imajo štiri stolpce.

Pod kartico je stran razdeljena na dva navpična bloka: glavni in stranski. Zasedajo 8 in 4 stolpce.

V nogo dodajte informacije o storitvi. Prototip strani si lahko ogledate z gumbom Predogled v zgornjem desnem kotu zaslona.

V načinu predogleda mreža ni prikazana. To nam omogoča, da prototip ocenimo brez vizualnih motenj in se po potrebi vrnemo k urejanju. Na primer, v načinu predogleda se je drsnik zdel preozek.

Povečam širino drsnika na 12 stolpcev ali odstranim krmilnike iz slik v najbolj oddaljene stolpce mreže. Spomnim se, da je poleg navigacijskega menija ostalo prostora za iskalni obrazec.

Prototip je pripravljen.

Enostavno in zmogljivo orodje

To je končna značilnost mreže. S pomočjo tega orodja vsak strokovnjak brez tehničnega usposabljanja dobi prilagodljiv okvir, na katerem je primerno izdelati prototipe strani. Omrežje lahko uporabite na listu papirja ali v priljubljenih programih za izdelavo prototipov. V prihodnosti bodo oblikovalci in razvijalci lahko spremenili mrežo stolpcev, da bodo prototip z nizkimi podrobnostmi pretvorili v popolno postavitev in prilagodljivo stran.

Oglejte si video: MOBA-Planungsdienst Anlage 001 Hangviadukt und kleiner Endbahnhof in H0 2 Untertitel (November 2019).

Loading...

Pustite Komentar