Android 4.0 UI design tips

19,074 views

Published on

Konstantinos Polychronis - Pinapps
@ 18o Techblog Workshop / Athens 30-06-2013

Published in: Technology

Android 4.0 UI design tips

  1. Android 4.0 UI Design Tips Justin Lee
  2. Evolution of Android Gingerbread Ice Cream SandwichHoneycomb Android 2.3 Android 3.0 Android 4.0
  3. One OS for Smartphones & Tablets
  4. Topics Major UI Changes Design Patterns Do and Don’t
  5. Major UI Changes
  6. Fight for Fragmentation
  7. Android is not easy to learn http://www.pocket-lint.com/news/40615/78-android-tips-beginners-set-up
  8. Inconsistent hardware buttons is a big problem
  9. ICS drop hardware buttons Gingerbread ICS screen
  10. Software Buttons are dynamic Landscape Left Landscape Right
  11. Back Home Recents
  12. What’s missing?
  13. Menu Button
  14. Menu button is NOT longer a primary button Gingerbread ICS
  15. Quiz: How to goto settings page?
  16. Not to many people can get it by themselves
  17. ICS make the menu much more easy to find
  18. The menu button in legacy app still available on ICS
  19. But it’s time to say goodbye http://android-developers.blogspot.com/2012/01/say-goodbye-to-menu-button.html
  20. Migrate the global actions to the action bar & action overflow Old New
  21. Split action bar for contextual actions Old New
  22. Backwards compatibility Legacy software Legacy hardware http://developer.android.com/design/patterns/compatibility.html
  23. Back Button
  24. The behavior of back button is inconsistent from user’s POV ?
  25. In app navigation is much more predictable
  26. Home Button
  27. Home button perform too many functions before ICS tap long press tap
  28. The only function of home button on ICS is going home
  29. How to goto a recent app?
  30. Recents Button
  31. Tap recents button to show recent app list
  32. The new recents screen tap to switch swipe to remove
  33. Long press gesture changed Old New Open contextual menu Select the item
  34. App UI Design Patterns
  35. Common App UI http://developer.android.com/design/get-started/ui-overview.html 1.Main Action Bar 2.View Control 3.Content Area 4.Split Action Bar
  36. General App Structure Top level views Category views Detail/edit view
  37. New in ICS 1.Navigation Bar 2.Action Bar 3.Multi-pane layouts 4.Selection http://developer.android.com/design/patterns/new-4-0.html
  38. Navigation Back Up In-app navigation system & in-app navigation http://developer.android.com/design/patterns/navigation.html
  39. Swipe Views Swiping Between Detail Views Swiping Between Tabs http://developer.android.com/design/patterns/swipe-views.html
  40. Action Bar http://developer.android.com/design/patterns/actionbar.html 1.App icon 2.View Control 3.Action Buttons 4.Action overflow
  41. Split Action Bars http://developer.android.com/design/patterns/actionbar.html 1.Main action bar 2.Top bar 3.Bottom Bar
  42. Multi-pane layouts Smartphone Tablet http://developer.android.com/design/patterns/multi-pane-layouts.html
  43. Selection Contextual action bar Dynamically adjust CAB actions http://developer.android.com/design/patterns/selection.html Long press on an item in list to select
  44. Notifications http://developer.android.com/design/patterns/notifications.html
  45. Do and Don’t
  46. Do make the large, obvious tap targets Touchable UI components are generally laid out along 48dp units. http://developer.android.com/design/style/metrics-grids.html http://www.slideshare.net/AndroidDev/android-ui-design-tips
  47. Do use screen density independent units (dp) http://developer.android.com/guide/practices/screens_support.html not density independent (px) density independent (dp)
  48. Do create versions of all resources for high density screens http://developer.android.com/design/style/devices-displays.html
  49. Do properly handle orientation changes http://developer.android.com/design/style/devices-displays.html Stretch/compress Stack Expand/collapse Show/hide
  50. Do follow Android icon guideline http://developer.android.com/design/style/iconography.html Launcher Launcher Action Bar
  51. Don't mimic UI elements from other platforms Android iOS Windows Phone 7 http://developer.android.com/design/patterns/pure-android.html
  52. Don't mimic UI elements from other platforms http://developer.android.com/design/patterns/pure-android.html Android iOS Windows Phone 7
  53. Don't use bottom tab bars http://developer.android.com/design/patterns/pure-android.html
  54. Don't use labeled back buttons on action bars http://developer.android.com/design/patterns/pure-android.html
  55. Don't use right-pointing carets on line items http://developer.android.com/design/patterns/pure-android.html
  56. Question?
  57. Thank You!

×