课件20讲交互设计-第二十

In ctionDesign（主讲 实践篇2为移动应用而设计（PartIII） 本讲内容概①ControlIdioms ①移动端交互设移动端设备独特的交互方 applicationssharemanycontrolswithdesktopandwebapplications.移动端设备独特的交互方However,duetotheuniqueformfactorandmulti-touchinputtechnologyemployedbythemajorityof devices,theyhaveevolvedauniquesetofidiomsespeciallysuitedto appuse.移动端设备独特的交互方移动端独特的交互方式：Browsecontrols appsareoptimizedforDuetothelimitationsoftheformfactorandinputoptions,itismucheasieron devicestobrowseandselectcontentthantoinputdata.移动端独特的交互方式：Browsecontrols移动端独特的浏览控Listsarethemostfrequentlyusedpatternfororganizingcontentonhandheldformattouchscreen移动端独特的浏览控Listcontentoftenincludeslineitemsorblocksoftext,controls(suchascheckboxesorbuttons)andtheirlabels,andimageor 和按钮一类的控件和这些控件的，以及或者视移动端独特的浏览控Listviewsoftenworkinconjunctionwithtabbarstoprovideaccesstomultiplescreensofcontent,eachinitsseparaymaintainedlist.列表通常与栏结合在一起使用，用于浏览不同屏幕移动端独特的浏览控移动端独特的浏览控ListscaneitherbefiniteinlengthorallowinfiniteThiskindofscrollingpresentsaninitialsubsetofitemsfromaverylargesetandthenpresentsanadditionalblockofresultseachtimetheuserreachesthebottomofthelist.列表还允许用户在浏览到列表底部时加 的内容移动端独特的浏览控Gridsareusedtoorganizecontentsuchasapps,thumbnails,andfunctioniconsintoregularrowsand网格主要用于在行与列上布局App、缩略图和功能图标移动端独特的浏览控移动端独特的浏览控Withinanapp,gridviews(alsocalledgalleryviews)oftenareusedtopresentmediaobjects.Theseincludephotos, s,andmusicalbums,orsmall,encapsulatedcards. 移动端独特的浏览控移动端独特的浏览控移动端独特的浏览控移动端独特的浏览控ContentContentcarouselslivewithinasinglescreenlayoutbutusethesametypeofgesturetoallownavigationbetweendifferentcontentobjectsthatarepresentedwithinthatscreen.移动端独特的浏览控ContentContentcarouselspresentarowofcontentitemscarefullysizedandspacedsothattheybleedofftheedgeofthescreen.移动端独特的浏览控ContentOrtheyfillthescreenfromthelefttorightedgeanduseeitherarrowsneartheleftandrightscreenedgesorapagemarkerwidget.移动端独特的浏览控Content移动端独特的浏览控ContentTypically,contentcarouselsareusedtopresentarelativelysmallsetofobjectsthattheappismeanttofeatureorhighlight.一般而言，内容幻灯片通常用一组相对较小的对象呈移动端独特的浏览控ContentAssuch,onlyonecarouselshouldbeemployedonascreen,anditshouldtakethemostprominentpositioninthelayout.移动端独特的浏览控SwimlanesSwimlanesareaclevermash-upofthecarouselconceptwithagrid.Theycombinethecarousel’snaturalbrowsabilitywiththedatadensitythatonlyagridcanpermit.移动端独特的浏览控SwimlanesSwimlanesareaverticalstackofcarousels,eachofwhichcanbescrolledhorizontally,independentofthe移动端独特的浏览控SwimlanesControlControl移动端独特的浏览控件：Cardisaself-containedin media,text,weblinks,andsocialactionssuchascommenting,sharing,tagging,andaddingmedia. 之类的社交功移动端独特的浏览控件：移动端独特的浏览控件：Cardsaremostoftendis yedinascrollingverticallist,buttheyalsolendthemselvestogrid,carousel,andswimlanelayouts.移动端独特的浏览控件：移动端独特的交互方式NavigationandtoolBarsaretheprimarymechanismfornavigatingtothedifferentfunctionalandcontentareasofhandheld移动端独特的交互方式Navigationandtool移动端独特的导航控件TabTabbarscontainasetoftextand/oricon atabbuttonswitchestoadifferentlistorgridviewinthemaincontentarea. 移动端独特的导航控件Tab移动端独特的导航控件Tab移动端独特的导航控件Tab移动端独特的导航控件TabSometabletappsuseverticaltabbarsalignedtotheleftedgeofthescreen.移动端独特的导航控件More…controlsThenarrowaspectratioofmosthandheldscreens,aswellastheneedtoprovidefingertip-sizedhitareas,limitsthepracticalnumberofcontrolsthatcanliveinabartonomorethanaboutfive.移动端独特的导航控件More…controlsTheMore…controlisatabbaroractionbarcontrolthatgetsaroundthelimitedscreenrealestateof 移动端独特的导航控件More…controls移动端独特的导航控件More…controls移动端独特的导航控件TabAdifferentapproachtothesameproblemthattheMore…controladdressesisthetabcarousel,whichelegantlymarriestheconceptoftabswiththatofhorizontallyswipablecarousels. 移动端独特的导航控件Tab移动端独特的导航控件NavbarsandactionbarsNavbars,locatedatthetopofthescreen,provideawaytonavigatealistorgridhierarchy.Androidcallsthissetofcontrolsanactionbar.移动端独特的导航控件NavbarsandactionbarsTypicallytheycontainattheveryleastabackbuttonontheleftandthetitleofthecurrentlist,grid,orothertypeofcontentscreeninthecenter.移动端独特的导航控件NavbarsandactionbarsNavNav移动端独特的导航控件NavbarsandactionbarsAction

移动端独特的导航控件NavbarsandactionbarsAction移动端独特的导航控件ToolbarsandpalettesToolbarscontainbuttonsthatexecutefunctionsonthecurrentorselectedappcontent. 移动端独特的导航控件Toolbarsandpalettes移动端独特的导航控DrawersDrawersareacleveridiomthatprovidesaccesstoaverticallistofnavigationalelementssimilartotabs. 移动端独特的导航控DrawersThedrawericonisalsocalledthehamburgericonduetoitsshape:threeshort,stackedlines.移动端独特的导航控Dra