So erstellen Sie eine GUI in Visio

...

Microsoft Visio kann verwendet werden, um viele Arten von GUI-Designs zu erstellen.

Microsoft Visio 2010 ist ein Grafikdesign-Tool, mit dem Diagramme, Oberflächenelemente, Navigationsmenüs und andere visuelle Objekte erstellt werden können. Es bietet eine breite Palette von Werkzeugen, um das Design einer grafischen Benutzeroberfläche (GUI) zu erstellen. Das Diagramm zeigt, wie die Anwendung oder das Webinterface in seiner endgültigen Form aussehen wird. Die Entwicklung einer GUI in Visio ist nicht allzu schwierig und Designs können als PDF-Dateien exportiert werden. Befolgen Sie einige Richtlinien, um zu erfahren, wie Sie ein grundlegendes GUI-Drahtmodell für eine Website erstellen.

Schritt 1

Öffnen Sie Microsoft Visio. Erstellen Sie eine neue Zeichnung, indem Sie auf das leere Zeichnungssymbol klicken. Klicken Sie auf die Schaltfläche "Erstellen".

Video des Tages

Schritt 2

Klicken Sie auf das Fenster Shapes auf der linken Seite des Bildschirms. Wählen Sie "Weitere Formen". Wählen Sie "Grundformen US-Einheiten". Klicken Sie auf "Schnelle Formen".

Schritt 3

Erstellen Sie ein Überschriftenfeld, indem Sie mit der rechten Maustaste auf die rechteckige Feldform klicken und die Form in den Zeichenbereich ziehen. Ändern Sie die Größe des Felds so, dass es etwa 15 Prozent des oberen Bereichs der Zeichnung abdeckt.

Schritt 4

Erstellen Sie ein Navigationsmenüfeld, indem Sie mit der rechten Maustaste auf die rechteckige Feldform klicken und die Form unter das Kopffeld ziehen. Ändern Sie die Größe des Felds auf eine Höhe von etwa einem halben Zoll und die gleiche Breite wie das Kopffeld.

Schritt 5

Erstellen Sie eine große Hauptkörperbox, indem Sie mit der rechten Maustaste auf die rechteckige Boxform klicken und sie unter das Navigationsmenüfeld ziehen. Ändern Sie die Größe des Felds so, dass es dieselbe Breite wie die Kopfzeilen- und Navigationsmenüfelder hat und den unteren Teil des Zeichenbereichs abdeckt.

Schritt 6

Erstellen Sie zwei Rechteckboxen, indem Sie mit der rechten Maustaste auf die Rechteckboxform klicken und die Form zweimal in den Zeichenbereich ziehen. Passen Sie die Größe jeder Box an eine Hälfte der Hauptkörperbox an. Verschieben Sie jede Box so, dass sie innerhalb der Hauptgehäusebox nebeneinander passt.

Schritt 7

Erstellen Sie Textfelder, die Navigationslinks darstellen, indem Sie auf die Schaltfläche "A Text" oben in der Navigationsleiste klicken. Wählen Sie einen Bereich innerhalb der Navigationsbox aus, um durch Klicken mit der linken Maustaste ein kleines Textfeld zu erstellen. Bewegen Sie die Maus, um die Größe des Felds auf die gewünschte Länge zu ändern. Geben Sie Text ein, um "Zuhause" zu sagen.

Schritt 8

Erstellen Sie mit der linken Maustaste vier weitere Textfelder. Geben Sie "Menüelement" in jedes Feld ein. Passen Sie die Größe jeder Box an die Größe der "Home"-Box an.

Schritt 9

Wählen Sie einen Bereich im Hauptkopfzeilenfeld aus und erstellen Sie ein Textfeld mit der Beschreibung "Hauptkopfzeile".

Schritt 10

Erstellen Sie ein Textfeld in jedem Feld, das sich im Hauptinhaltsfeldbereich der Zeichnung befindet. Geben Sie jedem Textfeld eine Beschreibung, beispielsweise "Inhaltsbereich". Ändern Sie die Größe jedes Textfelds auf dieselbe Größe. Wählen Sie im oberen Navigationsmenü die Schaltfläche "Zeiger".

Schritt 11

Speichern Sie die Zeichnung, indem Sie im oberen Navigationsmenü auf "Datei" klicken und "Speichern unter" auswählen.

Spitze

Während Visio keine GUI-Prototyp-Schablonen oder -Objekte enthält, bieten Drittanbieter solche Tools zum Download an. Wenn Sie Visio zum Erstellen eines kollaborativen Entwurfs verwenden möchten, beachten Sie, dass das Visio-Zeichnungsdateiformat mit den meisten Zeichensoftwarepaketen nicht kompatibel ist.

Warnung

Zu komplexe Zeichnungen können dazu führen, dass Visio die Aktualisierung einer Zeichnung nach einer Änderung verlangsamt.