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

Loading in 2 Seconds...

play fullscreen
1 / 57

Building Metro style UIs - PowerPoint PPT Presentation


  • 190 Views
  • Uploaded on

DEV354. Building Metro style UIs. Paul Gusmorino Lead Program Manager Microsoft Corporation. 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Building Metro style UIs' - woods


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
building metro style uis

DEV354

Building Metro style UIs

Paul Gusmorino

Lead Program Manager

Microsoft Corporation

agenda
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
demo

What is Metro style UI?

Examples from apps on the Windows 8 Release Preview!

slide8

A set of common user interface patterns

grounded in a set of design principles

and supported by the Windows 8 platform.

patterns of metro style ui
Patterns of Metro style UI
  • Layout
  • Navigation
  • Commanding
  • Scrolling Content
  • PresentingData
  • Essential Controls
  • Text Editing
principles of metro style ui
Principles of Metro style UI
  • Pride in craftsmanship
  • Fast and fluid
  • Authentically digital
  • Do more with less
  • Win as one
platform for metro style ui
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!
layout patterns for metro style ui
Layout Patterns for Metro style UI

Fixed

Filled and Snapped

Adaptive

layout patterns takeaways
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
navigation patterns takeaways
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
Commanding Patterns

App Bar

Settings Pane

Flyout

Context Menu

Tooltip

Message Dialog

commanding patterns takeaways
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
Scrolling Content Patterns
  • Idle
  • No Scrollbar
  • Touch & Keyboard
  • Panning Indicator
  • Mouse
  • Scrollbar
scrolling content patterns behaviors
Scrolling Content Patterns - Behaviors
  • Panning
  • Zooming
  • Rails
  • Inertia
  • Boundary feedback
  • Snap points
  • Nesting
  • Chaining
scrolling content patterns takeaways
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
Presenting Data Patterns

List View

Grid View

Flip View

presenting data patterns1
Presenting Data Patterns

Grouping

Single & Multi Select

Built-in Animations

presenting data patterns takeaways
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
Essential Control Patterns

Button

Hyperlink

Ratings

ListBox

Slider

Checkbox

Combo Box

Time Picker

Progress Bar

Progress Ring

Toggle Switch

Date Picker

Radio Button

essential control patterns1
Essential Control Patterns

Button

Hyperlink

Ratings

ListBox

Slider

Checkbox

Combo Box

Time Picker

Progress Bar

Progress Ring

Toggle Switch

Date Picker

Radio Button

everyday widget patterns takeaways
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
text editing patterns
Text Editing Patterns

Single-Line Text Box

Password

Clear Button

Reveal Button

Multi-Line Text Box

Rich Text Box

text editing patterns behaviors
Text Editing Patterns - Behaviors

Text Selection

Cut, Copy, and Paste

Mouse & Keyboard

Touch

Spellchecking

text editing patterns takeaways
Text Editing Patterns Takeaways
  • Powerful text editing experience
  • Optimized for touch, mouse, and keyboard
  • Spellchecking!
  • Integration with touch keyboard
a set of common user interface patterns
A set of common user interface patterns
  • Layout
  • Navigation
  • Commanding
  • Scrolling Content
  • PresentingData
  • Everyday Widgets
  • Text editing
grounded in a set of design principles
grounded in a set of design principles
  • Pride in craftsmanship
  • Fast and fluid
  • Authentically digital
  • Do more with less
  • Win as one
supported by the windows 8 platform
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!
slide50

A set of common user interface patterns

grounded in a set of design principles

and supported by the Windows 8 platform.

related content
Related Content

DEV351 Designing Apps with Metro Principles and Windows Personality

DEV353 Building Metro style Apps with XAML

  • DEV366 Building Metro style Apps with HTML and Javascript

Find Me Later At… Ask the Experts

dev track resources
DEV Track Resources
  • Visual Studio Home Page :: http://www.microsoft.com/visualstudio/en-us
  • Somasegar’s Blog :: http://blogs.msdn.com/b/somasegar/
  • Jason Zander’s Blog :: http://blogs.msdn.com/b/jasonz/
  • Facebook :: http://www.facebook.com/visualstudio
  • Twitter :: http://twitter.com/#!/visualstudio
resources
Resources

Learning

TechNet

  • Connect. Share. Discuss.
  • Microsoft Certification & Training Resources

http://northamerica.msteched.com

www.microsoft.com/learning

  • Resources for IT Professionals
  • Resources for Developers
  • http://microsoft.com/technet

http://microsoft.com/msdn

slide54

Required Slide

Complete an evaluation on CommNet and enter to win!

ms tag
MS Tag

Scan the Tag

to evaluate this

session now on

myTechEd Mobile

slide56

© 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.