Izmantojiet Firefox, lai izveidotu vienkāršus maketus
Zīmulis ir wireframing rīks, ko mēs varam izmantot, lai ieskicētu mūsu lietotnes lietotāja interfeisa modeli. Lielā lieta par zīmuli ir tā, ka tas ir viegls, viegli lietojams un cieši integrēts ar Firefox. Papildus tam viss ir bezmaksas atvērtā pirmkoda lietojumprogramma! Raksta beigās mēs jums sniegsim vienkāršu demonstrāciju par to, kā izmantot zīmuli, lai izveidotu Brizzly līdzīgu stiepļu karkasu.
Kāpēc mēs izveidojam wireframes ?
Wireframe ir lapas izkārtojuma idejas skice. Wireframe ir vērsta uz lapas informācijas dizainu, lai nodrošinātu, ka dizains atbilst lietotāja vajadzībām. Viela parasti sastāv no dažādām formām (piemēram, kastēm, ovāliem un dimantiem), lai attēlotu saturu, funkcionālus un navigācijas elementus. Šīs formas parāda to izvietojumu lapā.
Sākumā tas var šķist laika izšķiešana, radot aptuvenas lapas skices. Vadu rāmis ir svarīgs, lai lietotāji varētu koncentrēties uz jūsu lapas svarīguma elementu. Izveidojot aptuvenu lapas skici bez iedomātajiem vizuālajiem elementiem, lietotāja uzmanība tiek pievērsta svarīgiem elementiem, piemēram, izmēru noteikšanai, izkārtojumam un izvietojumam. Mēs sāksim iegūt labāku izpratni par to, ko klients patiešām vēlas un kas nepieciešams no programmatūras, kad lietotājs sāk koncentrēties uz svarīgiem lapas elementiem. Vadu rāmja izveide ļauj jums un jūsu lietotājiem efektīvi sadarboties un agrīnā posmā identificēt iespējamo dizaina problēmu.
Darba sākšana ar zīmuli
Lejupielādējiet zīmuli no zīmuļa pievienošanas lapām. Kad esat instalējis zīmuli, tas ir pieejams no 'Rīki'> 'Zīmuļu zīmēšana'.
Tas izskatās Brizzly. Tā ir diezgan laba tīmekļa lietojumprogramma, kas apkopo jūsu Facebook un Twitter vienā lapā.
Tas ir stiepļu rāmja gala rezultāts. Galvenās formas šajā stiepļu rāmī ir taisnstūri, tekstlodziņi un cilnes. Nākamā raksta sadaļa sniegs vienkāršu piemēru, kā izveidot katru formu.
Taisnstūra izveide
Pirmais stieples rāmja formas izveides solis ir vilkt formu no izvēlnes “Forma kolekcijas” uz audekla.
Mainiet taisnstūra izmērus līdz atbilstošam platumam un augstumam.
Pencil var pielāgot jebkuras formas tekstu, robežu un fona krāsu. Ar peles labo pogu noklikšķiniet uz taisnstūra un izvēlieties 'Properties', lai atvērtu Properties logus. Tas ir fona rekvizītu ekrāns. Iestatiet taisnstūra fona krāsu uz baltu (#FFFFFF).
Noklikšķiniet uz cilnes “Robeža” un noregulējiet robežas rekvizītus. Iestatiet apmales krāsu uz melnu (# 000000) un nomainiet robežu svaru uz 1.
Teksta rekvizītu ekrāns ļauj pielāgot teksta fonta veidu, lielumu, stilu, svaru, krāsu, spilgtumu un necaurredzamību.
Cilnes izveide
Mājas, melnraksta, attēlu cilnes ir trīs cilnes, kas tiek sakrautas viena otrai. Velciet trīs "cilnes paneli" taisnstūrī. Mainiet katras cilnes izmērus tā, lai katra cilne parādītos blakus.
Atveriet teksta rekvizītu ekrānu, lai pielāgotu cilnes Attēli un melnraksta fonta krāsu. Iestatiet to pelēkā krāsā (# 989898).
Teksta izveide
Lai izveidotu katru izvēlni, uz audekla velciet formu “Teksts”. Mēs varam pielāgot teksta izskatu, piekļūstot teksta rekvizītu logam.
Noderīgi padomi krāsu maiņai
Krāsa ir viena no svarīgākajām sastāvdaļām, nodrošinot patīkamu stiepļu karkasu. Visprecīzākais veids, kā mainīt formas krāsu, ir, norādot krāsas HTML kodu. HTML koda noteikšana konkrētai krāsai var būt sarežģīta. Mēs varam izmantot HTML krāsu krāpšanas lapu no w3cschools.com, lai meklētu pareizo HTML kodu konkrētai krāsai.
Mēs arī vēlamies izmantot colorzilla, lai izvēlētos krāsas no ekrāna un izmantotu to zīmējumā. Noklikšķiniet uz acu pilinātāja ikonas Firefox kreisajā apakšējā stūrī, lai izvēlētos krāsu ekrānā. Mēs varam arī atvērt ColorZilla krāsu atlasītāju, divreiz noklikšķinot uz acu pilienu ikonas. Vienkārši nokopējiet Hex kodu Pencil krāsu HTML kodā.
Secinājums
Zīmulis ir ērti lietojams ar drukāšanu. Zīmuļu integrācija ar Firefox ļauj mums izmantot citu Firefox spraudni, lai palīdzētu izveidot labāku vadu karkasu
Saites
Lejupielādēt zīmuli
Lejupielādēt Colorzilla
W3C HTML krāsu apkopes lapa
