Presentation on theme: "Metro Design Tips I learned since I joined the Windows Phone Design"— Presentation transcript:
Metro Design Tips I learned since I joined the Windows Phone Design
Metro in a Nutshell
Do not just go straight to coding your app…
What will your application do? Who is your application for? How does your application fit in? Where and when will your application be used? What kind of content will you display? How can your application leverage the hardware? The four touch points You are a Story Teller
Sketch, Wireframe, Prototype
When to use Panorama / When to use Pivot
Panorama Central App Hub for your app Ideal as an entry point Can show different panels with content that unrelated to each other Think of a “Magazine” Pivot Content is related or different views for the same content Content is different but on the same subject matter
Design Considerations with Pivot
Minimize the number of pivot pages (less than 7) Pivot Pages are cyclical Pivot Pages must not override the horizontal pan and horizontal flick functionality Use one or two word pivot page headers to provide user visual clue as to existence of next pivot page Pivot Control should only be used to display items of similar type
Design Considerations with Panorama
Minimize the number of Panorama sections to no more than 5. Panorama control is portrait orientation only. Dialogs launched from within Panorama control should not be rotated to avoid jarring experience. The panorama can show a progress bar in system tray or full screen ‘loading’ indicator on launch. First visit: the first panel shown should have the panorama title correctly aligned on the left Subsequent visits: By default, user should be taken back to the pane where they left off when user re-visits the same Panorama.
Background Art Best Practices Don’t always need to have a background, or a complex background. Photographic backgrounds make Panorama look good visually. Panos can be themed and the app Branding color can override the system theme. Be careful about including embedded text and logos within the panorama. Keep the beauty of the pano experience intact by being selective about the text and any images included in the content. Use dark, soft, and low-contrast backgrounds. Use one background image at a time.
4 Resources that saved my bacon
User Experience Design Guidelines for Windows Phone Design Resources for Windows Phone Design Templates for Windows Phone Microsoft Design.toolbox