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

  • 3,304 views
Uploaded on

這是我在Happy Designer Meetup 5演講的簡報。 …

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

More in: Design , 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
3,304
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
105
Comments
0
Likes
4

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 TipsJustin Lee
  • 2. Evolution of AndroidAndroid 2.3 Android 3.0 Android 4.0 Gingerbread Honeycomb Ice Cream Sandwich
  • 3. One OS for Smartphones & Tablets
  • 4. TopicsMajor UI ChangesDesign PatternsDo and Don’tICS widgets in Titanium Mobile
  • 5. Major UI Changes
  • 6. Fight for Fragmentation
  • 7. Android is not easy to learnhttp://www.pocket-lint.com/news/40615/78-android-tips-beginners-set-up
  • 8. Inconsistent hardware buttonsis a big problem
  • 9. ICS drop hardware buttons screen Gingerbread ICS
  • 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 aprimary button Gingerbread ICS
  • 15. Quiz: How to goto settings page?
  • 16. Not to many people can get it bythemselves
  • 17. ICS make the menu muchmore easy to find
  • 18. The menu button in legacyapp still available on ICS
  • 19. But it’s time to say goodbyehttp://android-developers.blogspot.com/2012/01/say-goodbye-to-menu-button.html
  • 20. Migrate the global actions to theaction bar & action overflow Old New
  • 21. Split action bar for contextualactions Old New
  • 22. Backwards compatibility Legacy hardware Legacy softwarehttp://developer.android.com/design/patterns/compatibility.html
  • 23. Back Button
  • 24. The behavior of back buttonis inconsistent from user’s POV ?
  • 25. In app navigation is much morepredictable
  • 26. Home Button
  • 27. Home button perform too manyfunctions before ICS tap tap long press
  • 28. The only function of homebutton on ICS is going home
  • 29. How to goto a recent app?
  • 30. Recents Button
  • 31. Tap recents button to showrecent app list
  • 32. The new recents screen tap to switch swipe to remove
  • 33. Long press gesture changed Old NewOpen contextual menu Select the item
  • 34. App UI Design Patterns
  • 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. 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 system & in-app In-app navigation navigationhttp://developer.android.com/design/patterns/navigation.html
  • 39. Swipe Views Swiping Between Detail Views Swiping Between Tabshttp://developer.android.com/design/patterns/swipe-views.html
  • 40. Action Bar 1.App icon 2.View Control 3.Action Buttons 4.Action overflowhttp://developer.android.com/design/patterns/actionbar.html
  • 41. Split Action Bars 1.Main action bar 2.Top bar 3.Bottom Barhttp://developer.android.com/design/patterns/actionbar.html
  • 42. Multi-pane layouts Smartphone Tablethttp://developer.android.com/design/patterns/multi-pane-layouts.html
  • 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. Notificationshttp://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://www.slideshare.net/AndroidDev/android-ui-design-tipshttp://developer.android.com/design/style/metrics-grids.html
  • 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. Do create versions of all resources for high density screenshttp://developer.android.com/design/style/devices-displays.html
  • 49. Do properly handle orientation changes Stretch/compress Expand/collapse Stack Show/hidehttp://developer.android.com/design/style/devices-displays.html
  • 50. Do follow Android icon guideline Launcher Launcher Action Barhttp://developer.android.com/design/style/iconography.html
  • 51. Dont mimic UI elements from other platforms Android iOS Windows Phone 7http://developer.android.com/design/patterns/pure-android.html
  • 52. Dont mimic UI elements from other platforms Android iOS Windows Phone 7http://developer.android.com/design/patterns/pure-android.html
  • 53. Dont use bottom tab barshttp://developer.android.com/design/patterns/pure-android.html
  • 54. Dont use labeled back buttons on action barshttp://developer.android.com/design/patterns/pure-android.html
  • 55. Dont use right-pointing carets on line itemshttp://developer.android.com/design/patterns/pure-android.html
  • 56. ICS widgets in Titanium Mobile
  • 57. There is no action bar yethttps://jira.appcelerator.org/browse/TIMOB-2371
  • 58. what to do? Simulate it Extend the API Javascript Module Native Module Javascript Java + Javascript
  • 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. Preparing for assethttp://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html
  • 61. Question?
  • 62. Thank You!