Upload
justin-lee
View
104
Download
0
Tags:
Embed Size (px)
DESCRIPTION
這是我在Happy Designer Meetup 5演講的簡報。 內容包含Android 4.0在UI設計上的改變、設計訣竅與在Titanium Mobile內使用Javascript Module模擬ICS widget的方法。
Citation preview
Android 4.0 UI Design TipsJustin Lee
0�+)%�� �#.1$/(����� �����2 �#.1,&!-*�
�"'��������
����������������������������������� ���������
Evolution of Android
Gingerbread Ice Cream SandwichHoneycombAndroid 2.3 Android 3.0 Android 4.0
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 learn http://www.pocket-lint.com/news/40615/78-android-tips-beginners-set-up
Inconsistent hardware buttons is a big problem
ICS drop hardware buttons
Gingerbread ICS
screen
Software Buttons are dynamic
Landscape Left
Landscape Right
Back Home Recents
What’s missing?
Menu Button
Menu button is NOT longer a primary button
Gingerbread ICS
Quiz: How to goto settings page?
Not to many people can get it by themselves
ICS make the menu much more easy to find
The menu button in legacy app 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 the action bar & action overflow
Old New
Split action bar for contextual actions
Old New
Backwards compatibility
Legacy software
Legacy hardware
http://developer.android.com/design/patterns/compatibility.html
Back Button
The behavior of back button is inconsistent from user’s POV
?
In app navigation is much more predictable
Home Button
Home button perform too many functions before ICS
tap
long press
tap
The only function of home button on ICS is going home
How to goto a recent app?
Recents Button
Tap recents button to show recent app list
The new recents screen
tap to switch
swipe to remove
Long press gesture changedOld New
Open contextual menu Select the item
App UI Design Patterns
Common App UI
http://developer.android.com/design/get-started/ui-overview.html
1.Main Action Bar2.View Control3.Content Area4.Split Action Bar
General App StructureTop level views
Category views
Detail/edit view
New in ICS1.Navigation Bar
2.Action Bar
3.Multi-pane layouts
4.Selectionhttp://developer.android.com/design/patterns/new-4-0.html
Navigation
Back Up
In-app navigationsystem & in-app navigation
http://developer.android.com/design/patterns/navigation.html
Swipe ViewsSwiping Between Detail Views
Swiping Between Tabs
http://developer.android.com/design/patterns/swipe-views.html
Action Bar
http://developer.android.com/design/patterns/actionbar.html
1.App icon2.View Control3.Action Buttons4.Action overflow
Split Action Bars
http://developer.android.com/design/patterns/actionbar.html
1.Main action bar2.Top bar3.Bottom Bar
Multi-pane layouts
Smartphone Tablet
http://developer.android.com/design/patterns/multi-pane-layouts.html
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
Notifications
http://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://developer.android.com/design/style/metrics-grids.htmlhttp://www.slideshare.net/AndroidDev/android-ui-design-tips
Do use screen density independent units (dp)
http://developer.android.com/guide/practices/screens_support.html
not density independent (px)
density independent (dp)
Do create versions of all resources for high density screens
http://developer.android.com/design/style/devices-displays.html
Do properly handle orientation changes
http://developer.android.com/design/style/devices-displays.html
Stretch/compress
Stack
Expand/collapse
Show/hide
Do follow Android icon guideline
http://developer.android.com/design/style/iconography.html
LauncherLauncher
Action Bar
Don't mimic UI elements from other platforms
Android
iOS
Windows Phone 7
http://developer.android.com/design/patterns/pure-android.html
Don't mimic UI elements from other platforms
http://developer.android.com/design/patterns/pure-android.html
Android
iOS
Windows Phone 7
Don't use bottom tab bars
http://developer.android.com/design/patterns/pure-android.html
Don't use labeled back buttons on action bars
http://developer.android.com/design/patterns/pure-android.html
Don't use right-pointing carets on line items
http://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
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
Common JS Module
Preparing for assethttp://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html
Question?
Thank You!