Så här använder du rader när du skapar prototyper av sidor

Denna artikel kommer att vara användbar om du gör prototyper av webbplatser för att få dina idéer till webbdesigners och utvecklare. Handledningen lär dig hur man prototyper ett nät.

Ansvarsbegränsning: Om du gör en prototyp utan ett rutnät kommer inget hemskt att hända. En professionell designer eller webbutvecklare kommer att lägga till ett rutnät för dig. Men om du lär dig hur du arbetar med nät, kommer prototypernas kvalitet att öka dramatiskt, och du tittar på sidorna på webbplatser på ett annat sätt.

Vad är ett nät och varför använder det

Ett rutnät är ett system med vertikala eller vertikala och horisontella linjer som delar en sida i kolumner eller celler. Skapas med hjälp av en rutnät eller en cell bildar strukturen eller skelettet på sidan, med vilken designers organiserar innehåll.

Det är med hjälp av rutnät du gör en ram där du bär alla element på sidan: logotyp, meny, skjutreglage, form, bild och så vidare. Tack vare skelettet kan sidans delar harmoniseras, välja deras relativa och absoluta dimensioner, sätta den visuella rytmen.

En viktig punkt: näten ger flexibilitet i design, vilket behövs för att anpassa layouten till olika skärmstorlekar. Det vill säga användningen av ramen - ett steg för att skapa en responsiv sida.

På den färdiga sidan är gallret oftast inte synligt. Men de kan ses på prototyper och layouter.

Vad är nätet

Om du inte är professionell i design och webbutveckling, är det tillräckligt att veta om förekomsten av två typer av nät: kolumnar och moduler.

Ett kolumngrid är ett system med vertikala linjer som delar en sida i kolumner och inslag.

Mörka och breda områden i illustrationen är kolumner, lätta och smala inslag.

Modulgitteret är ett system med vertikala och horisontella linjer som delar sidan i moduler.

I det här fallet är modulerna rektanglar på 20 x 20 pixlar, markerade med tjockare linjer.

Om du inte är en professionell webbdesigner och utvecklare, använd ett kolumngrid för att skapa prototyper. Det finns minst två skäl till detta. Först: Kolonnnätet är väldigt populärt på webben. De bygger populära ramar, till exempel Bootstrap, Bulma, Skeleton, vilka webbutvecklare använder för sidlayout.

Den andra anledningen: för prototypen på sidan är det tillräckligt att använda kolumnrutan. Om det behövs kommer en professionell webbdesigner att lägga till ett modulärt rutnät när det blir din skiss i en komplett layout.

Hur man använder maskor under prototypning

Detta är en praktisk del som beskriver hur man använder maskor när man skapar prototyper.

Var att rita galler

Svaret beror på de verktyg du använder för prototypning. Räcken kan dras för hand om prototypen finns på ett pappersark. Om skissen skapas med speciella program och tjänster, dyker du in i inställningarna. Verktygen för populäraste prototypprogram har grids. Exempel nedan.

För att aktivera rutnätet i Moqups klickar du på ikonen Arbetsyta och markerar alternativet Visa layoutgrid. Om du behöver ett modulärt rutnät markerar du alternativet Visa papperstabell.

För att aktivera grids i Proto.io, välj inställningsmenyn Inställningar - Grid.

Markera alternativet Visa layout. Välj antal kolumner, deras bredd och bredden på streck mellan kolumnerna och längs sidans kanter. Dessa inställningar kommer att diskuteras nedan.

Om du behöver ett modulärt rutnät, markera alternativet Visa rutnät och ange inställningarna.

Om du använder Justinmind Prototype väljer du fliken Mallar i redigeraren och använder en av mallrutorna: 12 eller 16 kolumner.

Om du använder annan prototypprogramvara, hitta maskorna själv.

Hur man bygger ett rutnät

Bygg ett rutnät - välj antal kolumner, deras bredd, samt bredden på streck mellan kolumnerna och längs sidans kanter.

Fråga: Hur många kolumner ska vara i kolonnnätet? Det korta svaret är 12. Poängen är inte ens att de flesta CSS-ramar som webbutvecklare använder bygger på 12-kolonnnät. Om det behövs ändras standardinställningarna för ramarna.

Numret 12 är nästan magiskt: det är uppdelat i 6, 4, 3 och 2. Det betyder att på en sida med ett rutnät med 12 kolumner i en rad kan du harmoniskt arrangera sex, fyra, tre eller två element. Eftersom numret alltid är delbart i sig och med en, kan du placera 12 eller ett element i rad.

Dessutom, om du inte uppmärksammar de extrema kolumnerna, tillåter nätet med 12 kolumner att du harmoniskt kan placera i en rad med fem eller 10 element.

Grids med ett annat antal kolumner ger inte sådan flexibilitet. Till exempel är 16 uppdelad i 8, 4 och 2. För att harmoniskt placera tre eller sex element i rad kan du släppa två yttre kolumner.

Men för att lägga i en rad med fem eller 10 element måste du släppa de tre extrema kolumnerna. Detta är inte särskilt bekvämt.

När du väljer antalet kolumner i rutnätet, tryck av det innehåll du planerar att placera på sidan. Om du till exempel gör en innehållssida utan sidofält, är en kolumn eller ett stort rektangulärt utrymme i mitten av sidan tillräckligt. Och om du gör en portföljsida eller ett fotogalleri behöver du ett komplext modulärt rutnät.

Men för att skapa en prototyp i 99 fall av 100 är det bekväm att arbeta med ett rutnät med 12 kolumner. En professionell designer eller webbutvecklare tack vare kolonnretet kommer att göra din prototyp till flera layouter för olika skärmstorlekar.

När du bygger ett rutnät måste du välja bredden på streckarna vid sidans kanter, bredden på streck mellan kolumnerna och bredden på kolumnerna själva. Vid prototyper är det inte nödvändigt att bestämma dessa värden med pixelnoggrannhet. Senare kommer designer och webbutvecklare att ta hand om detta. Men för enkelhets skyld använd följande rekommendationer:

  • I det valda programmet för prototypning, arbeta med mallsidan för skrivbordet. Sidbredden ska vara minst 960 pixlar. Lämna tillvägagångssättet hos mobila första yrkesverksamma.
  • Marginalerna bör vara minst två gånger bredden på streckarna mellan kolumnerna (rännor). Denna teknik verkar leda besökarens syn på sidan.
  • Ju bredare utrymmet mellan kolumnerna, desto mer på "luft" -sidan eller ledigt utrymme.

Ett exempel på ett rutnät att arbeta kan ses i illustrationen.

Hur du använder kolonnytan flexibelt när du planerar sidlayout

Kolumngrid - grunden för sidlayouten. Detta kan illustreras med en typisk layout från artikeln "Hur man skapar prototypsidor" (se bild).

I detta fall upptar rubriken och sidfoten alla 12 kolumner. Huvudenheten och sidofältet kan uppta 9 respektive 3 eller 10 respektive 2 kolumner.

Med hjälp av kolumnraden är det möjligt att bygga mer komplexa layouter, till exempel med fördelningen av kolumnerna 5-5-2, 3-6-3, och så vidare.

Det är att använda ett rutnät med 12 kolumner, det är möjligt att konstruera layouter som består av block med olika bredder. Det kan finnas flera block i rad.

När du väljer blockens antal och bredd, vägledas av det innehåll du planerar att publicera på sidan. Verkliga exempel hjälper till att förstå detta.

På sidan "Ansluten" finns en navigeringsmeny och kategorikort.

En sådan layout kan representeras i form av fyra block tre kolumner i bredd.

Ett annat exempel från webbplatsen "Svyaznoy": en katalog över telefoner från en tillverkare med en navigationsmeny och fyra produktkort i rad.

Layouten på denna sida kan göras på ett rutnät med 16 kolumner. Navigationsmenyn kommer att ta fyra kolumner och produktkort - tre kolumner vardera.

Ett praktiskt exempel nedan hjälper till att bättre förstå principerna för att arbeta med ett kolonnät.

Använda rutnätet: Ett exempel på en prototypsida

För att göra en prototyp av sidan använde jag ett rutnät med 12 kolumner. Slå på och pappersnät, så att det blir lättare att arrangera elementen i vertikal riktning.

Jag lägger till en logotyp, en omvandlingsknapp och en navigeringsmeny till rubriken. Var uppmärksam på nätets inriktning: elementen upptar respektive 4, 4 och 9 kolumner.

Under huvudet lägg till en stor reglage. Det upptar 10 centrala högtalare.

Under reglaget lägger jag till tre produktkort, som består av ett foto, en text och en navigeringsknapp. Kort tar upp fyra kolumner.

Under korten är sidan uppdelad i två vertikala block: huvud- och sidofältet. De upptar 8 respektive 4 kolumner.

I sidfoten lägger du till serviceinformation. Prototypen av sidan kan ses med hjälp av knappen Förhandsgranska i övre högra hörnet av skärmen.

I förhandsgranskningsläget visas inte rutnätet. Detta gör det möjligt för oss att utvärdera prototypen utan visuell inblandning och om nödvändigt återvända till redigering. Till exempel i förhandsgranskningsläget verkade reglaget för smalt.

Jag ökar skjutbredden till 12 kolumner eller tar bort kontrollerna från bilderna till de yttersta kolumnerna i rutnätet. Jag kommer ihåg att bredvid navigeringsmenyn lämnade rummet för sökformuläret.

Prototypen är klar.

Enkelt och kraftfullt verktyg

Detta är den sista egenskapen hos gallret. Med hjälp av det här verktyget får någon specialist utan teknisk utbildning en flexibel ram som gör det lätt att bygga prototyper på sidan. Du kan använda gallret på ett pappersark eller i populära prototypprogram. I framtiden kommer konstruktören och utvecklaren att kunna konvertera kolonnätet för att vrida prototypen med låga detaljer till en komplett layout och adaptiv sida.

Loading...

Lämna Din Kommentar