Expression Blendfor developers
Christian MoserDeveloper und UX-Designer Zühlke Engineering AG
Benutzerzentriertes Design
Howard Schultz, CEO
«Products are easily copied –
experience is unique. »
Benutzerzentriertes Design
Benutzerzentriertes Design
NWZ-S616F/S
LaufzeitSpeicherAuflösung
Preis
RationaleEbene
EmotionaleEbene
33h Musik4 Gbyte320x240Pixel
CHF 167.-
24h Musik4 Gbyte320x240Pixel
CHF 197.-
iPod nano
Das Produkt wird zum Erlebnis
Produkte und Dienstleistungen müssen neben den rationalen Vorteilen, emotionale Erlebnisse schaffen, die den Kunden begeistern.
Egal welches Produkt - alle Kunden sind Menschen und habeneine User Experience.
Welche Skills werden benötigt, um dieses Erlebnis zu schaffen?
Rolle des EntwicklersAbbildung der SoftwarearchitekturImplementierung der BusinesslogikErstellen eines funktionalen UI
Rolle des Interaction-DesignersGrafisches Design des UISicherstellen einer guten UsabilityEinbinden von Multimediainhalten
Die Toollandschaft heute
EntwicklerDesigner
• Visio Prototypen• Photoshop Dateien• Vektorgrafiken und Bitmaps
• C# Dateien• EXE‘s und DLL‘s• .resx Dateien
Konventioneller Designer-Entwickler Workflow
• Visio Prototypen• Photoshop Dateien• Einzele Bitmaps
EntwicklerDesigner
Unschönheiten im konventionellen Workflow
Einweg vom Designer zum Entwickler (kein Roundtrip)Medienbruch durch unterschiedliche DateiformateWinForms Controls lassen sich nicht beliebig stylenEntwickler versucht Design nachzubauen
≠
Webseitenentwickeln und gestalten
Neue Werkzeuge für den Designer
Videos schneiden und codieren
Vektor- und Bitmapgrafikenerstellen und konvertieren
User Interfacesdesignen und integrieren
Neue Werkzeuge für den Designer
Blend = Zusammenmixen
Verbesserter Workflow mit WPF
<XAML>
<XAML>
EntwicklerDesigner
Designer Entwickler
Schrittweise Migration des Workflows
Integrator Modell
Integrator
Harvester Modell
Designer Entwickler
Collaboration Modell
Designer Entwickler
Von der Theorie zur Praxis
Wir spielen den Roundtrip am Projekt „TechDays Messenger“ durch
1. Requirements Engineering
Features und Storyboard
BenutzernameVorname Nachname
Kontakte Suchen:
Kontakt 1Vorname NachnameKontakt 2Vorname Nachname
Kontakt 3Vorname Nachname
Freunde
Arbeit
KategorieName
TechDays
HEROES
Suche nach Kontakten
Gruppierte Kontaktliste
Cooles TechDays Skin
GruppierungskriteriumUmschaltbar
Infos zum Benutzer
2. Vorbereiten der UI-Architektur
Konventioneller Ansatz: UI-Logik im Eventhandler
Nachteile dieser VarianteView-Logik und View sind stark gekoppeltDie View-Logik kann nicht ohne View getestet werdenUnit Testing nicht möglich (Aufwändige UI-Tests nötig)Starre-Anbindung, Designer hat wenig Spielraum
View
Model
Bessere Variante - Das ViewModel Pattern
View-Model
View Lose Koppelung!ViewModel kann ohne View instanziert werden.
Komplette UI-Logik im ViewModelUnit-Testing möglich!
2. Daten und Commands anbinden
Unter Einhaltung des ViewModel-Patterns
Best Practices zum losen Anbinden von Aktionen
DataBindingAnbindung beliebiger .NET ObjekteUni- oder BidirektionalNotifikation über INotifyPropertyChanged oder INotifyCollectionChanged
Value ConverterWandeln Format von Daten Flexibel zuschaltbar
Best Practices zum losen Anbinden von Aktionen
EventHandlerMelden UI-Aktionen an das ViewModelUpdate des ViewModels während Texteingabe
CommandsViele Standard-Commands vorhandenEigene Commands erstellen mit ICommand
Kontakt 1Vorname NachnameKontakt 2Vorname Nachname
Arbeit
Anwenden der „Best Practices“ auf unser Projekt
MainWindow_ViewModel
Contact CurrentUser
txtFilter_TextChanged()
IList<Contact> ContactList
ICommand SortByCategoryICommand SortByName
Contact
FirstnameLastnameDisplaynameAgePictureCategory
DataBinding
DataBinding
Event Handler
Command Binding
Image to BitmapImage ValueConverter
View ViewModel
Demo
4. Styling durch den Designer
Versionskonflikte vermeidenExpression-Tools haben keine integrierte Source-Verwaltung
Ressourcenbewusst designenAufwändige Effekte vermeiden
Grafiken, Styles und Templates auslagern
Ressource-Dateien verwendenLokalisierung
Darauf sollte der Designer achten
Demo
Zusammenfassung
Die Expression-Tools verbessern den Workflow zwischen Designer und Entwickler deutlich
Die Migration des Workflows erfolgt schrittweise
Mit dem ViewModel-Pattern wird die View-Logik entkopppelt und per UnitTests testbar.
Blend und VS-Designer sind gut, aber XAML-Kenntnisse sind notwenig
Buchtipps:
© 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after
the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.