23Jul
Pencil on wireframe-työkalu, jota voimme käyttää sketch-sovelluksen käyttöliittymän mallina. Pencilin hieno asia on se, että se on kevyt, helppokäyttöinen ja tiukasti integroitu Firefoxiin. Sen lisäksi se on ilmainen avoimen lähdekoodin sovellus! Artikkelin lopussa annamme sinulle yksinkertaisen esittelyn siitä, miten Pencilin avulla voit luoda Brizzly-mallin.
Miksi luodaan lankahaaroita?
Johdinkuvake on sketch of page-layout idea. Wireframe keskittyy sivun informaation suunnitteluun sen varmistamiseksi, että malli sopii siihen, mitä käyttäjä tarvitsee. Johdinkuvake koostuu tavallisesti erilaisista muodoista( kuten laatikoista, soikeista ja timanteista), jotka edustavat sisältöä, toiminnallisuutta ja navigointielementtejä.Nämä muodot näyttävät sijoituksen sivulle.
Aluksi voi tuntua ajanhukkeelta, joka luo sivulle karkean luonnoksen. Viirakehys on tärkeä, jotta käyttäjät voivat keskittyä sivusi tärkeysosaan. Sivun karkean luonnoksen luominen, ilman hienoja visuaalisia elementtejä, siirtää käyttäjän huomion tärkeisiin elementteihin, kuten sivun komponenttien koon, layoutin ja sijoittelun. Aloitamme paremman käsityksen siitä, mitä asiakas todella haluaa ja tarvitsee ohjelmistosta, kun käyttäjä alkaa keskittyä sivun tärkeisiin osioihin. Lanka-kehyksen luominen antaa sinulle ja käyttäjille tehokkaan yhteistyön ja tunnistaa mahdolliset suunnitteluongelmat ajoissa.
Lyijykynän aloitus
Lataa Lyijykynä Pencilin lisäosilta sivulta. Kun olet asentanut lyijykynän, se avautuu työkaluista & gt;"Lyijykynätilu".
Tämä on mitä Brizzly näyttää.Se on melko hieno web-sovellus, joka kokoaa Facebook ja Twitter yhdellä sivulla.
Tämä on langan kehyksen lopputulos. Tämän johdorungon päämuodot ovat suorakulmioita, tekstiruutuja ja välilehtiä.Artikkelin seuraava osio antaa yksinkertaisen esimerkin siitä, miten jokaisen muodon voi luoda.
Suorakulmion luominen
Lankaelementin muodostamisen ensimmäinen vaihe on vetää muoto Shape Collections -valikosta kankaaseen.
Muokkaa suorakulmion sopivaa leveyttä ja korkeutta.
Voimme muokata minkä tahansa muotoisen tekstin, reunuksen ja taustaväri Pencilissa. Napsauta suorakulmiota hiiren kakkospainikkeella ja valitse Ominaisuudet, jolloin Ominaisuudet-ikkunat avautuvat. Tämä on taustaominaisuudet -näyttö.Aseta suorakulmion taustaväri valkoiseksi( #FFFFFF).
Napsauta Raja-välilehteä ja säädä raja-asetuksia. Aseta reunuksen väri mustaksi( # 000000) ja muutetaan reunuksen paino 1.
Tekstin ominaisuudet -näytön avulla voit mukauttaa tekstin fonttityyppiä, kokoa, tyyliä, painoa, väriä, kirkkautta ja läpikuultavuutta.
Välilehtien luominen
Kotisivu, luonnos, kuva-välilehdet ovat kolme välilehteä, jotka on pinottu päällekkäin. Vedä kolme "Tabs Panel" suorakulmioksi. Muuta jokainen välilehti niin, että kukin välilehti näkyy vierekkäin.
Avaa tekstin ominaisuudet -näytöllä "Kuvat" ja "Luonnos" -välilehden kirjasinväri. Aseta se harmaaksi( # 989898).
Tekstin luominen
Vedä "Tekstin" muotoa kankaalle ja luo jokainen valikko. Voimme säätää tekstin ulkoasua avaamalla tekstin ominaisuudet -ikkunan.
Hyödyllisiä vinkkejä värin muuttamiseen
Väri on yksi tärkeimmistä osista miellyttävässä rautalangassa. Tarkimmin tapa muuttaa muodon väriä on täsmentämällä värin HTML-koodi. Tietyn värin HTML-koodi voi olla vaikeaa. Voimme käyttää HTML-värimaailma-arkkia w3cschools.com-sivustosta etsiäksesi oikean HTML-koodin tietylle värille.
Haluamme myös käyttää colorzillaa valita värit näytöltä ja käyttää sitä Pencilissa. Napsauta Firefoxin vasemmassa alakulmassa olevaa silmäkuoppa-kuvaketta valitaksesi väri näytöllä.Voimme myös avata ColorZillan värivalitsin kaksoisnapsauttamalla silmäpudotuskuvaketta. Kopioi vain liitä Hex-koodi Pencilin värin HTML-koodiin.
Päätelmä
Lyijykynä on helppokäyttöinen langankirjoitustyökalu. Lyijykynällä integroituminen Firefoxin kanssa mahdollistaa muiden Firefox-laajennusten luomisen, jotta voisit luoda paremman rautalangan
-linkit
Lataa lyijykynä
Lataa Colorzilla
W3C HTML Color Cheat Sheet