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.

Introduction to Designing Windows 8 Apps

1.807 Aufrufe

Veröffentlicht am

In just four months, Microsoft has already sold over 60 million licenses of Windows 8. This new version of Microsoft’s flagship operating system creates new opportunities for designers and developers to reach vast numbers of users. Windows 8 applications are designed following the principles of the Modern UI style. In this webinar, Valentina will teach you the basics of designing Windows 8 applications that fit within the Modern UI paradigm while maintaining a strong brand and personality.

  • I Got The Full File, I Just Wanna Share to You Guyszz.. It's Working You Can The Download The Full File + Instructions Here : http://gg.gg/setupexe
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Introduction to Designing Windows 8 Apps

  1. 1. Introduction to Designing Windows 8 Apps
  2. 2. The Blink Story• Established in 2000 in Seattle• User Experience Specialists• Domain experts in Human interfaces• Research-driven design• 35 Employees, including 9 PhDs
  3. 3. Clients
  4. 4. Our Panel and Agenda Joe Welinske Valentina Ferrari Geoff Harrison • Quick Intro to the Windows 8 UI • A look at Windows 8 Design Principles • Case Study Examples: Rhapsody and WalkSeattle • Lessons Learned • Q&A 4
  5. 5. Windows 8 and Modern UI Style • Modern UI Style is the new Microsoft design language • It is comprised of a set of principles that apply to Windows Phone, Windows 8, and Xbox • Navigation and interaction patterns do differ between them 5
  6. 6. Blink and Windows 8 • Working with Modern UI for about a year • Windows 8 Development Partner • Presented design practices at Microsoft developer conferences • Have designed new and ported existing apps to Windows 8 • Have a design principles reference site at blinkux.com/metro 6
  7. 7. Creating a Windows 8 App • Have a perspective - Elevator pitch - What singular thing is it great at? • Define the user activities • Decide how it will make money • Conform to the structure, but wear your own brand 7
  8. 8. Windows 8 and Modern UI Style • Modern UI Style is the new Microsoft design language • It is comprised of a set of principles that apply to Windows Phone, Windows 8, and Xbox • Navigation and interaction patterns do differ between them 8
  9. 9. Modern UI Style and Windows 8 Basics
  10. 10. Five Principles 1. Pride in Craftsmanship Pay attention to details. 2. Be Fast and Fluid Use animations to make the application feel responsive. 3. Authentically Digital Avoid skeumorphic design. 4. Do More with Less Try to remove buttons and chrome from the screen. Keep your application focused around your core task. 5. Win as One Try to use the UI patterns created by Microsoft.Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh464920.aspx 10
  11. 11. Five Principles 1. Pride in Craftsmanship Pay attention to details. 2. Be Fast and Fluid Use animations to make the application feel responsive. 3. Authentically Digital Avoid skeumorphic design. 4. Do More with Less Try to remove buttons and chrome from the screen. Keep your application focused around your core task. 5. Win as One Try to use the UI patterns created by Microsoft.Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh464920.aspx 11
  12. 12. Screen Hierarchy Hub Screen Section Screen Detail Screen 12
  13. 13. Navigation Patterns Section Labels Header Menu Charms Navigation Bar 13
  14. 14. Chrome and NavigationDesigning the Rhapsody app
  15. 15. Starting Point: Android App Task Redesign the Rhapsody Android App to fit Windows 8. Challenge Remain consistent with other Rhapsody apps that users are used to. 15
  16. 16. Design Process 1. Studied the Android application 2. Sketched layout and information architecture 3. Wireframes 4. Created and tested paper prototype 5. Iterated on the wireframes 6. Visual Design 16
  17. 17. Three Key Problems 1. Reorganize the Navigation 2. Remove the Chrome 3. Achieving a 3-level hierarchy 17
  18. 18. Redesign the Navigation Task Reorganize the application to use the Windows 8 navigation patterns. Challenge Make it easy to navigate between various sections of the applications, and to return to the home screen. 18
  19. 19. Redesign the Navigation Solution 1. Navigation Bar 2. Header Menu 19
  20. 20. Remove the Chrome Challenge Make sure that Rhapsody users can easily access the Music Player. 20
  21. 21. Remove the Chrome Task Hide the Music Player. Solution Place the Music Player in the Navigation Bar so it is accessible from every page, without always being on the screen. 21
  22. 22. Remove the Chrome Challenge • All Rhapsody applications have a small add button next to each track title • In Windows 8, however, such buttons are considered chrome. Solution We decided to remain consistent with other Rhapsody applications and keep the button. 22
  23. 23. Achieving a 3-level Hierarchy Home Challenge The original Rhapsody app has both a wide Radio Browse My Music Player and a deep navigation structure. Genre Solution Sub-Genre • Use a Header Menu or Navigation Bar Album to make sure that the application is easy to navigate from any level of the hierarchy. • Use filters at the category level to remove some of the levels. 23
  24. 24. Beyond the TemplatesDesigning the WalkSeattle app
  25. 25. The Templates• Created by Microsoft to help designers and developers design their apps• Standard grid-based layout with rectangular items 25
  26. 26. Going Beyond the Templates Why? • A lot of applications follow the templates too rigidly resulting in cookie cutter apps • Going beyond them is creates a more unique experience and a stronger brand How? • Follow the grid but play with shapes and layouts – not everything has to be rectangular • Make sure that your design still follows the principles 26
  27. 27. WalkSeattle – Version 1 • Started off following the templates, with the groups of rectangles. • But we wanted to create something different… 27
  28. 28. WalkSeattle – Final Version• Starting position places content on the left and right• Shapes that reflect the brand 28
  29. 29. Wrapping Up Joe Welinske Valentina Ferrari Geoff Harrison • We’ll send you a link to the recording and slides. • We will be having another webinar soon about designing with kids in mind. • UX Tools Survey in Progress conveyux.com/ux-tools-survey/ 29
  30. 30. 30
  31. 31. Windows 8 Resources • Making Great Windows Store Apps • Planning Windows Store Apps • Navigation Design for Windows Store Apps • Commanding Design for Windows Store Apps • Touch Interaction • PSD Resources from Microsoft • UX Guidelines for Metro Style Apps • Scaling to different screen • Gestures • Skeuomorphic Design 31
  32. 32. Thank You

×