Hur man skapar GUI i Visio

...

Microsoft Visio kan användas för att skapa många typer av GUI-designer.

Microsoft Visio 2010 är ett grafiskt designverktyg som kan användas för att skapa diagram, gränssnittselement, navigeringsmenyer och andra visuella objekt. Den erbjuder ett brett utbud av verktyg för att skapa designen av ett grafiskt användargränssnitt (GUI). Diagrammet visar hur applikationen eller webbgränssnittet kommer att se ut i sin slutliga form. Att utveckla ett GUI i Visio är inte alltför svårt, och design kan exporteras som PDF-filer. Följ några riktlinjer för att lära dig hur man bygger en grundläggande GUI-trådramsmockup för en webbplats.

Steg 1

Öppna Microsoft Visio. Skapa en ny ritning genom att klicka på den tomma ritningsikonen. Klicka på knappen "Skapa".

Dagens video

Steg 2

Klicka på fönstret Former till vänster på skärmen. Välj "Fler former." Välj "Basic Shapes US-enheter." Klicka på "Quick Shapes".

Steg 3

Skapa en rubrikruta genom att högerklicka på rektangellådans form och dra formen till ritytan. Ändra storlek på rutan för att täcka cirka 15 procent av den övre delen av ritningen.

Steg 4

Skapa en navigeringsmenyruta genom att högerklicka på rektangelrutans form och dra formen under rubrikrutan. Ändra storlek på rutan så att den får en höjd på ungefär en halv tum och samma bredd som rubrikrutan.

Steg 5

Skapa en stor huvuddel genom att högerklicka på formen av rektangellådan och dra den under navigeringsmenyrutan. Ändra storlek på rutan för att ha samma bredd som rubriken och navigeringsmenyrutorna och för att täcka botten av ritytan.

Steg 6

Skapa två rektangelrutor genom att högerklicka på rektangellådans form och dra formen över till ritytan två gånger. Ändra storlek på varje låda så att den passar ena halvan av lådan. Flytta varje låda så att den passar intill varandra inuti huvudlådan.

Steg 7

Skapa textfält som representerar navigeringslänkar genom att klicka på knappen "A Text" högst upp i navigeringsfältet. Välj ett område inuti navigeringsrutan för att skapa ett litet textfält genom att klicka på vänster musknapp. Flytta musen för att ändra storlek på fältet till önskad längd. Skriv in text för att säga "Hem".

Steg 8

Skapa ytterligare fyra textfält genom att använda vänster musknapp. Skriv "menyalternativ" i varje ruta. Ändra storlek på varje ruta för att matcha storleken på "Hem"-rutan.

Steg 9

Välj ett område inuti huvudrubriken och skapa ett textfält med beskrivningen "Huvudhuvud".

Steg 10

Skapa en textruta inuti varje ruta som finns i huvudinnehållsrutan i ritningen. Ge varje textruta en beskrivning, till exempel "Innehållsområde". Ändra storlek på varje textruta till samma storlek. Välj knappen "Pekare" på den översta navigeringsmenyn.

Steg 11

Spara ritningen genom att klicka på "Arkiv" från den översta navigeringsmenyn och välja "Spara som".

Dricks

Även om Visio inte kommer med GUI-prototypstenciler eller objekt, erbjuder tredjepartsföretag sådana verktyg för nedladdning. Om du tänker använda Visio för att skapa en gemensam design, kom ihåg att Visio-ritningsfilformatet inte är kompatibelt med de flesta ritprogrampaket.

Varning

Alltför komplexa ritningar kan göra att Visio saktar ner i uppdateringen av en ritning efter att ha gjort en ändring.