Design for Android OS training (some technical tips)

1,516 views
1,444 views

Published on

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,516
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
127
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Design for Android OS training (some technical tips)

  1. 1. Android Design Principles
  2. 2. Android Design PrinciplesDelight me in surprising ways -
  3. 3. Android Design PrinciplesDelight me in surprising ways - beautiful surface, a carefully- placed animation, or a well-timed sound effect
  4. 4. Android Design PrinciplesDelight me in surprising ways - beautiful surface, a carefully- placed animation, or a well-timed sound effect
  5. 5. Android Design PrinciplesReal objects are more fun than buttons and menus -
  6. 6. Android Design PrinciplesReal objects are more fun than buttons and menus - Allow people to directly touch and manipulate objects in your app
  7. 7. Android Design PrinciplesReal objects are more fun than buttons and menus - Allow people to directly touch and manipulate objects in your app
  8. 8. Android Design PrinciplesLet me make it mine -
  9. 9. Android Design PrinciplesLet me make it mine - People love to add personal touches because it helps them feel at home and in control
  10. 10. Android Design PrinciplesLet me make it mine - People love to add personal touches because it helps them feel at home and in control
  11. 11. Android Design PrinciplesGet to know me -
  12. 12. Android Design PrinciplesGet to know me - Learn peoples preferences over time
  13. 13. Android Design PrinciplesGet to know me - Learn peoples preferences over time
  14. 14. Android Design PrinciplesKeep it brief -
  15. 15. Android Design PrinciplesKeep it brief - Use short phrases with simple words
  16. 16. Android Design PrinciplesKeep it brief - Use short phrases with simple words
  17. 17. Android Design PrinciplesPictures are faster than words -
  18. 18. Android Design PrinciplesPictures are faster than words - Consider using pictures to explain ideas
  19. 19. Android Design PrinciplesPictures are faster than words - Consider using pictures to explain ideas
  20. 20. Android Design PrinciplesDecide for me but let me have the final say -
  21. 21. Android Design PrinciplesDecide for me but let me have the final say - Take your best guess and act rather than asking first
  22. 22. Android Design PrinciplesDecide for me but let me have the final say - Take your best guess and act rather than asking first
  23. 23. Android Design PrinciplesOnly show what I need when I need it -
  24. 24. Android Design PrinciplesOnly show what I need when I need it - People get overwhelmed when they see too much at once
  25. 25. Android Design PrinciplesOnly show what I need when I need it - People get overwhelmed when they see too much at once
  26. 26. Android Design PrinciplesI should always know where I am -
  27. 27. Android Design PrinciplesI should always know where I am - Give people confidence that they know their way around
  28. 28. Android Design PrinciplesI should always know where I am - Give people confidence that they know their way around
  29. 29. Android Design PrinciplesNever lose my stuff -
  30. 30. Android Design PrinciplesNever lose my stuff - Save what people took time to create and let them access it from anywhere
  31. 31. Android Design PrinciplesNever lose my stuff - Save what people took time to create and let them access it from anywhere
  32. 32. Android Design PrinciplesIf it looks the same, it should act the same -
  33. 33. Android Design PrinciplesIf it looks the same, it should act the same - Help people discern functional differences by making them visually distinct rather than subtle
  34. 34. Android Design PrinciplesIf it looks the same, it should act the same - Help people discern functional differences by making them visually distinct rather than subtle
  35. 35. Android Design PrinciplesOnly interrupt me if its important -
  36. 36. Android Design PrinciplesOnly interrupt me if its important - Like a good personal assistant, shield people from unimportant minutiae
  37. 37. Android Design PrinciplesOnly interrupt me if its important - Like a good personal assistant, shield people from unimportant minutiae
  38. 38. Android Design PrinciplesGive me tricks that work everywhere -
  39. 39. Android Design PrinciplesGive me tricks that work everywhere - Make your app easier to learn by leveraging visual patterns and muscle memory from other Android apps
  40. 40. Android Design PrinciplesGive me tricks that work everywhere - Make your app easier to learn by leveraging visual patterns and muscle memory from other Android apps
  41. 41. Android Design PrinciplesIts not my fault -
  42. 42. Android Design PrinciplesIts not my fault - Be gentle in how you prompt people to make corrections
  43. 43. Android Design PrinciplesIts not my fault - Be gentle in how you prompt people to make corrections
  44. 44. Android Design PrinciplesSprinkle encouragement -
  45. 45. Android Design PrinciplesSprinkle encouragement - Break complex tasks into smaller steps that can be easily accomplished
  46. 46. Android Design PrinciplesSprinkle encouragement - Break complex tasks into smaller steps that can be easily accomplished
  47. 47. Android Design PrinciplesDo the heavy lifting for me -
  48. 48. Android Design PrinciplesDo the heavy lifting for me - Make novices feel like experts by enabling them to do things they never thought they could
  49. 49. Android Design PrinciplesDo the heavy lifting for me - Make novices feel like experts by enabling them to do things they never thought they could
  50. 50. Android Design PrinciplesMake important things fast -
  51. 51. Android Design PrinciplesMake important things fast - Not all actions are equal. Decide whats most important in your app and make it easy to find and fast to use
  52. 52. Android Design PrinciplesMake important things fast - Not all actions are equal. Decide whats most important in your app and make it easy to find and fast to use
  53. 53. System Bars
  54. 54. System Bars
  55. 55. System Bars1. Status Bar -
  56. 56. System Bars1. Status Bar - Displays pending notifications on the left and status, such as time, battery level, or signal strength, on the right.
  57. 57. System Bars1. Status Bar - Displays pending notifications on the left and status, such as time, battery level, or signal strength, on the right.2. Navigation Bar -
  58. 58. System Bars1. Status Bar - Displays pending notifications on the left and status, such as time, battery level, or signal strength, on the right.2. Navigation Bar - New for phones in Android 4.0, the navigation bar is present only on devices that dont have the traditional hardware keys
  59. 59. System Bars1. Status Bar - Displays pending notifications on the left and status, such as time, battery level, or signal strength, on the right.2. Navigation Bar - New for phones in Android 4.0, the navigation bar is present only on devices that dont have the traditional hardware keys3. Combined Bar -
  60. 60. System Bars1. Status Bar - Displays pending notifications on the left and status, such as time, battery level, or signal strength, on the right.2. Navigation Bar - New for phones in Android 4.0, the navigation bar is present only on devices that dont have the traditional hardware keys3. Combined Bar - On tablet form factors the status and navigation bars are combined into a single bar at the bottom of the screen.
  61. 61. Notifications Notifications are brief messages that users can access at any time from the status bar. They provide updates, reminders, or information thats important, but not critical enough to warrant interrupting the user. Open the notifications drawer by swiping down on the status bar. Touching a notification opens the associated app.
  62. 62. NotificationsNotifications can be expanded to uncover more details and relevant actions.When collapsed, notifications have a one-line title and a one-line message.The recommended layout for a notification includes two lines.If necessary, you can add a third line.Swiping a notification right or left removes it from the notification drawer.
  63. 63. Common App UI
  64. 64. Common App UI
  65. 65. Common App UI 1. Main Action Bar -
  66. 66. Common App UI 1. Main Action Bar - The command and control center for your app. The main action bar includes elements for navigating your apps hierarchy and views, and also surfaces the most important actions.
  67. 67. Common App UI 1. Main Action Bar - The command and control center for your app. The main action bar includes elements for navigating your apps hierarchy and views, and also surfaces the most important actions. 2. View Control -
  68. 68. Common App UI 1. Main Action Bar - The command and control center for your app. The main action bar includes elements for navigating your apps hierarchy and views, and also surfaces the most important actions. 2. View Control - Allows users to switch between the different views that your app provides. Views typically consist of different arrangements of your data or different functional aspects of your app.
  69. 69. Common App UI 1. Main Action Bar - The command and control center for your app. The main action bar includes elements for navigating your apps hierarchy and views, and also surfaces the most important actions. 2. View Control - Allows users to switch between the different views that your app provides. Views typically consist of different arrangements of your data or different functional aspects of your app. 3. Content Area -
  70. 70. Common App UI 1. Main Action Bar - The command and control center for your app. The main action bar includes elements for navigating your apps hierarchy and views, and also surfaces the most important actions. 2. View Control - Allows users to switch between the different views that your app provides. Views typically consist of different arrangements of your data or different functional aspects of your app. 3. Content Area - The space where the content of your app is displayed.
  71. 71. Common App UI 1. Main Action Bar - The command and control center for your app. The main action bar includes elements for navigating your apps hierarchy and views, and also surfaces the most important actions. 2. View Control - Allows users to switch between the different views that your app provides. Views typically consist of different arrangements of your data or different functional aspects of your app. 3. Content Area - The space where the content of your app is displayed. 4. Split Action Bar -
  72. 72. Common App UI 1. Main Action Bar - The command and control center for your app. The main action bar includes elements for navigating your apps hierarchy and views, and also surfaces the most important actions. 2. View Control - Allows users to switch between the different views that your app provides. Views typically consist of different arrangements of your data or different functional aspects of your app. 3. Content Area - The space where the content of your app is displayed. 4. Split Action Bar - Split action bars provide a way to distribute actions across additional bars located below the main action bar or at the bottom of the screen. In this example, a split action bar moves important actions that wont fit in the main bar to the bottom.
  73. 73. Overview of Screens Support
  74. 74. Overview of Screens SupportTerms and concepts:
  75. 75. Overview of Screens SupportTerms and concepts:1. Screen size -
  76. 76. Overview of Screens SupportTerms and concepts:1. Screen size - Actual physical size, measured as the screens diagonal
  77. 77. Overview of Screens SupportTerms and concepts:1. Screen size - Actual physical size, measured as the screens diagonal2. Screen density -
  78. 78. Overview of Screens SupportTerms and concepts:1. Screen size - Actual physical size, measured as the screens diagonal2. Screen density - The quantity of pixels within a physical area of the screen; usually referred to as dpi (dots per inch)
  79. 79. Overview of Screens SupportTerms and concepts:1. Screen size - Actual physical size, measured as the screens diagonal2. Screen density - The quantity of pixels within a physical area of the screen; usually referred to as dpi (dots per inch)3. Orientation -
  80. 80. Overview of Screens SupportTerms and concepts:1. Screen size - Actual physical size, measured as the screens diagonal2. Screen density - The quantity of pixels within a physical area of the screen; usually referred to as dpi (dots per inch)3. Orientation - The orientation of the screen from the users point of view. This is either landscape or portrait, meaning that the screens aspect ratio is either wide or tall, respectively.
  81. 81. Overview of Screens SupportTerms and concepts:1. Screen size - Actual physical size, measured as the screens diagonal2. Screen density - The quantity of pixels within a physical area of the screen; usually referred to as dpi (dots per inch)3. Orientation - The orientation of the screen from the users point of view. This is either landscape or portrait, meaning that the screens aspect ratio is either wide or tall, respectively.4. Resolution -
  82. 82. Overview of Screens SupportTerms and concepts:1. Screen size - Actual physical size, measured as the screens diagonal2. Screen density - The quantity of pixels within a physical area of the screen; usually referred to as dpi (dots per inch)3. Orientation - The orientation of the screen from the users point of view. This is either landscape or portrait, meaning that the screens aspect ratio is either wide or tall, respectively.4. Resolution - The total number of physical pixels on a screen. When adding support for multiple screens, applications do not work directly with resolution; applications should be concerned only with screen size and density
  83. 83. Overview of Screens SupportTerms and concepts:1. Screen size - Actual physical size, measured as the screens diagonal2. Screen density - The quantity of pixels within a physical area of the screen; usually referred to as dpi (dots per inch)3. Orientation - The orientation of the screen from the users point of view. This is either landscape or portrait, meaning that the screens aspect ratio is either wide or tall, respectively.4. Resolution - The total number of physical pixels on a screen. When adding support for multiple screens, applications do not work directly with resolution; applications should be concerned only with screen size and density5. Density-independent pixel (dp) -
  84. 84. Overview of Screens SupportTerms and concepts:1. Screen size - Actual physical size, measured as the screens diagonal2. Screen density - The quantity of pixels within a physical area of the screen; usually referred to as dpi (dots per inch)3. Orientation - The orientation of the screen from the users point of view. This is either landscape or portrait, meaning that the screens aspect ratio is either wide or tall, respectively.4. Resolution - The total number of physical pixels on a screen. When adding support for multiple screens, applications do not work directly with resolution; applications should be concerned only with screen size and density5. Density-independent pixel (dp) - A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way. The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160)
  85. 85. Overview of Screens Support
  86. 86. Overview of Screens SupportRange of screens supported:
  87. 87. Overview of Screens SupportRange of screens supported:1. Four generalized sizes -
  88. 88. Overview of Screens SupportRange of screens supported:1. Four generalized sizes - small, normal, large, and xlarge
  89. 89. Overview of Screens SupportRange of screens supported:1. Four generalized sizes - small, normal, large, and xlarge2. Four generalized densities -
  90. 90. Overview of Screens SupportRange of screens supported:1. Four generalized sizes - small, normal, large, and xlarge2. Four generalized densities - ldpi (low), mdpi (medium), hdpi (high), and xhdpi (extra high)
  91. 91. Overview of Screens SupportRange of screens supported:1. Four generalized sizes - small, normal, large, and xlarge2. Four generalized densities - ldpi (low), mdpi (medium), hdpi (high), and xhdpi (extra high)
  92. 92. Overview of Screens SupportEach generalized screen size has an associated minimum resolution thatsdefined by the system1. xlarge - at least 960dp x 720dp2. large - at least 640dp x 480dp3. normal - at least 470dp x 320dp4. small - at least 426dp x 320dp
  93. 93. Overview of Screens SupportResource sizes for different densities:
  94. 94. Overview of Screens SupportFigures 1 and 2 show the difference between an application when it does notprovide density independence and when it does, respectively:Figure 1Figure 2
  95. 95. Overview of Screens SupportFollowing is a list of resource directories in an application that providesdifferent layout designs for different screen sizes and different bitmapdrawables for medium, high, and extra high density screens:res/layout/my_layout.xml // layout for normal screen size ("default")res/layout-small/my_layout.xml // layout for small screen sizeres/layout-large/my_layout.xml // layout for large screen sizeres/layout-xlarge/my_layout.xml // layout for extra large screen sizeres/layout-xlarge-land/my_layout.xml // layout for extra large in landscape orientationres/drawable-mdpi/my_icon.png // bitmap for medium densityres/drawable-hdpi/my_icon.png // bitmap for high densityres/drawable-xhdpi/my_icon.png // bitmap for extra high density
  96. 96. Draw 9-patch 1. Define the stretchable patches 2. Define content area (optional)You can find this tool:<Android SDK directory>/tools
  97. 97. Additional info1. http://developer.android.com/design/index.html2. http://developer.android.com/guide/practices/screens_support.html#support3. http://developer.android.com/guide/topics/resources/providing- resources.html#BestMatch4. http://developer.android.com/guide/practices/ui_guidelines/icon_design.html5. http://developer.android.com/guide/practices/ui_guidelines/icon_design.html# design-tips6. http://developer.android.com/design/patterns/multi-pane-layouts.html

×