• Like
  • Save
Android 4.0 UI design tips
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Android 4.0 UI design tips

  • 17,808 views
Published

Konstantinos Polychronis - Pinapps …

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
17,808
On SlideShare
0
From Embeds
0
Number of Embeds
27

Actions

Shares
Downloads
0
Comments
0
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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!