23Jul
Pencil är ett trådverktyg som vi kan använda för att skissa en mock up av vår applikations användargränssnitt. Den fantastiska sak om penna är att den är lätt, enkel att använda och tätt integrerad med Firefox. Ovanpå det är det en gratis öppen källkod! I slutet av artikeln kommer vi att ge dig en enkel demonstration om hur du använder blyertspenna för att skapa en Brizzly som wireframe.
Varför skapar vi trådramar?
En wireframe är en skiss av en sidlayout idé. En wireframe fokuserar på informationsdesignen på en sida för att säkerställa att designen passar in i vad användaren behöver. En wireframe består vanligtvis av olika former( t.ex. lådor, ovalar och diamanter) för att representera innehåll, funktionella och navigeringselement. Dessa former visar placeringen på sidan.
Först kan det verka som ett slöseri med tid som skapar grova skisser på en sida. En trådram är viktigt för att få dina användare att fokusera på viktelementet på din sida. Skapa en grov skiss på en sida, utan fancy visuella element, skifta användarens uppmärksamhet åt viktiga element som dimensionering, layout och placering av dina sidkomponenter. Vi kommer att börja förstå vad kunden verkligen vill ha och behöver ut av programvaran när användaren börjar fokusera på viktiga delar av en sida. Genom att skapa en trådram kan du och dina användare samarbeta effektivt och identifiera potentiellt designproblem tidigt.
Komma igång med penna
Ladda ner penna från Pencils tilläggssida. När du har installerat Pencil, är den tillgänglig från "Verktyg" & gt;"Pencil Sketching".
Så ser Brizzly ut. Det är en ganska cool webbapplikation som samlar din Facebook och Twitter på en enda sida.
Detta är slutresultatet av trådramen. Huvudformerna i denna trådram är rektanglar, textrutor och flikar. Nästa avsnitt i artikeln kommer att ge ett enkelt exempel hur man skapar varje form.
Skapa en rektangel
Det första steget att skapa en trådramsform är att dra en form från menyn "Shape Collections" på duken.
Ändra rektangeln till lämplig bredd och höjd.
Vi kan anpassa texten, gränsen och bakgrundsfärgen av någon form i penna. Högerklicka på rektangeln och välj Egenskaper för att öppna Egenskaper-fönstren. Detta är skärmens bakgrundsegenskaper. Ställ in rektangulär bakgrundsfärg till vit( #FFFFFF).
Klicka på fliken "Border" och justera kantegenskaperna. Ange gränsvärdet till svart( # 000000) och ändra gränsvikt till 1.
Skärmbilden för textegenskaper låter oss anpassa typsnittet, storleken, stilen, vikten, färgen, ljusstyrkan och opaciteten i texten.
Skapa flikar
Hemmet, utkastet, bildflikarna är tre flikar som staplas ovanpå varandra. Dra tre "Tabs Panel" i rektangeln.Ändra storlek på varje flik så att varje flik visar sida vid sida.
Öppna skärmen för textegenskaper för att justera teckensfärgen på fliken "Bilder" och "Draft".Ställ den på Grå( # 989898).
Skapa text
Dra "Text" -formen på duken för att skapa varje meny. Vi kan justera textutseendet genom att öppna textegenskapsfönstret.
Användbara tips för att ändra färg
Färg är en av de viktigaste delarna i att leverera en behaglig trådram. Det mest exakta sättet att byta färg på en form är att ange färgens HTML-kod. Att räkna ut HTML-koden för en viss färg kan vara svårt. Vi kan använda HTML Color Cheat Sheet från w3cschools.com för att leta upp rätt HTML-kod för en viss färg.
Vi gillar också att använda colorzilla för att välja färger från skärmen och använda den i penna. Klicka på ikonen för ögondroppar i nedre vänstra hörnet av Firefox för att välja färg på skärmen. Vi kan också öppna ColorZillas färgplockare genom att dubbelklicka på ögondroppsikonen. Bara kopiera klistra in Hex-koden i Pencils färg HTML-kod.
Slutsats
Penna är lätt att använda trådverktyg. Pencil integration med Firefox gör det möjligt för oss att använda andra Firefox plugin för att hjälpa till att skapa en bättre wireframe
Länkar
Ladda ner Pencil
Hämta Colorzilla
W3C HTML Färg Cheat Sheet
