23Jul

Uporabite Firefox za ustvarjanje preprostih mockupov

svinčnik je žično orodje, ki ga lahko uporabimo za skiciranje modela uporabniškega vmesnika aplikacije. Velika stvar o svinčniku je, da je lahka, enostavna za uporabo in tesno povezana s Firefoxom. Na vrhu je vsa njegova brezplačna odprtokodna aplikacija! Na koncu članka vam bomo dali preprost demo o tem, kako uporabiti svinčnik, da ustvarite žično ogrodje Brizzly.

Zakaj izdelujemo žične okvirje?

Žični okvir je skica ideje o postavitvi strani. Žični okvir se osredotoča na oblikovanje informacij na strani, da se zagotovi, da se design ujema s potrebami uporabnika.Žično ogrodje običajno sestavljajo različne oblike( kot so škatle, ovale in diamanti), ki predstavljajo vsebinske, funkcionalne in navigacijske elemente. Te oblike prikazujejo svojo umestitev na strani.

Sprva se lahko zdi izguba časa, ki ustvarja grobo skico strani.Žični okvir je pomembno, da se vaši uporabniki osredotočijo na element pomembnosti na vaši strani. Ustvarjanje grobe skice strani, brez elegantnih vizualnih elementov, preusmerite pozornost uporabnika na pomembne elemente, kot so velikost, postavitev in postavitev komponent vaše strani. Začeli bomo bolje razumeti, kaj stranka resnično želi in potrebuje iz programske opreme, ko se uporabnik začne osredotočiti na pomembne elemente strani. Ustvarjanje žičnega okvirja vam in vašim uporabnikom učinkovito sodeluje in zgodaj odkrijete morebitne težave pri oblikovanju.

Začetek s svinčnikom

Prenesite svinčnik s strani dodajanja svinčnika. Ko namestite svinčnik, je dostopen iz »Orodja« & gt;"Skica s svinčnikom".

To izgleda, kot izgleda Brizzly. To je precej kul aplikacija, ki agregira vaše 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 predstavil preprost primer, kako ustvariti vsako obliko.

Ustvarjanje pravokotnika

Prvi korak ustvarjanja oblike žičnega okvirja je, da povlečete obliko iz menija »Shape Collections« na platno.

Velikost pravokotnika na ustrezno širino in višino.

Prilagodimo lahko besedilo, barvo in barvo ozadja katerekoli oblike v svinčniku. Z desno tipko kliknite pravokotnik in izberite 'Lastnosti', da odprete okna Lastnosti. To je zaslon z lastnostmi ozadja. Barvo ozadja pravokotnika nastavite na belo( #FFFFFF).

Kliknite jeziček »Border« in prilagodite lastnosti robov. Nastavite barvo obrobe na črno( # 000000) in spremenite težo obrobe na 1.

Zaslon s tekstovnimi lastnostmi nam prilagaja vrsto pisave, velikost, slog, težo, barvo, svetlost in nepreglednost besedila.

Ustvarjanje zavihkov

Dom, osnutek, kartici s slikami so trije zavihki, ki so zloženi drug nad drugim. V pravokotnik povlecite tri 'Tabs Tabs'.Spremni velikost vsakega zavihka, tako da se vsak zavihek prikazuje drug ob drugem.

Odprite zaslon z lastnostmi besedila, da prilagodite barvo pisave zavihek "Slike" in "Osnutek".Nastavite ga na Gray( # 989898).

Ustvarjanje besedila

Povlecite obliko "Text" na platno, da ustvarite vsak menek. Besedilo videza lahko prilagodimo tako, da dostopamo do okna z lastnostmi besedila.

Koristni nasveti za spreminjanje barve

Barva je ena izmed najpomembnejših elementov pri zagotavljanju prijetnega žičnega okvirja. Najbolj natančen način za spreminjanje barve oblike je določitev barvne HTML kode. Odkrivanje kode HTML za določeno barvo je lahko težavno. Z w3cschools.com lahko uporabimo HTML barvni list za goljufije, da poiščemo pravo koda HTML za določeno barvo.

Uporabljamo tudi Colorzilla, da izberemo barve z zaslona in jo uporabimo v svinčniku. Kliknite ikono za kapljice oči v spodnjem levem kotu Firefoxa, da izberete barvo na zaslonu. Odpiranje barv ColorZilla lahko odprete tudi tako, da dvokliknete ikono padca oči. Preprosto kopirajte prilepite kodo Heksa v barvno HTML kodo pisala.

Zaključek

svinčnik je enostaven za uporabo žične žice. Povezovanje svinčnika s Firefoxom nam omogoča, da uporabimo drug plugin za Firefox, da bi ustvarili boljši žični okvir

Povezave
Prenesite svinčnik
Prenesite Colorzilla
W3C HTML Colour Cheat Sheet