给ANDROID TV做设计要注意的16个细节

给ANDROID TV做设计要注意的16个细节

• 来源:优设网
• 更新日期:2018-03-28

摘要：虽然同样是安卓系统，设计TV这种大屏幕的应用程序和设计手机平板等其它设备不太一样，需要注意一些点。

　　虽然同样是安卓系统，设计TV这种大屏幕的应用程序和设计手机平板等其它设备不太一样，需要注意一些点。

　　1. 在Material Design的基础上进行设计

　　可以使不同平台的应用保持一致性：相同的外观和相同的使用体验，令用户有熟悉感，而且Material Design也给用户提供了愉悦和实用的体验。

　　2. 易操作的界面

　　内容应该是电视应用的核心，用户不用在屏幕上阅读文字信息也能轻松操作;并且，视频或媒体需要能够被用户轻松播放，这意味着需要减少点击操作的次数。

　　3.最小化的界面

　　为了使用户在使用TV应用有看电影的体验，应该将用户界面保持在最小化最简洁的状态，尽可能避免使用文字。

　　4. 保持简洁

　　采用最少的步骤完成操作：

　　减少不必要的导航步骤，减少用户操作障碍，将交互动作的数量保持在最低限度。

　　减少用户认知负担，将界面设计保持在最简洁的状态。

　　减少导航和浏览对用户的干扰，将应用中的文本内容保持在最低。查看视觉信息比阅读屏幕上的文本段落更容易，所以在可能的情况下，最好使用可视化组件。

　　5. 遥控器导航

　　用户是使用D-pad遥控器控制浏览电视上的内容，D-pad遥控器包括四个方向按钮和一个中央选择按钮，另外还有后退按钮和主页按钮。这些控制按钮限制了用户，只能通过内容上下左右导航，并返回其导航流程。可以通过列表和网格布局来解释这些限制条件，以X轴和Y轴的路径，供用户轻松浏览。为了帮助用户更好的导航，当前选中的聚焦元素和未选中元素的样式状态对比应该尽可能的拉大。屏幕上的每个元素都应该有聚焦状态，这意味着屏幕上始终会有一个最容易被发现的聚焦元素。

　　元素的聚焦状态可以通过以下方式实现：

　　缩放聚焦元素，使其显示更大。

　　改变聚焦元素阴影的亮度，使其更加明显。

　　改变元素的不透明度，将不重要的元素的透明度降低，使焦点元素更吸引人的注意。

　　在聚焦元素中实施某种形式的动画，以显示它正在被交互。

　　应该确保屏幕上总是有一个清晰的聚焦对象，这有助于使用D-pad遥控器来导航。

　　注意：为了提高效率，合理利用安卓TV提供的组件，不要在应用中使用工具栏或溢出菜单。

　　由于用户可以用不同类型的遥控器进行导航操作，因此应该确保支持任何非标准输入的遥控器以确保交互顺利进行。

　　6. 用户输入

　　应该为应用提供灵活的输入方式，其中一种重要的方法是语音输入。虽然安卓TV具有允许通过屏幕进行文字输入的虚拟键盘，使用遥控器输入会很麻烦(使用游戏手柄操作稍微简单一些)。因此，语音输入对于减少阻力是很重要的。

　　另一个选择是将用户输入委托给移动设备——允许用户使用其移动设备向电视系统输入文本信息。为此，应用应该能够检测到附近的设备(可能使用电视机连接到的WiFi网络)，并通过启动应用程序显示输入文本的选项，允许用户通过移动设备进行输入。

　　7. 动态内容

　　为了提高用户的活跃度和关注度，应该为应用添加动态特性。最重要的是，TV应用中显示的内容应该和任何其它应用一样，如果应用中没有频繁给用户新的令人兴奋的内容，用户会感到无聊。例如，用户在打开媒体内容应用时，应该加载最新的内容，而不是显示以前看过的内容。

　　和移动应用程序一样，我们应该在应用中支持分页。当达到最后一个显示的内容时，应该允许用户继续消费内容。

　　8. 背景

　　设计师应该尽可能合理利用大屏幕，可以通过在应用中展示美丽的、具有视觉冲击的背景来实现。虽然可以使用Leanback Library中的BackgroundManager类轻松实现，但还可以展示内容数据来更改安卓TV系统的背景。

　　当用户浏览主页内容卡切换到焦点状态时，背景图也将作为系统背景来显示。通过将图像源附加到内容卡上显示的数据对象可以轻松实现。如果可能，卡片上显示的不同的缩略图像应该应用于背景——在浏览内容时，会带来令人满意的视觉差异。

　　虽然背景图片的尺寸应为1920×1080 px，但实际上必须要使用大5%的尺寸来照顾到动画事件，所以，背景图片的尺寸应该是2016×1134 px。如果背景图片不符合这个要求，系统将自动缩放背景图片。

　　注意：背景图片应该是没有透明度的。

　　9. 推荐

　　应用中最新和相关的内容应该放在主屏幕的推荐栏中。这有助于减少用户完成打开电视到使用内容所需的步骤数量。

　　推荐应该基于应用中获得的用户数据。例如，用户之前观看过的内容。推荐项目将在安卓TV主屏幕的第一行显示。

　　推荐的内容可以是回到用户之前观看的内容，或推荐他们新的或相关的内容。这里有几种可以推荐给用户内容的类型，详细内容如下：

　　延续内容：推荐用户继续观看或收听他们之前消费的内容，甚至是移动到合辑或系列中的一个内容。这也是允许用户以最小的阻力得到他们想要的内容。

　　新内容：当用户已经收看或收听过的内容有了更新时，会使用这种卡片。例如，应用知道用户观看一个特定的节目，它之后会给我推荐节目的新内容。

　　相关内容：这种卡片可以推荐给用户适合的新内容。如果得知用户观看过某个节目或音乐类型的主题，那么可以推荐给他们也可能喜欢的内容。

　　推荐不同类型的内容，在应用中展示的方法：

　　刷新：当刷新已经出现在屏幕上的推荐内容时，请勿重复加载之前显示过的推荐内容。已经打开过和播放过的任何内容都不应该出现在刷新后的推荐列表中，刷新后的内容应该全新的。

　　自定义：可以以不同方式定制我们的推荐卡，这样，可以在卡片上体现风格和品牌。虽然卡片的属性允许使用提供间断的标题和副标题，我们应该使用卡片的图像将该项目描述给用户——图像足以起到教育用户的作用。

　　分组：可以根据推荐内容的来源进行分组，例如对新内容进行分组，对已订阅的内容进行分组。这些推荐可以通过标签轻松分组，例如“热门”、“最新”、和“相关”等等。这样，就可以轻松将推荐的内容分成可识别的类别。

　　虽然可以将推荐分配权重来决定其显示顺序，但是每个分组都会相互排序，来确保主要的推荐不会被错误排序。

　　10. 图标

　　图标不仅可以使应用更美观、有趣，它还可以向用户描绘文本信息。正如之前说提出的，应该通过视觉的手段来展现TV的文本内容。

　　使用单一颜色的标题图标可以使界面保持简洁，并且在导航过程中不会太分心。显然，这取决于正确使用应用中导航背景颜色和图标。

　　这些图标都很简单，没有复杂的形状。

　　图标应该和显示的内容相关，它应该是现实内容的补充，但不需要很复杂。

　　11. 音频

　　我们可以在TV应用中使用声音来增强电影体验。声音如果被正确使用，可以是一种补充视觉效果的伟大方式，甚至可以不需要使用文本通知。使用声音很容易把效果弄得过于夸张，所以设计恰到好处的声音是非常重要的。

　　声音是在屏幕上显示视觉通知的绝佳代替选择。这样可以不打断屏幕中目前的内容，在电视屏幕上显示是系统组件(如toast和弹出框)看起来并不是好。用户试图与禁用组件进行交互，或到达列表的尾部时，播放声音可以很好的表达错误情况的发生。

　　当用户只是部分使用电视应用时，可以以声音的形式得到通知反馈。如果用户正在和朋友聊天，或者用户阅读时以电视播放背景音乐，也可以让他们知道发生了什么。

　　12. 排版

　　首先，为应用设计界面时，应该确保所有界面都有横屏模式。同时，也应该确保基于焦点的导航创建易于浏览的布局。可以使用行，列表，网格，使用X轴和Y轴来布局内容。

　　电视与手机和平板有完全不同的体验，所以以往移动设备的布局可能不使用于电视应用。应该避免的是：

　　工具栏和动作栏不适用于电视接口的组件。一些条栏(如溢出菜单)很难在电视上导航，所以也是不适合电视应用。

　　有触摸交互的组件(如ViewPagers，ScrollViews)不适用于电视接口，应该避免使用。

　　我们创建的任何布局都应该填充整个屏幕。在设计电视应用的界面时，应该避免在透明活动下显示之前的视图。

　　13. OVERSCAN

　　所谓Overscan区域，就是电视机屏幕四周某些不可见的区域，这是电视机的特性。显示内容并不能总是在“安全区域”中显示，而不被遮蔽。我们需要确保考虑在Overscan区域，没有任何文字或组件被电视屏幕边缘遮蔽。

　　我们可以通过添加大小为屏幕尺寸5%的边距来避免内容被Overscan区域遮挡。1920×1080的屏幕将具有27px的垂直边距和48px的水平边距。

　　14. 颜色

　　与移动设备的渲染相比，电视屏幕渲染可能是非常不精准的。可能是由于电视的设置，滤色和任何滤波可能发生，这些都可能导致色相或亮度差异在屏幕上无法区分或夸张。为了避免严重的颜色问题，我们可以采取以下方法：

　　在屏幕上避免留有大片纯白色的空白区域，这种颜色会显得过分明亮，并且在巨大屏幕上视觉效果不好。同样也适用于高饱和度颜色填充屏幕的大部分区域。

　　应该避免使用非常暗的颜色，因为对比度的设置可能会导致用户无法识别。

　　理性选择颜色。推荐用暗色做为主色调加上重点色合理搭配来创建一组令人愉悦的配色，在屏幕上显示。

　　15. 字体

　　尽管上面提到，在设计电视应用时，文字内容应该保持在最低限度，但这并不意味着我们完全不使用任何文本。在使用文字的情况下，我们可以依照一些准则来确保电视屏幕中的文字在一定距离可以被读取和导航。下面是电视应用中用于排版的一些字体及大小的推荐：

　　注意：由于安卓TV应用会在各种各样的制造商设备上运行，电视屏幕都具有不同的对比度、锐度和色彩。我们应该避免使用过细的字体和字重，这会使用户难以阅读。

　　16. 文字

　　如前所述，电视应用中的文字应该保持在最低限度。大多数用户是远距离阅读文本，这会导致阅读变得非常困难，所以不要期待用户会在看电视的时候阅读大段的文字。但是，当我们确实需要使用文本的时候，我们需要注意以下几点：

　　文本应该分成小部分，以便文本可以轻松浏览。尽可能使用图像来帮助这种行为。

　　仔细选择文字颜色和背景颜色。在暗色背景上的浅色文字比浅色背景上的暗色文字更容易阅读。

　　无衬线字体可以帮助提高文本在电视屏幕上的可读性——应避免使用很细的字重，和或窄或宽笔画的字体，因为他们可能会对可读性产生负面影响。