Hvordan lage GUI i Visio

click fraud protection
...

Microsoft Visio kan brukes til å lage mange typer GUI-design.

Microsoft Visio 2010 er et grafisk designverktøy som kan brukes til å lage diagrammer, grensesnittelementer, navigasjonsmenyer og andre visuelle objekter. Den tilbyr et bredt spekter av verktøy for å lage utformingen av et grafisk brukergrensesnitt (GUI). Diagrammet viser hvordan applikasjonen eller webgrensesnittet vil se ut i sin endelige form. Å utvikle en GUI i Visio er ikke så vanskelig, og design kan eksporteres som PDF-filer. Følg noen få retningslinjer for å lære hvordan du bygger en grunnleggende GUI wire-frame mockup for et nettsted.

Trinn 1

Åpne Microsoft Visio. Lag en ny tegning ved å klikke på det tomme tegneikonet. Klikk på "Opprett"-knappen.

Dagens video

Steg 2

Klikk på Shapes-vinduet på venstre side av skjermen. Velg "Flere former." Velg "Basic Shapes US units." Klikk "Quick Shapes".

Trinn 3

Lag en overskriftsboks ved å høyreklikke på rektangelboksformen og dra figuren til tegneområdet. Endre størrelsen på boksen for å dekke omtrent 15 prosent av det øverste området av tegningen.

Trinn 4

Lag en navigasjonsmenyboks ved å høyreklikke på rektangelboksformen og dra figuren under overskriftsboksen. Endre størrelsen på boksen for å ha en høyde på omtrent en halv tomme og samme bredde som overskriftsboksen.

Trinn 5

Lag en stor hovedboks ved å høyreklikke på rektangelboksformen og dra den under navigasjonsmenyboksen. Endre størrelsen på boksen for å ha samme bredde som overskriften og navigasjonsmenyboksene og for å dekke bunnen av tegneområdet.

Trinn 6

Lag to rektangelbokser ved å høyreklikke på rektangelboksformen og dra figuren over til tegneområdet to ganger. Endre størrelsen på hver boks slik at den passer til den ene halvdelen av hovedboksen. Flytt hver boks slik at den passer inntil hverandre inne i hovedboksen.

Trinn 7

Lag tekstfelt som representerer navigasjonslenker ved å klikke på "A Text"-knappen øverst i navigasjonslinjen. Velg et område inne i navigasjonsboksen for å lage et lite tekstfelt ved å klikke på venstre museknapp. Beveg musen for å endre størrelsen på feltet til ønsket lengde. Skriv inn tekst for å si «Hjem».

Trinn 8

Lag ytterligere fire tekstfelt ved å bruke venstre museknapp. Skriv inn "Menyelement" i hver boks. Endre størrelsen på hver boks for å matche størrelsen på "Hjem"-boksen.

Trinn 9

Velg et område inne i hovedoverskriftsboksen og lag et tekstfelt med beskrivelsen "Hovedtekst".

Trinn 10

Lag en tekstboks inne i hver boks som ligger inne i hovedinnholdsboksen i tegningen. Gi hver tekstboks en beskrivelse, for eksempel "Innholdsområde". Endre størrelsen på hver tekstboks til å ha samme størrelse. Velg "Peker"-knappen på den øverste navigasjonsmenyen.

Trinn 11

Lagre tegningen ved å klikke på "Fil" fra den øverste navigasjonsmenyen og velge "Lagre som".

Tips

Mens Visio ikke kommer med GUI-prototype-sjablonger eller objekter, tilbyr tredjepartsselskaper slike verktøy for nedlasting. Hvis du har tenkt å bruke Visio til å lage et samarbeidsdesign, husk at Visio-tegnefilformatet ikke er kompatibelt med de fleste tegneprogramvarepakker.

Advarsel

Altfor komplekse tegninger kan få Visio til å senke farten i å oppdatere en tegning etter å ha gjort en endring.