Luo yksinkertaiset makrot käyttämällä Firefoxia
Lyijykynä on wireframing-työkalu, jonka avulla voimme piirtää sovelluksen käyttöliittymän mallin. Pencil on hieno asia, että se on kevyt, helppokäyttöinen ja tiiviisti integroitu Firefoxiin. Sen lisäksi se on ilmainen avoimen lähdekoodin sovellus! Artikkelin lopussa annamme teille yksinkertaisen demon siitä, miten lyijykynällä voit luoda Brizzly-kaltaisen lankapiirin.
Miksi luomme wireframes ?
Wireframe on luonnos sivun asettelun ideasta. Lanka on keskittynyt sivun tietosuunnitteluun sen varmistamiseksi, että muotoilu sopii käyttäjän tarpeisiin. Lankakehys koostuu yleensä eri muodoista (kuten laatikot, soikeat ja timantit) sisällön, toiminnallisten ja navigointielementtien esittämiseksi. Nämä muodot näyttävät niiden sijoittelun sivulle.
Aluksi se voi tuntua ajanhukasta, joka luo sivun karkeita luonnoksia. Lankakehys on tärkeää, jotta käyttäjät voivat keskittyä sivusi tärkeyselementtiin. Luodaan karkea luonnos sivusta, jossa ei ole fancy visuaalisia elementtejä, siirtää käyttäjän huomion tärkeisiin elementteihin, kuten koon, ulkoasun ja sivun osien sijoitteluun. Aloitamme paremman käsityksen siitä, mitä asiakas todella haluaa ja tarvitsee ohjelmistosta, kun käyttäjä alkaa keskittyä sivun tärkeisiin osiin. Lankakehyksen luominen antaa sinulle ja käyttäjillesi tehokkaan yhteistyön ja tunnistaa mahdolliset suunnitteluprojektit varhaisessa vaiheessa.
Kynän käytön aloittaminen
Lataa lyijykynä lyijykynän lisäosien sivulta. Kun olet asentanut lyijykynän, se on käytettävissä työkaluista> Kynän luonnostelu.
Näin Brizzly näyttää. Se on melko viileä web-sovellus, joka kokoaa Facebookin ja Twitterin yhteen sivuun.
Tämä on johdinkehyksen lopputulos. Tärkeimmät muodot tässä lankakehyksessä ovat suorakulmioita, tekstiruutuja ja välilehtiä. Artikkelin seuraava osa antaa yksinkertaisen esimerkin kunkin muodon luomisesta.
Suorakulmion luominen
Ensimmäinen vaihe langan kehyksen muodon luomiseksi on vetää muoto Shape Collections -valikosta kankaalle.
Muuta suorakulmion kokoa sopivaan leveyteen ja korkeuteen.
Voimme muokata minkä tahansa muodon tekstiä, reunoja ja taustaväriä lyijykynässä. Napsauta suorakulmiota hiiren kakkospainikkeella ja valitse Ominaisuudet-ikkunat valitsemalla Ominaisuudet. Tämä on taustan ominaisuuksien näyttö. Aseta suorakulmion taustaväri valkoiseksi (#FFFFFF).
Napsauta Raja-välilehteä ja säädä rajaominaisuudet. Aseta rajaväri mustaksi (# 000000) ja muuta rajapaino arvoon 1.
Tekstin ominaisuudet -näytön avulla voimme muokata tekstin kirjasintyyppiä, kokoa, tyyliä, painoa, väriä, kirkkautta ja läpinäkyvyyttä.
Välilehtien luominen
Koti-, luonnos-, kuva-välilehdet ovat kolme välilehteä, jotka on pinottu toistensa päälle. Vedä kolme välilehteä paneeliin suorakulmioon. Muuta kunkin välilehden kokoa siten, että jokainen välilehti näkyy vierekkäin.
Avaa tekstin ominaisuudet -näyttö, jos haluat säätää "Kuvat" ja "Luonnos" -välilehden fontin väriä. Aseta se harmaaksi (# 989898).
Tekstin luominen
Luo jokainen valikko vetämällä "Teksti" -muoto kankaalle. Voimme säätää tekstin ulkoasua avaamalla tekstin ominaisuudet -ikkunan.
Hyödyllisiä vinkkejä värin vaihtamiseen
Väri on yksi olennaisimmista osista miellyttävän vaijerirungon toimittamisessa. Tarkin tapa muuttaa muodon väriä on määritellä värin HTML-koodi. HTML-koodin osoittaminen tietylle värille voi olla vaikeaa. W3cschools.comista voi käyttää HTML-värin huijausarkkia etsimään oikean HTML-koodin tietylle värille.
Haluamme myös käyttää colorzillaa värien valitsemiseksi näytöstä ja käyttää sitä lyijykynässä. Napsauta Firefoxin vasemmassa alakulmassa olevaa silmätippurin kuvaketta, kun haluat valita värin näytöllä. Voimme myös avata ColorZillan värivalitsimen kaksoisnapsauttamalla silmätippakuvaketta. Kopioi vain Hex-koodi Pencil-värin HTML-koodiin.
johtopäätös
Lyijykynää on helppo käyttää wireframing-työkalulla. Lyijykynän integrointi Firefoxin kanssa mahdollistaa sen, että voimme käyttää muita Firefox-laajennuksia, jotka auttavat luomaan paremman vaijerin
Linkit
Lataa lyijykynä
Lataa Colorzilla
W3C: n HTML-värin huijausarkki
