Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Designing Windows Phone 7 Series<br />Design language (codenamed Metro)<br />Designing delightful applications for Windows...
Story of Metro<br />
Metro<br />
METRO IS OUR DESIGN LANGUAGE. WE CALL IT METRO BECAUSE IT’S MODERN AND CLEAN. IT’S FAST AND IN MOTION. IT’S ABOUT CONTENT ...
Metro Principles<br />
Principle: Clean, Light, Open, Fast<br />Feels Fast and Responsive<br />Focus on Primary Tasks<br />Do a Lot with Very Lit...
Principle: Celebrate Typography<br />Type is Beautiful, Not Just Legible<br />Clear, Straightforward Information Design<br...
Principle: Alive in Motion<br />Feels Responsive and Alive<br />Creates a System<br />Gives Context to Improve Usability<b...
Principle: Content, Not Chrome<br />Delight through Content Instead of Decoration<br />Reduce Visuals that are Not Content...
Principle: Authentically Digital<br />Design for the Form Factor<br />Don’t Try to be What It’s NOT<br />Be Direct<br />
Principles<br />Clean, Light, Open, Fast<br />Celebrate Typography<br />Alive in Motion<br />Content, Not Chrome<br />Auth...
Metro User Experience<br />Focuses on the individual and their tasks<br />Helps organize information and applications<br />
Start<br />Glance & Go<br />Get Me There<br />
Metro<br />
Building Great Windows PhoneApplications<br />Focus on designing the experience<br />Build delightful experiences<br />Bui...
Who we design for: Anna + Miles<br />Anna<br />Part time PR professional and busy mom<br />“My life is a balancing act bet...
RED THREADS.<br />THESE ARE<br />THE PRINCIPLESTHAT GUIDE THE EXPERIENCES<br />
Weather<br />Personal<br />Weather surfaced on the live tile in Start<br />Relevant<br />Weather updated based on your loc...
Build delightful experience<br />Be inspired by Metro<br />…but look for balance between the Metro<br />principles and you...
Color<br />Use color to delight the user<br />Use color to personalize experience<br />Use color to emphasize hierarchy<br />
Typography<br />Make words feel welcome<br />Pay attention to balance, <br />weight & scale<br />
Motion<br />Use motion to delight the user<br />Remember that pacing is important: the more<br />you use it, the less spec...
Make It Easy to Use<br />Familiar = Easy to use<br />Provide consistent and predictable experience<br />
Hardware Implications<br />Hardware buttons<br />Optional landscape<br />keyboards<br />Design for one hand usage<br />whe...
Gestures<br />
Touch<br />Recommended touch target size is 9mm<br />Minimum touch target size is 7mm<br />Minimum spacing between<br />el...
Common controls<br />
Application Bar + Menu<br />Up to 4 icons<br />Don’t fill all 4 slots if not needed<br />Swipe up the bar to bring up<br /...
Tabs<br />Separate multiple tasks<br />Tap or flick tabs to change them<br />Trigger<br />
Hubs<br />Rich experience<br />Aggregate multiple sources<br />
Hubs vs. Single-Page Apps<br />
Iconography<br />Icons in the application menu <br />should be consistent<br />Test icons with users<br />(pay attention t...
Call to Action<br />Familiarize yourself with Metro<br />Stay Connected & Get Informed<br />Download & Start Creating<br /...
Summary<br />Metro<br />Personas<br />Red Threads<br />Focus on designing the experience<br />Make applications delightful...
Stay Connected & Be Informed<br />Attend “An Introduction to Developing Applications for Microsoft Silverlight”. <br />Wat...
Download & Start Creating<br />Get the Windows Phone Developer Tools<br />Download the UI Design and Interaction Guide<br ...
Thank you!<br />Albert Shum – That Dude<br />Michael Smuga – Studio Director<br />Chad Roberts – UX Design Lead<br />
Nächste SlideShare
Wird geladen in …5
×

Windows Phone UI and Design Language

13.609 Aufrufe

Veröffentlicht am

from MIX10

Veröffentlicht in: Technologie
  • nice
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Interesting fact on metro's design language. You’ve shared information clearly and concisely. It’s one of my favorites. Seek your permission to embed it to my site at www.sprintringtones.org/ .

    Anita Gomez .
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Windows Phone UI and Design Language

  1. 1.
  2. 2. Designing Windows Phone 7 Series<br />Design language (codenamed Metro)<br />Designing delightful applications for Windows Phone<br />Call to action<br />Albert Shum – That Dude<br />Michael Smuga – Studio Director<br />Chad Roberts – UX Design Lead<br />
  3. 3. Story of Metro<br />
  4. 4.
  5. 5. Metro<br />
  6. 6.
  7. 7.
  8. 8.
  9. 9.
  10. 10. METRO IS OUR DESIGN LANGUAGE. WE CALL IT METRO BECAUSE IT’S MODERN AND CLEAN. IT’S FAST AND IN MOTION. IT’S ABOUT CONTENT AND TYPOGRAPHY. AND IT’S ENTIRELY AUTHENTIC.<br />ETRO<br />
  11. 11. Metro Principles<br />
  12. 12. Principle: Clean, Light, Open, Fast<br />Feels Fast and Responsive<br />Focus on Primary Tasks<br />Do a Lot with Very Little<br />Fierce Reduction of Unnecessary Elements<br />Delightful Use of Whitespace<br />Full Bleed Canvas<br />
  13. 13. Principle: Celebrate Typography<br />Type is Beautiful, Not Just Legible<br />Clear, Straightforward Information Design<br />Uncompromising Sensitivity to Weight, Balance and Scale<br />
  14. 14. Principle: Alive in Motion<br />Feels Responsive and Alive<br />Creates a System<br />Gives Context to Improve Usability<br />Transition Between UI is as Important as the Design of the UI<br />Adds Dimension and Depth<br />
  15. 15. Principle: Content, Not Chrome<br />Delight through Content Instead of Decoration<br />Reduce Visuals that are Not Content<br />Contents is the UI<br />Direct interaction with the Content Directly<br />
  16. 16. Principle: Authentically Digital<br />Design for the Form Factor<br />Don’t Try to be What It’s NOT<br />Be Direct<br />
  17. 17. Principles<br />Clean, Light, Open, Fast<br />Celebrate Typography<br />Alive in Motion<br />Content, Not Chrome<br />Authentically Digital<br />
  18. 18.
  19. 19.
  20. 20. Metro User Experience<br />Focuses on the individual and their tasks<br />Helps organize information and applications<br />
  21. 21. Start<br />Glance & Go<br />Get Me There<br />
  22. 22.
  23. 23. Metro<br />
  24. 24. Building Great Windows PhoneApplications<br />Focus on designing the experience<br />Build delightful experiences<br />Build experiences that are easy to use<br />Michael Smuga – Studio Director<br />
  25. 25. Who we design for: Anna + Miles<br />Anna<br />Part time PR professional and busy mom<br />“My life is a balancing act between work,<br />family, friends, and my own personal needs.”<br />Miles<br />Growing his own architectural biz<br />“I love running my life real-time so I can take<br />advantage of whatever is inspiring me…whether<br />it’s a new project, a pick up game or a stolen<br />moment with Anna.”<br />
  26. 26. RED THREADS.<br />THESE ARE<br />THE PRINCIPLESTHAT GUIDE THE EXPERIENCES<br />
  27. 27. Weather<br />Personal<br />Weather surfaced on the live tile in Start<br />Relevant<br />Weather updated based on your location<br />Connected<br />Weather for your contacts<br />
  28. 28. Build delightful experience<br />Be inspired by Metro<br />…but look for balance between the Metro<br />principles and your own style <br />
  29. 29.
  30. 30. Color<br />Use color to delight the user<br />Use color to personalize experience<br />Use color to emphasize hierarchy<br />
  31. 31.
  32. 32. Typography<br />Make words feel welcome<br />Pay attention to balance, <br />weight & scale<br />
  33. 33.
  34. 34. Motion<br />Use motion to delight the user<br />Remember that pacing is important: the more<br />you use it, the less special it becomes<br />
  35. 35. Make It Easy to Use<br />Familiar = Easy to use<br />Provide consistent and predictable experience<br />
  36. 36. Hardware Implications<br />Hardware buttons<br />Optional landscape<br />keyboards<br />Design for one hand usage<br />whenever possible<br />
  37. 37. Gestures<br />
  38. 38. Touch<br />Recommended touch target size is 9mm<br />Minimum touch target size is 7mm<br />Minimum spacing between<br />elements is 2mm<br />Visual size is 60-100% of the touch<br />target size<br />
  39. 39. Common controls<br />
  40. 40. Application Bar + Menu<br />Up to 4 icons<br />Don’t fill all 4 slots if not needed<br />Swipe up the bar to bring up<br />the menu<br />Trigger<br />
  41. 41. Tabs<br />Separate multiple tasks<br />Tap or flick tabs to change them<br />Trigger<br />
  42. 42. Hubs<br />Rich experience<br />Aggregate multiple sources<br />
  43. 43. Hubs vs. Single-Page Apps<br />
  44. 44. Iconography<br />Icons in the application menu <br />should be consistent<br />Test icons with users<br />(pay attention to context)<br />
  45. 45. Call to Action<br />Familiarize yourself with Metro<br />Stay Connected & Get Informed<br />Download & Start Creating<br />Chad Roberts – UX Design Lead<br />
  46. 46. Summary<br />Metro<br />Personas<br />Red Threads<br />Focus on designing the experience<br />Make applications delightful and easy to use<br />
  47. 47. Stay Connected & Be Informed<br />Attend “An Introduction to Developing Applications for Microsoft Silverlight”. <br />Watch “Authoring for Microsoft Silverlight 4 with Microsoft Expression Blend.<br />Read about design on Christian Schormann’s blog.<br />http://electricbeach.org<br />
  48. 48. Download & Start Creating<br />Get the Windows Phone Developer Tools<br />Download the UI Design and Interaction Guide<br />Interact with the design tools when Available<br />http://developer.windowsphone.com<br />
  49. 49. Thank you!<br />Albert Shum – That Dude<br />Michael Smuga – Studio Director<br />Chad Roberts – UX Design Lead<br />

×