Prototypen erstellen, indem Sie Auto-Animate mit Ziehgesten kombinieren

Mit Auto-Animate ist es ein Leichtes, Prototypen mit beeindruckenden animierten Übergängen zu erstellen. Sie duplizieren einfach eine Zeichenfläche, ändern Objekteigenschaften wie Größe, Position, Drehung und wenden eine Auto-Animate-Aktion an. Dadurch wird ein animierter Übergang zwischen den Zeichenflächen erstellt. Damit Sie die Funktion Auto-Animate anwenden können, muss jedes der zu animierenden Objekte auf beiden Zeichenflächen den gleichen Ebenennamen besitzen. Sie können auch die verbesserte Suchfunktion verwenden, damit nur relevante Ebenen und Zeichenflächen angezeigt werden, die den Suchbegriff enthalten, ohne die Ebenenstruktur (z. B. erweiterte Gruppen).

Wie funktioniert Auto-Animate?

Bisher verwendeten Designer mehrere Übergänge zwischen verschiedenen Zeichenflächen, um ihre Prototypinteraktionen zu verdrahten. Mit Auto-Animate können Designer in XD Mikrointeraktionen zwischen zwei Zeichenflächen erstellen, indem Sie

  • Objekte auf den Zeichenflächen duplizieren,
  • ihre Eigenschaften wie Größe, Position und Rotation ändern (Informationen zu unterstützten Eigenschaften finden Sie unter Für Auto-Animate unterstützte Eigenschaften),
  • in den Prototypmodus wechseln,
  • Auto-Animate als neuen Übergang hinzufügen und
  • in XD Desktop eine Vorschau oder in XD für iOS/Android eine Echtzeitansicht des Prototyps anzeigen.

Ebenso wie Sie durch Antippen Übergänge auslösen, können Sie durch Kombination einer Ziehgeste mit Auto-Animate Mikrointeraktionen zwischen Zeichenflächen festlegen. Neue Objekte werden während eines Übergangs mit Auto-Animate eingeblendet und gelöschte Objekte werden ausgeblendet.

Hinweis:

Auf Webbrowsern wird Auto-Animate momentan nicht unterstützt.

Wie funktioniert eine Ziehgeste mit Auto-Animate?

Adobe XD hat sich von einer einfachen Applikation zu einer Lösung mit vielfältigen Möglichkeiten bei der Prototyperstellung wie zeitgesteuerte Übergänge oder Übergänge durch Antippen, Ziehen oder Sprachbefehle entwickelt.

Sie können eine Ziehgeste verwenden, um Nutzererlebnisse wie das Ziehen von Karten oder Bildschirmen zu simulieren. Wenn Sie aus der Triggerliste Ziehen wählen, ändert XD die Aktion automatisch in Auto-Animate.

Hinweis:

Das Testen von Ziehgesten in der Vorschau bzw. Echtzeitansicht wird momentan nur auf XD Desktop bzw. XD für iOS/Android unterstützt.

  1. Ändern Sie im Prototypmodus auf der Zielzeichenfläche die Position eines Objekts, das auch auf der Ausgangszeichenfläche vorkommt, und wählen Sie als Trigger die Option Ziehen.

  2. Die Anfangs- und Endposition eines Objekts bestimmt die Richtung des Ziehens. Ziehen Sie im Vorschaufenster bzw. in der Echtzeitansicht von links nach rechts, wenn sich das Objekt auf der ersten Zeichenfläche links und auf der zweiten Zeichenfläche rechts befindet. Entsprechend können Sie ein Ziehereignis von rechts nach links oder von oben nach unten usw. erstellen.

  3. Um die Änderungen zu testen, klicken Sie auf das Symbol Vorschau  .

     

    Ziehgeste in Aktion
    Ziehgeste in Aktion

Auto-Animate-Übergang mit Ziehgeste für Onboarding-Arbeitsabläufe erstellen

  1. Wählen Sie im Prototypmodus alle Zeichenflächen auf der Arbeitsfläche aus, damit die Verdrahtungen zwischen den Zeichenflächen angezeigt werden.

  2. Klicken Sie auf einen Verbindungsgriff und ziehen Sie ihn von einer Ebene in der Ausgangszeichenfläche zur Zielzeichenfläche. Wenn Sie das erste Element verdrahten, wird die zugehörige Zeichenfläche automatisch zur Startseite.

  3. Legen Sie für den Trigger die folgenden Optionen fest:

    • Trigger: Wählen Sie die Option Ziehen aus.
    • Aktion: Wählen Sie die Option Auto-Animate aus.
    • Ziel: Wählen Sie den Namen der zweiten Zeichenfläche aus.
    • Easing: Wählen Sie für das Easing eine der verfügbaren Optionen aus.
    Auto-Animate-Arbeitsablauf
    Auto-Animate-Arbeitsablauf

    A. Triggertyp „Ziehen“ B. Aktion „Auto-Animate“ C. Zielzeichenfläche D. Easing-Option 
  4. Um die Änderungen zu testen, klicken Sie auf das Symbol Vorschau.

    Auto-Animate in Aktion
    Auto-Animate in Aktion

Auto-Animate-Übergänge aufzeichnen

  1. Klicken Sie in XD Desktop oben rechts auf das Symbol Freigeben und wählen Sie Video aufzeichnen.

  2. Verwenden Sie im Vorschaumodus die Aufnahmetaste , um Ihre Animationen aufzuzeichnen.

Den Prototyplink für Reviewer freigeben

Klicken Sie im Creative Cloud-Client auf Freigeben und wählen Sie Für Reviewer freigeben (für Prototyp) oder Für Entwickler freigeben (für Design-Spezifikationen). Weitere Informationen finden Sie unter Freigeben von Prototypen und Design-Spezifikationen.

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