Download
building metro style uis n.
Skip this Video
Loading SlideShow in 5 Seconds..
Building Metro style UIs PowerPoint Presentation
Download Presentation
Building Metro style UIs

Building Metro style UIs

218 Views Download Presentation
Download Presentation

Building Metro style UIs

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. DEV354 Building Metro style UIs Paul Gusmorino Lead Program Manager Microsoft Corporation

  2. Agenda • What is Metro style UI? • How can I build Metro style UIs for Windows 8? • XAML (C++/C#) • HTML and Windows Library for JavaScript (JS) • Common patterns of Metro style UI • You’ll leave with examples of how to: • Use common patterns to create great Metro style UIs

  3. What is Metro style UI?

  4. A set of common user interface patterns

  5. grounded in a set of design principles

  6. supported by the Windows 8 platform.

  7. demo What is Metro style UI? Examples from apps on the Windows 8 Release Preview!

  8. A set of common user interface patterns grounded in a set of design principles and supported by the Windows 8 platform.

  9. Patterns of Metro style UI • Layout • Navigation • Commanding • Scrolling Content • PresentingData • Essential Controls • Text Editing

  10. Principles of Metro style UI • Pride in craftsmanship • Fast and fluid • Authentically digital • Do more with less • Win as one

  11. Platform for Metro style UI • For C++/C#: • XAML • For Javascript: • HTML • Windows Library for JavaScript • All powered by the same underlying Windows 8 platform capabilities!

  12. Layout Patterns for Metro style UI

  13. Layout Patterns for Metro style UI Fixed Filled and Snapped Adaptive

  14. demo Layout Patterns

  15. Layout Patterns Takeaways • Determine whether your layout should be fixed or adaptive • Support snapped state as a fully functional mode of your app • Consider supporting portrait layout when applicable • Use platform support to achieve high performance layout

  16. Navigation Patterns for Metro style UI

  17. Navigation Patterns Hub Flat Back

  18. demo Navigation Patterns

  19. Navigation Patterns Takeaways • Use hub pattern with hierarchical structure for apps with large collections of content to explore or multiple sections or categories. • Use flat pattern with a navigation bar for apps with multiple tabs, documents, instant messages, game sessions, or other cases with relatively few sections. • Enable users to go back using standard back button pattern. • Use seamless, inline navigation between pages in the app with standard page transition animations.

  20. Commanding Patterns for Metro style UI

  21. Commanding Patterns App Bar Settings Pane Flyout Context Menu Tooltip Message Dialog

  22. demo Commanding Patterns

  23. Commanding Patterns Takeaways • Use App Bar and Flyout to show more commands ‘on demand’ • Use Tooltip to show more information • Consistent, lightweight invocation and dismiss model • Optimized for touch, mouse, and keyboard • Positioned correctly based on system context • Flexibility to define the content in a way that is native to HTML or XAML

  24. Scrolling Content Patterns for Metro style UI

  25. Scrolling Content Patterns • Idle • No Scrollbar • Touch & Keyboard • Panning Indicator • Mouse • Scrollbar

  26. Scrolling Content Patterns - Behaviors • Panning • Zooming • Rails • Inertia • Boundary feedback • Snap points • Nesting • Chaining

  27. demo Scrolling Content Patterns

  28. Scrolling Content Patterns Takeaways • Use the built-in Scroll Views to get the right user experience • Works for touch, mouse, and keyboard • Achieve sticks-to-the-finger performance • For XAML, use ScrollView control • For HTML, use CSS overflow to get “ScrollView”

  29. Presenting Data Patterns for Metro style UI

  30. Presenting Data Patterns List View Grid View Flip View

  31. Presenting Data Patterns Grouping Single & Multi Select Built-in Animations

  32. Presenting Data Patterns Semantic Zoom

  33. demo Presenting Data Patterns

  34. Presenting Data Patterns Takeaways • Visible way to make your app shine with the Metro design style • Consistent interaction model and behaviors built in • Use List/Grid Views for collections of data • Define your own rich templates ‘natively’ in both HTML and XAML • Connect to your own data: local or cloud • Use Semantic Zoom to scale experience to more data

  35. Essential Control Patterns for Metro style UI

  36. Essential Control Patterns Button Hyperlink Ratings ListBox Slider Checkbox Combo Box Time Picker Progress Bar Progress Ring Toggle Switch Date Picker Radio Button

  37. Essential Control Patterns Button Hyperlink Ratings ListBox Slider Checkbox Combo Box Time Picker Progress Bar Progress Ring Toggle Switch Date Picker Radio Button

  38. demo Essential Control Patterns

  39. Everyday WidgetPatterns Takeaways • Use the everyday widgets to get a great user experience • Take full advantage of multi-touch screens • Highly flexible styling and customizations: • Realize your scenarios and your app’s own ‘look’ • Retain common feel and functionality

  40. Text Editing Patterns for Metro style UI

  41. Text Editing Patterns Single-Line Text Box Password Clear Button Reveal Button Multi-Line Text Box Rich Text Box

  42. Text Editing Patterns - Behaviors Text Selection Cut, Copy, and Paste Mouse & Keyboard Touch Spellchecking

  43. Text Editing Patterns - Touch Keyboard

  44. demo Text Editing Patterns

  45. Text Editing Patterns Takeaways • Powerful text editing experience • Optimized for touch, mouse, and keyboard • Spellchecking! • Integration with touch keyboard

  46. What is Metro style UI?

  47. A set of common user interface patterns • Layout • Navigation • Commanding • Scrolling Content • PresentingData • Everyday Widgets • Text editing

  48. grounded in a set of design principles • Pride in craftsmanship • Fast and fluid • Authentically digital • Do more with less • Win as one

  49. supported by the Windows 8 platform. • For C++/C#: • XAML • For Javascript: • HTML • Windows Library for JavaScript • All powered by the same underlying Windows 8 platform capabilities!

  50. A set of common user interface patterns grounded in a set of design principles and supported by the Windows 8 platform.