23Jul
pliiats on juhtmevaba tööriist, mida me kasutame meie rakenduse kasutajaliideste kujundamiseks. Pliiatsi asi on see, et see on kerge, lihtne kasutada ja tihedalt Firefoxiga integreeritud. Selle peal on kõik oma vaba lähtekoodiga tarkvara! Artikli lõpus tutvustame teile lihtsat näidet selle kohta, kuidas kasutada Pencil'i, et luua Brizzly-like juhtraami.
Miks me luua wireframes?
Raamiraam on lehe kujundus idee skeem. Raamiraam keskendub lehe infoprojektile, et tagada disaini sobivus kasutaja vajadustele. Raamiraam koosneb tavaliselt erinevatest kujudest( näiteks karbid, ovaalsed ja teemandid), mis esindavad sisu, funktsionaalseid ja navigatsioonielemente. Need kujundid näitavad lehe paigutust.
Esialgu võib tunduda aja raiskamine, mis loob leht lehestikke. Traadiraam on oluline, et teie kasutajad keskenduksid teie lehe olulisuse elemendile. Lehe järjekindla kujunduse loomine ilma väljamõeldud visuaalsete elementideta suunata kasutaja tähelepanu selliste lehtede komponentide olulistele elementidele nagu suuruse suurus, paigutus ja paigutus. Me hakkame paremini mõistma, mida klient tõesti soovib ja mida tarkvara vajab, kui kasutaja hakkab keskenduma lehe olulistele elementidele. Traadiraami loomine võimaldab teil ja teie kasutajatel tõhusalt teha koostööd ja varakult tuvastada võimalikke disainiprobleeme.
Alustuseks pliiatsiga
Laadige Pencil from Pencil's adds on page. Kui olete pliiatsi installinud, on see saadaval "Tööriistad" & gt;"Pliiatsi joonistamine".
See ongi Brizzly välja nägemus. See on päris lahe veebirakendus, mis koondab teie Facebooki ja Twitteri ühel lehel.
See on juhtraami lõpptulemus. Selle juhtraami peamised kujud on ristkülikud, tekstikastid ja vahelehed. Artikli järgmine lõik annab lihtsa näite, kuidas iga kuju luua.
Ristküliku
loomine Traadiraami kujutise loomise esimene samm on lohistada kuju menüüst "Shape Collections" lõuendile.
Ruumilise ristküliku muutmiseks sobivale laiusele ja kõrgusele.
Saame kohandada Pencil'i mis tahes kuju teksti, piiri ja taustavärvi. Paremklõps ristkülikul ja valige atribuutide aknad avamiseks omadused. See on taustaomaduste ekraan. Määrake ristküliku taustavärv valgeks( #FFFFFF).
Klõpsake vahekaardil "Piirid" ja kohandage piiriomadusi. Määrake piiri värv mustaks( # 000000) ja muutke piirkaalu 1-ni.
Teksti omaduste ekraan võimaldab meil kohandada teksti tüüpi font, suurus, stiil, kaal, värv, heledus ja läbipaistmatus.
vahekaartide loomine
Kodu, mustandi ja piltide vahekaardid on kolm vahelehti, mis asuvad üksteise peal. Lohistage kolme vahelehte paneeli ristkülikusse. Muutke iga vahelehe suurust, nii et iga vaheleht kuvatakse kõrvuti.
Avage teksti rekvisiitide ekraan, et kohandada vahelehte "Pildid" ja "Eelnõu".Määra see halliks( # 989898).
Teksti loomine
Iga menüü loomiseks lohista tekstivõimalus lõuendile. Saame kohandada teksti välimust, kui pääsete juurde teksti omaduste aknas.
Kasulikud näpunäited värvi muutmiseks
Color on üks olulisemaid osi meeldiva juhtraami edastamisel. Kõige täpsem viis kujutise värvi muutmiseks on täpsustada värvi HTML-kood.Üksiku värvi HTML-koodi kuvamine võib olla keeruline. Me saame kasutada w3cschools.com'ist HTML-vormingus cheat sheets, et otsida konkreetse värvi jaoks õiget HTML-koodi.
Samuti meeldib kasutada colorzilla, et valida värve ekraanilt ja kasutada seda pliiatsi kujul. Firefoxi vasakus alanurgas klõpsake ekraani värvi valimiseks ekraani ikoonil. Samuti võime ColorZilla värvivalija avada, topeltklõpsates silmatilkade ikoonil. Lihtsalt kopeerige Hex-koodi pliiatsi värvi HTML-koodi.
Kokkuvõte
pliiats on lihtne kasutada juhtraami tööriista. Pliiatside integreerimine Firefoxiga võimaldab meil kasutada muud Firefoxi pistikprogrammi, et aidata luua paremat sõrestikku.
Lingid
Download Pencil
Lae Colorzilla
W3C HTML värvi pitserite leht