Presentation is loading. Please wait.

Presentation is loading. Please wait.

Android UI Patterns by Peter Pascale, Vladan Pulec.

Similar presentations


Presentation on theme: "Android UI Patterns by Peter Pascale, Vladan Pulec."— Presentation transcript:

1

2 Android UI Patterns by Peter Pascale, Vladan Pulec

3 Agenda Android UI History Android 4 UI Highlights Android UI Patterns

4 Android Version History Look and Feel Formalized 2009

5 Android Version History 2010 Google IO Dashboard UI Pattern

6 Android Version History 2011 Google IO Tablet Patterns No More Dashboard

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

8 Android Market Share

9

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

11 UI Design Pattern Goals

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

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

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

15 Navigation in Android 4.0 Software Navigation Buttons System Back System Home Recents No Search or Menu

16 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

17 Action Bar - Examples

18 Action Bar Consistency Between Phone and Tablet

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

20 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

21 Action Bar Multi-Pane Layout Carousel Quick Actions Dashboard Workspaces

22 Multi-Pane Layout

23

24 Multi-Pane Layout - Orientation Change Preserve Functional Parity

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

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

27 Carousel - "Beyond the List" YouTube Video Wall

28 Carousel - Implementation CarouselView - Renderscript - Ready for Customization Gallery - Single Items, Single Images - Not Full Screen http://j.mp/io2011-carousel-sample

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

30 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

31 Workspaces Useful when dealing with a lot of data Clear navigation

32 Summary

33 32 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 ppt 宝藏 _www.pptbz.com


Download ppt "Android UI Patterns by Peter Pascale, Vladan Pulec."

Similar presentations


Ads by Google