Inhaltsverzeichnis. Vorwort Einleitung. 1 Die Philosophie Die neue Technologie: XAML, WPF und Silverlight 47

Transkript

1 Vorwort Einleitung 1 3 Bisherige Möglichkeiten des UI-Designs 5 Die neuen Möglichkeiten 7 Die neuen Herausforderungen Ausblick Ziel dieses Buches An wen richtet sich dieses Buch Diskussion zu diesem Buch Technische Voraussetzungen Die Begleit-DVD 20 1 Die Philosophie 21 Was ist UI-Design? 22 Bisherige Designmöglichkeiten 23 Konsequenzen 2 Der alte Workflow Online- und Offline-Anwendungen 34 Neue Möglichkeiten mit WPF und Silverlight 35 Die neuen Funktionen 35 Trennung von Code und Layout auf technischer Ebene 36 Trennung von Code und Layout auf Designebene 37 Expression Design 3 Expression Blend 40 Visual Studio XAML-Bearbeitungsmöglichkeiten in Expression Blend und Visual Studio Der neue Workflow 44 Silverlight & WPF: Online und offline auf gleicher Basis 45 Fazit: Die neue Welt für UI-Design 45 2 Die neue Technologie: XAML, WPF und Silverlight 47 Die Architektur 4 Die Sprache des User Interface: XAML 4 Die Sprache der Logik:.NET 51 XAML und.net im Vergleich 51 Anwendung für den Desktop mit WPF Voraussetzungen von WPF Einsatzgebiete einer WPF-Anwendung Bestandteile einer WPF-Anwendung 53 Ergebnis einer WPF-Anwendung 54 5

2 Microsoft User-Interface-Design mit Expression Blend 2 Anwendungen für das Web mit Silverlight 54 Silverlight 1.0 und Silverlight Voraussetzungen für eine Silverlight 2.0-Anwendung 56 Einsatzgebiete einer Silverlight 2.0-Anwendung 56 Bestandteile einer Silverlight 2.0-Anwendung 56 Ergebnis einer Silverlight 2.0-Anwendung 57 Unterschiede zwischen WPF und Silverlight 5 Schnellstart WPF ein kleines Beispiel 62 Erstellen eines Buttons 62 Erstellen einer Animation 64 Auslösen der Animation 66 Zusammenfassung 67 3 Grundlagen von Expression Blend 6 Überblick über Expression Blend 70 Die Zeichenfläche 71 Die Werkzeugpalette 71 Das Interaktionspanel 72 Das Projektpanel, das Eigenschaftenpanel und das Ressourcenpanel 73 Einfügen von Elementen 76 Anordnen von Elementen 77 Übersicht über die Layoutpanels 77 Arbeiten mit dem Grid 7 Pfade und Formen 3 Pfade 3 Formen und das Border 4 Unterschiede Pfade und Formen 6 Animation und Auslöser in WPF 7 Erstellen einer Animation 7 Auslöser in WPF 1 Zentralisieren von Eigenschaftswerten in Ressourcen 4 Konvertieren eines lokalen Wertes in eine wiederverwendbare Ressource 4 Anwenden von Ressourcen 7 Ändern eines in einer Ressource abgelegten Wertes Zentralisieren von Eigenschaftswerten in Formatvorlagen Erstellen einer Formatvorlage Arbeiten mit Eigenschaftsauslösern 03 Anpassen von Steuerelementen mit Steuerelementvorlagen 106 Kapseln von Fragmenten in UserControls 1 Zusammenfassung 6 6

3 4 Grundlagen des User-Interface-Designs 7 Wie Software verstanden wird Die verschiedenen Benutzerklassen Unerfahrener Benutzer Gelegenheitsbenutzer Routinebenutzer 20 Experte 21 Die acht goldenen Regeln des UI-Designs 21 Konsistenz wahren 22 Routinebenutzern ermöglichen, Abkürzungen zu benutzen 123 Informative Rückmeldung an den Benutzer geben 124 Operationen klar ersichtlich abschließen 24 Hilfreiche Fehlerbehandlung bieten 25 Umkehrung von Aktionen ermöglichen 25 Benutzerkontrolle zulassen 26 Kurzzeitgedächtnis entlasten 26 Zusammenfassung Grundlagen UI-Design 27 5 Planung eines User Interface 2 Das Aufgabenspektrum der Software Analyse der Rahmenbedingungen Betrachtung der Benutzer Technische Rahmenbedingungen 34 Vorgaben durch den Arbeitsplatz 36 Grafische Vorgaben 3 Sonstige Vorgaben 3 Checkliste Rahmenbedingungen 40 Entwicklung eines Bedienkonzepts 41 Die Anwendung in einzelne Aufgaben und ihre Ziele gliedern Die Aufgaben in einzelne Operationen gliedern Die optionalen Operationen erfassen Notwendige Informationen erfassen 44 Die Operationen und Abläufe strukturieren 44 Zusammenfassung der Planung 46 7

4 Microsoft User-Interface-Design mit Expression Blend 2 6 Praxis Teil 1: Analyse und Planung 47 Das Aufgabenspektrum der Kassen-Anwendung 4 Antworten der Checkliste 4 Analyse der Rahmenbedingungen 50 Analyse der Benutzer 51 Analyse der technischen Gegebenheiten Analyse der Arbeitsplätze Erfassen grafischer Vorgaben Entwicklung des Bedienkonzepts der Kassen-Anwendung 153 Die Anwendung in einzelne Aufgaben und ihre Ziele gliedern 53 Operationsanalyse»Erfassung aller Artikel«54 Operationsanalyse»Abwicklung des Bezahlvorgangs«154 Die Operationen und Abläufe strukturieren 56 Das resultierende Bedienkonzept 57 Zusammenfassung 5 7 Praxis Teil 2: Grundaufbau des User Interface 15 Erstellung eines neuen Projekts in Expression Blend 60 Grundlegender Aufbau eines User Interface 61 Einteilung der Bereiche 61 Gestaltung des Kopfbereichs mit Farben 63 Gestaltung des Fußbereichs durch Klonen des Kopfbereichs 16 Setzen von Text- und Bedienelementen 6 Erstellung einer Elementliste 73 Die Idee des Aufbaus einer Elementliste 73 Umsetzung der Artikelliste 74 Die vollständige Ansicht eines Artikels 76 Der Grundaufbau des Artikels 76 Einfügen der Inkrementoren 7 Gestaltung der Tastatur 0 Verdeutlichung der Funktion der Buttons 4 Verdeutlichung des Zusammenhangs der Tastaturelemente 15 Berücksichtigung dynamischer Textlängen Abgrenzung mehrerer Artikelpositionen 3 Kapseln der Artikelansicht in ein UserControl 7 Die reduzierte Ansicht eines Artikels 201 Zusammenfassung 206

5 Praxis Teil 3: Animation, Sound und.net 207 Ausgangslage dieses Kapitels 20 Animation zum Ein- und Ausklappen der reduzierten Artikelansicht 20 Auslösen der Ein- und Ausklapp-Animation 214 Erweiterte Animationssteuerung mit Trick 217 Erzeugen von Artikeln per Code 21 Hinzufügen eines Artikels beim Laden des UserControls 21 Hinzufügen eines Artikels bei Mausklick auf den Kopfbereich 221 Animation zur visuellen Bestätigung eines erfolgreichen Scans 225 Akustische Bestätigung eines erfolgreichen Scans per Sound 22 Animation zur visuellen Rückmeldung eines fehlgeschlagenen Scans 22 Akustische Rückmeldung eines fehlgeschlagenen Scans per Sound 2 Zusammenfassung 231 Praxis Teil 4: Steuerelementdesign, Abschluss und Evaluierung 233 Ausgangslage dieses Kapitels 234 Design der Buttons 235 Animieren der Steuerelementvorlage der Buttons 2 Anlegen einer Formatvorlage für die Buttons 246 Design des ScrollViewers 24 Verwendung von Symbolen 260 Ergebnis der Gestaltung des ersten Screens 261 Überprüfen der Einhaltung der Anforderungen 262 Die Anforderungen aus der Analyse und Planung 262 Die acht goldenen Regeln des UI-Designs 264 Zusammenfassung 266 Stichwortverzeichnis 26 Über den Autor 27