Android UI Patterns by Peter Pascale Vladan Pulec

Android UI Patterns by Peter Pascale, Vladan Pulec

Agenda Android UI History Android 4 UI Highlights Android UI Patterns

Android Version History Look and Feel Formalized 2009

Android Version History 2010 Google IO Dashboard UI Pattern

Android Version History 2011 Google IO Tablet Patterns No More Dashboard

Android Version History Ice Cream Sandwich October 19 2010 Honeycomb UI - Unification No More Hardware Buttons

Android Market Share

Android Market Share

Android Versions - Reality Source: developer. android. com As of November 3, 2011

UI Design Pattern Goals

UI Design Goals Related to Patterns Stay Consistent Use Visual Hierarchy Value Simplicity Pay Attention to Patterns

Tablet vs. Phone User Experience Users hold and interact with phones and tablets differently UI needs to be adaptive to support user interaction

Android 4. 0 UI Features Simplified Look and Feel Unified Tablet/Phone Platform System Bar and Action Bar Virtual Navigation Buttons No Hardware Buttons

Navigation in Android 4. 0 Software Navigation Buttons System Back System Home Recents No Search or Menu

Action Bar Dedicated Real Estate at the Top of Each Screen Make Frequent Actions Prominent Support Navigation Indicate Current Location in App Consistent Between Tablets and Phones Provide Branding

Action Bar - Examples

Action Bar Consistency Between Phone and Tablet

Action Bar - Antipatterns Ignoring the "Where - See - Do" Best Practice Button controls at the bottom of the screen Inconsistent across different applications

Action Bar - Summary Replaces traditional title bar Makes frequently used actions prominent Convenient means of handling menu and search Dedicated, persistent real estate Displays application icon together with the activity title

Action Bar Multi-Pane Layout Carousel Quick Actions Dashboard Workspaces

Multi-Pane Layout

Multi-Pane Layout

Multi-Pane Layout - Orientation Change Preserve Functional Parity

Fragment Basics Behavior. java Layout . xml or programatic. . . or not at all. . .

Carousel - "Beyond the List" Break the Monotony of List Views

Carousel - "Beyond the List" You. Tube Video Wall

Carousel - Implementation Carousel. View - Renderscript - Ready for Customization Gallery - Single Items, Single Images - Not Full Screen http: //j. mp/io 2011 -carousel-sample

Quick Actions Easy access to contextual actions Practical even for limited realestate User easily sees context even when quick action is open

Dashboard Good application entry point Takes a lot of real estate May appear that application has limited functionality May be overwhelming to a new user

Workspaces Useful when dealing with a lot of data Clear navigation

Summary

PPT宝藏致力于优秀的ppt分享 PPT模板下载 http: //www. pptbz. com/ PPT素材下载 http: //www. pptbz. com/pptshucai/ PPT背景图片 http: //www. pptbz. com/pptpic/ PPT课件下载 http: //www. pptbz. com/kejian/ 更多精美ppt下载请点击：ppt宝藏_www. pptbz. com 32