Erstellen eines Flussdiagramms für Wireframes

Ich bin ein bisschen neu im Wireframing, daher habe ich hier vielleicht die falschen Vorstellungen, aber ich möchte ein Flussdiagramm erstellen, das zeigt, wie verschiedene Wireframes einer App miteinander zusammenhängen. Die Sache ist, es wird ziemlich chaotisch:Aktueller Status des Flussdiagramms

wie Sie vielleicht schon erkennen können, ist es ziemlich chaotisch und mir fehlen noch einige Verbindungen ...

Gibt es eine bessere Möglichkeit, die Beziehung von Wireframes darzustellen (vielleicht sind Flussdiagramme draußen und es gibt etwas Cooleres) oder gibt es einige andere Tricks, wie z. B. nur bestimmte Fälle anzuzeigen (etwas kaufen, Informationen über X erhalten, sich anmelden usw.) und damit die Anzahl der für einen bestimmten Fall relevanten Verbindungen zu reduzieren?

Vielen Dank im Voraus! :)

Antworten (2)

Technisch gesehen werden alle Seiten des Drahtmodells miteinander verbunden, was das Diagramm komplizierter macht. Ich kann die Seitennamen in der Abbildung nicht ganz lesen, es sieht so aus, als wäre es eine Shopping-Site.

Ich würde es in eine Illustration zerlegen, die alle Seitentypen oder den Site-Baum anzeigt. Dann ein separates Diagramm für jeden Benutzerfluss/Journey. Für eine Shopping-Site könnten Sie die folgenden Fahrten haben.

  • Benutzerkonto verwalten
  • Benutzer-Checkout
  • Benutzer fügt Produkt zum Warenkorb hinzu
  • Admin verwaltet Produkte
  • Admin verwaltet Bestellungen
  • usw

Wie in den folgenden Beispielen.

Benutzer-CheckoutKasse

Benutzerkonto verwaltenGeben Sie hier die Bildbeschreibung ein

Admin-ManagerAdmin-Manager

Normalerweise repräsentiert in Flussdiagrammen die kleine Raute/Quadrat auf einem 45-Winkel eine Benutzerentscheidung oder eine Aufteilung im Fluss. Ignorieren Sie den ersten Diamanten im Diagramm zur Benutzerverwaltung, den hätte ich entfernen sollen.

Der Trick, den ich für Netzwerkdiagramme verwende, besteht darin, dass ich sie in einem automatisierten Layout-Tool wie z. yEd oder Graphwiz . Auf diese Weise erhalte ich einen guten Ausgangspunkt für einen minimal überlappenden Graphen.

Erstellen eines Flussdiagramms für Wireframes
AntwortenHierDatenschutz-Bestimmungen1y, 0v