Präsentation von Peggy Reuter und Lars Heinrich. .Net-Usergroup Dresden 05. 05. 2010

1. GUIs mit Expression Blend
DNUG Dresden
Communardo Software Dresden
05.05.2010
Lars Heinrich und Peggy Reuter

2. Wer sind wir
 Selbständiger C#-Entwickler bzw. Selbständige GUI-Designerin
für WPF und Silverlight
 WPFler und Blend-User der ersten Stunden vor 4 Jahren
 Erfahrungen in primär großen Projekten für die Telekom, Yello,
Sepago und MID
 Wir kennen die Webwelt, die Flashwelt und die Printwelt.
 Wir sind neugierig auf Innovationen und Neuerungen.
 Wir ziehen im Juni von Aachen nach Dresden, weil Lars
Dresdner ist, der nach Hause möchte.
 http://blog.xamllab.net
 http://www.xamlfab.net/blog

3. Was leistet Expression Blend?
 Erstellung von WPF- und Silverlight-Applikationen
 Hervorragendes Tool zum Prototypen von WPF- und Silverlight-
Anwendungen
 Layout von User Interfaces
 In einem gewissen Rahmen Design und Illustration
 Gestaltung von UI Controls
 Datenanbinden von Mockup und Livedaten
 Blend ist ein gutes Animationstool mit ähnlichem Umfang wie Flash
 Der Hauptschwerpunkt bei Blend liegt ganz klar beim Interaktionsdesign.
 Erstellung von übergreifenden Bibliotheken
 Blend enthält einen einfach zu handhabenden 3D-Raum
 Windows Phone 7 Applikationen.
 Natural User Interface für Multitouch durch das Zusammenspiel mit dem
Surface SDK

4. Blend für Entwickler interessant?
 Generiertes XAML
 Schneller Preview durch WYSIWYG
 Zeit für Coding von wichtigen Dingen
 Gute Importfunktionen für klassische Design-Leistungen aus
Photoshop und Illustrator
 Möglichkeit ein bisschen Designer zu sein
 Gute Basis für die Zusammenarbeit mit Interactive Designern
 Eine gemeinsame Umgebung für Konzepter, Designer und
Entwickler
 Umgebung für die Entwicklung in Usability, Design und
Funktion vollwertiger Prototypen
 Plattform für Kundenkommunikation in Bezug auf Prototypen

5. Flug über Blend
 Projekt: zur Projekt- und Datenverwaltung
 Assets: Alle integriertbaren Komponenten  Die Panels
kategorisiert nach Projekt, mitgelieferterten
Styles, Controls, Styles, Behaviours, Effekte,
Medien
 States/Trigger: Anzeige und Modifikation der
Stati
 Stage mit Design und XAML-View
 Object und Timeline: Alle Objekte werden hier
geschichtet und geschachtet. Auf diese können
dann im Storyboard Animationen gelegt werden.
 Properties: Analog zu allen infrage kommenden
XAML-Properties kann hier jedes Objekt
modifiziert werden.
 Resourcen: Templates und Styles, Brush- oder
Textresourcen
 Data: Sample- oder Live-Datens werden hier
geladen und verwaltet.
 Sketch-Flow-Bereich: Animation und Map
 Result: analysiert und spukt die Fehler beim
Builden aus.

6. Flug über Blend
Die Menus Die Toolbar
 File: klassisch, bemerkenswert ist hier  Gruppen- und Einzel-Selektion
der Grafikimport und der Word-Export  Bewegungshand und Zoom
 Edit: klassisch, bemerkenswert ist die  Farbpipette und Eimer zum Füllen
übergreifende Suche-Ersetzen wie im  Verlaufseditierung
VS  Zeichenwerkzeuge Stift und Bezierkurve
 View: klassisch, bemerkenswert ist der  Pfadobjekte Rechteck, Kreis und Linie
Splittview und die direkt XAML-  Layout-Elemente Grid, Canvas, Stackpanel,
Umsetzung Scrollviewer, Border
 Objekt: klassisch, Layouthilfen und  Text-Elemente Text-Block, Text-Box, Richtext,
Styleverweise PassWord
 Basis-Controls wie Button, CheckBox,
 Projekt: klassisch, Projekt- und RadioButton, ListBox, ComboBox, Tab, Slider,
Objektverwaltung – auch integrativ GridSplitter
 Tools: klassisch, einige Helferlein für  Großes Panel mit allen Controls gruppiert nach
Styles, Templates und Resourcen verschiedenen Kreterien wie Projekt, Styleart
(SketchStyle, SimpleStyle, eigener Style),
 Window: klassisch, … allgemeine Controls, Behaviour, Shapes, Effekte
 Help: bemerkenswert ist die
Community und die Lernmöglichkeiten

7. Schnittstelle Blend
 Wenn Applikationen in  Zur Behebung gibt es
Blend begonnen werden, verschiedene
ist das zusammenspiel Lösungsansätze.
kein Problem.
 Kommen die Daten vom
Entwickler, lässt sich die
Applikation nicht so
einfach öffnen wegen
verschiedener Probleme:
 Resourcen-Darstellung
 Build-Fehler

8. Beispiel Formulargestaltung
 Beispiel, wie es oft von
Entwicklern kommt:
 Reduziert auf die
funktionale Anforderung
 Keine gute User
Experience
 Nicht selbsterklärend
 In der Optik immer gleich,
weil Standardcontrols
verwendet werden.

9. Beispiel Formulargestaltung
 Schritt 1: Mehrwert
 Der Nutzer muss ein
Verständnis für die
Zusammenhänge seiner
Applikation bekommen. Sie
sollte inhaltlich
selbsterklärend sein.
>>> Bezeichner oder Zeichen
vorsehen, die es dem Benutzer
einfacher machen.
 Mehrwert liefern, durch für
den Nutzer interessante
Verarbeitung der Daten.
>>> Was wäre ein Mehrwert
für mich?

10. Beispiel Formulargestaltung
 Schritt 2: Gruppierung und
Trennung
 Der User kann nicht mehr als
9 Inhalte erfassen. Gruppen
und Trennungen erleitern
das Erfassen der Inhalte.
 >>> Sinnvolle inhaltliche
Gruppen bilden
 >>> Abgrenzung der
Gruppen durch Headlines
oder Bezeichner.

11. Beispiel Formulargestaltung
 Schritt 3: Klarheit und Layout
 Klarheit, wiederkehrende
Elemente, Orientierung,
Proportionen und Freiräume
helfen bei der Blickführung und
Erfassung.
 Mit simplen gestalterischen
Mitteln kann Klarheit und
Blickführung geschaffen
werden:
 Freiraum
 Wiederkehrende
Orientierungslinien
 Strukturierende
Größenverhältnisse

12. Beispiel Formulargestaltung
 Schritt 4: Design
 Der Wohlfühlfaktor und damit die
Akzeptanz einer Applikation kann
durch Design erhöht werden:
 >>> Farbwahl sollte analog zur
inhaltlichen Zusammenhängen stehen
und entsprechend akzentuiert sein.
 >>> Schriften unterstützen die Inhalte
je nach Schriftcharakter und schaffen
Individualität so wie Identifikation.
Hier sollte getrennt werden zwischen
Mengentexten, die gut lesbar sein
müssen und optisch führenden Texten
wie Headlines oder Ergebnisse.
 >>> Flächen und Rahmen und
Grafiken strukturieren, geben Halt
und die Ausstrahlung von Design.

13. Beispiel Formulargestaltung
 Schritt 5: Emotion
 Bildsprache fördert
emotionale Verbundenheit
sowie Identifikation. Zudem
helfen Sie Inhalte schnell zu
erfassen.
 Diese Bildsprache kann über
Fotografie, Illustration oder
Ikonografie geliefert werden.
 >>> Inhaltlich passendes und
ansprechendes Bildmaterial
in die Applikation
integrieren.

14. Beispiel 3D-Stühle
 Es folgt ein Beispiel für die Arbeit hinsichtlich der
Möglichkeiten des Blend-3D-Raumes, der aber gleicher Maßen
die Arbeitsumgebung aufzeigt.
 Die Absicht ist keines Weg die Ausarbeitung einer komplexen
3D-Welt -zumal Blend kein 3D-Editor ist. Es ist nur ein Raum,
aber in diesem geht schon so einiges.
 Ziel: Demonstration des 3D-Raumes, in mehrere Stühle
integriert werden. Eine Ansicht, die dann schnell noch animiert
wird.
 Gezeigte Features: Oberfläche Blend, 3D-Raum, Änderungen
am Objekt, Änderung von Licht und Perpektive, Kombination
mehrere, Animation, Startbehaviour

15. Beispiel 3D-Stühle
 Es folgt eine Demostration der Möglichkeit, relativ schnell
mehrere 3D-Objekte zu integrieren und deren
Erscheinungsbild auf der Ebene von Perspektive, Beleuchtung,
Anordung und Material zu editieren.
 Desweiteren ist eine Animation im 3D-Raum relativ leicht zu
realisieren, obenso wie das Ansprechen auf Behaviours.
 Die kurze Demo soll zeigen, dass komplexe 3D-Welten in Blend
mit Animation und Interaktion recht einfach abzubilden sind.
So kann z. B. eine interaktive Wohnungseinrichtungs-
Applikation durchaus über Blend gelöst werden mittels Drag
an Drop auf eine Karte von oben und danach entsprechender
Kamera-Fahrten durch den eingerichteten Raum.

16. Ergebnis 3D-Stühle

17. Warum SketchFlow Prototyp?
 RIA-Produktion aber insbesondere Software-Produktion ist – obschon unaufwändiger als
klassische DotNet-Software – ist sehr zeit- und kostenintensiv
>>> SketchFlow-Prototypen reduzieren Zeitaufwand und kosten, weil Korrekturphase
minimiert werden.
 Dadurch ist für jeden, der solche Projekte finanziert, das Risiko sehr hoch, obschon er in der
Anfangsphase wenig sieht, sowohl im Ergebnis aus auch.
>>> SketchFlow-Prototypen schaffen Vertrauen und reduzieren das Risiko.
 Der klassische Weg im Prototyping sei es durch Wireframes, funktional-programmierte
Dummyapplikationen oder durchdesignte Screens zeigen immer nur einen Aspekt einer
Applikation.
>>> SketchFlow-Prototypen sind vollwertig hinsichtlich Konzept, Usability, Design und
Funktionalitäten.
 Prototypen werden immer nur von einer Gruppe erstellt: Designer, Konzepter oder Entwickler.
>>> SketchFlow-Prototypen können im Team von allen drei Gruppen entwickelt werden.
 Prototypen werden gebaut, um sie wegzuwerfen.
>>> SketchFlow-Prototypen können – je nach Anlage – bis zu 100% im späteren
Produktivprojekt genutzt werden.
 Nur das fertige Projekt taugt schlussendlich für Usability-Tests.
>>> SketchFlow-Prototypen sind höchst testtauglich und können bis zum fast fertigen Status
getrieben werden.

18. Was kann SketchFlow Prototyp?
 Umgebung um in Blend relativ einfach und zeit- wie kostenschonend in Usability,
Design und Funktional vorwertige Prototypen zu erstellen
 Optik ist bewußt skizzenhaft, damit man sich auf Inhalt, Konzept und Usability
konzentrieren kann
 Design kann Step für Step implementiert werden durch grafische Anpassung nach
Vorlagen bzw. Erstellung entsprechender Styles
 Funktionalität in Form von C# kann über Blend oder VisualStudio angebaut werden.
Das Projekt wird zum Produktiv-Projekt umgearbeitet und kann bis zu 100%
nutzbar sein.
 Der SketchStyle wird auch im VisualStudio angezeigt und ist damit nutzbar
 Die Applikation kann über die Screen-Map aufgebaut werden.
 Arbeitserleichternde Komponenten wie z. B. SketchFlowAnimation, eine
Grafikbibliothek und einige Extra-Behaviours
 Powerpoint kann importiert werden und Word kann exportiert werden
 Für die Kundenkommunikation gibt es einen Player mit Navigator, Abspielhilfe für
Anis, einer Map und einer ausgiebigen Kommentarfunktion.

19. Beispiel Picture-Viewer
 Sketch-Flow-Applikation eines Picture-Viewer mit
animierten Thumbs, die die großen Bilder
hineinanimieren. Einmal im Sketch und dann noch
geskinned in Schwarz.
 Features: SketchControls, SketchFlowMap,
SketFlowPlayer, SampleData, Behaviours, Animationen,
Skinning von Controls

20. PictureViewer Sketch 1

21. PictureViewer Sketch 2

22. Picture Viewer Sketch 3