Manikantan K

Manikantan.k@samsung.com@manikantan_k

New and emerging design patterns

ICS- New UX guidelines

Android 4.0 or Ice cream Sandwich brought a design paradigm that uniteddesign patterns from Gingerbread and Honeycomb.Apart from that, it brings its own goodness.

ICS- The big changes

Navigation Bar Action Bar

Multi pane layouts Selection options on Action Bar

Ex. Google Reader app

Gingerbread ICS onwards

Ex. Google Reader app

ICS- General App UI

Action Bar app/screen title with first level actions

Top bar

Bottom bar for second level of actions

ICS- Navigation Bar change

Nexus S Galaxy Nexus

Action Bar

Action Bar

ActionBar

App Navigation - Tabs

•You expect your app's users to switch views frequently.•You have a limited number of up to three top-level views.•You want the user to be highly aware of the alternate views.

App Navigation - Spinner

•You don't want to give up the vertical screen real estate for a dedicated tab bar.•The user is switching between views of the same data set (for example: calendar events viewed by day, week, or month) or data sets of the same type (such as content for two different accounts).

App Navigation Navigation Drawer

•You don't want to give up the vertical screen real estate for a dedicated tab bar.•You have a large number of top-level views.•You want to provide direct access to screens on lower levels.•You want to provide quick navigation to views which don't have direct relationships between each other.•You have particularly deep navigation branches.

Navigation Back and Up

Up takes you one-step above in app structure

Multipane layouts / Fragments

Selection options in Action Bar

Some resources

http://developer.android.com/training/design-navigation/index.htmlhttp://developer.android.com/design/patterns/navigation-drawer.htmlhttp://www.mobile-patterns.com/

http://mobile.tutsplus.com/tutorials/android/android-sdk-using-fragments/http://mobile.tutsplus.com/tutorials/android/android-sdk_fragments/http://marakana.com/s/post/1250/android_fragments_tutorialhttp://developer.android.com/training/multiscreen/index.html