GoogleTV 设计模式

尽管手机 Android 平台和 GoogleTV 平台内部存在很小的差别，它们在用户接口方面仍然存在有不少区别。电视使用一般在 10 英尺左右的距离上，因而电视屏幕也该有满足 10 英尺距离查看需要的相应大小。创建一个在这种环境下使用的应用，记住以下基本概念：

• The10ft environment is traditionally for consuming content.

  • 10英尺环境是一个娱乐环境而不是工作环境；

  • 10英尺环境通常是一个社群环境而不是个用户环境；

• Theviewing experience for a 10ft UI is a mix of computer and TV.

  • TV屏幕应该同时具有电视和电脑的特征；

  • TV显示分辨率像电脑，但是受电视特征的影响；

  • 色彩在电视屏幕上与电脑是不同的.

• TVshave high-quality sound.

  • 电视通常连接了最好的音响系统；

  • 与电脑不同,用户期望声音从电视中发出来，而不会感到是分裂的

• The10ft UI requires simple and visible navigation tools.

  • 建立从左到右，从上到下的导航面板.

  • 限制对鼠标的需求.

  • 提供视觉反馈.

• The10ft UI works best with well-established UI patterns based oncontent zones.

  • 区域与设备类型无关.

  • 不同类型的设备一般有特定的区域排列方式.

  • 许多不同的UI都基于区域的概念.

The10ft Environment

创建10英尺环境下的应用,应该牢记以下几个基本概念：

最基本的概念：电视设备是为了展现消费内容的，很长时间以来，它一直是一个广播式系统.Google TV将电视从广播式转变到了人机交互式。这些变化对于那些电脑盲的老同志会比较难以接受.而对于那些随着Internat成长起来的年轻人，将没有任何问题，他们更期望这种变化。

电视本质上是被动接收的，即使是那些想与之交互的用户，也不希望操作太难、太复杂，他们不希望和电脑或者智能手机那样。

此外，GoogleTV 目标是提升传统放松的、群体的、共享的电视观看体验。只有更多的考虑传统的方法，才能使你的应用与众不同。

TVDisplays

当你设计应用时，牢记GoogleTV显示与计算机和移动设备根本上的不同。无论屏幕多大，都只能显示少量的信息，甚至需要提供少量的UI接口，而通过自动处理完成某些任务，避免与用户交互。UI设计原则如下：

1. Use amobile phone as the model for the UI.

现代电视的尺寸具有欺骗性。尽管现代电视通常大于40英寸，但相应地，观众坐得离电视屏幕也要比距离电脑显示器更远。观众的感受是电视屏幕要小于电脑显示器。为了模拟这种体验，在设计UI时可以使用手机作为“模型”。

2. Toavoid a cluttered appearance on the screen, provide more blank spacebetween elements on the page.

为了达到这个目的，要综合利用设计大内外白间距的方法。对触摸的UI也是好的建议。

3. TVsare always in "landscape".

在电视上，水平方向的可用空间要多过垂直方向的。将屏幕上的导航控件放在屏幕的左边或者右边，这样可以为内容部分节省垂直空间。

High-DefinitionDisplay Resolutions

电视本质上与计算机或者移动设备是不同的。电脑或者移动设备屏幕直接通过可定址的像素来显示。相反，电视采用10年前的模拟信号的显示技术来显示一幅图片。了解这些差别是非常很总要的。

Computerand mobile device display resolution

计算机分辨率一般小于或者等于显卡分辨率。显卡决定最大分辨率，而计算机决定像素密度。移动设备的显示分辨率和像素密度都是固定的。

既然显示分辨率对计算机来说是简单的，计算机操作系统能够根据用户的参数设定自动处理显示分辨率和像素密度。

Android设计为同一应用支持不同类型的移动设备。为了达到这个目的，Android根据设备屏幕大小和像素密度对应用UI进行放缩适配。另外，你可以提供一个可供选择的资源来设计UI，以对不同的设备提供最好的用户体验。

TVdisplay resolution

电视即使是最现代的电视都有基于扫描线的显示分辨率。GoogleTV支持三种扫描线分辨率：720p，1080i，1080p，分别代表720行逐行扫描、1080隔行扫描和1080逐行扫描，后两种对android来讲是等效的。

水平分辨率由电视纵横比率决定。几乎所有的电视都采用16:9的纵横比，因此，对于一个电视来讲，1080的显示分辨率就是1920x 1080.

扫描线的高度和宽度因厂商不同，然而Android将其抽象为与密度无关的像素。

GoogleTV的Android应用受益于Android的放缩技术。一般来讲，你应该设计1080P的应用，然后允许Android缩小你的应用到720p，因为缩小要比放大效果更好。为了达到最好的效果，尽量提供9-patch格式的图片。Android使用的GoogleTV缩放参数见表1：

TVsetting	可定址的屏幕大小	密度标示符	screendensity (in dp)	Displayresolution (in dp)	Screensize identifier
720p	1280x 720 px	tvdpi	213	960x 540	large
1080p	1920x 1080 px	xhdpi	320	960x 540	large

备注:

• 可定址的屏幕大小就是可视像素数.

• 密度标示符指示与密度无关的像素数..

• 使用dpi和显示矩阵决定的屏幕分辨率，来决定当前显示的屏幕大小和分辨率.

【Android9 Patch Scaled PNGImage】:是一种具有9块独立区域的PNG图片，每块都能够独立放缩。这在具有不同分辨率和纵横比的小屏幕的移动设备上非常方便。AndroidSDK 使用一个draw9patch方法从PNG文件创建9Patch图片。它是一个3*3的方格图片.4个角不进行放缩.其余几块进行放缩。

Overscan

另一个复杂问题就是过扫描。由于历史原因，TV生产厂商必须在正常显示屏之外预留一个边，这部分可以进行显示但是没有用来显示电视信号。这部分区域就是过扫描区。Android应用也不能在过扫描区显示。

不幸的是，过扫描区的数量随着厂商而变化不定，因此UI周围的边的大小也是不定的。如果你为有一个大边TV设计的UI，你可能不会注意到UI和TV边之间的过扫描边。如果你在一个几乎没有过扫描区的电视上运行你的应用，UI几乎也没有边界，它上面的元素就会混淆难读。

为了解决这个问题，为我们UI额外提供10%的边界，并且使用非绝对位置表示的布局。如图1所示：

Color

电视屏相对电脑显示器具有更高的对比度和饱和度。为了解决这个问题，当采用单色工作时，遵照以下几个原则。

1、少用纯白（#FFFFFF）。在电视显示中，纯白能够造成闪亮或者图像拖毛。应该用#F1F1F1(hex) or 240/240/240(RGB).来代替。

2、避免亮白、红色、橙色，因为他们能够引起图像扭曲变形。

3、注意电视拥有的不同的显示模式，包含标准的，逼真的、影院的、游戏的等等。要在所有模式下测试你的应用程序。

4、避免使用大的生成的倾斜度，这容易造成条带。

5、如果可能，尽量在具有较差显示特性的机器上测试你的应用。

图1Screen resolutions and dimensions

Text

对TV来说，应当避免使用过轻的字体或者那些具有过窄和过宽笔画的字体，而使用没有衬线的简单字体，并使用抗锯齿来提高易读性。目前，GoogleTV仅支持DroidSans and DroidSerif两大字体家族，可是你可以使用嵌入字体来创建自定义的外观特性。然而，这种嵌入字体的方式会影响系统性能。

这里列举了一些提供文字可读性的方法:

1. 限制每段不超过90个单词；

2. 将文本分段放在不同的小块中，让用户可以快速看完。

3. 保持每行5-7个单词.不要少于3个或者多于12个.

4. 在电视上，黑底白字相对白底黑字更容易阅读

5. 使用Android标准字体大小.例如,标准的小字体大小为14sp,在1080p的屏幕上会占用28个点；

6. 在屏幕上写字要比打印使用更大的垂直行间距。

Soundand the UI

使用 GoogleTV的电视机常常都连接了室内最好的音响系统，在电视上，声音听起来不像电脑那样是分裂的。因此，记住在UI中使用声音的一些方法：

1. 使用适合生活房间环境的声音；

2. 默认设置为较低的音量；

3. 假定你的用户会使用你的应用看电视或者听音乐；提供简单的方法来降低音量；不要完全依赖音量控制台来交互，适度的使用控制条；

4. Android具有音频焦点的概念，意思就是允许应用请求独占音频播放器。如果你的应用主功能依赖音频播放，你应该请求独占音频焦点；如果你的应用在背景服务中播放音乐，你应该实现AudioFocusChangeListener接口，不要妨碍其他应用申请音频焦点。

NavigationDesign

Google TV设备总是包含一个键盘和一个控制指针的定点设备。许多用户在看电视时都希望将其放在屏幕下面。这两个可能会集成在一个简单的物理设备中，这个设备也可能包含一个鼠标控制器。键盘显然是为了文本输入提供的。定点设备却是D-Pad的变种，它用来控制指针的位置或者高亮显示一个UI元素。在键盘或者定点设备或者两者都用附加按钮来提供传统的远程控制功能，比如电源控制、回放、等等。如果有鼠标，他能控制鼠标的位置，并提供按钮点击鼠标下面的UI元素。相反应该记住TV传统上是一个广播系统而不是一个交互会话系统。用户可能没有太多使用D-Pad和鼠标的体验。即使是有经验的计算机用户也会发现在电视上使用鼠标也是困难的。

这里是一些在GoogleTVAndroid应用上设计UI导航面板的指导方针：

1. 使用D-Pad导航版代替鼠标导航。用户可能更熟悉这种类型的导航应用在TV远程控制上。

2. 如果你选择了鼠标导航，要使用非常大的选择界面，使用户可以很轻松的定位和点击。

3. 避免复杂的和要求精确的鼠标导航，不要使用拖拉和弹出式菜单，这在电视应用环境下很难控制。

4. 对于导航，要提供非常明显的反馈信息。当一个选择界面获取焦点后，应该将其展开，或者高亮显示。对于正反动作要使用过渡和移动来提供可视化的提示。例如，用户执行了一个动作，导致从右侧划入一个新页面，他们可能直接的想到通过D-Pad的左键可以返回以前的界面【理念差异】。

你的目标就是提供导航设计方案，用户可以快速学习预测如何移动来进行操作。

再一次切记：TV既不是电脑也不是移动设备。他没有触摸屏，也很难使用鼠标来控制。为了加深你对电视导航面板的理解，试着不用鼠标来操作你的计算机应用程序或者运行在模拟器中的Android应用程序。直觉感觉交互界面怎么样？如何改进？

D-padnavigation

D-pad控制器限制了只有上下左右四种移动方式，而通过中心键来选择指定项。用户需要D-pad交互简单而快捷。记住，用户使用导航一般都在一定距离以外，可能还是黑暗的环境。

当你为D-pad设计导航面板时，遵循一些指导方针：

1. 确保箭头键能导航到屏幕上的全部可视控件上；

2. 如果你使用箭头键来滑动列表，确保用户能够选择列表项，并且，在选中列表项状态下，仍可以滑动列表；

3. 如果你的应用支持多选，确保选中项必须是清晰可见的。

4. 确保D-pad全部导航项能够获得“选中”“获得焦点”“选中并获得焦点”三种状态。

Mousenavigation

在电视屏幕上，鼠标指示箭头小而远。鼠标的控制也非常困难，因为鼠标本身常是一个pad或者ball而不是一个传统的鼠标精灵。为了帮助你你的用户使用鼠标，遵循以下建议：

1. 放大每一个要被鼠标点击的UI控件，保证提供充足的空间；

2. 当鼠标移动UI控件上时，在控件上增加一个盘旋状态进行标识。

3. 使用箭头指示，暗示用户屏幕外有可以访问的内容。将箭头作为控件，当用户点击后转到页面外内容。

Navigationassistance

10英尺环境下的导航对大部分用户来说都是新鲜的。因此需要使用帮助按钮或者操作条按钮为用户提供文本帮助，可以包括以下几个方面：

1、D-pad指示键：它们能切换页面吗？能用它们打开上下文菜单或者导航菜单吗？

2、返回键：它能够回到前一界面吗？它能够取消一个操作码？它能够关闭一个弹出式菜单吗？

3、多媒体键：播放、暂停能干什么？如何快进和快退？

4、其他键：有取消键和关闭弹出菜单键吗？例如，ESC能关闭弹出菜单吗？

当用户首次运行你的应用程序时，你也可能想自动显示帮助窗口。

Verticalscrolling

垂直页面滚动对于桌面浏览器来说是基本的，在电视中却可能没有那么吸引人.滚动可能生涩缓慢，由于用户不知道滚动的持续性，重要的信息可能被隐藏在屏幕之外.相反，使用水平布局，在页面之间提供可视的切换按钮。如果你使用垂直滚动，限制它只用在页面中心的细节区域，而让你的左侧的导航栏固定下来。此外，保持一个易于理解的上下文环境，这将会有更好的直观感觉体验。

Categorynavigation

对于类别如菜单或者tab，一般使用屏幕的左侧。在电视上，水平方向空间是丰富的，而垂直方向的空间却相当宝贵。尽量保持屏幕上的类别选项一直显示，为了做到这点，你可能需要减少类别数目。如果你正在把一个已经存在的电话应用移植到TV上，考虑重构或者至少测试那些复杂的嵌套子类别的导航。

Selection

在电视上，定位用户选项是不精确的，为了帮助用户选择，遵循以下指导方针：

1. 高亮显示选中项，当用户选择符指针落在它上面时（比如盘旋符）；

2. 使选中的控件变大，并在Text标签周围提供附加的信息；

3. 不用使用固有的小控件如窗口角上的关闭按钮。它们很难被看见或者很难选中，或者兼而有之。

4. 避免使用鼠标点击来关闭弹出式对话框。例如，PC应用经常提供点击其他地方的方式来关闭窗口，这在10英尺外的环境下是不明显的。相反，应该提供个直接的控制按钮来关闭对话框，确保D-pad能够访问它。

5. 不要求用户通过选择来激活主控制按钮。让主控制或者默认控制激活，高亮显示指示这些；

6. 如果窗口或者对话框的部分内容要求滚动，让他获得焦点或者，允许它在没焦点的情况下滚动。在滚动前要求用户点击一个元素是麻烦而令人讨厌的。

Context,selection, and focus

应用程序的当前状态包含：上下文、选中项、焦点。上下文通常是一组分类，而选中项是用户选中的一个分类。焦点是在指针下的控件或者元素。它们应该有不同的高亮方式，高亮方案应该与应用程序相协调。

比如：如果用户正在全屏看电影，应用程序应该提供一排与上下文相关的Tab，它们能够提供不同的分类，如所有电影，最新发行、流行、编辑面板等等。如果用户选择其中一项，该Tab的选中状态应该与正在移动的焦点视觉感觉不同，以指示当前导航位置。如图2所示：

Figure2. Selection and focus

对于GoogleTV应用来说，D-pad聚集状态等同于鼠标旋转状态。这是用户发现应用程序状态的主要方式，它可以帮助用户预测如何移动焦点或进行选择。

Focusand focus prediction

就像踩着石头跨越溪流一样，用户考虑的是如何在可以聚焦的UI元素间移动，并避开那些不能聚焦的。一种可以辅助用户的方法就是，给于聚焦的元素与众不同的的视觉处理，如为可聚集的元素加上轮廓框如图2。区别可聚集和不可聚集元素，可以帮助用户了解你的UI。另外一种帮助用户的方式是将元素网格式排列，如图3.

Figure3. Grid pattern for UI navigation

对于D-pad的上下左右控制，网格是最直观的映射。如果你不使用网格，你的界面元素可能会按照对角线布局、或者在不同的基线上，或者在不同的垂直中心上。这可能会强制用户重复进行上下、左右的操作切换，或者让他们对如何移动感到迷惑。一些列表滚动元素可能不符合标准的网格布局，如图4。在这种情况下，应该将初始焦点尽可能地安排在离网格最近的地方。

Figure4. Scrolling alignment and grid layout

Visualindicators

在你的UI中，为可选择的和可导航的项目添加指示或者高亮显示是个很好的习惯。这被认为是值得的affordances。期望用户研究你的界面来找到那些是可选择，哪些不是的方法是不可取的，假定你的UI是直观的也一样不可取。你应该通过仔细标注和注释来赢得用户的认可和忠心。

Transitions

在你的应用中使用过渡既能教育用户，也能把他搞晕。确保你的应用中使用过渡来传递有用信息，而不简单提供娱乐目的。建议如下:

1. 避免重新加载整个页面，因为这能导致大的用户感受到的反应时间或者延迟。

2. 对于一个只影响Fragment的动作，保持过渡效果只在Fragment中。

3. 让进度条提供有意义的信息。动画应该指出已经完成的进度，还有多少工作要做。

4. 不要为网格中的任意元素添加“加载”动画。这样做的结果，就是UI设计混乱，难看。

UserInterface Design

设计UI原则:

1. 保持设计协调一致；

2. 保持元素行为一致；.

3. 保持所有重要的动作和选项可见，包括查找、设置、返回等。在10英尺的电视应用环境中，不可见的元素会被忘掉，即使他们在屏幕以外，或者在远程遥控器上。

为了帮助你，Android提供大量的标准UI控件，以及提供多种不同方式来定制具有一致的风格的UI控件。

UIsacross devices

你有个在移动设备上运行的应用，现在你想把它移植到10英尺的环境中。怎样将1英尺UI转变到10英尺的UI？记住，最重要的是更大的不总是更好。平板要比智能手机好，计算机比平板好，但是电视比电脑好吗？

Figure5: Comparative screen sizes

你可能认为42寸的屏幕是最有能力的，但是事实并非如此。智能手机通常比电视具有更强的处理能力。来自电视的高清视频和音频信号，是预先渲染的。因此全部需要的仅是一个高带宽的到广播源的连接。换句话说，大部分电视信号的处理都集中在广播端而不是在电视机端。为了适应这种情况，设计应用应尽可能少用用户交互。你的程序为用户做得越多，越好。

UIZones and Patterns

最早的设计好的TVUI的方法是使用区域和模式的结构。在它们的综合作用下，强调出一种由UI元素视觉语汇建立起的简洁明晰的体验。

Zones

区域也是GoogleTV 浏览内容的基础部分。每一个区域对应一个Android的Activity组件。对GoogleTV，区域采用左右分布层次来代替手机和计算机上的上下分布层次。这反映了TV水平屏幕特征，这也便于实现前面提到的简单导航。

Figure6. Application zones

TV屏包含3个区域，如图6，从左到右分了3个等级。你可以调整他们的大小来适应你应用程序的需要，或者你可以简单实用默认大小。由于全局区在整个应用生命周期内一致存在，因此不能让它占用太多的屏幕空间。相反，细节区包含用户想看的更多信息，因此应该给予细节区尽可能大的空间。最后，给予上下文区适中的大小，能够很好的适应当前显示的选择需要，也不要限制细节的显示。

Zoneexample

Figure7 是分区设计的例子,and figure8 显示区域本身.

Figure7. Example application.

Figure8. Zones in the example application

GlobalZone

全局区如图8在屏幕的最左边，这个区保存了应用程序最顶层的全局项。他给用户提供了任何时候都可能想快速访问的操作。它也包含你应用程序的所有类别、以及logo。全局区的选择变化会改变右边的上下文区和细节区的内容，依赖于你的应用程序设计层次的深度。

ContextualZone

上下文区位于全局区的右侧，基于上下文的细节或者选项会在这里显示。除了展示上下文细节，上下文区域也包含次级模式，如分页，菜单、过滤器等，用户可在中间层执行具体的操作。这个区域是可选的。

DetailZone

细节区在最右边。他通常是最大的区域，负责显示你应用程序的内容。如上下文区一样，这个区域也可以包含不同的次级模式，包括内容架子、情节浏览器、列表等。下图展示了TV、平板、手机的分区和模式的例子：

Figure9. TV Zones

Figure10. TV Patterns

Figure11. Tablet Zones

Figure12. Tablet Patterns

Figure13. Phone zones Figure 14. Phone patterns

Patterns(Fragments)

模式是区域的次级结构,用来包含UI空间和显示内容。通常情况下，你将一个独立的模式实现为一个Android片段。Android提供UI布局与窗口小部件，协助你实现许多应用程序的基本需求。图15显示了一些GoogleTV区域系统中的模式:

Figure15. Patterns and zones

Android提供的模式模板包含左侧标签栏、菜单、列表、过滤器、分页标记等等

GoogleTV中的模式与其它设备上为人熟知的模式表现完全一致.这样你就可复用他们。如果在手机应用上有一个列表，可以将同一个列表放到GoogleTVUI中适合的区域中.这将简化并加速应用程序的移植。甚至更好的，Android默认放大模式适应10英尺环境.对于那些熟悉你的应用程序的用户，这个模式仍然容易识别。

BasicPatterns

ContentShelf

ContentGrid

ContentList

CascadingContent List

Extendeddetails

Sub-sectiontabs

Sortingand Filtering

你常常想为用户提供某种方法来对UI中显示的列表进行排序和过滤。在计算机或者触摸屏上，你通常在列表的左上方或者屏幕的左侧提供下拉式菜单选项.在十英尺环境中考虑如何实现这个UI时，不要忘了方向键导航的局限。在图16中，橙色标记的是控制排序和过滤其下方表格的模式。注意，在此最小化状态下，标签和被选中项目都清晰地传达给了用户。

Figure16. Sort and filter pattern

当用户进入这个区域，会展开显示所有可用选项，同时会显示当前选中选项。如图17.

Figure17. Sort and filter pattern, expanded.

如果你的应用既包含排序又包含过滤，可能你不只需要一个选项列表，图18和19展示了在最小化和展开状态下既包含排序又包含过滤的多选项设置的版本。

Figure18. Multiple option lists, minimized.

Figure19. Multiple option lists, expanded.

注意，展开视图演示的是选择选项和将选项标记为高亮的多种方式。

标签A之下的选项在被选中时，字体会加粗。标签B，如果全部选项都被选中，会显示文本“全部选项”。标签C使用复选框来指示哪个选项被选中。标签D显示的则是没有任何选项被选中时的效果。

如果可能的话，当用户选择选项时，应该更新列表。这对用户来说这是有益的回馈，也让应用程序的反应显得更为灵敏。同时不必再使用一个特定的“应用筛选”按钮，也避免了全屏刷新。记住，当用户返回至左侧栏位，或向表格下方导航时，应该再次收起选项列表，并显示当前被选中的项目。

D-padinteraction traps

方向导航与这些UI模式的交互，更凸显出左右层级排列的优势。在更好的绿色样例（图20）中，划分了三个区域：全局、列表和确认，构成一个上下文环境。当用户从“分类”到“项目”到“确认”逐步地收窄选择时，他们从左到右移动焦点。任何区域内的导航都被限制在上下方向。这样很容易地就可以从长列表中选择项目并确认选择

Figure20. A desirable zone and pattern organization.

在不那么令人期待的红色的样例中（图21），层级不变，但变为垂直排列。用户使用“上”、“下”在区域间导航。区域内的导航则并不一致，在顶部和底部区域内是左右导航，在中间的区域内却是上下导航。

在触屏设备上，这个布局相对比较容易掌控，因为用户能抬起手指，在区域间跳跃点击。然而在使用方向键导航的设备上，用户不能在区域间跳跃操作。如果用户想要从顶部的全局区域到达底部的确认按钮，他们必须首先滚动通过中间区域中列表的每一项。如果列表包含了50个项目的话，这将是一项巨大的负担！使用左右层级排列来防范这个陷阱。

Figure21. Undesirable zone and pattern layout.

UIPerformance

无数研究表明：用户更喜欢运行快速的应用，因此，你应该做到可视化界面和性能的平衡。另外，TV设备运行也没有工作站速度快。在你使用大量的复杂应用动画之前，应该考虑并测试对用户满意度的影响。用户才是你的应用是否运行良好的最终评判员。

开发应用的时候，应在几个方面测试你的应用性能，每一个具体操作要花费的时间，Android测试工具创建的对象实例数目等。切记，这些对于最终用户是不重要的，他们会采用不同的标准来评判。

例如，用户可能基于操作的流畅性和快捷性、对输入响应的速度来评判。如果你的应用拖慢了GoogleTV其他部分的应用，他们是不会喜欢的。这些反应是用户对你的程序最直接的感受，最直接的感受才是最重要的指标。

获取最佳的性能感受与获得绝对的性能方式不同。确保你的应用永远不要执行那些非常耗时的代码，避免不能快速刷屏和获取用户输入。在某些情况下，将一个任务划分成几个部分，使得每一部分可以快速完成刷屏。