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.

  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 (nur auf Englisch) aus.
    • Sprache (nur auf Englisch): Geben Sie den Text für die zu sprechende Antwort ein.
    Sprachwiedergabe verwenden (nur auf Englisch)
    Sprachwiedergabe verwenden (nur auf Englisch)

    A. Trigger „Zeitgesteuert“ B. Verzögerung in Sekunden C. Aktion „Sprachwiedergabe“ (nur auf Englisch) D. Der Text für die zu sprechende Antwort (nur auf Englisch) 
  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 (nur auf Englisch)
    Sprachwiedergabe abspielen (nur auf Englisch)

Link für den Prototyp oder die Design-Spezifikation freigeben und im Web überprüfen

  1. Klicken Sie in XD Desktop rechts oben auf das Symbol Freigeben und wählen Sie die Option Prototyp veröffentlichen oder Design-Spezifikation veröffentlichen aus.

  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