SketchFlow (Übersicht)

Wichtig:
SketchFlow steht nur in Expression Studio Ultimate zur Verfügung.

SketchFlow ist ein Paket neuer Funktionen, welche die Erstellung, Präsentation und Überprüfung von Prototypen interaktiver Anwendungen und interaktiven Inhalts einfacher und schneller gestalten.

SketchFlow-Prototypen sind echte Windows Presentation Foundation (WPF)- bzw. Microsoft Silverlight-Anwendungen. Sie können ein Prototypprojekt erstellen und ausführen und dann durch den Prototyp navigieren, selbst wenn Sie nur einen groben Entwurf für den Prototyp besitzen.

SketchFlow-Prototypen können, je nach Erfordernis des bearbeiteten Projekts, völlig einfach aber auch hochkomplex sein. Ein SketchFlow-Prototyp kann beispielsweise aus einem groben Entwurf mit Notizen, einer linearen Folienfolge mit einigen Notizen, die den Workflow auf der Zeichenfläche zeigen oder einem komplexen Graphen im SketchFlow-Diagramm bestehen, der wiederverwendbare Elemente in einem einzelnen Bildschirm (Komponentenbildschirm) sowie die Navigation zwischen Bildschirmen (Navigationsverbindungen) enthält.

SketchFlow enthält diverse Tools, mit deren Hilfe Sie Ihren Prototyp interaktiv gestalten können, damit der Fluss einer Produktionsanwendung genauer simuliert wird. In SketchFlow sind beispielsweise folgende Verfahren möglich:

• Prototyperstellung beginnend mit einer Sitemap und einigen Notizen auf den Anwendungsbildschirmen, auf denen dann aufgebaut werden kann

• Zeichnen der Benutzeroberflächenelemente oder Import der Elemente aus gebräuchlichen Anwendungen zum Zeichnen

• Animation des Prototyps, Erstellung einer visuellen Darstellung der Interaktion zwischen Benutzer und Anwendung

• Verwendung der kompletten Bibliothek standardmäßiger Benutzeroberflächenelemente sowie benutzerdefinierter Steuerelemente

• Schnelle Erstellung von Beispieldaten, einfache Erstellung einer datengesteuerten Benutzeroberfläche und Hinzufügen von Formatvorlagen

• Erzeugung interaktiver Elemente ohne Eingabe von Code durch Nutzung integrierter Verhalten; Verhalten sind erweiterbar und erlauben somit eine einfache Erweiterung der Werkzeugpalette für die Prototyperstellung um benutzerdefinierte Verhalten.

• Erstellung benutzerdefinierter Elemente mithilfe von Code oder Einsatz vorgefertigter Elemente Ihres Entwicklerteams

Zeichenfläche

SketchFlow bietet zwei Ansichten für einen Entwurf: die Zeichenfläche und das SketchFlow-Diagramm. Die Zeichenfläche liefert eine Ansicht einzelner Bildschirme, auf der Sie mit den Zeichenwerkzeugen von Expression Blend zeichnen können. Zudem können Sie Bilder aus Adobe Photoshop importieren und verfügen über die gesamte Bandbreite der Steuerelemente von Expression Blend für WPF und Silverlight. Sie können spezifische Elemente in verschiedenen Zuständen anzeigen und Zustände nutzen, um die Interaktion mit Bildschirmelementen über Animationen darzustellen.

Weitere Informationen finden Sie unter Erstellen von Inhalt auf der Zeichenfläche.

SketchFlow-Diagramm

Im SketchFlow-Diagramm, das unten in der Expression Blend-Anwendung angezeigt wird, können Sie die Struktur eines Prototyps problemlos skizzieren. Wenn Sie mit anderen Expression Blend-Projektarten arbeiten, erscheint dieser Bereich nicht.

Das SketchFlow-Diagramm bietet eine visuelle Darstellung des Anwendungsflusses, vom ersten Bildschirm und den nachfolgenden Benutzeraktionen bis hin zur letzten Aktion.

Weitere Informationen finden Sie unter Erstellen eines Anwendungsflusses.

Bildschirme

Jeder Bildschirm eines Prototyps wird im SketchFlow-Diagramm durch einen Knoten dargestellt. Die Erstellung neuer Komponenten- und Navigationsbildschirme ist schnell und unkompliziert. Sie können unverbundene Knoten erstellen, die einzelne Bildschirme repräsentieren und Verbindungen, die die Verbindung zwischen Einzelbildschirmen darstellen.

In SketchFlow gibt es zwei Bildschirmarten: normale Bildschirme (oder auch "Navigationsbildschirme") und Komponentenbildschirme. Normale Bildschirme können per Navigation angesteuert werden. Komponentenbildschirme sind wiederverwendbare Inhalts- oder Funktionsblöcke, die in mehreren Navigationsbildschirmen genutzt werden können (z. B. Menüs oder Wiedergabelisten). Komponentenbildschirme können direkt im SketchFlow-Diagramm erstellt werden. Alternativ dazu können Sie Inhalt in einem Bildschirm in eine Komponente umwandeln.

Mit anderen Worten können Sie Navigation und Aufbau Ihrer Anwendung direkt im SketchFlow-Diagramm durch Erstellung neuer Komponentenbildschirme, Komponentenverbindungen, Navigationsbildschirme und Navigationsverbindungen definieren.

Navigationsverbindungen

Navigationsverbindungen repräsentieren die Navigation zwischen Bildschirmen. Eine Navigationsverbindung zwischen zwei Bildschirmen bedeutet, dass der Benutzer der Anwendung direkt von dem einen Bildschirm zu dem anderen navigieren kann.

Über Navigationsverbindungen können Sie direkt im SketchFlow-Diagramm schnell eine Ansicht des Anwendungsflusses auf hoher Ebene erstellen.

Weitere Informationen finden Sie unter Erstellen eines Anwendungsflusses.

Komponentenverbindungen

Genau wie Navigationsverbindungen können Komponentenverbindungen direkt im SketchFlow-Diagramm erstellt werden. Während Navigationsverbindungen die Navigation durch eine Anwendung repräsentieren, zeigen Komponentenverbindungen an, dass eine Komponente in dem Navigationsbildschirm, mit dem sie verbunden ist, angezeigt wird. Wenn Ihr Entwurf beispielsweise wichtige Elemente wie Kopf- und Fußzeilen und eine Navigationsleiste enthält, können Sie diese direkt auf der Zeichenfläche zeichnen oder drei separate Komponentenknoten erstellen, die jeweils eines dieser drei Elemente repräsentieren, und diese dann projektübergreifend verwenden.

Weitere Informationen finden Sie unter Erstellen eines Anwendungsflusses.

SketchFlow-Animation

Im Bereich SketchFlow-Animation können Sie problemlos Animationen erstellen, die interaktive Elemente in einem Bildschirm repräsentieren. In SketchFlow können Sie schnell und einfach Animationen im Daumenkinostil erstellen, ohne mit den Keyframe-Animationswerkzeugen von Expression Blend vertraut sein zu müssen.

Weitere Informationen finden Sie unter Hinzufügen von Interaktivität.

Beispieldaten

In Expression Blend lassen sich problemlos Prototypen datengesteuerter Benutzeroberflächen erstellen, ohne dass Zugriff auf Livedaten erforderlich ist. Sie können aussagekräftige Beispieldaten im Bereich Daten erstellen oder Beispieldaten aus einer XML-Datei importieren. Die Beispieldaten stehen den Steuerelementen auf der Zeichenfläche zur Designzeit zur Verfügung. Für Beispieldaten stehen umfangreiche Möglichkeiten zur Anpassung zur Verfügung, außerdem kann problemlos zwischen Beispieldaten und Livedaten bei der Ausführung umgeschaltet werden.

Weitere Informationen finden Sie unter Erstellen von Beispieldaten.

SketchFlow-Stile

Bei der Erstellung von Prototypen ist es unter Umständen erwünscht, dass die Skizze wie von Hand gezeichnet aussieht. SketchFlow enthält eine Reihe Stile für WPF- und Silverlight-Standardsteuerelemente, die Ihrer Anwendung ein solches Aussehen verleihen. Auf der Basis der Grundformen können Sie Ihre eigenen Skizzenstilvorlagen für sämtliche benutzerdefinierten Steuerelemente erstellen. Der Einsatz von SketchFlow-Formatvorlagen in einem Prototyp unterstreicht den Fluss der Anwendung, sodass Prüfer sich nicht auf grafische Aspekte, sondern auf das interaktive Design konzentrieren können. Auf diese Weise lassen sich falsche Erwartungen und irreführendes Feedback, die bei einem schon in der Entwurfsphase fast perfekt aussehenden Prototyp entstehen können, vermeiden.

SketchFlow-Player

Der SketchFlow-Player ist eine Laufzeitumgebung, in der der Anwendungsfluss auf der Basis des Designs wiedergegeben wird. Sie können Ihr Projekt jederzeit erstellen, ausführen und dann im SketchFlow-Player anzeigen.

Dabei wird der Prototyp in einem eigenen Player ausgeführt, in dem Sie durch die Anwendung klicken, Zustände innerhalb Ihrer Benutzeroberfläche ändern und Animationen ausführen können. Der SketchFlow-Player erleichtert außerdem die Verteilung des Prototyps an Prüfer und die Sammlung von deren Feedback. Sie können direkt in dem Prototyp zeichnen und Kommentare hinzufügen. Im SketchFlow-Player gesammeltes Feedback kann in Expression Blend angezeigt, bewertet und anschließend implementiert werden.

Weitere Informationen finden Sie unter Vorschau eines Prototyps.

Anmerkungen und Feedback

Anmerkungen in Expression Blend können auch in SketchFlow-Projekten verwendet werden. Mithilfe dieser Funktion können Sie Notizen für sich selbst und für andere anfertigen und das Feedback anderer Teammitglieder bei der Arbeit in der Ansicht Design verfolgen. Zur besseren Übersichtlichkeit können Anmerkungen ausgeblendet und erst im Bedarfsfall eingeblendet werden.

Im Bereich Feedback des SketchFlow-Players können Prüfer Feedback hinterlassen. Dieses wird in einer Datei mit der Dateierweiterung "feedback" gespeichert, die dann an den Designer separat gesendet werden kann.

Weitere Informationen zu Anmerkungen finden Sie unter Einfügen von Anmerkungen in ein Dokument.

Weitere Informationen zur Feedback finden Sie unter Hinterlassen von Feedback für einen Prototyp.

Veröffentlichen auf SharePoint-Sites

Nachdem Sie ein Expression Blend-SketchFlow-Projekt erstellt haben, können Sie Ihr Projekt in einer Microsoft-SharePoint-Dokumentbibliothek veröffentlichen. Auf das SketchFlow-Projekt können diejenigen zugreifen, die über eine Berechtigung zum Anzeigen von Inhalt auf der SharePoint-Site verfügen.

Prüfer können ihr Feedback für andere Beteiligte freigeben, indem sie dieses auf der SharePoint-Site veröffentlichen.

Weitere Informationen zum Veröffentlichen auf SharePoint-Sites finden Sie unter Veröffentlichen in SharePoint.

Konvertieren des Prototyps

Sie können einen SketchFlow-Prototyp aus einer Microsoft Office PowerPoint-Präsentation erstellen. Außerdem können Sie Adobe Photoshop- oder Adobe Illustrator-Dateien (PSD- bzw. AI-Dateien) in einen SketchFlow-Prototyp importieren. Aus einem Prototyp können Sie jederzeit ein Microsoft Word-Dokument erstellen.

SketchFlow-Projekte sind Standard-Microsoft Visual Studio-Lösungen und können somit in Visual Studio bearbeitet werden. Wenn ein Prototyp genehmigt ist, kann das Prototypprojekt durch Entfernen der SketchFlow-Daten aus der Prototypdatei in ein Produktionsprojekt umgewandelt werden. Sobald diese Daten entfernt sind, funktioniert das Projekt wie jedes andere Expression Blend-Projekt auch.

Weitere Informationen finden Sie unter Konvertieren eines Prototyps.

Zusammenfassung

SketchFlow erleichtert das Skizzieren eines Anwendungskonzepts. Zunächst erstellen Sie einige Bildschirme und beginnen dann mit dem Zeichnen. Nach und nach können Sie interaktive Elemente hinzufügen, die den Prototyp dem Endprodukt in dem Maße angleichen, das für eine effektive Präsentation Ihrer Designidee erforderlich ist. Prüfer können mithilfe des SketchFlow-Players den Anwendungsfluss beurteilen und direkt im Projekt Feedback abgeben. Sobald das Feedback implementiert und der Prototyp fertiggestellt ist, kann das Prototypprojekt an einen Entwickler zur Umwandlung in ein endgültiges Expression Blend-Projekt übergeben werden.

Copyright © 2011 Microsoft Corporation. Alle Rechte vorbehalten.