Uporabite Firefox za ustvarjanje preprostih modelov
Svinčnik je orodje za žično izdelavo, ki ga lahko uporabimo za skiciranje uporabniškega vmesnika naše aplikacije. Najboljša stvar pri Pencil je, da je lahek, enostaven za uporabo in tesno povezan z Firefoxom. Povrh vsega je brezplačna odprta koda! Na koncu članka vam bomo dali preprost demo, kako uporabiti svinčnik za ustvarjanje žičnega okvirja.
Zakaj ustvarjamo okvirje ?
Žični okvir je skica ideje za postavitev strani. Žični okvir se osredotoča na informacijsko oblikovanje strani, da se zagotovi, da se model prilega potrebam uporabnika. Žični okvir je običajno sestavljen iz različnih oblik (kot so škatle, ovali in diamanti), ki predstavljajo vsebinske, funkcionalne in navigacijske elemente. Te oblike prikazujejo njihovo umestitev na strani.
Sprva se zdi, da je izguba časa ustvarjanje grobe skice strani. Žični okvir je pomemben, če želite, da se uporabniki osredotočijo na element pomembnosti na vaši strani. Ustvarjanje grobe skice strani brez domiselnih vizualnih elementov preusmeri pozornost uporabnika na pomembne elemente, kot so dimenzioniranje, postavitev in umestitev komponent strani. Začeli bomo bolje razumeti, kaj stranka resnično želi in potrebuje od programske opreme, ko se uporabnik začne osredotočati na pomembne elemente strani. Ustvarjanje žičnega okvirja vam in vašim uporabnikom omogoča učinkovito sodelovanje in zgodnje prepoznavanje potencialnega problema pri načrtovanju.
Začetek s svinčnikom
Prenesite Pencil from Pencil's add ons stran. Ko namestite svinčnik, je dostopen iz »Orodja«> »Skiciraj svinčnik«.
Tako izgleda Brizzly. To je zelo kul spletna aplikacija, ki združuje vašo Facebook in Twitter na eni strani.
To je končni rezultat žičnega okvirja. Glavne oblike v tem okvirju so: pravokotniki, besedilna polja in zavihki. Naslednji del članka bo podal preprost primer, kako ustvariti vsako obliko.
Ustvarjanje pravokotnika
Prvi korak pri ustvarjanju oblike žičnega okvirja je povleči obliko iz menija »Zbirke oblik« na platno.
Velikost pravokotnika spremenite na ustrezno širino in višino.
Barvo besedila, obrobe in ozadja poljubne oblike lahko prilagodimo v svinčniku. Z desno tipko kliknite pravokotnik in izberite »Lastnosti«, da odprete okna Lastnosti. To je zaslon z lastnostmi ozadja. Nastavite barvo ozadja pravokotnika na belo (#FFFFFF).
Kliknite zavihek 'Obroba' in prilagodite lastnosti meje. Barvo obrobe nastavite na črno (# 000000) in spremenite težo obrobe na 1.
Zaslon z lastnostmi besedila nam omogoča prilagoditev vrste pisave, velikosti, sloga, teže, barve, svetlosti in motnosti besedila.
Ustvarjanje zavihkov
Zavihek za dom, osnutek, sliko so trije zavihki, ki so zloženi drug na drugega. Povlecite tri plošče »Tabs« v pravokotnik. Spremenite velikost vsakega zavihka, tako da se vsak jeziček prikaže drug ob drugem.
Odprite zaslon z lastnostmi besedila, da prilagodite barvo pisave na kartici »Slike« in »Osnutek«. Nastavi na Sivo (# 989898).
Ustvarjanje besedila
Povlecite obliko »Besedilo« na platno, da ustvarite vsak meni. Videz besedila lahko prilagodimo z dostopom do okna z lastnostmi besedila.
Koristni nasveti za spreminjanje barve
Barva je eden najpomembnejših elementov pri zagotavljanju prijetnega žičnega okvirja. Najbolj natančen način za spreminjanje barve oblike je določitev HTML kode barve. Ugotavljanje HTML kode za določeno barvo je lahko težavno. Lahko uporabimo HTML barvni list iz w3cschools.com, da poiščemo pravo kodo HTML za določeno barvo.
Prav tako radi uporabljamo colorzilla, da izbiramo barve na zaslonu in jo uporabljamo v svinčniku. Kliknite ikono kapalke v spodnjem levem kotu Firefoxa, da izberete barvo na zaslonu. Barvni izbiralnik ColorZilla lahko tudi odprete z dvojnim klikom na ikono kapljice oči. Samo vstavite Hex kodo v barvno HTML kodo Pencil.
Zaključek
Svinčnik je enostaven za uporabo orodje za okovje. Integracija svinčnika z Firefoxom nam omogoča, da uporabimo drugi vtičnik za Firefox, da pomagamo ustvariti boljši okvir
Povezave
Prenesite svinčnik
Prenesite Colorzilla
W3C HTML Color Cheat Sheet
