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 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 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.

Probleme mit Sprachinteraktionen mithilfe von Benachrichtigungen lösen

Probleme mit Sprachinteraktionen können Sie jetzt während der Vorschau auf dem Desktop oder im Web lösen. Stakeholder, die die Design-Spezifikationen prüfen, können sich anhand dieser Funktion besser mit der Interaktion mit dem Prototyp in Adobe XD vertraut machen.

Bevor Sie beim Testen mit Ihrem Prototyp sprechen, vergewissern Sie sich, dass die Menüoption Benachrichtigungen anzeigen aktiviert ist. Dieser Menübefehl ist beim Start von Adobe XD standardmäßig aktiviert.

Benachrichtigungen anzeigen
Benachrichtigungen zu Prototypen mit Sprachsteuerung anzeigen

Jeder Befehl, mit dem Sie Adobe XD steuern, wird mit allen auf der aktuellen Zeichenfläche vorhandenen Sprachtriggern abgeglichen. Wird keine Übereinstimmung gefunden, erhalten Sie die Benachrichtigung Kein Treffer gefunden für: {Sprachbefehl}. Wenn Sie sehen, was Adobe XD verstanden hat, können Sie feststellen, warum nicht bei jedem gesprochenen Befehl ein Treffer erzielt wird.

Treffer können aus verschiedenen Gründen nicht gefunden werden. Möglicherweise wird der gesprochene Befehl auf dieser Zeichenfläche nicht in den Interaktionen verwendet. Der Sprache-zu-Text-Dienst liefert möglicherweise ein unerwartetes Ergebnis.

Beispielsweise könnten Sie in einer Interaktion die Wendung zwei Dollar als Sprachbefehl hinzufügen. Bei Spracheingabe gibt der Sprache-zu-Text-Dienst jedoch u. U. das Ergebnis 2,00 USD zurück. An einer solchen Benachrichtigung erkennen Sie, dass Sie festlegen müssen, dass in der Interaktion Zahlen anstelle von Wörtern verwendet werden.

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