Kako stvoriti GUI u Visiu

...

Microsoft Visio može se koristiti za stvaranje mnogih tipova GUI dizajna.

Microsoft Visio 2010 je alat za grafički dizajn koji se može koristiti za izradu dijagrama, elemenata sučelja, navigacijskih izbornika i drugih vizualnih objekata. Nudi širok raspon alata za izradu dizajna grafičkog korisničkog sučelja (GUI). Dijagram će pokazati kako će se aplikacija ili web sučelje pojaviti u svom konačnom obliku. Razvijanje GUI-ja u Visiu nije previše teško, a dizajni se mogu izvesti kao PDF datoteke. Slijedite nekoliko smjernica kako biste naučili kako izraditi osnovni GUI model žičanog okvira za web stranicu.

Korak 1

Otvorite Microsoft Visio. Kreirajte novi crtež klikom na ikonu praznog crteža. Kliknite gumb "Kreiraj".

Video dana

Korak 2

Kliknite prozor Oblici na lijevoj strani zaslona. Odaberite "Više oblika". Odaberite "Osnovni oblici američkih jedinica". Kliknite "Brzi oblici".

Korak 3

Napravite okvir naslova tako da desnom tipkom miša kliknete oblik pravokutnog okvira i povučete oblik u područje za crtanje. Promijenite veličinu okvira tako da pokrije oko 15 posto gornjeg područja crteža.

4. korak

Napravite okvir navigacijskog izbornika tako da desnom tipkom miša kliknete oblik pravokutnog okvira i povučete oblik ispod okvira zaglavlja. Promijenite veličinu okvira tako da ima visinu od oko pola inča i istu širinu kao okvir zaglavlja.

Korak 5

Napravite veliki okvir glavnog tijela tako da desnom tipkom miša kliknete oblik pravokutnog okvira i povučete ga ispod okvira navigacijskog izbornika. Promijenite veličinu okvira da ima istu širinu kao okviri zaglavlja i navigacijskog izbornika te da pokrije dno područja za crtanje.

Korak 6

Napravite dva pravokutna okvira tako da desnom tipkom miša kliknete oblik pravokutnog okvira i dvaput povučete oblik na područje za crtanje. Promijenite veličinu svake kutije tako da stane u polovicu okvira glavnog tijela. Pomaknite svaku kutiju tako da stane jedna uz drugu unutar okvira glavnog tijela.

Korak 7

Napravite tekstualna polja koja predstavljaju navigacijske veze klikom na gumb "Tekst" na vrhu navigacijske trake. Odaberite područje unutar navigacijskog okvira za stvaranje malog tekstualnog polja klikom na lijevu tipku miša. Pomaknite miš da promijenite veličinu polja na željenu duljinu. Unesite tekst da biste rekli "Dom".

Korak 8

Napravite još četiri tekstualna polja pomoću lijeve tipke miša. U svaki okvir upišite "Stavka izbornika". Promijenite veličinu svakog okvira kako bi odgovarala veličini okvira "Početna".

Korak 9

Odaberite područje unutar okvira glavnog zaglavlja i stvorite tekstualno polje s opisom "Glavno zaglavlje".

Korak 10

Napravite tekstni okvir unutar svakog okvira koji se nalazi unutar područja glavnog okvira sa sadržajem na crtežu. Svakom tekstualnom okviru dajte opis, kao što je "Područje sadržaja". Promijenite veličinu svakog tekstualnog okvira da bude iste veličine. Odaberite gumb "Pointer" na gornjem navigacijskom izborniku.

Korak 11

Spremite crtež klikom na "Datoteka" na gornjem navigacijskom izborniku i odabirom "Spremi kao".

Savjet

Iako Visio ne dolazi s šablonama ili objektima prototipa GUI-ja, tvrtke trećih strana nude takve alate za preuzimanje. Ako namjeravate koristiti Visio za stvaranje zajedničkog dizajna, imajte na umu da Visio format datoteke za crtanje nije kompatibilan s većinom softverskih paketa za crtanje.

Upozorenje

Previše složeni crteži mogu uzrokovati usporavanje programa Visio u osvježavanju crteža nakon promjene.