《全英文Android 介绍PPT.ppt》由会员分享，可在线阅读，更多相关《全英文Android 介绍PPT.ppt（53页珍藏版）》请在三一办公上搜索。
1、Android UI Patterns,byPeter Pascale,Vladan Pulec,Agenda,Android UI HistoryAndroid 4 UI HighlightsAndroid UI Patterns,Android Version History,Look and FeelFormalized2009,Android Version History,2010 Google IODashboard UI Pattern,Android Version History,2011 Google IOTablet PatternsNo MoreDashboard,An
2、droid Version History,Ice Cream SandwichOctober 19 2010Honeycomb UI-UnificationNo More Hardware Buttons,Android Market Share,Android Market Share,Android Versions-Reality,Source:As of November 3,2011,UI Design Pattern Goals,UI Design Goals Related to Patterns,Stay ConsistentUse Visual HierarchyValue
3、 SimplicityPay Attention to Patterns,Tablet vs.Phone User Experience,Users hold and interact with phones and tablets differentlyUI needs to be adaptive to support user interaction,Android 4.0 UI Features,Simplified Look and FeelUnified Tablet/Phone PlatformSystem Bar and Action BarVirtual Navigation
4、 ButtonsNo Hardware Buttons,Navigation in Android 4.0,Software Navigation Buttons System Back System Home Recents,No Search or Menu,Android UI Patterns,Action BarMulti-Pane LayoutCarouselQuick ActionsDashboardWorkspaces,Action BarMulti-Pane LayoutCarouselQuick ActionsDashboardWorkspaces,Action Bar,D
5、edicated 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-Sections,Where am I?application icon or logocan be used for upward navigation,Action Bar-Sections,What
6、can I see?view details(can have a navigation component)can include tabs,dropdowns,breadcrumbs,Action Bar-Sections,What can I do?action buttons(icons,text,or both)most important or frequently used actionsnew place for Search and Menu,Action Bar-Examples,Action BarConsistency Between Phone and Tablet,
7、Action Bar-Antipatterns,Ignoring the Where-See-Do Best PracticeButton controls at the bottom of the screenInconsistent across different applications,ActionBar Code Demo,Action Bar-Summary,Replaces traditional title barMakes frequently used actions prominentConvenient means of handling menu and searc
8、hDedicated,persistent real estateDisplays application icon together with the activity title,Action BarMulti-Pane LayoutCarouselQuick ActionsDashboardWorkspaces,Multi-Pane Layout,Multi-Pane Layout,Multi-Pane Layout-Orientation Change,PreserveFunctionalParity,Implementing Multi-Pane Layout,Fragments.T
9、he Building BlocksThe Resource System.The Dynamic AssemblerBackwards Compatibility Library.support 1.6+,Fragments,Fragments,Reusable Section of an Activity,MasterList Fragment,Detail Fragment,Fragment Basics,BehaviorLayout,.xml,.java,or programatic.or not at all.,Resource System Changes,Old Layout C
10、ategories-Since 1.6:res/layout/my-layout.xml-TypicalOrres/layout-land/my-layout.xmlres/layout-port/my-layout.xml,Resource System Changes,Honeycomb Layout Categories-3.0-3.1:Size small,normal,large,xlargeOrientation port,landEx:res/layout/my-layout.xmlres/layout-xlarge-land/my-layout.xmlres/layout-xl
11、arge-port/my-layout.xml,Resource System Changes,Honeycomb Layout Categories-3.0-3.1:Size small,normal,large,xlargeOrientation port,landEx:res/layout/my-layout.xmlres/layout-xlarge-land/my-layout.xmlres/layout-xlarge-port/my-layout.xml,Deprecated,Resource System Changes,New Layout Categories-3.2+:All
12、ows Specific Screen Size Designation-Not Just Categoriesres/layout/main_activity.xml Phonesres/layout-sw600dp/main_activity.xml 7 Tabletsres/layout-sw720dp/main_activity.xml 10 Tabletssw=Smallest Widthw=Available Min Widthh=Available Min Heighthttp:/,Backwards Compatibility Library,http:/,Multi-Pane
13、 Layout Code Demo,https:/,Action BarMulti-Pane LayoutCarouselQuick ActionsDashboardWorkspaces,Carousel-Beyond the List,Break the Monotony of List Views,Carousel-Beyond the List,YouTube Video Wall,Carousel-Implementation,CarouselView-Renderscript-Ready forCustomizationGallery-Single Items,Single Imag
14、es-Not Full Screen,http:/j.mp/io2011-carousel-sample,Action BarMulti-Pane LayoutCarouselQuick ActionsDashboardWorkspaces,Quick Actions,Easy access to contextual actionsPractical even for limited real-estateUser easily sees context even when quick action is open,Action BarMulti-Pane LayoutCarouselQui
15、ck ActionsDashboardWorkspaces,Dashboard,Good application entry pointTakes a lot of real estateMay appear that application has limited functionalityMay be overwhelming to a new user,Action BarMulti-Pane LayoutCarouselQuick ActionsDashboardWorkspaces,Workspaces,Useful when dealing with a lot of dataClear navigation,Summary,Android UI Patterns,Resources,http:/en.wikipedia.org/wiki/User_interface_designhttp:/&Alienhttp:/Picshttp:/,谢谢观赏,WPS Office,Make Presentation much more fun,WPS官方微博kingsoftwps,
