[Android] Android UI Design

1,588 views

Published on

1. Do’s and don’ts
2. Design Principles
2.1 Focus on the user
2.2 Make the right things visible
2.3 Show proper feedback
2.4 Physical screen size
2.5 Screen density
2.6 Portrait & landscape orientations
2.7 Primary UI interaction method
2.8 Soft & physical keyboard
3. Design Considerations
3.1 Resources
3.2 Draw 9-patch
4. Exercise 4
4.1 Example 4.1
4.2 Bitmap Drawable
4.3 Example 4.2
4.4 Shape Drawable
4.5 Example 4.3
4.6 State List Drawable
4.7 Example 4.4
4.8 Style

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

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

No notes for slide

[Android] Android UI Design

  1. 1. Android Programming Lesson 4Android UI Design NGUYEN The Linh
  2. 2. Android ProgrammingContents 1 Do’s and don’ts 2 Design Principles 3 Design Considerations 4 Exercise 4 2
  3. 3. Android ProgrammingDesign Principles Do’s and don’ts 3
  4. 4. Android ProgrammingDo’s and Don’ts DON’T simply port your UI from other platforms DON’T overuse modal progress & confirmation dialogs DON’T create rigid, absolute-positioned layouts DON’T use px units, use dp (or sp for text) DON’T use small font sizes 4
  5. 5. Android ProgrammingDo’s and Don’ts DO create versions of all resources for high density screens DO make large, obvious tap targets (buttons, list items) DO follow Android icon guidelines 5
  6. 6. Android ProgrammingDo’s and Don’ts DO use proper margins and padding DO properly handle orientation changes DO use theme/style, dimension, color resources to reduce redundancy 6
  7. 7. Android ProgrammingDesign Principles Design Principles 7
  8. 8. Android ProgrammingDesign Principles Focus on the user  Know your users • Age, skill level, culture, disabilities, cont. • What they want to do with your app • What kinds of devices they’ll be using • Where/when/how they’ll be using their devices  Design with a ‘user-first’ mentality  Test on real users, early and often 8
  9. 9. Android ProgrammingDesign Principles Make the right things visible  The most common operations should be immediately visible and available  Secondary functionality can be reserved for the MENU button 9
  10. 10. Android ProgrammingDesign Principles Show proper feedback  Have at least 4 states (<selector>) for all interactive UI elements: If something is clickable, make sure it looks clickable!  Make sure the effects of an action are clear and visible  Show adequate yet unobtrusive progress indicators 10
  11. 11. Android ProgrammingDesign Principles Physical screen size Screen density 11
  12. 12. Android ProgrammingDesign Principles Portrait & landscape orientations Primary UI interaction method  Touch screen  D-pad/trackball Soft & physical keyboard Awareness about the ways in which devices can vary is very important 12
  13. 13. Android ProgrammingDesign Principles Design Considerations 13
  14. 14. Android ProgrammingDesign Considerations Resources  One .apk contains all resources  System chooses at runtime which resources to use http://developer.android.com/ guide/topics/resources/ providing-resources.html 14
  15. 15. Android ProgrammingDesign Considerations Draw 9-patch  The Draw 9-patch tool allows you to easily create a NinePatch graphic using a WYSIWYG editor. 15
  16. 16. Android ProgrammingDesign Considerations Draw 9-patch  From a terminal, launch the draw9patch application from your SDK /tools directory.  Drag your PNG image into the Draw 9-patch window (or File >Open 9-patch... to locate the file).  Click within the 1-pixel perimeter to draw the lines that define the stretchable patches and (optional) content area.  When done, select File > Save 9-patch... 16
  17. 17. Android ProgrammingDesign Considerations Example 4.1  9-patch 17
  18. 18. Android ProgrammingDesign Considerations Bitmap Drawable  drawable/bitmap_background.xml  http://subtlepatterns.com/ 18
  19. 19. Android ProgrammingDesign Considerations Example 4.2  Bitmap Drawable 19
  20. 20. Android ProgrammingDesign Considerations Shape Drawable  drawable/shape_background.xml 20
  21. 21. Android ProgrammingDesign Considerations Example 4.3  Shape Drawable 21
  22. 22. Android ProgrammingDesign Considerations State List Drawable  drawable/state_list_background.xml 22
  23. 23. Android ProgrammingDesign Considerations Example 4.4  State List Drawable 23
  24. 24. Android ProgrammingDesign Considerations Style  values/styles.xml 24
  25. 25. Android ProgrammingExercise 4 25
  26. 26. Android Programming

×