GUI létrehozása a Visio programban

A Microsoft Visio 2010 egy grafikus tervezőeszköz, amely diagramok, felületelemek, navigációs menük és egyéb vizuális objektumok létrehozására használható. Eszközök széles skáláját kínálja a grafikus felhasználói felület (GUI) kialakításához. A diagram megmutatja, hogyan fog megjelenni az alkalmazás vagy a webes felület végső formájában. A grafikus felhasználói felület fejlesztése a Visio programban nem túl nehéz, és a tervek PDF-fájlként exportálhatók. Kövesse néhány irányelvet, hogy megtanulja, hogyan készíthet alapvető grafikus felhasználói felület drótváz-makett egy webhely számára.

1. lépés

Nyissa meg a Microsoft Visio-t. Hozzon létre egy új rajzot az üres rajz ikonra kattintva. Kattintson a "Létrehozás" gombra.

2. lépés

Kattintson az Alakzatok ablakra a képernyő bal oldalán. Válassza a "További alakzatok" lehetőséget. Válassza a „Basic Shapes US units” lehetőséget. Kattintson a „Gyors alakzatok”

elemre

3. lépés

Hozzon létre egy fejlécet úgy, hogy a jobb gombbal a téglalap alakú doboz alakjára kattint, és az alakzatot a rajzterületre húzza. Méretezze át a dobozt úgy, hogy a rajz felső részének körülbelül 15 százalékát fedje le.

4. lépés

Hozzon létre egy navigációs menüdobozt a jobb gombbal a téglalap alakú doboz alakjára kattintva, és az alakzatot a fejlécdoboz alá húzva. Méretezze át a dobozt úgy, hogy körülbelül fél hüvelyk magas legyen, és ugyanolyan széles legyen, mint a fejléc.

5. lépés

Hozzon létre egy nagy törzsdobozt úgy, hogy jobb gombbal kattintson a téglalap alakú doboz alakjára, és húzza azt a navigációs menüdoboz alá. Méretezze át a dobozt, hogy az azonos szélességű legyen, mint a fejléc és a navigációs menü doboza, és hogy lefedje a rajzterület alját.

6. lépés

Hozzon létre két téglalapdobozt úgy, hogy a jobb gombbal kattintson a téglalap doboz alakjára, és kétszer húzza át az alakzatot a rajzterületre. Méretezze át az egyes dobozokat, hogy illeszkedjen a fő doboz egyik feléhez. Mozgassa az egyes dobozokat, hogy egymás mellett illeszkedjenek a fő dobozban.

7. lépés

Hozzon létre szöveges mezőket, amelyek a navigációs hivatkozásokat reprezentálják a navigációs sáv tetején található "A szöveg" gombra kattintva. Válasszon ki egy területet a navigációs mezőn belül egy kis szövegmező létrehozásához a bal egérgombbal. Mozgassa az egeret a mező átméretezéséhez a kívánt hosszúságúra. Írja be a szöveget, hogy kimondja:„Otthon”.

8. lépés

Hozzon létre további négy szövegmezőt a bal egérgombbal. Minden mezőbe írja be a „menüpont” elemet. Méretezze át az egyes mezőket, hogy azok megfeleljenek a "Kezdőlap" mező méretének.

9. lépés

Válasszon ki egy területet a fő fejléc mezőben, és hozzon létre egy szövegmezőt a „Fő fejléc” leírásával.

10. lépés

Hozzon létre egy szövegdobozt minden egyes mezőben, amelyek a rajz fő tartalomdoboz területén belül találhatók. Minden szövegmezőnek adjon leírást, például „Tartalomterület”. Méretezze át az egyes szövegmezőket azonos méretűre. Válassza a "Mutató" gombot a felső navigációs menüben.

11. lépés

Mentse el a rajzot úgy, hogy a felső navigációs menüben kattintson a "Fájl" elemre, és válassza a "Mentés másként" lehetőséget.

Tipp

Míg a Visio nem tartalmaz GUI prototípus sablonokat vagy objektumokat, a harmadik féltől származó cégek kínálnak ilyen eszközöket letöltésre. Ha a Visio segítségével kíván közös tervezést létrehozni, ne feledje, hogy a Visio rajzfájl formátuma nem kompatibilis a legtöbb rajzszoftver-csomaggal.

Figyelmeztetés

A túl bonyolult rajzok miatt a Visio lelassulhat a rajz frissítése során a módosítás után.