Post on 26-Dec-2015
Building Metro style UIs
Paul GusmorinoLead Program ManagerMicrosoft Corporation
DEV354
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
What is Metro style UI?
A set of common user interface patterns
grounded in a set of design principles
supported by the Windows 8 platform.
demo
Examples from apps on the Windows 8 Release Preview!
What is Metro style UI?
A set of common user interface patternsgrounded in a set of design principles
and supported by the Windows 8 platform.
Patterns of Metro style UI
LayoutNavigationCommandingScrolling ContentPresenting DataEssential ControlsText Editing
Principles of Metro style UI
Pride in craftsmanshipFast and fluidAuthentically digitalDo more with lessWin as one
Platform for Metro style UI
For C++/C#:XAML
For Javascript:HTMLWindows Library for JavaScript
All powered by the same underlying Windows 8 platform capabilities!
Layout Patterns for Metro style UI
Layout Patterns for Metro style UIFixed
Adaptive
Filled and Snapped
demo
Layout Patterns
Layout Patterns Takeaways
Determine whether your layout should be fixed or adaptiveSupport snapped state as a fully functional mode of your appConsider supporting portrait layout when applicableUse platform support to achieve high performance layout
Navigation Patterns for Metro style UI
Navigation Patterns
Hub Flat Back
demo
Navigation Patterns
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.
Commanding Patterns for Metro style UI
Commanding Patterns
Message Dialog
Flyout
App Bar
Tooltip
Settings PaneContext Menu
demo
Commanding Patterns
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
Scrolling Content Patterns for Metro style UI
Scrolling Content PatternsIdle
• No Scrollbar Touch & Keyboard
• Panning Indicator Mouse
• Scrollbar
Scrolling Content Patterns - Behaviors
PanningZoomingRailsInertiaBoundary feedbackSnap pointsNestingChaining
demo
Scrolling Content Patterns
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”
Presenting Data Patterns for Metro style UI
Presenting Data Patterns
Flip ViewList View Grid View
Presenting Data PatternsSingle & Multi SelectGrouping
Built-in Animations
Presenting Data Patterns
Semantic Zoom
demo
Presenting Data Patterns
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
Essential Control Patterns for Metro style UI
Essential Control PatternsButton
Checkbox
Combo Box
Date Picker Radio Button
Hyperlink
ListBox
Ratings
Progress Bar
Progress Ring
Time Picker
Toggle Switch
Slider
Essential Control PatternsButton
Checkbox
Combo Box
Date Picker Radio Button
Hyperlink
ListBox
Ratings
Progress Bar
Progress Ring
Time Picker
Toggle Switch
Slider
demo
Essential Control Patterns
Everyday Widget Patterns 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
Text Editing Patterns for Metro style UI
Text Editing PatternsSingle-Line Text Box Password
Multi-Line Text Box Rich Text Box
Clear Button Reveal Button
Text Editing Patterns - BehaviorsText Selection
Cut, Copy, and Paste
Spellchecking
Mouse & Keyboard
Touch
Text Editing Patterns - Touch Keyboard
demo
Text Editing Patterns
Text Editing Patterns Takeaways
Powerful text editing experience
Optimized for touch, mouse, and keyboard
Spellchecking!
Integration with touch keyboard
What is Metro style UI?
A set of common user interface patterns
LayoutNavigationCommandingScrolling ContentPresenting DataEveryday WidgetsText editing
grounded in a set of design principles
Pride in craftsmanshipFast and fluidAuthentically digitalDo more with lessWin as one
supported by the Windows 8 platform.
For C++/C#:XAML
For Javascript:HTMLWindows Library for JavaScript
All powered by the same underlying Windows 8 platform capabilities!
A set of common user interface patternsgrounded in a set of design principles
and supported by the Windows 8 platform.
Related Content
DEV351 Designing Apps with Metro Principles and Windows Personality
DEV366 Building Metro style Apps with HTML and Javascript
Find Me Later At… Ask the Experts
DEV353 Building Metro style Apps with XAML
DEV Track Resources
Visual Studio Home Page :: http://www.microsoft.com/visualstudio/en-us
Jason Zander’s Blog :: http://blogs.msdn.com/b/jasonz/
Facebook :: http://www.facebook.com/visualstudio
Twitter :: http://twitter.com/#!/visualstudio
Somasegar’s Blog :: http://blogs.msdn.com/b/somasegar/
Resources
Connect. Share. Discuss.
http://europe.msteched.com
Learning
Microsoft Certification & Training Resources
www.microsoft.com/learning
TechNet
Resources for IT Professionals
http://microsoft.com/technet
Resources for Developers
http://microsoft.com/msdn
Evaluations
http://europe.msteched.com/sessions
Submit your evals online
© 2012 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.