Ako používať mriežky pri vytváraní prototypov stránok

Tento článok bude užitočný, ak urobíte prototypy stránok, aby vaše nápady web dizajnérov a vývojárov. Tutoriál vás naučí, ako prototypovať sieť.

Vyhlásenie: ak urobíte prototyp bez mriežky, nestane sa nič hrozné. Profesionálny dizajnér alebo webový vývojár vám pridá mriežku. Ale ak sa naučíte pracovať s mriežkami, kvalita prototypov sa dramaticky zvýši a na stránky stránok sa pozeráte iným spôsobom.

Čo je to mriežka a prečo ju používať

Mriežka je systém vertikálnych alebo vertikálnych a horizontálnych čiar, ktoré rozdeľujú stránku na stĺpce alebo bunky. Vytvorené pomocou stĺpca mriežky alebo bunky tvoria štruktúru alebo kostru stránky, s ktorou dizajnéri organizujú obsah.

To znamená, že pomocou mriežky urobíte rám, na ktorom budete nosiť všetky prvky stránky: logo, menu, posuvník, formulár, obrázok a tak ďalej. Vďaka kostre môžu byť prvky stránky harmonicky umiestnené, zvoliť ich relatívne a absolútne rozmery, nastaviť vizuálny rytmus.

Dôležitý bod: mriežky poskytujú flexibilitu dizajnu, ktorá je potrebná na prispôsobenie rozloženia rôznym veľkostiam obrazovky. To znamená, že použitie rámca - krok vytvoriť citlivé stránky.

Na hotovej stránke zvyčajne nie sú viditeľné mriežky. Ale možno ich vidieť na prototypoch a rozloženiach.

Aké sú mriežky

Ak nie ste profesionálne zapojení do dizajnu a webového vývoja, stačí vedieť o existencii dvoch typov sietí: stĺpcových a modulárnych.

Mriežka stĺpca je systém zvislých čiar, ktoré rozdeľujú stránku na stĺpce a zarážky.

Tmavé a široké oblasti na obrázku sú stĺpce, ľahké a úzke sú odsadenia.

Modulárna mriežka je systém vertikálnych a horizontálnych línií, ktoré rozdeľujú stránku na moduly.

V tomto prípade sú moduly obdĺžniky s rozmermi 20 x 20 pixelov, označené hrubšími čiarami.

Ak nie ste profesionálny web designer a vývojár, použite stĺpcovú mriežku na vytvorenie prototypov. Na to existujú aspoň dva dôvody. Po prvé: stĺpové mriežky sú veľmi populárne na webe. Vytvárajú populárne rámce, napríklad Bootstrap, Bulma, Skeleton, ktoré weboví vývojári používajú na rozloženie stránky.

Druhý dôvod: pre prototyp stránky stačí použiť stĺpcovú mriežku. Ak je to potrebné, profesionálny web designer pridá modulárny mriežku, keď zmení váš náčrt do plnohodnotného rozloženia.

Ako používať siete počas prototypovania

Toto je praktická časť, ktorá učí, ako používať siete pri vytváraní prototypov.

Kde kresliť mriežky

Odpoveď závisí od nástrojov, ktoré používate na prototypovanie. Mriežky možno kresliť ručne, ak je prototyp na hárku papiera. Ak je skica vytvorená pomocou špeciálnych programov a služieb, ponorte sa do nastavení. Nástroje najpopulárnejšieho prototypového softvéru majú siete. Príklady uvedené nižšie.

Ak chcete povoliť mriežku v Moqups, kliknite na ikonu Pracovný priestor a začiarknite možnosť Zobraziť mriežku rozloženia. Ak potrebujete modulárnu mriežku, začiarknite možnosť Zobraziť mriežku papiera.

Ak chcete povoliť mriežky v proto.io, vyberte ponuku Nastavenia - Nastavenia mriežky.

Začiarknite možnosť Zobraziť rozloženie. Vyberte počet stĺpcov, ich šírku a šírku odsadení medzi stĺpcami a okrajmi stránky. Tieto nastavenia budú popísané nižšie.

Ak potrebujete modulárnu mriežku, začiarknite možnosť Zobraziť mriežku a zadajte nastavenia.

Ak používate Justinmind Prototype, v editore vyberte kartu Šablóny a použite jednu z mriežok šablón: 12 alebo 16 stĺpcov.

Ak používate iný prototypový softvér, nájdite si oká sami.

Ako vybudovať mriežku

Vytvorenie mriežky - vyberte počet stĺpcov, ich šírku, ako aj šírku odsadení medzi stĺpcami a okrajmi stránky.

Otázka: koľko stĺpcov by malo byť v mriežke stĺpca? Stručná odpoveď je 12. Nejde ani o to, že väčšina CSS rámcov, ktoré používajú weboví vývojári, je postavená na 12-stĺpcových sieťach. V prípade potreby sa zmenia predvolené nastavenia rámcov.

Číslo 12 je takmer magické: je rozdelené na 6, 4, 3 a 2. To znamená, že na stránke s mriežkou 12 stĺpcov v jednom rade môžete harmonicky usporiadať šesť, štyri, tri alebo dva prvky. Pretože číslo je vždy deliteľné samo o sebe a jedným, môžete umiestniť 12 alebo jeden prvok v rade.

Navyše, ak nevenujete pozornosť extrémnym stĺpcom, mriežka 12 stĺpcov vám umožňuje harmonicky umiestniť do radu piatich alebo desiatich prvkov.

Mriežky s iným počtom stĺpcov neposkytujú takúto flexibilitu. Napríklad 16 je rozdelených na 8, 4 a 2. Aby bolo možné harmonicky umiestniť tri alebo šesť prvkov v rade, môžete vypustiť dva vonkajšie stĺpce.

Ak však chcete vložiť do radu päť alebo desať prvkov, musíte opustiť tri extrémne stĺpce. To nie je veľmi pohodlné.

Pri výbere počtu stĺpcov v mriežke odpojte obsah, ktorý plánujete umiestniť na stránku. Ak napríklad vytvoríte stránku s obsahom bez bočného panela, stačí jeden stĺpec alebo široký obdĺžnikový priestor v strede stránky. A ak vytvoríte stránku portfólia alebo fotogalériu, budete potrebovať komplexnú modulárnu sieť.

Ale na vytvorenie prototypu v 99 prípadoch zo 100 je vhodné pracovať s mriežkou 12 stĺpcov. Profesionálny dizajnér alebo webový vývojár, vďaka mriežke stĺpcov, zmení váš prototyp na niekoľko rozložení pre rôzne veľkosti obrazovky.

Pri vytváraní mriežky musíte zvoliť šírku odsadení na okrajoch stránky, šírku odsadení medzi stĺpcami a šírku samotných stĺpcov. Počas prototypovania nie je potrebné určovať tieto hodnoty s presnosťou pixlov. Neskôr sa o to postará dizajnér a web developer. Ale pre pohodlie používajte nasledujúce odporúčania:

  • Vo vybranom programe pre prototypovanie pracujte so stránkou šablóny pre pracovnú plochu. Šírka stránky by mala byť aspoň 960 pixlov. Nechajte prístup mobilných prvých profesionálov.
  • Okraje by mali byť aspoň dvojnásobkom šírky zarážok medzi stĺpikmi (žľaby). Zdá sa, že táto technika usmerňuje zobrazenie návštevníka na stránke.
  • Čím širší je priestor medzi stĺpcami, tým viac na stránke "vzduch" alebo voľnom priestore.

Na obrázku je vidieť príklad mriežky, s ktorou sa dá pracovať.

Ako flexibilne používať mriežku stĺpcov pri plánovaní rozloženia stránky

Stĺpec mriežky - základ rozloženia stránky. To možno ilustrovať typickým usporiadaním z článku "Ako vytvoriť prototypové stránky" (viď foto).

V tomto prípade záhlavie a päta zaberajú všetkých 12 stĺpcov. Hlavná jednotka a bočný panel môžu zaberať 9 a 3 alebo 10 a 2 stĺpce.

Pomocou stĺpcovej mriežky je možné vytvoriť zložitejšie rozloženia, napríklad s rozdelením stĺpcov 5–5–2, 3–6–3 a tak ďalej.

To znamená, že s použitím mriežky s 12 stĺpcami je možné zostaviť rozloženia pozostávajúce z blokov s rôznymi šírkami. Môže byť niekoľko blokov v rade.

Pri výbere počtu a šírky blokov sa riaďte obsahom, ktorý chcete na stránke publikovať. Skutočné príklady to pomôžu pochopiť.

Na stránke "Pripojené" sa nachádza navigačné menu a karty kategórií.

Takéto usporiadanie môže byť znázornené vo forme štyroch blokov s tromi stĺpcami na šírku.

Ďalší príklad z lokality "Svyaznoy": adresár telefónov jedného výrobcu s navigačným menu a štyrmi produktovými kartami v rade.

Rozloženie tejto stránky je možné vykonať na mriežke so 16 stĺpcami. Navigačné menu bude mať štyri stĺpce a produktové karty - tri stĺpce.

Nižšie uvedený praktický príklad pomôže lepšie pochopiť princípy práce so stĺpcovou mriežkou.

Použitie mriežky: príklad stránky prototypu

Na vytvorenie prototypu stránky som použil mriežku s 12 stĺpcami. Zapnuté a papierové mriežky, aby sa uľahčilo usporiadanie prvkov vo vertikálnom smere.

Do hlavičky pridám logo, tlačidlo konverzie a navigačné menu. Dbajte na zarovnanie mriežky: prvky zaberajú 4, 4 a 9 stĺpcov.

Pod hlavičkou pridajte veľký jazdec. Zaberá 10 centrálnych reproduktorov.

Pod jazdcom pridám tri produktové karty, ktoré sa skladajú z fotografie, textu a navigačného tlačidla. Karty zaberajú štyri stĺpce.

Pod kartami je stránka rozdelená na dva vertikálne bloky: hlavný a bočný panel. Zaberajú 8 a 4 stĺpce.

V päte pridajte informácie o službe. Prototyp stránky je možné zobraziť pomocou tlačidla Náhľad v pravom hornom rohu obrazovky.

V režime náhľadu sa mriežka nezobrazí. To nám umožňuje vyhodnotiť prototyp bez vizuálnej interferencie av prípade potreby sa vrátiť k editácii. Napríklad v režime náhľadu sa posuvník zdal príliš úzky.

Zvýšim šírku posúvača na 12 stĺpcov alebo odstránim ovládače z obrázkov do najvzdialenejších stĺpcov mriežky. Pamätám si, že vedľa navigačného menu zostal priestor pre vyhľadávací formulár.

Prototyp je pripravený.

Jednoduchý a výkonný nástroj

Toto je konečná charakteristika siete. S pomocou tohto nástroja získa každý odborník bez technickej prípravy flexibilný rámec, na ktorom je vhodné vytvárať prototypy stránky. Môžete použiť mriežku na list papiera alebo v populárnych prototypových programoch. V budúcnosti bude projektant a vývojár schopný konvertovať stĺpcovú mriežku tak, aby sa prototyp zmenil na malé detaily do plnohodnotného rozloženia a adaptívnej stránky.

Zanechajte Svoj Komentár