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

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
ICS widgets in Titanium Mobile

6. Major UI Changes

7. Fight for Fragmentation

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

45. Notifications
http://developer.android.com/design/patterns/notifications.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. ICS widgets in Titanium Mobile

58. There is no action bar yet
https://jira.appcelerator.org/browse/TIMOB-2371

59. what to do?
Simulate it Extend the API
Javascript Module Native Module
Javascript Java + Javascript

60. Common JS Module
exports - a free variable within a module, to which multiple properties
may be added to create a public interface
module.exports - an object within a module, which may be
REPLACED by an object representing the public interface to the
module

61. Preparing for asset
http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html

62. Question?

63. Thank You!