Android UI 4.0 Design Tips
Transcript of Android UI 4.0 Design Tips
-
8/12/2019 Android UI 4.0 Design Tips
1/58
Android 4.0 UI Design TipsJustin Lee
-
8/12/2019 Android UI 4.0 Design Tips
2/58
-
8/12/2019 Android UI 4.0 Design Tips
3/58
Evolution of Android
Gingerbread Ice Cream SandwichHoneycombAndroid 2.3 Android 3.0 Android 4.0
-
8/12/2019 Android UI 4.0 Design Tips
4/58
One OS for Smartphones & Tablets
-
8/12/2019 Android UI 4.0 Design Tips
5/58
Topics
Major UI Changes
Design Patterns
Do and Dont
-
8/12/2019 Android UI 4.0 Design Tips
6/58
Major UI Changes
-
8/12/2019 Android UI 4.0 Design Tips
7/58
Fight for Fragmentation
-
8/12/2019 Android UI 4.0 Design Tips
8/58
Android is not easy to learn
-
8/12/2019 Android UI 4.0 Design Tips
9/58
Inconsistent hardware buttons
is a big problem
-
8/12/2019 Android UI 4.0 Design Tips
10/58
ICS drop hardware buttons
Gingerbread ICS
screen
-
8/12/2019 Android UI 4.0 Design Tips
11/58
Software Buttons are dynamic
Landscape Left
Landscape Right
-
8/12/2019 Android UI 4.0 Design Tips
12/58
-
8/12/2019 Android UI 4.0 Design Tips
13/58
Whats missing?
-
8/12/2019 Android UI 4.0 Design Tips
14/58
Menu Button
-
8/12/2019 Android UI 4.0 Design Tips
15/58
Menu button is NOT longer a
primary button
Gingerbread ICS
-
8/12/2019 Android UI 4.0 Design Tips
16/58
Quiz: How to goto settings page?
-
8/12/2019 Android UI 4.0 Design Tips
17/58
Not to many people can get it by
themselves
-
8/12/2019 Android UI 4.0 Design Tips
18/58
ICS make the menu much
more easy to find
-
8/12/2019 Android UI 4.0 Design Tips
19/58
The menu button in legacy
app still available on ICS
-
8/12/2019 Android UI 4.0 Design Tips
20/58
But its time to say goodbye
-
8/12/2019 Android UI 4.0 Design Tips
21/58
Migrate the global actions to the
action bar & action overflow
Old New
-
8/12/2019 Android UI 4.0 Design Tips
22/58
Split action bar for contextual
actionsOld New
-
8/12/2019 Android UI 4.0 Design Tips
23/58
-
8/12/2019 Android UI 4.0 Design Tips
24/58
Back Button
-
8/12/2019 Android UI 4.0 Design Tips
25/58
-
8/12/2019 Android UI 4.0 Design Tips
26/58
-
8/12/2019 Android UI 4.0 Design Tips
27/58
Home Button
-
8/12/2019 Android UI 4.0 Design Tips
28/58
Home button perform too many
functions before ICS
tap
long press
tap
-
8/12/2019 Android UI 4.0 Design Tips
29/58
The only function of home
button on ICS is going home
-
8/12/2019 Android UI 4.0 Design Tips
30/58
How to goto a recent app?
-
8/12/2019 Android UI 4.0 Design Tips
31/58
Recents Button
-
8/12/2019 Android UI 4.0 Design Tips
32/58
Tap recents button to show
recent app list
-
8/12/2019 Android UI 4.0 Design Tips
33/58
The new recents screen
tap to switch
swipe to remove
-
8/12/2019 Android UI 4.0 Design Tips
34/58
Long press gesture changedOld New
Open contextual menu Select the item
-
8/12/2019 Android UI 4.0 Design Tips
35/58
App UI Design Patterns
-
8/12/2019 Android UI 4.0 Design Tips
36/58
-
8/12/2019 Android UI 4.0 Design Tips
37/58
General App Structure
Top level views
Category views
Detail/edit view
-
8/12/2019 Android UI 4.0 Design Tips
38/58
-
8/12/2019 Android UI 4.0 Design Tips
39/58
Navigation
Back Up
In-app navigationsystem & in-app
navigation
-
8/12/2019 Android UI 4.0 Design Tips
40/58
Swipe Views
Swiping
Between
Detail Views
SwipingBetween
Tabs
-
8/12/2019 Android UI 4.0 Design Tips
41/58
Action Bar
1.App icon
2.View Control
3.Action Buttons
4.Action overflow
-
8/12/2019 Android UI 4.0 Design Tips
42/58
-
8/12/2019 Android UI 4.0 Design Tips
43/58
Multi-pane layouts
Smartphone Tablet
-
8/12/2019 Android UI 4.0 Design Tips
44/58
Selection
Contextual action bar
Dynamically adjust CAB actionsLong press on an item in list to select
-
8/12/2019 Android UI 4.0 Design Tips
45/58
-
8/12/2019 Android UI 4.0 Design Tips
46/58
Do and Dont
-
8/12/2019 Android UI 4.0 Design Tips
47/58
Domake the large, obvious
tap targetsTouchable UI components are generally laid out along 48dp units.
-
8/12/2019 Android UI 4.0 Design Tips
48/58
Douse screen density
independent units (dp)
not density independent (px)
density independent (dp)
-
8/12/2019 Android UI 4.0 Design Tips
49/58
Docreate versions of all resources
for high density screens
-
8/12/2019 Android UI 4.0 Design Tips
50/58
Doproperly handle orientation changes
Stretch/compress
Stack
Expand/collapse
Show/hide
-
8/12/2019 Android UI 4.0 Design Tips
51/58
Dofollow Android icon guideline
LauncherLauncher
Action Bar
-
8/12/2019 Android UI 4.0 Design Tips
52/58
Don'tmimic UI elements
from other platforms
Android
iOS
Windows Phone 7
D ' i i UI l
-
8/12/2019 Android UI 4.0 Design Tips
53/58
Don'tmimic UI elements
from other platforms
Android
iOS
Windows Phone 7
-
8/12/2019 Android UI 4.0 Design Tips
54/58
Don'tuse bottom tab bars
D ' l b l d b k
-
8/12/2019 Android UI 4.0 Design Tips
55/58
Don'tuse labeled back
buttons on action bars
D ' i h i i
-
8/12/2019 Android UI 4.0 Design Tips
56/58
Don'tuse right-pointing
carets on line items
-
8/12/2019 Android UI 4.0 Design Tips
57/58
Question?
-
8/12/2019 Android UI 4.0 Design Tips
58/58
Thank You!