GUIs mit Expression Blend
0 gefällt mir1,644 aufrufe
Das Dokument beschreibt die Funktionen und Möglichkeiten von Expression Blend, einem Tool zur Erstellung und Prototypisierung von WPF- und Silverlight-Anwendungen. Es hebt die Vorteile für Entwickler hervor, wie die einfache Handhabung von XAML, die schnelle Vorschau und die gute Integration mit Designer-Tools. Zudem werden Beispiele für die Gestaltung von Benutzeroberflächen und interaktiven Prototypen, insbesondere die Anwendung von SketchFlow, zur reduzieren Zeit- und Kostenaufwand in der Softwareproduktion, präsentiert.
GUIs mit Expression Blend
- 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.
- 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
- 22. Picture Viewer Sketch 3