If-Koubou

Käytä Firefoxia luomaan yksinkertaisia ​​kuvakkeita

Käytä Firefoxia luomaan yksinkertaisia ​​kuvakkeita (Miten)

Lyijykynä on wireframing-työkalu, jota voimme käyttää piirustukseen sovelluksen käyttöliittymästä. 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 luonnos sivusuunnitteluideasta. Wire-kehys keskittyy sivun informaation suunnitteluun sen varmistamiseksi, että malli sopii käyttäjän tarpeisiin. 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 se voi tuntua ajanhukkeelta, joka luo sivun arat luonnokset. 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.

Aloittaminen lyijykynällä

Lataa Lyijykynä Pencilin lisäosilta sivulta. Kun olet asentanut lyijykynän, se avautuu Työkalut-valikosta ja Pencil Sketching -työkalusta.

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

Ensimmäinen vaihe lanka-kehyksen muodon muodostami- seksi on siirtää muoto Shape Collections -valikosta kankaalle.

Muuta suorakulmion koko sopivaksi leveydeksi ja korkeudeksi.

Voimme mukauttaa minkä tahansa muotoisen tekstin, reunuksen ja taustan värin Pencililla. 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. Määritä reunuksen väri mustaksi (# 000000) ja muuta reunuksen painoa arvoon 1.

Tekstin ominaisuudet -näytön avulla voimme mukauttaa tekstin fonttityyppiä, kokoa, tyyliä, painoa, väriä, kirkkautta ja läpikuultavuutta.

Luo välilehdet

Koti, 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ä "Teksti" -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.

johtopäätös

Lyijykynä on helppokäyttöinen langansyöttölaite. Kynän integraatio Firefoxin kanssa tekee meistä mahdolliseksi käyttää muita Firefox-laajennuksia, jotta voimme luoda paremman raidan

Linkit
Lataa lyijykynä
Lataa Colorzilla
W3C HTML Color Cheat -arkki