Android UI 4.0 Design Tips

8/12/2019 Android UI 4.0 Design Tips

1/58

Android 4.0 UI Design TipsJustin Lee


2/58


3/58

Evolution of Android

Gingerbread Ice Cream SandwichHoneycombAndroid 2.3 Android 3.0 Android 4.0


4/58

One OS for Smartphones & Tablets


5/58

Topics

Major UI Changes

Design Patterns

Do and Dont


6/58

Major UI Changes


7/58

Fight for Fragmentation


8/58

Android is not easy to learn


9/58

Inconsistent hardware buttons

is a big problem


10/58

ICS drop hardware buttons

Gingerbread ICS

screen


11/58

Software Buttons are dynamic

Landscape Left

Landscape Right


12/58


13/58

Whats missing?


14/58

Menu Button


15/58

Menu button is NOT longer a

primary button

Gingerbread ICS


16/58

Quiz: How to goto settings page?


17/58

Not to many people can get it by

themselves


18/58

ICS make the menu much

more easy to find


19/58

The menu button in legacy

app still available on ICS


20/58

But its time to say goodbye


21/58

Migrate the global actions to the

action bar & action overflow

Old New


22/58

Split action bar for contextual

actionsOld New


23/58


24/58

Back Button


25/58


26/58


27/58

Home Button


28/58

Home button perform too many

functions before ICS

tap

long press

tap


29/58

The only function of home

button on ICS is going home


30/58

How to goto a recent app?


31/58

Recents Button


32/58

Tap recents button to show

recent app list


33/58

The new recents screen

tap to switch

swipe to remove


34/58

Long press gesture changedOld New

Open contextual menu Select the item


35/58

App UI Design Patterns


36/58


37/58

General App Structure

Top level views

Category views

Detail/edit view


38/58


39/58

Navigation

Back Up

In-app navigationsystem & in-app

navigation


40/58

Swipe Views

Swiping

Between

Detail Views

SwipingBetween

Tabs


41/58

Action Bar

1.App icon

2.View Control

3.Action Buttons

4.Action overflow


42/58


43/58

Multi-pane layouts

Smartphone Tablet


44/58

Selection

Contextual action bar

Dynamically adjust CAB actionsLong press on an item in list to select


45/58


46/58

Do and Dont


47/58

Domake the large, obvious

tap targetsTouchable UI components are generally laid out along 48dp units.


48/58

Douse screen density

independent units (dp)

not density independent (px)

density independent (dp)


49/58

Docreate versions of all resources

for high density screens


50/58

Doproperly handle orientation changes

Stretch/compress

Stack

Expand/collapse

Show/hide


51/58

Dofollow Android icon guideline

LauncherLauncher

Action Bar


52/58

Don'tmimic UI elements

from other platforms

Android

iOS

Windows Phone 7

D ' i i UI l


53/58

Don'tmimic UI elements

from other platforms

Android

iOS

Windows Phone 7


54/58

Don'tuse bottom tab bars

D ' l b l d b k


55/58

Don'tuse labeled back

buttons on action bars

D ' i h i i


56/58

Don'tuse right-pointing

carets on line items


57/58

Question?


58/58

Thank You!

Android UI 4.0 Design Tips

Documents