Beginnen Sie mit dem Prototyping in Adobe XD

Da die Nachfrage nach UX-Designprofis weiter wächst, suchen Designer nach benutzerfreundlichen Tools, die leistungsfähig genug sind, um hochwertige Prototypen zu erstellen, die sich jedoch mit den Tools vertraut fühlen, die sie bereits täglich verwenden.

Adobe XD (Vorschau) macht genau das und ermöglicht Benutzern das einfache Erstellen, Bearbeiten und Sozialisieren von Prototypen für mobile Designs in einem Programm. Es wird ständig an neuen Funktionen gearbeitet. Diese kurzen Tutorials helfen Ihnen jedoch vorerst beim Einstieg in das Prototyping in Adobe XD.

01. Erstellen Sie einen Prototyp aus einem Drahtmodell

Das Erstellen von Prototypen ist mit Adobe XD einfach



Das Erstellen von Prototypen ist mit Adobe XD einfach

Gehen Sie folgendermaßen vor, um einen Prototyp aus einem Drahtmodell zu erstellen:

  • Klicken Sie oben oder auf der Befehlsregisterkarte auf Prototyp
  • Klicken Sie auf Befehl a, um Interaktionen anzuzeigen, und klicken Sie dann auf Vorschau, um den Prototyp zu verbinden
  • Klicken Sie sich durch die Bildschirme des Prototyps, um die allgemeinen Auswirkungen auf Navigation und Übergang zu sehen

02. Interaktionen erstellen

Um eine Interaktion von einem Bildschirm zum anderen zu erstellen, wählen Sie ein Objekt aus und ziehen Sie den blauen Pfeil auf die Zeichenfläche, mit der Sie eine Verknüpfung herstellen möchten

Um eine Interaktion von einem Bildschirm zum anderen zu erstellen, wählen Sie ein Objekt aus und ziehen Sie den blauen Pfeil auf die Zeichenfläche, mit der Sie eine Verknüpfung herstellen möchten

Das erste, was Sie sehen, ist ein blaues Symbol für die Startschaltfläche oben links auf dem Bildschirm, das den Startbildschirm anzeigt. Sie können dies ändern, indem Sie auf einen anderen Titel klicken und dann auf das graue Startsymbol klicken, das an den Bildschirm angehängt ist, der Ihr neuer Startbildschirm sein soll.

Um eine Interaktion von einem Bildschirm zum anderen zu erstellen, wählen Sie ein Objekt aus und ziehen Sie den blauen Pfeil auf die Zeichenfläche, mit der Sie eine Verknüpfung herstellen möchten. Sie können eine Interaktion entfernen, indem Sie auf den blauen Pfeil klicken und ihn an eine leere Stelle ziehen. Wenn Sie eine Interaktion erstellen, erhalten Sie im Dialogfeld automatisch Optionen zum Definieren des Segue-, Easing- und Durationstyps. Befehlsklick kann dies leicht von einem Prototyp aus tun.

Drücken Sie die Eingabetaste, um eine Vorschau anzuzeigen. Ohne das Vorschaufenster zu schließen, können Sie bearbeiten, indem Sie auf den blauen Pfeil für die Interaktion klicken und von dort aus wechseln

03. Prototypen teilen

Veröffentlichen Sie, um online zu teilen, indem Sie einfach oben rechts auf dem Bildschirm auf Online teilen klicken

bester Computermonitor für die Videobearbeitung
Veröffentlichen Sie, um online zu teilen, indem Sie einfach oben rechts auf dem Bildschirm auf Online teilen klicken

Tippen Sie bei geöffnetem Vorschaufenster auf Aufzeichnen und klicken Sie sich durch die Interaktionen Ihres Prototyps. Wenn Sie fertig sind, drücken Sie erneut auf Aufnahme und speichern Sie die Filmdatei auf Ihrem Desktop. Wenn Kollegen die Filmdatei anzeigen, gibt es visuelle Markierungen, die die Hotspots anzeigen, auf die Sie bei der Aufnahme geklickt haben.

Sie können auch veröffentlichen, um online zu teilen, indem Sie einfach in der oberen rechten Ecke des Bildschirms auf Online teilen klicken, einen Titel in das dafür vorgesehene Feld eingeben und ein Bild aus dem Finder in das dafür vorgesehene Feld ziehen, um ein Vorschaufenster zu erstellen und dann einen Link zu erstellen. Adobe XD erstellt automatisch einen gemeinsam nutzbaren Link, der in jedem Webbrowser angezeigt werden kann. Markierungen zeigen automatisch die Hot Spots an, wenn der Prüfer in einem definierten Zeitraum nicht klickt.

Sie können die Überprüfung auch auf einem mobilen Gerät durchführen, indem Sie denselben Link in Ihren mobilen Browser einfügen. Die visuellen Indikatoren werden beim Testen auf einem mobilen Gerät nicht angezeigt, um eine realistischere Erfahrung zu erzielen.

Wenn Sie die URL auf Ihrem Startbildschirm speichern, wird das Symbol automatisch als das zuvor ausgewählte Vorschaubild angezeigt

Sie können alle erforderlichen Änderungen in Adobe XD vornehmen. Um überarbeitete Versionen freizugeben, klicken Sie einfach erneut auf Freigeben. Sie haben die Möglichkeit, den ursprünglichen Link zu aktualisieren oder einen neuen Link zu erstellen. Links verwalten. Klicken Sie über Ihr Creative Cloud-Asset-Konto auf Links verwalten. Alle Prototypen werden zur einfachen Verwaltung online in Ihrem Prototypbereich gespeichert.

Worte: Demian Borba

Demian Borba ist Produktmanager für Adobe XD .