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 Prototypmodus, indem Sie auf Prototyp klicken.

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

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

    Zeichenfläche kann als Startseite festgelegt werden
    Zeichenfläche kann als Startseite festgelegt werden
    Startseite ist festgelegt
    Startseite ist festgelegt

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

Interaktive Elemente mit Zielbildschirmen verdrahten

Bevor Sie mit dem Verdrahten von Zeichenflächen bzw. Bildschirmen beginnen, sollten Sie den Zeichenflächen aussagekräftige Namen zuweisen. Dadurch fällt es leichter, den Bildschirm zu identifizieren, mit dem Sie einen bestimmten Bildschirm verdrahten möchten.

  1. Wechseln Sie in den Prototypmodus, indem Sie auf Prototyp klicken.

  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 auf den Griff und ziehen Sie, bis die Verbindungslinie 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. Diese Option ist praktisch, wenn Sie einen Prototyp für Navigationsleisten oder feste Fußzeilen erstellen.  Wenn der Benutzer auf der ursprünglichen Zeichenfläche einen Bildlauf durchführt, übernimmt die nächste Zeichenfläche die Bildlaufposition aus der ursprünglichenZeichenfläche. Wenn Sie auf eine Zeichenfläche oder ein Element in der Zeichenfläche klicken, können Sie die Bildlaufposition 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 inaktiv.
    • Overlay: Wenn Sie Zustände oder Übergänge wie Dropdown-Menüs und verschiebbare Tastaturen simulieren möchten, wählen Sie Overlay.

    Wenn Sie die Zeichenfläche doch nicht verdrahten wollen, drücken Sie 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 Prototypmodus 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.
    • 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.
    Mit Zielbildschirmen verdrahtete interaktive Elemente
    Mit Zielbildschirmen verdrahtete interaktive Elemente

    A. Startbildschirm B. Verbundene Zeichenflächen C. Ausgehende Verbindung D. Eingehende Verbindung 

    Hinweis:

    Die grauen Linien zeigen ausgehende Verbindungen an und die blauen eingehende.

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 Fortschrittsbalken. 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, indem Sie auf Prototyp klicken.

  2. Um den Verdrahtungsgriff 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, wo Sie die Maustaste wieder loslassen können. 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.

Prototyplink im Web überprüfen

  1. Klicken Sie in der Desktop-Applikation rechts oben auf die Schaltfläche Freigeben und wählen Sie Für Reviewer freigeben. Wenn der Link erstellt wurde, können Sie ihn kopieren und den Prototyp in einem Browser öffnen. Zeitgesteuerte Übergänge werden abgespielt, während Sie sie in XD Desktop erstellen.

  2. Um einen zeitgesteuerten Übergang abzubrechen, drücken Sie „Pfeil links“ auf der Tastatur oder klicken auf die Navigationsschaltfläche „Zurück “ (mit dem nach links weisenden Pfeil), 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. Um die Wiedergabe der Animation fortzusetzen, drücken Sie „Pfeil rechts“ auf der Tastatur oder klicken auf die Navigationsschaltfläche „Weiter “ (mit dem nach rechts weisenden Pfeil).

Mit der vorherigen Zeichenfläche verdrahten

  1. Wählen Sie im Prototypmodus das Element aus, das Sie verdrahten möchten. Wenn ein kleiner Pfeil angezeigt wird, klicken Sie darauf und es wird automatisch die Aktion „Vorherige Zeichenfläche“ festgelegt. Sie können das Element auch mit einer Zeichenfläche verdrahten und Aktion > Vorherige Zeichenfläche wählen.

    Vorherige Zeichenfläche auswählen
    Vorherige Zeichenfläche auswählen
  2. Wenn die Aktion auf Vorherige Zeichenfläche gesetzt ist, ändert sich das Symbol.

    Ziel festlegen
    Ziel festlegen
  3. Testen Sie die Verdrahtung im Vorschaufenster.

Verdrahtung der Zeichenflächen entfernen

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

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

    Verdrahtung der Zeichenflächen entfernen
    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 das Symbol Aufzeichnen. Um die Aufzeichnung zu beenden, drücken Sie Esc oder klicken erneut auf das Symbol Aufzeichnen.

    Prototypinteraktionen aufzeichnen
    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