Android 4.0 UI Design Tips
105 likes54,029 views
The document discusses UI design tips for Android 4.0 Ice Cream Sandwich. It covers major UI changes in ICS like software buttons, the removal of the menu button, and new navigation patterns. It also outlines common app design patterns in ICS like the action bar, split action bars, and multi-pane layouts. The document provides recommendations to use Android design best practices like touch targets of 48dp and handling orientation changes properly, as well as what to avoid like bottom tab bars and non-Android design elements.
![[SwiftPH + PADC Meetup - May 2019] Mobile Interface Guidelines Comparison (iO...](https://cdn.slidesharecdn.com/ss_thumbnails/swiftph-mobileinterfaceguidelines-190522010444-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (20)
Viewers also liked (20)
Ad
Similar to Android 4.0 UI Design Tips (20)
![[PBO] Pertemuan 12 - Pemrograman Android](https://cdn.slidesharecdn.com/ss_thumbnails/pbopertemuan12-pemrogramanandroid-181217234438-thumbnail.jpg?width=560&fit=bounds)
Ad
More from Justin Lee (20)
![[ICOS2013] Appcelerator Titanium簡介](https://cdn.slidesharecdn.com/ss_thumbnails/20130427appceleratortitanium-130426131856-phpapp02-thumbnail.jpg?width=560&fit=bounds)
![20110525[Taipei GTUG] titanium mobile簡介](https://cdn.slidesharecdn.com/ss_thumbnails/20110525titaniummobile-110601223227-phpapp02-thumbnail.jpg?width=560&fit=bounds)
Recently uploaded (20)
Android 4.0 UI Design Tips
- 1. Android 4.0 UI Design Tips Justin Lee
- 3. Evolution of Android Android 2.3 Android 3.0 Android 4.0 Gingerbread Honeycomb Ice Cream Sandwich
- 4. One OS for Smartphones & Tablets
- 5. Topics Major UI Changes Design Patterns Do and Don’t
- 8. Android is not easy to learn http://www.pocket-lint.com/news/40615/78-android-tips-beginners-set-up
- 9. Inconsistent hardware buttons is a big problem
- 10. ICS drop hardware buttons screen Gingerbread ICS
- 11. Software Buttons are dynamic Landscape Left Landscape Right
- 12. Back Home Recents
- 13. What’s missing?
- 14. Menu Button
- 15. Menu button is NOT longer a primary button Gingerbread ICS
- 16. Quiz: How to goto settings page?
- 17. Not to many people can get it by themselves
- 18. ICS make the menu much more easy to find
- 19. The menu button in legacy app still available on ICS
- 20. But it’s time to say goodbye http://android-developers.blogspot.com/2012/01/say-goodbye-to-menu-button.html
- 21. Migrate the global actions to the action bar & action overflow Old New
- 22. Split action bar for contextual actions Old New
- 23. Backwards compatibility Legacy hardware Legacy software http://developer.android.com/design/patterns/compatibility.html
- 24. Back Button
- 25. The behavior of back button is inconsistent from user’s POV ?
- 26. In app navigation is much more predictable
- 27. Home Button
- 28. Home button perform too many functions before ICS tap tap long press
- 29. The only function of home button on ICS is going home
- 30. How to goto a recent app?
- 31. Recents Button
- 32. Tap recents button to show recent app list
- 33. The new recents screen tap to switch swipe to remove
- 34. Long press gesture changed Old New Open contextual menu Select the item
- 35. App UI Design Patterns
- 36. Common App UI 1.Main Action Bar 2.View Control 3.Content Area 4.Split Action Bar http://developer.android.com/design/get-started/ui-overview.html
- 37. General App Structure Top level views Category views Detail/edit view
- 38. 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
- 39. Navigation Back Up system & in-app In-app navigation navigation http://developer.android.com/design/patterns/navigation.html
- 40. Swipe Views Swiping Between Detail Views Swiping Between Tabs http://developer.android.com/design/patterns/swipe-views.html
- 41. Action Bar 1.App icon 2.View Control 3.Action Buttons 4.Action overflow http://developer.android.com/design/patterns/actionbar.html
- 42. Split Action Bars 1.Main action bar 2.Top bar 3.Bottom Bar http://developer.android.com/design/patterns/actionbar.html
- 43. Multi-pane layouts Smartphone Tablet http://developer.android.com/design/patterns/multi-pane-layouts.html
- 44. Selection Contextual action bar Long press on an item in list to select Dynamically adjust CAB actions http://developer.android.com/design/patterns/selection.html
- 46. Do and Don’t
- 47. Do make the large, obvious tap targets Touchable UI components are generally laid out along 48dp units. http://www.slideshare.net/AndroidDev/android-ui-design-tips http://developer.android.com/design/style/metrics-grids.html
- 48. Do use screen density independent units (dp) not density independent (px) density independent (dp) http://developer.android.com/guide/practices/screens_support.html
- 49. Do create versions of all resources for high density screens http://developer.android.com/design/style/devices-displays.html
- 50. Do properly handle orientation changes Stretch/compress Expand/collapse Stack Show/hide http://developer.android.com/design/style/devices-displays.html
- 51. Do follow Android icon guideline Launcher Launcher Action Bar http://developer.android.com/design/style/iconography.html
- 52. Don't mimic UI elements from other platforms Android iOS Windows Phone 7 http://developer.android.com/design/patterns/pure-android.html
- 53. Don't mimic UI elements from other platforms Android iOS Windows Phone 7 http://developer.android.com/design/patterns/pure-android.html
- 54. Don't use bottom tab bars http://developer.android.com/design/patterns/pure-android.html
- 55. Don't use labeled back buttons on action bars http://developer.android.com/design/patterns/pure-android.html
- 56. Don't use right-pointing carets on line items http://developer.android.com/design/patterns/pure-android.html
- 57. Question?
- 58. Thank You!