User Experience. Wie gestalte ich meine Windows Phone 7 Applikation. Max Knor Developer Evangelist Microsoft

Transkript

1 User Experience Wie gestalte ich meine Windows Phone 7 Applikation Max Knor Developer Evangelist Microsoft

2 Agenda 09:00 09:50 09:50 10:00 MSDN Track Windows Phone 7 ist da! Keynote Break TechNet Track Hybride IT-Architektur Webcast Area 10:00 11:15 User Experience: Wie gestalte ich meine Windows Phone 7 Applikation Egal ob heiter oder wolkig - Business Process Management im Cloud-Computing Zeitalter 11:15 11:30 Break 11:30 12:45 12:45 13:45 Red Bull TV - Entwicklung einer Real World Windows Phone 7 Applikation in 70 Minuten Break Application Infrastructure Technologies - Extending On Premise EAI to the cloud All day Program am Event 13:45 15:00 Eigene Live Tiles, Geo Location, Push Notification und andere Phone Funktionen im Detail Windows Azure Insights for IT-Pros 15:00 15:15 Break 15:15 16:30 Labyrinth 4 phone 7 Spieleentwicklung mit XNA HPC und Azure - Wie kann ich die Rechenleistung der Cloud fuer meine Analyse verwenden 16:30 17:30 Community Drinks & Networking

3 Inhalte Metro Loading Screen & Icons Pages Controls Einstellungen Text Input

4 Metro User Experience Das Individuum und die Aufgaben stehen im Vordergrund. Hilft Informationen und Anwendungen zu organisieren.

5 Personal Wetter wird im Live Tile angezeigt. Relevant Wetter Informationen je nach Standort. Connected Wetter Info über Freunde.

6 Bauen Sie Ihre User Experience Lassen Sie sich von Metro inspirieren aber finden Sie einen guten Mittelweg zwischen den Metro Grundprinzipien und Ihrem Firmen-Stil.

7

8 Farbe Farbe zur optischen Gestaltung Farbe für personalisierte Oberflächen Farbe um Hierarchieren zu unterstreichen

9

10 Inhalte Metro Loading Screen & Icons Pages Controls Einstellungen Text Input

11 Application Icon Background.png 173x173 Transparent ApplicationIcon.png 62x62 Text darübergelegt Text daneben

12 Loading Screen SplashScreenImage.jpg Standard Lademeldung Hintergrund des ersten Screens

13 Inhalte Metro Loading Screen & Icons Pages Controls Einstellungen Text Input

14 Pages Unterteilung in Pages Ähnlich Surfen im Web Navigationshistorie Back HW-Button führt zurück Jede Page hat zwei Dateien MainPage.xaml UI MainPage.xaml.cs Code

15 UI-Model in Silverlight Session Stack Prev.App / Page A PhoneNavigation Page NavigationService.Navigate( new Uri("/Page2.xaml?ID=1234", UriKind.Relative)); PhoneNavigationFrame Startmenü Page1 Page2?id=1234 Page2?id=4321

16 demo Pages & Transitions

17 Inhalte Metro Loading Screen & Icons Pages Controls Einstellungen Text Input

18 Control Styles

19 Pivot Unterteilung einzelner Aufgaben in Karteireiter Filterung / Sortierung von Listen Tap oder Bewegung um Tabs zu navigieren

20 Panorama Komplexere Seiten Überblick über unterschiedliche Datenquellen Keine Application Bar erlaubt

21

22 Application Bar + Menu Aufklappen der Bar zeigt detailierte Menüs Menü verdeckt Inhalte Icons als Content einbetten

23 demo Pivot & Application Bar

24 3 Varianten des Seitenaufbaus Panorama Pivot Einzelpages Navigation über Buttons Navigation über Application Bar

25 Themes Dark / Blue Light / Lime

26 Themes Controls passen Farben an Nur bei eingebaute Styles / Ressourcen Application Bar Icons werden umgefärbt Standardmäßig weiße Icons einbetten Akzent Farbe verwenden PhoneAccentBrush

27 demo Themes überschreiben Page, Controls & AppBar

28 Silverlight Toolkit für das Phone AutoCompleteBox Context Menu DatePicker & TimePicker ListPicker ( DropDownList ) LongListSelector ToggleSwitch Transitions

29 Inhalte Metro Loading Screen & Icons Pages Controls Einstellungen Text Input

30 Einstellungen Einstellungen in einzelne Pages untergliedern Gruppieren mit Pivot Maximal 2 Hierarchieebenen

31 Einstellungen Kein OK /Cancel Sofortige Umsetzung Irreversible Aktionen über Extra-Button/Link BACK Button (!)

32 Inhalte Metro Loading Screen & Icons Pages Controls Einstellungen Text Input

33 Text Input Silverlight TextBox integriert sich mit SIP SIP Input Scoping Text, Url, Number, Time, TelephoneNumber, NameOrAddress

34 Inhalte Metro Loading Screen & Icons Pages Controls Einstellungen Text Input

35 Weitere Ressourcen UI Design & Interaction Guide Photoshop Design Templates for Metro