Come creare la GUI in Visio

Microsoft Visio 2010 è uno strumento di progettazione grafica che può essere utilizzato per creare diagrammi, elementi di interfaccia, menu di navigazione e altri oggetti visivi. Offre un'ampia gamma di strumenti per creare la progettazione di un'interfaccia utente grafica (GUI). Il diagramma mostrerà come apparirà l'applicazione o l'interfaccia Web nella sua forma finale. Lo sviluppo di una GUI in Visio non è troppo difficile e i progetti possono essere esportati come file PDF. Segui alcune linee guida per imparare a creare un mockup wireframe della GUI di base per un sito web.

Passaggio 1

Apri Microsoft Visio. Crea un nuovo disegno facendo clic sull'icona del disegno vuoto. Fare clic sul pulsante "Crea".

Passaggio 2

Fare clic sulla finestra Forme sul lato sinistro dello schermo. Seleziona "Altre forme". Seleziona "Forme di base unità USA". Fai clic su "Forme rapide".

Passaggio 3

Crea una casella di intestazione facendo clic con il pulsante destro del mouse sulla forma della casella rettangolare e trascinando la forma nell'area di disegno. Ridimensiona la casella per coprire circa il 15 percento dell'area superiore del disegno.

Passaggio 4

Crea una casella del menu di navigazione facendo clic con il pulsante destro del mouse sulla forma della casella del rettangolo e trascinando la forma sotto la casella dell'intestazione. Ridimensiona la casella per avere un'altezza di circa mezzo pollice e la stessa larghezza della casella dell'intestazione.

Passaggio 5

Crea una grande casella del corpo principale facendo clic con il pulsante destro del mouse sulla forma della casella del rettangolo e trascinandola sotto la casella del menu di navigazione. Ridimensiona la casella in modo che abbia la stessa larghezza delle caselle del menu di navigazione e dell'intestazione e per coprire la parte inferiore dell'area di disegno.

Passaggio 6

Crea due caselle rettangolari facendo clic con il pulsante destro del mouse sulla forma della casella rettangolare e trascinando due volte la forma nell'area di disegno. Ridimensiona ogni scatola per adattarla a metà della scatola del corpo principale. Sposta ogni scatola per adattarla l'una all'altra all'interno della scatola del corpo principale.

Passaggio 7

Crea campi di testo che rappresentano collegamenti di navigazione facendo clic sul pulsante "Testo A" nella parte superiore della barra di navigazione. Seleziona un'area all'interno della casella di navigazione per creare un piccolo campo di testo facendo clic con il pulsante sinistro del mouse. Muovi il mouse per ridimensionare il campo alla lunghezza desiderata. Digita il testo per dire "Casa".

Passaggio 8

Crea altri quattro campi di testo usando il tasto sinistro del mouse. Digita "Voce di menu" in ogni casella. Ridimensiona ciascuna casella in modo che corrisponda alle dimensioni della casella "Home".

Passaggio 9

Seleziona un'area all'interno della casella dell'intestazione principale e crea un campo di testo con la descrizione "Intestazione principale".

Passaggio 10

Creare una casella di testo all'interno di ciascuna casella situata all'interno dell'area della casella del contenuto principale del disegno. Assegna a ciascuna casella di testo una descrizione, ad esempio "Area contenuti". Ridimensiona ogni casella di testo in modo che abbia la stessa dimensione. Seleziona il pulsante "Puntatore" nel menu di navigazione in alto.

Passaggio 11

Salva il disegno cliccando su "File" dal menu di navigazione in alto e selezionando "Salva con nome".

Suggerimento

Sebbene Visio non venga fornito con stencil o oggetti per prototipi della GUI, le società di terze parti offrono tali strumenti per il download. Se intendi utilizzare Visio per creare un progetto collaborativo, tieni presente che il formato del file di disegno di Visio non è compatibile con la maggior parte dei pacchetti software di disegno.

Avviso

Disegni eccessivamente complessi possono causare il rallentamento di Visio nell'aggiornamento di un disegno dopo aver apportato una modifica.