Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (11)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Windows phone UI Design Guidelines
- 1. designing for windows phone by Neelima Salvi
- 2. objective learn, implement & deliver the best Source: User Experience Design Guidelines for Windows Phone http://msdn.microsoft.com/en-us/library/hh202915%28v=VS.92%29.aspx
- 5. © microsoft
- 6. focus on User Experience Visual Design Application Goal
- 7. common example we use ketchup bottles
- 8. who amongst us Never struggled with a ketchup bottle?
- 9. which of these two bottles is EASIER to get the ketchup out from?
- 10. user experience
- 11. 1
- 12. 2
- 13. 3
- 14. 4
- 15. 5
- 16. 6
- 17. is this a window
- 18. visual design
- 19. What if you do not target the red marked area?
- 20. achieving goal
- 21. focus on User Experience Visual Design Application Goal
- 22. clear accessible easy usable
- 23. theming Photo Credit: http://poojycat.wordpress.com/2012/08/23/which-mask/
- 25. blue blue red red mango mango green green magenta magenta purple purple lime lime teal teal brown brown pink dark pink light
- 26. theming
- 27. theming
- 28. start tile
- 29. start tile x
- 30. splash screen
- 31. splash screen x
- 33. segoe WP
- 34. text size lowercase exception of section titles if brand guidelines insist on a different case, then ensure that the use of the case is consistent across the app.
- 36. Visual language
- 38. visual language foreground or background color of a control
- 40. 1 simple color 2 dimensional
- 41. composition
- 42. element alignment element spacing
- 43. element alignment A B
- 44. element alignment 24px 24px x
- 45. element alignment ELEMENT SPACING DETAILS DETAILS DETAILS name lara sheffer name lara sheffer name lara sheffer telephone 3652466 telephone 3652466 birthday 1 January 1980 birthday 1 January 1980 telephone 3652466 address 3 East 54th Street address 3 East 54th Street 18th Floor 18th Floor New York, NY 10022, New York, NY 10022, birthday USA. USA. 1 January 1980 address 3 East 54th Street 18th Floor New York, NY 10022, USA. A B C
- 46. element alignment ELEMENT SPACING DETAILS DETAILS DETAILS name lara sheffer name lara sheffer name lara sheffer telephone 3652466 telephone 3652466 birthday 1 January 1980 birthday 1 January 1980 telephone 3652466 address 3 East 54th Street address 3 East 54th Street 18th Floor 18th Floor New York, NY New York, NY 10022, birthday 10022, USA. USA. 1 January 1980 address 3 East 54th Street 18th Floor New York, NY 10022, USA. x
- 47. element spacing ELEMENT SPACING PICTURES PICTURES A B
- 48. element spacing ELEMENT SPACING PICTURES PICTURES x
- 49. element spacing ELEMENT SPACING DETAILS DETAILS name lara sheffer name lara sheffer telephone 3652466 telephone 3652466 birthday 1 January 1980 birthday 1 January 1980 address 3 East 54th Street 18th Floor address 3 East 54th Street New York, NY 10022, 18th Floor USA. New York, NY 10022, USA. A B
- 50. element spacing ELEMENT SPACING DETAILS DETAILS name lara sheffer name lara sheffer telephone 3652466 telephone 3652466 birthday 1 January 1980 birthday 1 January 1980 address 3 East 54th Street 18th Floor address 3 East 54th Street New York, NY 10022, 18th Floor USA. New York, NY 10022, USA. x
- 51. buttons placement amsterdam amsterdam lorem ipsum dolor sit amet, consectetur lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sollicitudin pulvinar adipiscing elit. Nulla sollicitudin pulvinar elit eu vestibulum elit eu vestibulum ok ok x
- 54. lists adorners ELEMENT SPACING share share share facebook > facebook f facebook twitter > twitter t twitter email > email email favorite > favorite favorite A B C
- 55. lists adorners ELEMENT SPACING share share share facebook > facebook f facebook twitter > twitter t twitter email > email email favorite > favorite favorite x
- 56. feedback controls color ELEMENT SPACING share share f facebook f facebook t twitter t email email favorite favorite A B
- 57. feedback controls color share share f facebook f facebook t twitter t email email favorite favorite x
- 58. feedback controls button LOCATION LOCATION amsterdam amsterdam Boerhaavelaan 7, Boerhaavelaan 7, 2500 DL Den Haag 2500 DL Den Haag Apollolaan 138 Amsterdam Apollolaan 138 Amsterdam Netherlands Netherlands change change x
- 59. feedback controls button ELEMENT SPACI - LOCATION amsterdam Boerhaavelaan 7, 2500 DL Den Haag Apollolaan 138 Amsterdam Netherlands
- 60. there is no selected state
- 61. headings headings should be left aligned should not have backgrounds, borders, underline, or any other kind of decoration.
- 62. headings the exception to this is panorama pane titles, which may use corporate branding.
- 63. pivot controls pivot pages ELEMENT SPACING all pivot controls should have at least two pages in them
- 64. pivot controls master-detail view ELEMENT SPACING x the pivotfilter-results viewnever be used as wizard. master-detail, control should or as steps in a a
- 65. pivot controls master-detail view ELEMENT SPACING pivots should contain pages of homogenous information, like tabs.
- 66. pivot controls controls not permitted in pivots ELEMENT SPACING x toggle switches x sliders x map controls x browser control x horizontally scrollable area or a horizontal swipe gesture
- 67. panorama controls scrollable panesSPACING ELEMENT panorama panes should either scroll vertically or horizontally. not both.
- 68. panorama controls scrollable panesSPACING ELEMENT x panorama panes should either scroll vertically or horizontally. not both.
- 69. panorama controls floating buttonsSPACING ELEMENT x
- 70. panorama controls controls not permitted ELEMENT SPACING x toggle switches x sliders x map controls x browser control x application bars are not permitted on panorama controls.
- 71. dialog boxes placement delete delete are you sure to delete this record? are you sure to delete this record? yes no yes no x
- 72. language & tone
- 73. language & tone error message Contents NDP1. 1sp 1. x Unhandled Exception KB2416447_x86_ wrapper log Error C0000005 version bd ok ok do not use computer jargon, hexadecimal error codes, or text that assumes technical knowledge.
- 74. language & tone error message make sure you typed the make sure you typed the name correctly, and then name correctly, and then try again. try again. ok ok don’t forget that users are human beings ;)
- 75. typos
- 76. typos x the app should not have any spelling mistakes. Copy that is spelt incorrectly looks bad and could negatively impact the brand perception.
- 77. page transitions
- 78. page transitions
- 79. TY neelima salvi thank you! Design Consultant @amileens neelima.salvi@gmail.com