Sådan opretter du GUI i Visio

...

Microsoft Visio kan bruges til at skabe mange typer GUI-design.

Microsoft Visio 2010 er et grafisk designværktøj, der kan bruges til at skabe diagrammer, interfaceelementer, navigationsmenuer og andre visuelle objekter. Det tilbyder en bred vifte af værktøjer til at skabe designet af en grafisk brugergrænseflade (GUI). Diagrammet viser, hvordan applikationen eller webgrænsefladen vil se ud i sin endelige form. Det er ikke så svært at udvikle en GUI i Visio, og design kan eksporteres som PDF-filer. Følg et par retningslinjer for at lære, hvordan du bygger en grundlæggende GUI wire-frame mockup til et websted.

Trin 1

Åbn Microsoft Visio. Opret en ny tegning ved at klikke på det tomme tegningsikon. Klik på knappen "Opret".

Dagens video

Trin 2

Klik på vinduet Former i venstre side af skærmen. Vælg "Flere figurer". Vælg "Basic Shapes US units." Klik på "Hurtige figurer".

Trin 3

Opret en overskriftsboks ved at højreklikke på rektangelboksens form og trække formen til tegneområdet. Tilpas størrelsen på boksen til at dække omkring 15 procent af det øverste område af tegningen.

Trin 4

Opret en navigationsmenuboks ved at højreklikke på rektangelboksens form og trække figuren under overskriftsboksen. Ændr størrelsen på boksen, så den har en højde på cirka en halv tomme og samme bredde som overskriftsboksen.

Trin 5

Opret en stor hovedtekstboks ved at højreklikke på rektangelboksens form og trække den under navigationsmenuboksen. Ændr størrelsen på boksen, så den har samme bredde som hoved- og navigationsmenuboksene og dækker bunden af ​​tegneområdet.

Trin 6

Opret to rektangelbokse ved at højreklikke på rektangelboksformen og trække figuren over til tegneområdet to gange. Tilpas størrelsen på hver boks, så den passer til den ene halvdel af hovedkassen. Flyt hver boks, så den passer ved siden af ​​hinanden inde i hovedkassen.

Trin 7

Opret tekstfelter, der repræsenterer navigationslinks, ved at klikke på knappen "En tekst" i toppen af ​​navigationslinjen. Vælg et område inde i navigationsfeltet for at oprette et lille tekstfelt ved at klikke på venstre museknap. Flyt musen for at ændre størrelsen på feltet til den ønskede længde. Indtast tekst for at sige "Hjem".

Trin 8

Opret yderligere fire tekstfelter ved at bruge venstre museknap. Skriv "Menupunkt" i hver boks. Tilpas størrelsen på hver boks, så den matcher størrelsen på "Hjem"-boksen.

Trin 9

Vælg et område inde i hovedhovedfeltet, og opret et tekstfelt med beskrivelsen "Hovedhoved".

Trin 10

Opret en tekstboks inde i hver boks, der er placeret inde i tegningens hovedindholdsboksområde. Giv hver tekstboks en beskrivelse, såsom "Indholdsområde". Tilpas størrelsen på hver tekstboks til at have samme størrelse. Vælg knappen "Pointer" i den øverste navigationsmenu.

Trin 11

Gem tegningen ved at klikke på "Filer" fra den øverste navigationsmenu og vælge "Gem som".

Tip

Mens Visio ikke kommer med GUI prototype stencils eller objekter, tilbyder tredjepartsvirksomheder sådanne værktøjer til download. Hvis du har til hensigt at bruge Visio til at skabe et samarbejdende design, skal du huske på, at Visio-tegningsfilformatet ikke er kompatibelt med de fleste tegnesoftwarepakker.

Advarsel

Alt for komplekse tegninger kan få Visio til at sænke farten med at opdatere en tegning efter at have foretaget en ændring.