A Pencil egy drótvázas eszköz, amellyel felvázolhatjuk alkalmazásunk felhasználói felületének makettjét. A ceruza nagyszerű tulajdonsága, hogy könnyű, könnyen használható és szorosan integrálva van a Firefox-tal. Ráadásul egy ingyenes, nyílt forráskódú alkalmazás! A cikk végén bemutatunk egy egyszerű bemutatót arról, hogyan használható a Pencil egy Brizzly-szerű drótváz létrehozásához.
Miért hozunk létre drótvázakat?
A drótváz az oldalelrendezés ötletének vázlata. A drótváz az oldal információs tervezésére összpontosít, hogy a tervezés illeszkedjen a felhasználó igényeihez. A drótváz általában különböző formákból áll (például dobozok, oválisok és gyémántok), amelyek a tartalmi, funkcionális és navigációs elemeket ábrázolják. Ezek az alakzatok megjelenítik az elhelyezésüket az oldalon.
Először időpazarlásnak tűnhet egy oldal durva vázlatainak elkészítése. A drótváz fontos ahhoz, hogy a felhasználók az oldal fontos elemére összpontosítsanak. Ha durva vázlatot készít az oldalról, díszes vizuális elemek nélkül, akkor helyezze át a felhasználó figyelmét olyan fontos elemekre, mint az oldal összetevőinek méretezése, elrendezése és elhelyezése. Akkor kezdünk jobban megérteni, hogy az ügyfél valóban mit szeretne és mire van szüksége a szoftverből, amikor a felhasználó elkezd összpontosítani az oldal fontos elemeire. A drótkeret létrehozása lehetővé teszi Önnek és a felhasználóinak a hatékony együttműködést és a lehetséges tervezési problémák korai felismerését.
A ceruza használatának megkezdése
Töltse le a ceruzát a ceruza kiegészítő oldaláról. A Pencil telepítése után az ‘Eszközök’> ’Pencil Sketching’ menüpontokból érhető el.
Így néz ki Brizzly. Ez egy nagyon klassz webalkalmazás, amely egyetlen oldalon összesíti a Facebookodat és a Twitteredet.
Ez a huzalkeret végeredménye. A drótváz fő alakjai a téglalapok, a szövegdobozok és a fülek. A cikk következő szakasza egyszerű példát ad az egyes alakzatok létrehozására.
Téglalap létrehozása
A huzalkeret alakzatának elkészítésének első lépése az, hogy egy alakzatot áthúz a ‘Alakgyűjtemények’ menüből a vászonra.
Méretezze át a téglalapot megfelelő szélességre és magasságra.
Testreszabhatjuk a ceruza bármely alakjának szövegét, szegélyét és háttérszínét. Kattintson a jobb gombbal a téglalapra, és válassza a „Tulajdonságok” lehetőséget a Tulajdonságok ablak megnyitásához. Ez a háttér tulajdonságainak képernyője. Állítsa a Téglalap háttérszínét fehérre (#FFFFFF).
Kattintson a „Szegély” fülre, és állítsa be a szegély tulajdonságait. Állítsa a szegély színét fekete színre (# 000000), és változtassa meg a szegély súlyát 1-re.
A szöveg tulajdonságai képernyőn testreszabhatjuk a szöveg betűtípusát, méretét, stílusát, súlyát, színét, fényerejét és átlátszatlanságát.
Fülek létrehozása
A kezdőlap, a vázlat, a kép három fül, amelyek egymásra vannak rakva. Húzzon három ‘Tabs Panel’ -t a téglalapba. Méretezze át az egyes füleket úgy, hogy mindegyik fül egymás mellett jelenjen meg.
Nyissa meg a szövegtulajdonságok képernyőt a „Képek” és a „Piszkozat” fül betűszínének beállításához. Állítsa szürke színre (# 989898).
Szöveg létrehozása
Húzza a ’Szöveg’ alakzatot a vászonra az egyes menük létrehozásához. Beállíthatjuk a szöveg megjelenését a szöveg tulajdonságai ablak elérésével.
Hasznos tippek a szín megváltoztatásához
A szín az egyik legfontosabb eleme a kellemes drótváz előállításának. Az alak színének megváltoztatásának legpontosabb módja a szín HTML kódjának megadása. Egy adott szín HTML kódjának kitalálása nehéz lehet. A w3cschools.com webhelyről származó HTML színes csalólap segítségével megkereshetjük a megfelelő HTML kódot egy adott színhez.
Szeretjük a colorzillát is használni, hogy kiválasszuk a színeket a képernyőről, és a Ceruzában használjuk. Kattintson a Firefox bal alsó sarkában lévő szemcseppentő ikonra a képernyő színének kiválasztásához. Megnyithatjuk a ColorZilla színválasztóját is, ha duplán kattintunk a szemcsepp ikonra. Csak másolja be a Hex kódot a Ceruza színes HTML kódjába.
Következtetés
A ceruza könnyen használható drótvázas eszköz. Ceruza integráció a Firefox-szal lehetővé teszi számunkra, hogy más Firefox plugint használjunk a jobb drótváz létrehozásához
Linkek
Töltse le a ceruzát
Töltse le a Colorzillát
W3C HTML színes csalólap
