Android 4.

0 UI Design Tips
Justin Lee
@[|j g[@Q@g
ulOo||ecloqg[@Q[QQ
@ Jcs|lo tee
www.|ls18.com
|ls18qmol|.com
|wl||ec |ls18
Evolution of Android
Gingerbread Ice Cream Sandwich Honeycomb
Android 2.3 Android 3.0 Android 4.0
One OS for Smartphones & Tablets
Topics
Major UI Changes
Design Patterns
Do and Dont
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
Whats 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 nd
The menu button in legacy
app still available on ICS
But its time to say goodbye
http://android-developers.blogspot.com/2012/01/say-goodbye-to-menu-button.html
Migrate the global actions to the
action bar & action overow
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 users 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 changed
Old 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 Bar
2.View Control
3.Content Area
4.Split Action Bar
General App Structure
Top level views
Category views
Detail/edit view
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
Navigation
Back Up
In-app navigation
system & in-app
navigation
http://developer.android.com/design/patterns/navigation.html
Swipe Views
Swiping
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 icon
2.View Control
3.Action Buttons
4.Action overow
Split Action Bars
http://developer.android.com/design/patterns/actionbar.html
1.Main action bar
2.Top bar
3.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
Notications
http://developer.android.com/design/patterns/notications.html
Do and Dont
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.html
http://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
Launcher
Launcher
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
Question?
Thank You!