Google TV Design Patterns.docx
《Google TV Design Patterns.docx》由会员分享,可在线阅读,更多相关《Google TV Design Patterns.docx(47页珍藏版)》请在冰豆网上搜索。
GoogleTVDesignPatterns
目录
DesignPatterns设计模式2
The10ftenvironmentistraditionallyforconsumingcontent.十英尺环境传统上适合消费性内容2
Theviewingexperiencefora10ftUIisamixofcomputerandTV.十英尺UI的浏览体验相当于电脑和电视的混合2
TVshavehigh-qualitysound.电视设备拥有高品质的声音3
The10ftUIrequiressimpleandvisiblenavigationtools.十英尺UI需要简单、可见的导航工具3
The10ftUIworksbestwithwell-establishedUIpatternsbasedoncontentzones.基于内容区域的良好的UI模式是十英尺UI的最佳选择3
-The10ftEnvironment十英尺环境3
-TVDisplays电视显示4
High-DefinitionDisplayResolutions高清显示分辨率5
Color色彩9
Text文本10
-SoundandtheUI声音与UI11
-NavigationDesign导航设计12
D-padnavigation方向键导航13
Mousenavigation鼠标导航14
Navigationassistance导航帮助14
Verticalscrolling垂直滚动15
Categorynavigation类别导航15
Selection选择16
Context,selection,andfocus上下文,选择,及焦点17
Focusandfocusprediction焦点与焦点预期18
Visualindicators视觉指示19
Transitions过渡19
-UserInterfaceDesign用户界面设计20
UIsacrossdevices跨设备的UI20
-UIZonesandPatternsUI区域与模式21
Zones区域21
Zoneexample区域样例22
Patterns(Fragments)模式(片段)27
BasicPatterns基本模式28
SortingandFiltering排序与过滤31
-UIPerformanceUI性能36
-AdditionalTips附加提示38
GoogleTVUserInterface
DesignPatterns设计模式
ThisisaguidetodevelopinguserinterfacesforAndroidapplicationsrunningonGoogleTV.AlthoughtherearefewinternaldifferencesbetweenanAndroidapplicationforaphoneandoneforGoogleTV,therearedifferencesintheuserinterface.
这是为运行在GoogleTV上的Android应用程序所作的用户界面指南。
尽管运行在GoogleTV上的应用程序与手机上的几乎没有不同,但在用户界面方面,两者的确有一些区别。
Theviewingenvironmentofatelevisioniscommonlyreferredtoasthetenfoot(10ft)environmentandthetelevisionscreenasthe10ftUI.Whenyoucreateappsforthe10ftenvironment,rememberthesebasicconcepts:
电视的观看环境通常被描述为“10英尺(约3米)环境”,电视屏幕则被描述为“10英尺UI”。
当你为10英尺环境创建应用程序时,牢记以下这些基本概念:
The10ftenvironmentistraditionallyforconsumingcontent.十英尺环境传统上适合消费性内容
£The10ftenvironmentisafunenvironment,notaworkenvironment.
十英尺环境是娱乐环境,不是工作环境。
£The10ftenvironmentisusuallyasocialenvironment,notasingle-userenvironment.
十英尺环境通常是一个社群环境,而不是单用户环境。
Theviewingexperiencefora10ftUIisamixofcomputerandTV.十英尺UI的浏览体验相当于电脑和电视的混合
£TVscreenshavebothcomputer-likeandTV-likecharacteristics.
电视屏幕兼有电脑和电视的特质。
£Displayresolutioniscomputer-like,butisaffectedbyTVcharacteristics.
显示分辨率类似电脑,但受电视特质影响。
£ColorisdifferentonTVscreens.
色彩在电视屏幕上(与电脑)不同。
TVshavehigh-qualitysound.电视设备拥有高品质的声音
£TVsareusuallyconnectedtothebestsoundsystem.
电视设备通常连接了最好的音响系统。
£Unlikecomputers,usersexpectsoundfromaTVanddon'tfinditdisruptive.
不像电脑,用户期待电视设备发声,而且不会觉得被打扰。
The10ftUIrequiressimpleandvisiblenavigationtools.十英尺UI需要简单、可见的导航工具
£Setupnavigationtoprogressfromlefttorightandtoptobottom.
建立从左到右、从上到下的导航。
£Limittheneedforamouse.
尽可能降低对鼠标的需求。
£Providevisualfeedback.
提供视觉反馈。
The10ftUIworksbestwithwell-establishedUIpatternsbasedoncontentzones.基于内容区域的良好的UI模式是十英尺UI的最佳选择
£Zonesthemselvesareindependentofdevicetypes.
区域与设备类型无关。
£Thearrangementofzonesareparticulartodevicetypes.
不同的设备类型有特定的区域排布方式。
£ManydifferentUIscanbebasedonthezoneconcept.
许多不同的UI能够基于区域的概念。
Readabouteachoftheseconcepts(andmore)inthefollowingsections.
通过以下各节了解更多的概念:
-The10ftEnvironment十英尺环境
WhenyoucreateAndroidapplicationsforthe10ftenvironmentyoushouldremembersomebasicideasthatdifferentiatethisenvironmentfromcomputersormobiledevices.
为“十英尺环境”创建Android应用程序时,应该牢记一些基本的理念——正是这些理念将“十英尺环境”与电脑或移动设备区别开来。
Themostfundamentalideaisthatthetelevisionhastraditionallybeenforconsumingcontent.Ithasalonghistoryasapassiavesystemforbroadlysendinginformationtopeople;thatis,it'sabroadcastsystem.GoogleTVchangestelevisionfromabroadcasttoainteractivetwo-waysystem,andthisisabigchangeformanyviewers.Changeslikethiscanbetoughforolderviewers,especiallythosewhoclassifythemselvesas"computerilliterate".Ontheotherhand,youngerviewerswhohavegrownupwiththeInternethavelittledifficultywiththechange,andmayevenbeeagertoacceptit.
最根本的理念是:
电视设备传统上是被用来展示消费性内容的。
作为一种被动接收广播信息的系统,电视有着很长的历史。
GoogleTV将电视从广播系统变为双向交互系统,这对很多观众来说是一个巨大的改变。
对于上年纪的观众来说,尤其是那些自称“电脑白痴”的,这种改变可能会颇为棘手。
另一方面,与互联网一起成长起来的年轻观众几乎不会遇到什么困难,就能适应这种变化,他们甚至迫不及待地想要接受它。
TheideathatTVisfundamentallypassiveispartofwhatiscommonlycalledthe"lean-back"experience.EvenviewerswhoarewillingtointeractwiththeirTVdon'twanttoworktoohardduringtheinteraction;theywanttoleanbackandenjoythemselves.Theydon'twantthehighly-involvedexperienceofcomputersorsmartphones.
电视本质上是被动接收,正因如此,它通常被称为“后仰”体验。
即便是那些愿意与电视交互的观众也不愿意互动得太辛苦;他们想要舒舒服服靠在沙发上完成交互,而不是像操作电脑或智能手机那样将注意力高度集中。
Inaddition,GoogleTVisaimedatenhancingthetraditionalrelaxed,group,sharedexperienceofTVviewing.You'llbeabletodifferentiateyourapplicationfromothersystemsthatdisplayonTVscreensbyworkingwiththismoretraditionalapproach.
此外,GoogleTV以提升传统的电视观看体验——放松、群体观看、分享——为目标。
从这个更为传统的起点着手,能够令你的应用程序脱颖而出。
-TVDisplays电视显示
Whenyou'redesigningyourapplication,rememberthatGoogleTVdisplayisfundamentallydifferentfromthatofacomputerormobiledevice.Despiteitssize,itdisplayslessinformationoverallthanforacomputerormobileUI.You'llneedtoprovidelessUI,andyoumaywanttoautomatesometasksinsteadofaskingforuserinteraction.
设计应用程序时,牢记GoogleTV的显示与电脑或移动设备从根本上就不同。
除开尺寸的因素,电视显示出的信息量总体要少于电脑或应动设备的UI。
你应该提供更轻量级的UI,而且可能要自动处理某些任务,而不是事事要求用户的交互。
HerearesomeguidelinesforyourUIdesign:
以下是一些UI设计准则:
1.UseamobilephoneasthemodelfortheUI.使用手机作为UI模型
AmodernTV'ssizeisdeceptive.EventhoughmodernTVsareusuallylargerthan40"diagonally,viewerssitproportionallyfartherfromthemthanfromacomputermonitor,Theviewer'sperceptionisthattheTVissmallerthanamonitor.Tosimulatethisexperience,useamobilephoneasyour"model"whenyoudesignyourUI.
现代电视的尺寸具有欺骗性。
尽管现代电视的屏幕对角线通常大于40英寸,但相应地,观众坐得离电视屏幕也要比距离电脑显示器更远。
观众的感受是电视屏幕要小于电脑显示器。
在设计UI时可以使用手机作为“模型”来模拟这种体验。
2.Toavoidaclutteredappearanceonthescreen,providemoreblankspacebetweenelementsonthepage.页面元素之间应该留出更多空白空间,避免杂乱的外观
Todothis,useacombinationoflargermarginsandmorepadding.Thisisgoodadvicefor"touch"UIsaswell.
通过综合使用更大的内、外边距来实现这个目标。
对于“触屏”UI,这同样是一个好的建议。
3.TVsarealwaysin"landscape".TV总是横屏
OnaTV,availablespacerunsleft-to-rightratherthantop-to-bottom.Puton-screennavigationalcontrolsontheleftorrightsideofthescreenandsaveverticalspaceforcontent.
在电视上,水平方向的可用空间要多过垂直方向的。
将屏幕上的导航控件水平放置,为内容部分节省垂直空间。
High-DefinitionDisplayResolutions高清显示分辨率
TVsarefundamentallydifferentfromcomputermonitorsormobiledevicescreens.Monitorsandmobilescreensuse(inessence)directlyaddressablepixels.TVs,incontrast,useasystembasedonthedecades-oldanalogmethodofdisplayingapicture.KnowingthedifferenceisimportantinworkingwithGoogleTV.
电视屏幕与电脑显示器与移动设备屏幕有根本的不同。
显示器和移动设备屏幕使用(大体上)直接寻址像素。
相比之下,电视使用的是落后数十年的模拟方式显示图像。
了解这一点,对于与GoogleTV协调工作非常重要。
Computerandmobiledevicedisplayresolution电脑与移动设备的显示分辨率
Acomputermonitorhasamaximumdisplayresolutionthatisusuallylessthanorequaltotheresolutionofthegraphicscard;it'sthegraphicscardthatdeterminesthemaximumresolutionandthemonitorthatdeterminesthenumberofpixelsperinch(thepixeldensity).Amobiledevice'sresolutionandpixeldensityareusuallyfixed.
电脑显示器的最大显示分辨率,通常小于或等于显卡的分辨率;显卡决定最大分辨率,显示器决定像素密度(每英寸像素数量)。
移动设备的分辨率和像素密度通常是固定的。
Sincedisplayresolutionforcomputersissimple,computeroperatingsystemshandleresolutionandpixeldensityissuesautomatically,basedontheuser'sresolutionpreferences.
由于电脑显示分辨率机制简单,操作系统根据用户的偏好设置就能自动地解决分辨率与屏幕密度问题。
Androidisdesignedtohandlemanytypesofmobiledeviceswiththesameapplication.Todothis,AndroidscalestheUIbasedonadevice'sscreensizeandpixeldensity.Inaddition,youcanprovidealternativeresourcesforyourUItoprovidethebestUIexperiencefordifferentdevices.
Android使用同一套机制来掌控多种移动设备。
为实现这个目的,Android基于设备屏幕尺寸与像素密度来按比例缩放UI。
此外,你可以为你的UI提供可替换的资源,确保在不同设备上都有最好的UI体验。
TVdisplayresolution电视显示分辨率
TVs(eventhemostmodernones)haveadisplayresolutionbasedonscanlines.TherearethreescanlinevaluesavailablefortheHDTVdisplayssupportedbyGoogleTV:
720p,1080i,and1080p,whichstandfor720progressivescanlines,1080interlacedscanlines,and1080progressivescanlines(thelasttwoareequivalenttoAndroid).The720valuemeansthattheTVcan"address"720distinctlinesfromthetoptothebottomofthescreen;1080meansthattheTVaddresses1080linesfromtoptobottom.
电视(即便是最现代的那些)的现实分辨率是基于扫描线的。
谷歌电视支持3种扫描线数的高清电视:
720p、1080i和1080p,分别代表720逐行扫描线、1080隔行扫描线和1080逐行扫描线(Android将后两者视作相同)。
数值720代表电视可以在屏幕垂直方向,自顶至底,为720条清晰的线“寻址”;1080则代表自顶至底,为1080条清晰的线“寻址”
ThehorizontalresolutionisderivedfromtheTV'saspectratio.NearlyallTVsnowuseanaspectratioof16:
9(16horizontalpixelsforevery9verticalones),sotheresultingdisplayresolutionforaTVsetto1080is1920x1080.
水平方向的分辨率则由电视的长宽比例决定。
目前几乎所有的电视都使用16:
9的长宽比(16个水平像素对应9个垂直像素),这样1080的电视机的实际分辨率就是1920x1080.
How"tall"thelinesare,andhow"wide"eachlineis(theactualpixeldensity)forTVsvariesbymanufacturer,butAndroidabstractsthevaluestoadensity-independentpixelmeasurement(abbreviateddp).
这些线有多“高”,每条线有多“宽”?
也就是说电视的实际像素密度为何?
这取决于不同的制造商。
但Android将这些数值提炼为一个与屏幕密度无关的像素单位,缩写为dp。
GoogleTVAndroidapplicationsbenefitfromAndroid'sscalingtechnology.Ingeneral,youshoulddesignyourUIfor1080p,andthenallowAndroidtoscaleyourUIdowntohandle720p,sincedownscaling(removinginformation)isusuallybetterthanupscaling(interpolatin