Hinzufügen von Interaktivität

  • Artikel

Über die Modellierung der Interaktivität, d. h. der Interaktion zwischen dem Benutzer und einer Anwendung, können unterschiedliche Möglichkeiten aufgezeigt werden, wie ein Benutzer mit einer Anwendung interagieren kann. Microsoft Expression Blend stellt eine Reihe von Tools bereit, um das interaktive Verhalten von Prototypen darzustellen. Führen Sie z. B. einen der folgenden Schritte aus:

  • Simulieren Sie interaktives Verhalten mithilfe von Animation.

  • Fügen Sie Elementen im Prototyp Navigationsfunktionen hinzu.

  • Erstellen Sie Prototypen von datengesteuerten Benutzeroberflächen und verwenden Sie Beispieldaten und Datenbindung.

  • Wenden Sie Verhalten auf Elemente im Prototyp an.

Weitere Informationen dazu, wie Sie SketchFlow-Projekten Interaktivität hinzufügen können, finden Sie unter Erste Schritte mit SketchFlow Ee341387.xtlink_newWindow(de-de,Expression.40).png.

Animation

Manchmal ist es hilfreich, einem Prototyp animierte Sequenzen hinzuzufügen, um Interaktion darzustellen. Sie können Keyframe-Animationswerkzeuge verwenden wie z. B. die Werkzeuge im Panel Objekte und Zeitachsen. Verwenden Sie das Zuständepanel oder das SketchFlow-Animationspanel, um eine einfache animierte Sequenz zu erstellen.

Weitere Informationen zur Verwendung von Status finden Sie in diesem Thema unter "Visueller Status".

Keyframe-Animation

Sie können in Expression Blend Keyframe-Animationswerkzeuge verwenden, um in den Fenstern des SketchFlow-Projekts animierte Sequenzen zu erstellen. Sie können Keyframe-Animationen mit visuellen Status (z. B. eine Animation, die beim Erreichen eines bestimmten Status ausgelöst wird) oder unabhängig von visuellen Status verwenden (wenn z. B. eine Animation durch eine Aktion ausgelöst wird).

Weitere Informationen zur Erstellung von Animationen in Expression Blend finden Sie unter Animieren von Objekten.

Sie können in Windows Presentation Foundation (WPF)-Anwendungen auch Animationspfade verwenden, um animierte Sequenzen zu erstellen. Weitere Informationen finden Sie unter Erstellen, Ändern oder Löschen von Animationspfaden.

SketchFlow-Animation

Keyframe-Animationen können sehr hilfreich sein. Keyframe-Animationen können aber auch sehr detailliert sein und sind unter Umständen in einem Prototypprojekt nicht darstellbar. SketchFlow-Animationen weisen Ähnlichkeiten mit Storyboardverfahren auf und können schnell und einfach im SketchFlow-Animationspanel erstellt werden. Wie Keyframe-Animationen und Status eignen sich SketchFlow-Animationen, um Benutzerinteraktion darzustellen.

In einer SketchFlow-Animation verwenden Sie das SketchFlow-Animationspanel, um eine Snapshot-Sequenz zu erstellen, indem Sie dem Panel eine neue Sequenz hinzufügen und dann eine "Szene" auf der Zeichenfläche für diesen Frame anpassen. Sie können die Übergangszeiten zwischen den Frames und die Haltezeit für jeden einzelnen Frame einfach einstellen. Sie können die Animationssequenz direkt im Dokumentfenster wiedergeben, indem Sie im SketchFlow-Animationspanel auf Wiedergabe klicken. Oder Sie klicken auf F5, um das Projekt zu erstellen und auszuführen, und geben die Animation dann im SketchFlow-Player wieder.

Hier ein Beispiel für eine SketchFlow-Animation: In den folgenden Frames wird zunächst der Zeiger von rechts unten auf das Bild "Halo 2" bewegt und dann eine Klickaktion mit einem roten Stern simuliert. Das Bild "Halo 2" bewegt sich dann nach links und der Zeiger nach rechts.

Ee341387.df44ecfb-df4c-40c8-aefb-16243eeea90b(de-de,Expression.40).pngEe341387.02c55e22-17c4-404d-90a4-2fd308993ad7(de-de,Expression.40).pngEe341387.9cd3432b-4dd3-4751-80d3-28bfc57f73b3(de-de,Expression.40).pngEe341387.914aa328-b7ca-4484-82a6-b6a5b8c24d84(de-de,Expression.40).pngEe341387.fba8a139-19c5-4a84-b0d2-1bce67266301(de-de,Expression.40).png

So erstellen Sie diese SketchFlow-Animation

  1. Öffnen Sie das Fenster, dem Sie die Animation hinzufügen möchten. Klicken Sie im SketchFlow-Animationspanel auf Neue SketchFlow-AnimationEe341387.d68c6600-ebf7-4b74-8416-6179ce5ad38e(de-de,Expression.40).png, um eine neue SketchFlow-Animation zu erstellen. Im SketchFlow-Animationspanel wird eine neuer Frame angezeigt.

    NoteHinweis:

    Wenn das SketchFlow-Animationspanel im Menü Fenster nicht angezeigt wird, klicken Sie auf SketchFlow-Animation.

    In diesem Beispiel ist der Basisstatus (der Normalstatus des Fensters) mit dem Status des ersten Frames identisch.

  2. Fügen Sie einen neuen Frame hinzu, indem Sie auf Status hinzufügenEe341387.46bc69ec-93a3-4f56-a3d2-9de601ada74d(de-de,Expression.40).png im ersten Frame klicken.

  3. Wählen Sie das Objekt aus, das Sie verschieben möchten, und verschieben Sie es an die gewünschte Position. In diesem Beispiel wird der Zeiger von rechts unten auf den Buchstaben "o" in "Halo" bewegt.

    Ee341387.9cd3432b-4dd3-4751-80d3-28bfc57f73b3(de-de,Expression.40).png

  4. Optional können Sie einen der folgenden Schritte ausführen:

    • Haltezeit bearbeiten    Sie können die Haltezeit (die Zeitspanne, in der der aktuelle Status angezeigt wird) für einen Frame ändern, indem Sie den Zeiger über den Frame bewegen, bis das Dialogfeld Haltezeit bearbeiten angezeigt wird. Sie können in den Frame doppelklicken und einen neuen Wert eingeben, oder klicken Sie nur einmal und verwenden die NACH-OBEN- und NACH-UNTEN-TASTEN, um die Haltezeit zu erhöhen oder zu verringern.

    • Anhalten und fortsetzen    Sie können Funktionen zum Anhalten und Fortsetzen Ihrer Animation hinzufügen, indem Sie im SketchFlow-Animationspanel die Schaltfläche Pause ein verwenden. Die Animation wird angehalten, sobald der Frame erreicht wird, in dem die Funktionen zum Anhalten und Fortsetzen hinzugefügt sind. Sie können die Animation durch Klicken auf den Animationstitel im Navigationspanel des SketchFlow-Players fortsetzen.

      Die Schaltfläche Pause ein wird neben dem Feld Haltezeit bearbeiten angezeigt, wenn Sie mit dem Mauszeiger über einem Animationsframe hovern. Wenn auf die Schaltfläche ****Pause ein ****Symbol „Pause ein“ für SketchFlow-Animation geklickt wurde, wird das Feld Haltezeit bearbeiten als nicht verfügbar angezeigt.

      Das Feld "Haltezeit bearbeiten" und die Schaltfläche "Pause ein" in einem Animationsframe

      SketchFlowAnimation-Schaltfläche „Haltezeit“ und „Pause ein“

    • Übergangszeit bearbeiten    Sie können die Übergangszeit zwischen den Frames (die Zeitspanne, die für den Übergang von einem Frame zum nächsten Frame benötigt wird) ändern, indem Sie zwischen den Frames auf das Dialogfeld Übergangszeit bearbeiten klicken. Sie können in den Frame doppelklicken und einen neuen Wert eingeben, oder klicken Sie nur einmal und verwenden die NACH-OBEN- und NACH-UNTEN-TASTEN, um die Übergangszeit zu erhöhen oder zu verringern.

    • Übergangseffekte    Sie können einen integrierten TransitionEffect auf eine SketchFlow-Animation anwenden, wenn die Übergangszeit größer als 0 ist. Klicken Sie im SketchFlow-Animationspanel auf ****Übergangseffekte ****Übergangseffekt-Symbol, und wählen Sie den Übergangseffekt aus, der in der Dropdownliste Übergangseffekt angezeigt werden soll. Sie können auch die Übergangszeit für Übergangseffekt ändern.

      Weitere Informationen dazu finden Sie unter Anwenden eines Übergangseffekts zu einer Änderung des visuellen Zustands.

    • EasingFunction    Sie können auch eine integrierte EasingFunction anwenden, indem Sie auf ****EasingFunction ****Ee341387.9718b395-a71d-40b2-9d08-8e29a225151f(de-de,Expression.40).png klicken und dann die gewünschte EasingFunction aus der gleichnamigen Dropdownliste auswählen.

  5. Wenn Sie die SketchFlow-Animation fertiggestellt haben, können Sie die Animation anzeigen, indem Sie folgende Schritte ausführen:

    • Klicken Sie auf Wiedergabe in der SketchFlow-Symbolleiste.

      NoteHinweis:

      Wenn Sie die Funktionen zum Anhalten und Fortsetzen in einer SketchFlow-Animation verwendet haben, wird die Pause bei der Vorschau Ihrer Animation im SketchFlow-Animationspanel durch eine 1-sekündige Haltezeit ersetzt.

    • KLicken Sie mit der rechten Maustaste auf die Zeichenfläche, klicken Sie auf SketchFlow-Animation wiedergeben, und wählen Sie die Animation aus, die Sie wiedergeben möchten.

    • Drücken Sie auf F5, um das Projekt zu erstellen und auszuführen, und zeigen Sie die Animation im SketchFlow-Player an.

SketchFlow-Animationssymbolleiste

Sie können die SketchFlow-Animationssymbolleiste verwenden, um im SketchFlow-Animationspanel folgende Schritte auszuführen:

Ee341387.1afe5d56-20d8-400a-b643-13577ae593cd(de-de,Expression.40).png

Wechseln Sie in den ersten Frame.
Ee341387.0272e62e-0ad4-43ab-b0ac-f0767907e63b(de-de,Expression.40).png

Geben Sie die Animation wieder.
Ee341387.d2d47333-c15d-4aa0-9633-95f39cb96ae0(de-de,Expression.40).png

Passen Sie den Zeiteditor ein.
Ee341387.1ebe2b0a-5891-47f3-be05-fa90157b9312(de-de,Expression.40).png

Aktivieren oder deaktivieren Sie das Fließende Layout.

Weitere Informationen finden Sie unter Reibungsloser Übergang zwischen Layoutänderungen.
Ee341387.3308f172-fdae-40f8-ba84-17b679e94134(de-de,Expression.40).png

Verwenden Sie die Pfeile, um eine SketchFlow-Animation aus einer Dropdownliste zu öffnen.

Verwenden Sie das Pluszeichen, um ein neues Storyboard hinzuzufügen.

Verwenden Sie den einfachen Pfeil, um Storyboards zu erstellen, zu löschen oder zu schließen.
Ee341387.c83900c7-5245-4075-8cbf-99e9015f234b(de-de,Expression.40).png

Verwenden Sie die Schiebeleiste, um die Frame-Animationen zu durchlaufen.

Visueller Status

Sie können Interaktivität im Projekt auch darstellen, indem Sie visuelle Status verwenden, um unterschiedliche Entwürfe für ein Fenster zu definieren. Es gibt eine Vielzahl unterschiedlicher Szenarien, in denen es hilfreich sein kann, für die Erstellung eines Prototyps über mehrere Status für ein einziges Fenster zu verfügen. Dazu gehören folgende Beispiele:

  • Ein Fenster in einer Anwendung kann z. B. abhängig davon, ob eine Benutzer eingeloggt ist, unterschiedliche Benutzeroberflächenelemente anzeigen. Sie können in ein- und demselben Fenster einen Status für jeden dieser unterschiedlichen Entwürfe erstellen.

  • Da Status Animationen enthalten können, können Sie unterschiedliche Status für ein- und denselben Frame erstellen und Animationen hinzufügen. Die Animation in einem Status kann dann ausgelöst werden, indem der Status des Fensters, das die Animation enthält, angezeigt wird.

Wenn Sie ein SketchFlow-Projekt im SketchFlow-Player ausführen, werden Status als separate Befehle im Navigationspanel angezeigt. In der folgenden Abbildung ist Übergänge die Statusgruppe, und Schließen und Öffnen sind zwei unterschiedliche für das Fenster definierte Status.

Ee341387.c91a4238-54c4-43ac-b09b-3407eaf58d4e(de-de,Expression.40).png

Da Sie Befehle zum Navigieren zwischen Status verwenden können, müssen Sie keine Auslöser erstellen, um zwischen den Status zu wechseln, die Sie auf der Zeichenfläche erstellt haben.

Weitere Informationen zu visuellen Status finden Sie unter Definieren unterschiedlicher visueller Zustände für ein Steuerelement.

Verhalten

Verhalten sind integrierte Codeteile, die Sie schnell und einfach auf ein Element anwenden können, um Interaktivität zu erstellen. Verhalten können so einfach sein wie Aktionen, die ausgelöst werden, wenn ein Ereignis auftritt (wenn z. B. eine Schaltfläche angeklickt wird, startet eine Animation). Verhalten können aber auch mehrere Ereignisse einschließen, die durch mehrere Aktionen ausgelöst werden.

Verhalten sind leistungsfähige Werkzeuge für das Erstellen von Prototypen. Sie können dem Fenster z. B. ein Steuerelement hinzufügen und dann ein Verhalten auf dieses Element anwenden. Sie können dann das Projekt erstellen und ausführen (F5) und das Steuerelement, dem Sie das Verhalten hinzugefügt haben, wird sich dann im Fenster genauso verhalten wie in der fertigen Anwendung.

Zu den integrierten SketchFlow-Verhalten gehören die Navigationsfunktionen Zurück und Vorwärts sowie ein Navigieren zu-Verhalten, das auf ein Steuerelement in SketchFlow angewendet werden kann.

Weitere Informationen finden Sie unter Arbeiten mit SketchFlow-Verhalten.

Wenn ein Prototyp im SketchFlow-Player angezeigt wird, können Sie zwischen den Fenstern navigieren und Statusänderungen auslösen, indem Sie das Navigationspanel verwenden. Mit dieser Funktion können Sie durch den Prototyp navigieren, ohne dass Sie zusätzlichen Code oder Benutzeroberflächenelemente hinzufügen müssen, auch wenn der Prototyp nur aus wenigen groben Skizzen besteht.

Sie können SketchFlow-Verhalten auch schnell und einfach Benutzeroberflächenelementen hinzufügen, die Sie auf der Zeichenfläche gezeichnet haben und die Ihnen ermöglichen, zwischen Fenstern zu navigieren oder Animationen wiederzugeben, die Sie dem Prototyp hinzugefügt haben.

So fügen Sie einem Steuerelement eine SketchFlow-Animationswiedergabeverhalten hinzu

  • Klicken Sie mit der rechten Maustaste auf das Steuerelement, dem Sie ein SketchFlow-Animationswiedergabeverhalten zuweisen möchten, klicken Sie auf SketchFlow-Animation wiedergeben, und klicken Sie dann auf die Animation, die Sie wiedergeben möchten, wenn das Steuerelement angeklickt wird.

Beispieldaten

Viele Anwendungen beziehen die generierten Informationen aus Datenbanken. Es kann unter Umständen schwierig sein, datengesteuertes Verhalten ohne echte Daten für das Prototyping zu modellieren. Mit Expression Blend können Sie jetzt Beispieldaten erstellen und diese Daten dann an das Steuerelement binden. Sie können Beispieldaten im Prototyp verwenden, um datengesteuerte Benutzeroberflächen zu modellieren, die echte, dynamische, datengesteuerte Benutzerszenarien nachstellen.

Weitere Informationen finden Sie unter Erstellen von Beispieldaten.

Copyright © 2011 Microsoft Corporation. Alle Rechte vorbehalten.