Designs und Prototypen mit Sprachbefehlen und Sprachwiedergabe erstellen

Adobe XD bietet eine leicht zu bedienende Lösung, um anhand von Sprachbefehlen eine Interaktion zwischen Zeichenflächen auslösen zu können. Wo Sie sonst per Klick oder Antippen eine Aktion auslösen, können Sie hier als Trigger auch Sprachbefehle verwenden, um eine Prototypinteraktion auszulösen und Sprachwiedergabe als ausgelöste Antwort verwenden. Wenn Sie beispielsweise eine Sprachsuche in eine mobile App integrieren, können Sie mit Sprachbefehlen und Sprachwiedergabe automatisch zwischen Zeichenflächen wechseln.

Sprachbefehl zu einem Prototyp hinzufügen

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

  2. Wählen Sie alle Zeichenflächen auf der Arbeitsfläche aus, um deren Verdrahtungen anzuzeigen.

  3. Klicken Sie und ziehen Sie die Verdrahtung 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 für den Trigger die folgenden Optionen fest, um eine Prototypinteraktion über Sprache auszulösen:

    • Trigger: Wählen Sie die Option Sprache aus.
    • Befehl: Geben Sie den Text für den Sprachbefehl ein.
    • Aktion: Wählen Sie die Option Übergang aus.
    • Ziel: Wählen Sie den Namen der Zielzeichenfläche aus.
    • Animation: Wählen Sie für die Animation eine der verfügbaren Optionen aus.
    • Easing: Wählen Sie für das Easing eine der verfügbaren Optionen aus.
    • Dauer: Legen Sie die Dauer in Sekunden fest.
    Sprachtrigger festlegen
    Sprachtrigger festlegen

    A. Trigger „Sprache“ B. Der Text für den Sprachbefehl 
  5. Um eine Vorschau der Änderungen abzuspielen, klicken Sie auf das Symbol Vorschau .

  6. Um eine Vorschau des Übergangs zur nächsten Zeichenfläche abzuspielen, wiederholen Sie den Sprachbefehl bei gedrückter Leertaste. 

    Vorschau eines per Sprachbefehl ausgelösten Übergangs
    Vorschau eines per Sprachbefehl ausgelösten Übergangs

Gesprochene Antwort auf eine Spracheingabe hinzufügen

  1. Klicken Sie und ziehen Sie die Verdrahtung von der Zielzeichenfläche zur Ausgangszeichenfläche.

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

    • Trigger: Wählen Sie die Option Zeitgesteuert aus.
    • Verzögerung: Geben Sie die Verzögerung des Übergangs in Sekunden an.
    • Aktion: Wählen Sie die Aktion Sprachwiedergabe aus.
    • Sprache: Geben Sie den Text für die zu sprechende Antwort ein.
    Sprachwiedergabe verwenden
    Sprachwiedergabe verwenden

    A. Trigger „Zeitgesteuert“ B. Verzögerung in Sekunden C. Aktion „Sprachwiedergabe“ D. Der Text für die zu sprechende Antwort 
  3. Um eine Vorschau der Änderungen abzuspielen, klicken Sie auf das Symbol Vorschau .

  4. Um eine Vorschau des Übergangs zur nächsten Zeichenfläche abzuspielen, wiederholen Sie den Sprachbefehl bei gedrückter Leertaste. 

    Sprachwiedergabe abspielen
    Sprachwiedergabe abspielen

Sprechtext zu einem Prototyp hinzufügen

  1. Wählen Sie im Prototypmodus den Startbildschirm aus, der als Beginn für den UX-Flow festgelegt wurde, und klicken Sie auf die Schaltfläche Vorschau.

    Hinweis:

    MAC-Benutzer haben die Möglichkeit, das Mikrofon zu aktivieren, bevor sie eine Vorschau aufzeichnen. Windows-Benutzer können das Mikrofon auf Betriebssystemebene im Game Center aktivieren.

  2. Öffnen Sie die Dropdown-Liste neben der Aufnahmeschaltfläche und wählen Sie die Option Mikrofon aktivieren aus. Achten Sie beim Aufzeichnen auf das blinkende rote Symbol.

  3. Sie können die Aufnahme als mp4-Datei speichern und an Ihre Stakeholder weitergeben oder in sozialen Medien veröffentlichen. 

Link für Prototyp oder Design-Spezifikation im Web teilen und überprüfen

  1. Klicken Sie in XD Desktop auf Freigeben und wählen Sie Für Reviewer freigeben (für Prototypen) bzw. Für Entwickler freigeben (für Design-Spezifikationen).

  2. So können Sie die Sprachsteuerung in einem Prototyp testen:

    • XD Desktop: Halten Sie die Leertaste gedrückt.
    • Adobe XD für iOS/Android: Halten Sie eine beliebige Stelle auf dem Bildschirm länger gedrückt. Setzen Sie den Finger auf den Bildschirm (ohne ihn zu bewegen) und sprechen Sie den Befehl, bevor Sie den Finger zurücknehmen.
    • XD Web auf einem Smartphone: Halten Sie rechts unten auf dem Bildschirm das Mikrofonsymbol gedrückt.
  3. In einer Design-Spezifikationen werden den Entwicklern die Sprachbefehle und die Sprachwiedergabe als Text angezeigt. 

    Hinweis:

    Design-Spezifikationen unterstützen keine Sprachinteraktionen.

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