Google TV Design Patterns.docx

1、Google TV Design Patterns目录Design Patterns设计模式 2The 10ft environment is traditionally for consuming content. 十英尺环境传统上适合消费性内容 2The viewing experience for a 10ft UI is a mix of computer and TV. 十英尺UI的浏览体验相当于电脑和电视的混合 2TVs have high-quality sound. 电视设备拥有高品质的声音 3The 10ft UI requires simple and visible na

2、vigation tools. 十英尺UI需要简单、可见的导航工具 3The 10ft UI works best with well-established UI patterns based on content zones. 基于内容区域的良好的UI模式是十英尺UI的最佳选择 3-The 10ft Environment 十英尺环境 3-TV Displays 电视显示 4High-Definition Display Resolutions 高清显示分辨率 5Color 色彩 9Text 文本 10-Sound and the UI 声音与UI 11-Navigation Design

3、 导航设计 12D-pad navigation 方向键导航 13Mouse navigation 鼠标导航 14Navigation assistance 导航帮助 14Vertical scrolling 垂直滚动 15Category navigation 类别导航 15Selection 选择 16Context, selection, and focus 上下文，选择，及焦点 17Focus and focus prediction 焦点与焦点预期 18Visual indicators 视觉指示 19Transitions 过渡 19-User Interface Design 用

4、户界面设计 20UIs across devices 跨设备的UI 20-UI Zones and Patterns UI区域与模式 21Zones 区域 21Zone example 区域样例 22Patterns (Fragments) 模式（片段） 27Basic Patterns 基本模式 28Sorting and Filtering 排序与过滤 31-UI Performance UI性能 36-Additional Tips 附加提示 38Google TV User InterfaceDesign Patterns设计模式This is a guide to developin

5、g user interfaces for Android applications running on Google TV. Although there are few internal differences between an Android application for a phone and one for Google TV, there are differences in the user interface. 这是为运行在Google TV上的Android应用程序所作的用户界面指南。尽管运行在Google TV上的应用程序与手机上的几乎没有不同，但在用户界面方面，两

6、者的确有一些区别。The viewing environment of a television is commonly referred to as the ten foot (10ft) environment and the television screen as the 10ft UI. When you create apps for the 10ft environment, remember these basic concepts: 电视的观看环境通常被描述为“10英尺（约3米）环境”，电视屏幕则被描述为“10英尺UI”。当你为10英尺环境创建应用程序时，牢记以下这些基本概念

7、：The 10ft environment is traditionally for consuming content. 十英尺环境传统上适合消费性内容 The 10ft environment is a fun environment, not a work environment. 十英尺环境是娱乐环境，不是工作环境。 The 10ft environment is usually a social environment, not a single-user environment. 十英尺环境通常是一个社群环境，而不是单用户环境。The viewing experience for

8、a 10ft UI is a mix of computer and TV. 十英尺UI的浏览体验相当于电脑和电视的混合 TV screens have both computer-like and TV-like characteristics.电视屏幕兼有电脑和电视的特质。 Display resolution is computer-like, but is affected by TV characteristics.显示分辨率类似电脑，但受电视特质影响。 Color is different on TV screens. 色彩在电视屏幕上（与电脑）不同。TVs have high-q

9、uality sound. 电视设备拥有高品质的声音 TVs are usually connected to the best sound system. 电视设备通常连接了最好的音响系统。 Unlike computers, users expect sound from a TV and dont find it disruptive. 不像电脑，用户期待电视设备发声，而且不会觉得被打扰。The 10ft UI requires simple and visible navigation tools. 十英尺UI需要简单、可见的导航工具 Set up navigation to prog

10、ress from left to right and top to bottom.建立从左到右、从上到下的导航。 Limit the need for a mouse. 尽可能降低对鼠标的需求。 Provide visual feedback. 提供视觉反馈。The 10ft UI works best with well-established UI patterns based on content zones. 基于内容区域的良好的UI模式是十英尺UI的最佳选择 Zones themselves are independent of device types.区域与设备类型无关。 Th

11、e arrangement of zones are particular to device types.不同的设备类型有特定的区域排布方式。 Many different UIs can be based on the zone concept.许多不同的UI能够基于区域的概念。Read about each of these concepts (and more) in the following sections. 通过以下各节了解更多的概念：-The 10ft Environment 十英尺环境 When you create Android applications for the

12、 10ft environment you should remember some basic ideas that differentiate this environment from computers or mobile devices. 为“十英尺环境”创建Android应用程序时，应该牢记一些基本的理念正是这些理念将“十英尺环境”与电脑或移动设备区别开来。The most fundamental idea is that the television has traditionally been for consuming content. It has a long histo

13、ry as a passiave system for broadly sending information to people; that is, its a broadcast system. Google TV changes television from a broadcast to a interactive two-way system, and this is a big change for many viewers. Changes like this can be tough for older viewers, especially those who classif

14、y themselves as computer illiterate. On the other hand, younger viewers who have grown up with the Internet have little difficulty with the change, and may even be eager to accept it. 最根本的理念是：电视设备传统上是被用来展示消费性内容的。作为一种被动接收广播信息的系统，电视有着很长的历史。Google TV 将电视从广播系统变为双向交互系统，这对很多观众来说是一个巨大的改变。对于上年纪的观众来说，尤其是那些自称

15、“电脑白痴”的，这种改变可能会颇为棘手。另一方面，与互联网一起成长起来的年轻观众几乎不会遇到什么困难，就能适应这种变化，他们甚至迫不及待地想要接受它。The idea that TV is fundamentally passive is part of what is commonly called the lean-back experience. Even viewers who are willing to interact with their TV dont want to work too hard during the interaction; they want to lea

16、n back and enjoy themselves. They dont want the highly-involved experience of computers or smart phones. 电视本质上是被动接收，正因如此，它通常被称为“后仰”体验。即便是那些愿意与电视交互的观众也不愿意互动得太辛苦；他们想要舒舒服服靠在沙发上完成交互，而不是像操作电脑或智能手机那样将注意力高度集中。In addition, Google TV is aimed at enhancing the traditional relaxed, group, shared experience of

17、TV viewing. Youll be able to differentiate your application from other systems that display on TV screens by working with this more traditional approach.此外，Google TV 以提升传统的电视观看体验放松、群体观看、分享为目标。从这个更为传统的起点着手，能够令你的应用程序脱颖而出。-TV Displays 电视显示When youre designing your application, remember that Google TV d

18、isplay is fundamentally different from that of a computer or mobile device. Despite its size, it displays less information overall than for a computer or mobile UI. Youll need to provide less UI, and you may want to automate some tasks instead of asking for user interaction. 设计应用程序时，牢记Google TV的显示与电

19、脑或移动设备从根本上就不同。除开尺寸的因素，电视显示出的信息量总体要少于电脑或应动设备的UI。你应该提供更轻量级的UI，而且可能要自动处理某些任务，而不是事事要求用户的交互。Here are some guidelines for your UI design:以下是一些UI设计准则：1. Use a mobile phone as the model for the UI. 使用手机作为UI模型A modern TVs size is deceptive. Even though modern TVs are usually larger than 40 diagonally, viewer

20、s sit proportionally farther from them than from a computer monitor, The viewers perception is that the TV is smaller than a monitor. To simulate this experience, use a mobile phone as your model when you design your UI. 现代电视的尺寸具有欺骗性。尽管现代电视的屏幕对角线通常大于40英寸，但相应地，观众坐得离电视屏幕也要比距离电脑显示器更远。观众的感受是电视屏幕要小于电脑显示器

21、。在设计UI时可以使用手机作为“模型”来模拟这种体验。2. To avoid a cluttered appearance on the screen, provide more blank space between elements on the page. 页面元素之间应该留出更多空白空间，避免杂乱的外观To do this, use a combination of larger margins and more padding. This is good advice for touch UIs as well. 通过综合使用更大的内、外边距来实现这个目标。对于“触屏”UI，这同样是

22、一个好的建议。3. TVs are always in landscape. TV总是横屏On a TV, available space runs left-to-right rather than top-to-bottom. Put on-screen navigational controls on the left or right side of the screen and save vertical space for content.在电视上，水平方向的可用空间要多过垂直方向的。将屏幕上的导航控件水平放置，为内容部分节省垂直空间。High-Definition Display

23、 Resolutions 高清显示分辨率TVs are fundamentally different from computer monitors or mobile device screens. Monitors and mobile screens use (in essence) directly addressable pixels. TVs, in contrast, use a system based on the decades-old analog method of displaying a picture. Knowing the difference is impo

24、rtant in working with Google TV.电视屏幕与电脑显示器与移动设备屏幕有根本的不同。显示器和移动设备屏幕使用（大体上）直接寻址像素。相比之下，电视使用的是落后数十年的模拟方式显示图像。了解这一点，对于与Google TV协调工作非常重要。Computer and mobile device display resolution 电脑与移动设备的显示分辨率A computer monitor has a maximum display resolution that is usually less than or equal to the resolution of

25、the graphics card; its the graphics card that determines the maximum resolution and the monitor that determines the number of pixels per inch (the pixel density). A mobile devices resolution and pixel density are usually fixed. 电脑显示器的最大显示分辨率，通常小于或等于显卡的分辨率；显卡决定最大分辨率，显示器决定像素密度（每英寸像素数量）。移动设备的分辨率和像素密度通常

26、是固定的。Since display resolution for computers is simple, computer operating systems handle resolution and pixel density issues automatically, based on the users resolution preferences. 由于电脑显示分辨率机制简单，操作系统根据用户的偏好设置就能自动地解决分辨率与屏幕密度问题。Android is designed to handle many types of mobile devices with the same

27、 application. To do this, Android scales the UI based on a devices screen size and pixel density. In addition, you can provide alternative resources for your UI to provide the best UI experience for different devices. Android使用同一套机制来掌控多种移动设备。为实现这个目的，Android基于设备屏幕尺寸与像素密度来按比例缩放UI。此外，你可以为你的UI提供可替换的资源，确

28、保在不同设备上都有最好的UI体验。TV display resolution 电视显示分辨率TVs (even the most modern ones) have a display resolution based on scan lines. There are three scan line values available for the HD TV displays supported by Google TV: 720p, 1080i, and 1080p, which stand for 720 progressive scan lines, 1080 interlaced s

29、can lines, and 1080 progressive scan lines (the last two are equivalent to Android). The 720 value means that the TV can address 720 distinct lines from the top to the bottom of the screen; 1080 means that the TV addresses 1080 lines from top to bottom.电视（即便是最现代的那些）的现实分辨率是基于扫描线的。谷歌电视支持3种扫描线数的高清电视：72

30、0p、1080i和1080p，分别代表720逐行扫描线、1080隔行扫描线和1080逐行扫描线（Android将后两者视作相同）。数值720代表电视可以在屏幕垂直方向，自顶至底，为720条清晰的线“寻址”；1080则代表自顶至底，为1080条清晰的线“寻址”The horizontal resolution is derived from the TVs aspect ratio. Nearly all TVs now use an aspect ratio of 16:9 (16 horizontal pixels for every 9 vertical ones), so the res

31、ulting display resolution for a TV set to 1080 is 1920 x 1080. 水平方向的分辨率则由电视的长宽比例决定。目前几乎所有的电视都使用16：9 的长宽比（16个水平像素对应9个垂直像素），这样1080的电视机的实际分辨率就是1920 x 1080.How tall the lines are, and how wide each line is (the actual pixel density) for TVs varies by manufacturer, but Android abstracts the values to a d

32、ensity-independent pixel measurement (abbreviated dp). 这些线有多“高”，每条线有多“宽”？也就是说电视的实际像素密度为何？这取决于不同的制造商。但Android将这些数值提炼为一个与屏幕密度无关的像素单位，缩写为dp。Google TV Android applications benefit from Androids scaling technology. In general, you should design your UI for 1080p, and then allow Android to scale your UI down to handle 720p, since downscaling (removing information) is usually better than upscaling (interpolatin