In Adobe XD interaktive Prototypen erstellen, mit denen Sie und Ihre Stakeholder und Reviewer das Nutzererlebnis einschätzen können

Nachdem Sie die Bildschirme gestaltet haben, können Sie diese miteinander verbinden, um das Erlebnis der Benutzer mit Ihrer Applikation oder Website zu veranschaulichen.

In Adobe XD können Sie interaktive Prototypen erstellen, um die Navigation zwischen Bildschirmen oder Wireframes zu visualisieren. Verkürzen Sie die Entwicklungsphase, indem Sie beliebig oft die Interaktion in der Vorschau prüfen und Ihr Design bei Bedarf überarbeiten. Sie haben auch die Möglichkeit, Interaktionen aufzuzeichnen und diese Aufzeichnung für das Projektteam freizugeben, um Feedback einzuholen. Durch Ein- und Auszoomen können Sie bestimmte Bereiche des Prototyps in allen Einzelheiten anzeigen.

Startseite festlegen

Die Startseite ist der erste Bildschirm Ihrer Applikation oder Website. Ihre Benutzer beginnen auf der Startseite mit der Navigation durch Ihre Applikation oder Website.

Auch wenn Sie eine Vorschau Ihres Prototyps anzeigen und nichts ausgewählt ist, beginnt die Vorschau mit der Startseite. Das bedeutet, dass die Startseite standardmäßig die erste Zeichenfläche ist, für die Sie eine Verdrahtung definieren.

  1. Wechseln Sie in den Modus Prototyp.

  2. Klicken Sie auf die Zeichenfläche, die Sie als Startseite festlegen möchten. Links oben wird ein graues Symbol angezeigt.

    Startseite festlegen
    Startseite festlegen
  3. Klicken Sie auf das Startsymbol. Es wird blau hinterlegt, um anzuzeigen, dass diese Zeichenfläche bzw. dieser Bildschirm als Startseite eingerichtet wurde.

    Das Startsymbol wird blau hinterlegt, nachdem die Zeichenfläche als Startseite eingerichtet wurde
    Das Startsymbol wird blau hinterlegt, nachdem die Zeichenfläche als Startseite eingerichtet wurde

    Um eine andere Zeichenfläche als Startseite zu definieren, klicken Sie einfach auf das Startsymbol der betreffenden Zeichenfläche.

Interaktive Elemente mit Zielbildschirmen verdrahten

  1. Wechseln Sie in den Modus Prototyp.

  2. Klicken Sie auf das Objekt, das Sie verdrahten möchten.

    Am Objekt wird ein Verdrahtungsgriff mit einem Pfeil angezeigt. Wenn Sie die Maus über den Griff führen, nimmt der Cursor die Form einer gepunkteten Linie an.

    Interaktive Elemente mit Zielbildschirmen verdrahten
    Interaktive Elemente mit Zielbildschirmen verdrahten
  3. Klicken Sie und ziehen Sie den Griff, bis die Verdrahtungslinie eingeblendet wird. Lassen Sie die Maustaste über der Zielzeichenfläche bzw. dem Zielbildschirm los.

    Wenn Sie das erste Element verdrahten, wird die zugehörige Zeichenfläche automatisch zur Startseite. 

  4. Im angezeigten Popup-Fenster können Sie folgende Optionen festlegen:

    • Optionen für den Übergang und die Dauer des Übergangs: Soll beim Übergang zu einer anderen Zeichenfläche die Bildlaufposition erhalten bleiben, aktivieren Sie die Option Bildlaufposition merken. Wenn der Benutzer auf der ursprünglichen Zeichenfläche einen Bildlauf durchgeführt hat, übernimmt die nächste Zeichenfläche die Bildlaufposition aus der ursprünglichen Zeichenfläche. Wenn Sie auf eine Zeichenfläche oder ein Element in der Zeichenfläche klicken, können Sie die Position steuern, die zwischen den Bildschirmen beibehalten werden soll. Dank der Steuerung müssen Sie nicht ständig einen Bildlauf in der Projektdatei durchführen. Wenn ein Benutzer beispielsweise auf der Zeichenfläche A einen Bildlauf zu y=1000 durchführt, ist die Standardposition bei einem Wechsel zur Zeichenfläche B y=1000. Wenn für die ursprüngliche Zeichenfläche kein Bildlauf definiert ist, ist die Option Bildlaufposition merken nicht aktiviert. Diese Option ist praktisch, wenn Sie einen Prototyp für Navigationsleisten oder feste Fußzeilen erstellen.
    • Overlay: Wenn Sie Zustände oder Übergänge wie Dropdown-Menüs und verschiebbare Tastaturen simulieren möchten, wählen Sie Overlay.

    Drücken Sie zum Verwerfen die Esc-Taste oder klicken Sie auf eine Stelle außerhalb des Popup-Fensters.

    Mit Overlays arbeiten
    Mit Overlays arbeiten
  5. Wiederholen Sie die Schritte oben, um alle interaktiven Elemente in Ihrem Projekt zu verdrahten.

    TIPP:

    Um im Modus Prototyp Interaktionen schneller zu erstellen, haben Sie folgende Möglichkeiten:

    • Durch Kopieren und Einfügen von Objekten aus anderen Zeichenflächen wird zusammen mit dem Objekt auch die Interaktion eingefügt.
    • Es ist auch möglich, nur die Interaktion zu kopieren und einzufügen. Dazu kopieren Sie ein Objekt, klicken mit der rechten Maustaste auf ein anderes Objekt und wählen Interaktion einfügen. Es wird nur die Interaktion eingefügt.
    all-connectors
    Mit Zielbildschirmen verdrahtete interaktive Elemente

Um das Element mit einem anderen Bildschirm zu verdrahten, klicken Sie erneut auf den Griff und ziehen ihn zum gewünschten Bildschirm.

Um die Verdrahtungen zu oder von einer bestimmten Zeichenfläche anzuzeigen, wählen Sie den Titel der Zeichenfläche aus.

Um eine Interaktion zu löschen, ziehen Sie den Verdrahtungsgriff von der Zielzeichenfläche auf eine Stelle außerhalb des Arbeitsbereichs.

Zeitgesteuerte Übergänge verwenden

Mit zeitgesteuerten Übergängen können Sie in Adobe XD besondere Prototyperlebnisse erstellen, z. B. Onboarding-Flows, eine automatische Umleitung auf einen anderen Bildschirm oder Statusanzeigen. Sie können Übergänge durch Antippen auslösen oder mit Verzögerung die Dauer des Übergangs festlegen. Wenn Sie beispielsweise Onboarding-Workflows erstellen, können Sie die Option Verzögerung verwenden, um Zeichenflächen zu verbinden und Übergänge zwischen ihnen festzulegen.

Als Designer können Sie auch den Übergang zu einer anderen Zeichenfläche zeitgesteuert auslösen. Wenn Sie z. B. Onboarding-Flows entwerfen, können Sie zeitgesteuerte Übergänge verwenden, um mit dem Startbildschirm eines App-Flows zu beginnen und Übergänge zwischen einigen Onboarding-Bildschirmen automatisch erfolgen zu lassen.

Zeitgesteuerten Übergang für Onboarding-Flows erstellen

Zeitgesteuerte Übergänge
Zeitgesteuerte Übergänge
  1. Wechseln Sie in XD in den Prototypmodus.

  2. Um den Verbindungsgriff anzuzeigen, wählen Sie die Zeichenfläche aus und führen den Mauszeiger über den Griff.

  3. Klicken Sie und ziehen Sie die Verbindungslinie von der Ausgangszeichenfläche zur Zielzeichenfläche. Wenn Sie das erste Element verdrahten, wird die zugehörige Zeichenfläche automatisch zur Startseite.

  4. Legen Sie im Popup-Fenster „Trigger“ die folgenden Optionen fest:

    • Trigger: Wählen Sie hier die Option Zeitgesteuert aus.
    • Verzögerung: Geben Sie die Verzögerung des Übergangs in Sekunden an.
    • Dauer: Geben Sie die Dauer des Übergangs in Sekunden an.
    • Aktion: Wählen Sie die Aktion Übergang aus.
    Trigger, Verzögerung, Dauer und Aktion festlegen
    Trigger, Verzögerung, Dauer und Aktion festlegen

    A. „Trigger“ auf „Zeitgesteuert“ festlegen B. „Verzögerung“ in Sekunden angeben C. Als „Aktion“ „Übergang“ einstellen D. „Dauer“ in Sekunden angeben 
  5. Klicken Sie auf das Symbol Voschau, um die Änderungen zu testen.

Prototyp-Link im Web überprüfen

  1. Klicken Sie in der Desktop-Applikation rechts oben auf das Symbol Freigeben und wählen Sie die Option Prototyp veröffentlichen. Zeitgesteuerte Übergänge werden abgespielt, während Sie sie in XD Desktop erstellen.

  2. Um einen zeitgesteuerten Übergang abzubrechen, drücken Sie die Zurück-Taste oder die Schaltfläche für die Navigation nach links, wodurch Sie zum vorherigen Bildschirm zurückkehren.

  3. Wenn Sie den Übergang zum ersten Mal abbrechen, informiert Sie Adobe XD in einer Benachrichtigung, dass der zeitgesteuerte Übergang abgebrochen wurde. Drücken Sie die Schaltfläche für die Navigation nach rechts oder die Nach-rechts-Taste, um die Wiedergabe der Animation fortzusetzen.

Mit der vorherigen Zeichenfläche verdrahten

  1. Wählen Sie im Modus Prototyp die Option Ziel > Vorherige Zeichenfläche.

    Vorherige Zeichenfläche auswählen
    Vorherige Zeichenfläche auswählen
  2. Legen Sie unter Ziel die Option Vorherige Zeichenfläche fest. Das Symbol ändert sich, wenn das Ziel festgelegt ist.

  3. Testen Sie die Verdrahtung im Vorschaufenster.

Verdrahtung der Zeichenflächen entfernen

  1. Wählen Sie im Modus Prototyp die Option Ziel > Kein Ziel.

    Sie können auch die Verdrahtung von der Zeichenfläche auf die Montagefläche (dem grauen Bereich zwischen den Zeichenflächen) ziehen.

    Verdrahtung der Zeichenflächen zurücksetzen
    Verdrahtung der Zeichenflächen entfernen

    Hinweis:

    Die Option Kein Ziel ist nur verfügbar, wenn die Zeichenfläche bereits mit einem Ziel verdrahtet ist.

  2. Zeigen Sie in einem Browser eine Vorschau der verdrahteten Zeichenflächen an.

    Jede zuvor von diesem Element aus definierte Verdrahtung wird entfernt.

Vorschau der Interaktionen anzeigen und Interaktionen aufzeichnen

Hinweis:

Das Aufzeichnen von Prototypen wird in Adobe XD für Windows nicht unterstützt. Allerdings gibt es einen Workaround. Drücken Sie den Tastaturbefehl Windows + G und verwenden Sie stattdessen den Rekorder, um das Vorschaufenster aufzuzeichnen.

Um Ihren Prototyp und die Interaktionen zu testen, können Sie eine Vorschau des Prototyps anzeigen. Sie haben auch die Möglichkeit, die Vorschau aufzuzeichnen und diese Aufzeichnung als mp4-Datei zu speichern. Anschließend können Sie die mp4-Datei für Ihre Stakeholder freigeben, damit diese den Prototyp-Walkthrough ansehen (bzw. überprüfen) und Feedback dazu abgeben können.

  1. Klicken Sie auf das Vorschausymbol. Das Vorschaufenster wird geöffnet und zeigt die aktive Zeichenfläche an.

    Um die Navigation zwischen Bildschirmen zu testen, klicken Sie auf die interaktiven Elemente.

    Sie können das Design und die Interaktionen in Ihrem Prototyp direkt im Vorschaufenster bearbeiten. Die Änderungen sind sofort für die Vorschau verfügbar.

  2. Um die Interaktion aufzuzeichnen, klicken Sie im Vorschaufenster auf Aufzeichnen. Um die Aufzeichnung zu beenden, drücken Sie Esc oder klicken erneut auf Aufzeichnen.

    preview-record
    Prototypinteraktionen aufzeichnen

  3. Geben Sie den Pfad und den Namen für die Datei an, in der die Aufzeichnung gespeichert werden soll. Die Aufzeichnung wird als mp4-Datei gespeichert.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie