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

Istruzioni

1

Aprire Microsoft Visio. Creare un nuovo disegno facendo clic sull'icona di disegno vuota. Fare clic sul pulsante "Crea".

2

Fare clic su finestra forme sul lato sinistro dello schermo. Selezionare "Altre forme." Selezionare "Forme base USA unità." Fare clic su "Forme rapide".

3

Creare una casella di intestazione facendo clic destro sulla forma rettangolo scatola e trascinando la forma nell'area di disegno. Ridimensionare la casella per coprire circa il 15 per cento della zona superiore del disegno.

4

Creare una casella del menu di navigazione facendo clic destro sulla forma rettangolo scatola e trascinando la forma sotto la casella di intestazione. Ridimensionare la casella per avere un'altezza di circa mezzo pollice e la stessa larghezza come la casella di intestazione.

5

Creare una casella di grande corpo principale facendo doppio clic sulla forma rettangolo scatola e trascinarla sotto la casella del menu di navigazione. Ridimensionare la casella per avere la stessa larghezza come caselle intestazione e navigazione menu e per coprire il fondo dell'area di disegno.

6

Creare due caselle di rettangolo facendo clic destro sulla forma rettangolo scatola e trascinando la forma sopra all'area di disegno due volte. Ridimensionare ogni casella per adattare una metà della finestra di corpo principale. Spostare ogni casella per adattarsi accanto a altro all'interno della scatola del corpo principale.

7

Creare campi di testo che rappresentano collegamenti di spostamento facendo clic sul pulsante "Testo A" nella parte superiore della barra di navigazione. Selezionare un'area all'interno della scatola di navigazione per creare un campo di testo di piccole dimensioni facendo clic sul pulsante sinistro del mouse. Spostare il mouse per ridimensionare il campo alla lunghezza desiderata. Digitare testo per dire "Casa".

8

Creare quattro ulteriori campi di testo utilizzando il pulsante sinistro del mouse. Digitare "Voce di Menu" in ciascuna casella. Ridimensionare ogni casella per adattare la dimensione della casella "Home".

9

Selezionare un'area all'interno della casella di intestazione principale e creare un campo di testo con la descrizione "Intestazione principale."

10

Creare una casella di testo all'interno di ogni casella che si trova all'interno dell'area di casella contenuto principale del disegno. Dare a ciascuna casella di testo una descrizione, ad esempio "Area del contenuto." Ridimensionare ogni casella di testo per essere delle stesse dimensioni. Selezionare il pulsante "Puntatore" nel menu di navigazione superiore.

11

Salvare il disegno facendo clic su "File" dal menu di navigazione in alto e selezionando "Salva come".

Consigli & Avvertenze

• Mentre Visio non è dotati di GUI prototipo stencil o oggetti, aziende di terze parti offrono tali strumenti per il download. Se si intende utilizzare Visio per creare una progettazione collaborativa, tenere presente che il formato di file di disegno di Visio non è compatibile con la maggior parte dei pacchetti software di disegno.
• Eccessivamente complessi disegni possono causare Visio a rallentare in rinfrescante un disegno dopo aver apportato una modifica.