Android 4.0 UI Design TipsJustin Lee
Evolution of AndroidAndroid 2.3    Android 3.0     Android 4.0 Gingerbread    Honeycomb    Ice Cream Sandwich
One OS for Smartphones & Tablets
TopicsMajor UI ChangesDesign PatternsDo and Don’tICS widgets in Titanium Mobile
Major UI Changes
Fight for Fragmentation
Android is not easy to learnhttp://www.pocket-lint.com/news/40615/78-android-tips-beginners-set-up
Inconsistent hardware buttonsis a big problem
ICS drop hardware buttons                screen  Gingerbread            ICS
Software Buttons are dynamic Landscape Left  Landscape Right
Back   Home   Recents
What’s missing?
Menu Button
Menu button is NOT longer aprimary button  Gingerbread       ICS
Quiz: How to goto settings page?
Not to many people can get it bythemselves
ICS make the menu muchmore easy to find
The menu button in legacyapp still available on ICS
But it’s time to say goodbyehttp://android-developers.blogspot.com/2012/01/say-goodbye-to-menu-button.html
Migrate the global actions to theaction bar & action overflow      Old                 New
Split action bar for contextualactions      Old               New
Backwards compatibility                                                                  Legacy hardware                  ...
Back Button
The behavior of back buttonis inconsistent from user’s POV                         ?
In app navigation is much morepredictable
Home Button
Home button perform too manyfunctions before ICS                    tap              tap      long press
The only function of homebutton on ICS is going home
How to goto a recent app?
Recents Button
Tap recents button to showrecent app list
The new recents screen            tap to switch            swipe to remove
Long press gesture changed        Old                 NewOpen contextual menu   Select the item
App UI Design Patterns
Common App UI                                                           1.Main Action Bar                                 ...
General App Structure                   Top level views                   Category views                   Detail/edit view
New in ICS                                                    1.Navigation Bar                                            ...
Navigation                                  Back                                Up                    system & in-app     ...
Swipe Views       Swiping       Between       Detail Views       Swiping       Between       Tabshttp://developer.android....
Action Bar                                           1.App icon                                           2.View Control  ...
Split Action Bars                                                              1.Main action bar                          ...
Multi-pane layouts             Smartphone                                                Tablethttp://developer.android.co...
Selection                                          Contextual action barLong press on an item in list to select           ...
Notificationshttp://developer.android.com/design/patterns/notifications.html
Do and Don’t
Do make the large, obvious  tap targets            Touchable UI components are generally laid out along 48dp units.http://...
Do use screen density  independent units (dp)                                   not density independent (px)              ...
Do create versions of all resources  for high density screenshttp://developer.android.com/design/style/devices-displays.html
Do properly handle orientation changes                            Stretch/compress                      Expand/collapse   ...
Do follow Android icon guideline              Launcher                   Launcher                  Action Barhttp://develo...
Dont mimic UI elements  from other platforms                                  Android                                     ...
Dont mimic UI elements  from other platforms                                 Android                                      ...
Dont use bottom tab barshttp://developer.android.com/design/patterns/pure-android.html
Dont use labeled back  buttons on action barshttp://developer.android.com/design/patterns/pure-android.html
Dont use right-pointing  carets on line itemshttp://developer.android.com/design/patterns/pure-android.html
ICS widgets in Titanium Mobile
There is no action bar yethttps://jira.appcelerator.org/browse/TIMOB-2371
what to do?    Simulate it       Extend the API  Javascript Module    Native Module     Javascript       Java + Javascript
Common JS Moduleexports - a free variable within a module, to which multiple propertiesmay be added to create a public int...
Preparing for assethttp://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html
Question?
Thank You!
2012/02/15 Android 4.0 UI Design Tips@happy designer meetup
Upcoming SlideShare
Loading in …5
×

2012/02/15 Android 4.0 UI Design Tips@happy designer meetup

4,027 views

Published on

這是我在Happy Designer Meetup 5演講的簡報。
內容包含Android 4.0在UI設計上的改變、設計訣竅與在Titanium Mobile內使用Javascript Module模擬ICS widget的方法。

Published in: Design, Technology
  • Be the first to comment

2012/02/15 Android 4.0 UI Design Tips@happy designer meetup

  1. 1. Android 4.0 UI Design TipsJustin Lee
  2. 2. Evolution of AndroidAndroid 2.3 Android 3.0 Android 4.0 Gingerbread Honeycomb Ice Cream Sandwich
  3. 3. One OS for Smartphones & Tablets
  4. 4. TopicsMajor UI ChangesDesign PatternsDo and Don’tICS widgets in Titanium Mobile
  5. 5. Major UI Changes
  6. 6. Fight for Fragmentation
  7. 7. Android is not easy to learnhttp://www.pocket-lint.com/news/40615/78-android-tips-beginners-set-up
  8. 8. Inconsistent hardware buttonsis a big problem
  9. 9. ICS drop hardware buttons screen Gingerbread ICS
  10. 10. Software Buttons are dynamic Landscape Left Landscape Right
  11. 11. Back Home Recents
  12. 12. What’s missing?
  13. 13. Menu Button
  14. 14. Menu button is NOT longer aprimary button Gingerbread ICS
  15. 15. Quiz: How to goto settings page?
  16. 16. Not to many people can get it bythemselves
  17. 17. ICS make the menu muchmore easy to find
  18. 18. The menu button in legacyapp still available on ICS
  19. 19. But it’s time to say goodbyehttp://android-developers.blogspot.com/2012/01/say-goodbye-to-menu-button.html
  20. 20. Migrate the global actions to theaction bar & action overflow Old New
  21. 21. Split action bar for contextualactions Old New
  22. 22. Backwards compatibility Legacy hardware Legacy softwarehttp://developer.android.com/design/patterns/compatibility.html
  23. 23. Back Button
  24. 24. The behavior of back buttonis inconsistent from user’s POV ?
  25. 25. In app navigation is much morepredictable
  26. 26. Home Button
  27. 27. Home button perform too manyfunctions before ICS tap tap long press
  28. 28. The only function of homebutton on ICS is going home
  29. 29. How to goto a recent app?
  30. 30. Recents Button
  31. 31. Tap recents button to showrecent app list
  32. 32. The new recents screen tap to switch swipe to remove
  33. 33. Long press gesture changed Old NewOpen contextual menu Select the item
  34. 34. App UI Design Patterns
  35. 35. Common App UI 1.Main Action Bar 2.View Control 3.Content Area 4.Split Action Barhttp://developer.android.com/design/get-started/ui-overview.html
  36. 36. General App Structure Top level views Category views Detail/edit view
  37. 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. 38. Navigation Back Up system & in-app In-app navigation navigationhttp://developer.android.com/design/patterns/navigation.html
  39. 39. Swipe Views Swiping Between Detail Views Swiping Between Tabshttp://developer.android.com/design/patterns/swipe-views.html
  40. 40. Action Bar 1.App icon 2.View Control 3.Action Buttons 4.Action overflowhttp://developer.android.com/design/patterns/actionbar.html
  41. 41. Split Action Bars 1.Main action bar 2.Top bar 3.Bottom Barhttp://developer.android.com/design/patterns/actionbar.html
  42. 42. Multi-pane layouts Smartphone Tablethttp://developer.android.com/design/patterns/multi-pane-layouts.html
  43. 43. Selection Contextual action barLong press on an item in list to select Dynamically adjust CAB actions http://developer.android.com/design/patterns/selection.html
  44. 44. Notificationshttp://developer.android.com/design/patterns/notifications.html
  45. 45. Do and Don’t
  46. 46. 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-tipshttp://developer.android.com/design/style/metrics-grids.html
  47. 47. Do use screen density independent units (dp) not density independent (px) density independent (dp)http://developer.android.com/guide/practices/screens_support.html
  48. 48. Do create versions of all resources for high density screenshttp://developer.android.com/design/style/devices-displays.html
  49. 49. Do properly handle orientation changes Stretch/compress Expand/collapse Stack Show/hidehttp://developer.android.com/design/style/devices-displays.html
  50. 50. Do follow Android icon guideline Launcher Launcher Action Barhttp://developer.android.com/design/style/iconography.html
  51. 51. Dont mimic UI elements from other platforms Android iOS Windows Phone 7http://developer.android.com/design/patterns/pure-android.html
  52. 52. Dont mimic UI elements from other platforms Android iOS Windows Phone 7http://developer.android.com/design/patterns/pure-android.html
  53. 53. Dont use bottom tab barshttp://developer.android.com/design/patterns/pure-android.html
  54. 54. Dont use labeled back buttons on action barshttp://developer.android.com/design/patterns/pure-android.html
  55. 55. Dont use right-pointing carets on line itemshttp://developer.android.com/design/patterns/pure-android.html
  56. 56. ICS widgets in Titanium Mobile
  57. 57. There is no action bar yethttps://jira.appcelerator.org/browse/TIMOB-2371
  58. 58. what to do? Simulate it Extend the API Javascript Module Native Module Javascript Java + Javascript
  59. 59. Common JS Moduleexports - a free variable within a module, to which multiple propertiesmay be added to create a public interfacemodule.exports - an object within a module, which may beREPLACED by an object representing the public interface to themodule
  60. 60. Preparing for assethttp://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html
  61. 61. Question?
  62. 62. Thank You!

×