重新思考电视平台的用户界面设计

电视用户界面的基本组成介绍

如今，绝大多数消费者都在使用付费电视，但这并不意味着他们已经避开大屏幕来消费他们的内容。 根据尼尔森公布的数据，美国成年人的收视习惯发现，92% 的收视仍然发生在电视屏幕上。 这些都是相当大的数字。

美国成年人中超过 92% 的观看仍然发生在电视屏幕上。

在过去的几十年里，“看电视”的含义发生了很大变化。 我们不再局限于装满屏幕的遥控器和有线电视盒； 我们正在使用智能电视，或者使用 Roku、Amazon Fire 和 Apple TV 等冰球进行流媒体播放，或者连接 Xbox 和 Playstation 等视频游戏机。 这些设备中的每一个都允许用户界面比老式的屏幕指南强大得多。

通过 Hulu、Netflix 或亚马逊等基于订阅的在线服务付费观看广播或 VOD 节目，占全球在线受访者 (Nielsen) 的 26%。 这是一个很大的数字。 然而，72% 的受访者确认他们仍然通过传统的电视连接来观看他们的内容。

这是否意味着传统的电视连接将继续存在？

我们似乎都认为那里的剪线钳代表了更高的数字。 尼尔森报告称，预计 2015-16 赛季美国将有 1.164 亿家庭观看电视。 这是一个巨大的数字，该报告还发现，其中大约 950 万户家庭已经切换到免费的 OTA 电视。 在所有流媒体服务中，Netflix (60.7%) 似乎领先于游戏，其次是 Amazon Prime Video (49.4%) 和 Hulu (26%)。 我相信人们切断电源的最大原因之一是我们只想为我们使用的东西付费。

与电脑甚至手机相比，为电视设计 UI 仍然是一个相对较新的领域。 它也是一个根本不同的平台，我们消费内容的方式也不同。 电视设计需要一系列独特的考虑因素，包括屏幕尺寸和观看距离、技术限制和使用环境。 用户处于“靠背”体验，平均坐在 10 英尺外，用户界面和体验需要反映这一点。 与触摸屏平板电脑和手机相反，电视上的交互是通过 D-pad（方向控制板）使用遥控器或视频游戏控制器完成的，这增加了复杂性。

显示器

电视不像平板电脑和手机。

随着时间的推移，电视已经发生了很大变化，从笨重的家具变成了挂在墙上的时尚简约显示器。 当电视占据整个客厅时，他们使用了一种技术，可以在电视机上产生不一致的图像，尤其是靠近边缘的地方。 为了弥补这些问题，CRT 电视受到过扫描。 这只是意味着图像被略微放大，因此边缘不在查看区域的范围之外。

传统上，广播公司预料到了这一点，并希望避免他们的任何关键信息过于靠近屏幕边缘显示。 为了解决这个问题，他们创建了一个标题安全区域来显示不失真的文本，以及一个可以安全显示图像的动作安全区域。

由于我们无法控制的原因，过扫描仍然存在……即使在您的新高清电视上也是如此。 电视的过扫描量不一致。 为确保您的所有主要信息（例如标题和重要操作）都是安全的，请将它们保存在安全范围内。

目前还没有安全行动领域的“标准”； 它主要由平台本身定义。 谷歌将他们的安全区域保持在狭窄的范围内，而苹果则更加慷慨。 根据我在网络上的多次搜索，这些区域将在电视屏幕中心的 85% 到 95% 之间变化。 为了满足您可能正在使用的所有不同平台的要求，我建议使用 60px 顶部和底部边距以及 90px 侧边距的安全区域。 这意味着您的所有主要信息都需要适合该区域，以适应所有电视屏幕并满足每个平台要求。

要开始您的新电视用户界面设计，请创建一个新的 1920 x 1080 画布。 您的边距（安全区）应为两侧（左侧和右侧）90 像素以及顶部和底部 60 像素。 您可以在此处免费下载文件。

导航

上下左右如何塑造电视界面。

作为设计师，我们设计的硬件将定义我们的一些设计模式。 在移动设备上，我们通过滑动、点击、长按、拉动等方式来执行操作。 选项卡和菜单用作我们设备上的导航模式。 电视提供了一个巨大的画布，如果做得不好，很容易变得过于复杂。 观看一长串内容以最大化用户可见的内容量已成为电视 UI 的标准元素。

与我们用手指控制的移动设备不同，大多数电视用户界面由方向键控制并在远离屏幕的地方使用。 无论是遥控器还是游戏手柄，方向键都将导航限制为四个方向：上、下、左和右。

每个平台也有自己的既定约定。 例如，在 Xbox 上，触发器提供“Page Up”和“Page Down”控件，而保险杠用于在内容视图之间切换。 每个平台上还有许多经验丰富的游戏玩家会熟悉的“高级用户”按钮。

TV UI 中的另一个关键元素是焦点状态。 由于无法触摸屏幕或使用鼠标，用户必须导航到他们想要选择的元素。 当用户在应用程序中导航时，应突出显示不同的 UI 元素，指示导航元素处于焦点位置。

电视设计时的焦点和突出状态非常重要。 该焦点状态是突出显示可选组件并表示用户当前屏幕位置的元素。 显示焦点的形式可能会有所不同； 但是，根据组件的不同，一致性始终是关键。 清晰且高度可见的焦点可帮助用户快速识别其当前的屏幕位置并简化导航。 当用户将视线从电视上移开，然后又收回视线时，应该会自动清楚当前选择了哪个选项进行导航。 屏幕上的每个项目都必须可以通过光标到达，并且应该始终清楚光标接下来可以移动的位置。

可能让用户想知道他们在应用程序中的位置的设计示例。 这些示例没有提供足够的定位视觉指示（焦点状态）。 用户应该能够随时清楚地看到他们所在的位置，而无需上下移动。 您应该能够将视线从电视机上移开并返回，并且仍然知道您的位置。

排版

在十英尺外阅读。

电视应用程序通常被称为十英尺体验，这个术语指的是您和电视之间的共同距离。 与移动设备和台式机等其他设备相反，电视将更像是一个“靠背放松”的环境。 鉴于这个距离，我们需要对 UI 的处理方式与我们在 Web 或移动设备上的处理方式有所不同。

电视屏幕通常比移动设备和台式电脑显示器大，但观看距离更远。 易读性成为一个重要特征，这意味着必须相应地调整文本和其他元素的大小。 根据您的年龄，18px 可能是最小的可读尺寸，并且仅适用于非必要标签，例如眉毛标签。 尽管如此，作为一般经验法则，您选择的字体大小永远不应小于 24 pts。 这就是我认为适合每种类型用户的最小字体大小。

电视上良好排版的关键是不断测试。 显示器上的薄、小字体看起来干净利落，但一旦放在电视上，它可能会显得过时或变得难以理解。

扫描线

什么是扫描线？

与台式机、移动设备和平板电脑屏幕不同，电视屏幕上的图像由奇数和偶数扫描线组成。 电视在奇数和偶数扫描线之间快速交替地呈现这些线。 落在单个扫描线上的任何单个像素（或像素线）都会闪烁。 为了避免您的项目在屏幕上闪烁，您应该始终保持您的线条为偶数且不小于 2 像素。 这是在处理跨平台项目并准备从触摸设备（移动设备和平板电脑）传输您的设计时需要考虑的事情，您通常会发现自己在为电视创建 1px 边框按钮。

避免这些模糊线条或形状的另一种方法是确保您的设计始终像素完美。 下面的示例是使用奇数创建的线的一个很好的示例。 正如你所看到的，我们可以清楚地看到它的效果，它变得令人不安。

颜色

电视显示器有限制。

首先要记住的是，电视的伽马值比台式机、平板电脑和手机设备高得多。 描述 gamma 如何影响图像质量的最佳方式是 gamma 表示灰度中每个步骤之间的亮度差异水平，或者“快速”黑色变得更亮的程度。 我们认为两倍的光只亮了一小部分。 不同品牌和型号的电视在亮度、显示和其他设置方面差异很大。 像字体一样，颜色应该尽早并且经常在电视上进行测试。

选择颜色时要遵循的一些指导原则： 晚上或在黑暗的房间里看电视时，明亮的颜色可能会使眼睛刺眼。 避免在大型元素或背景中过度使用饱和颜色（尤其是红色）和大量使用白色。 纯白色会产生光晕和其他视觉干扰。 选择白色时，建议选择#f1f1f1十六进制值以避免任何闪烁。 为了提高可读性，请确保在元素之间创建足够的对比度

一般规则是避免高对比度颜色之间的锐利边缘（尤其是深色旁边的亮色），并避免“热”色，例如非常饱和的红色和黄色。 与饱和度较低的颜色或蓝色和绿色等较冷的颜色相比，这些颜色更容易流血。

始终在实际电视上测试颜色，以了解您的颜色选择如何转化为大屏幕。 如果可能，请在多台电视上预览您的应用，因为电视型号之间的颜色可能会有很大差异。 只需连接电视机上的 HDMI 电缆并进行测试。

基础

小事要考虑。

这些元素应该用于指导您的整体设计。 设计电视 UI 时最大的考虑因素是简单性和轻量级交互。

虽然交互设计的许多基本原理和最佳实践仍然适用，但与计算机或移动设备不同，电视的使用方式更加轻松。 电视上的用户界面应该清晰、简单、直观。 设计要求简单明了，信息密度低。 这些元素需要足够大并且间隔足够远，以便从远处读取。 为每个屏幕提供一组清晰的操作或选项。

这种设计干净简单，使用漂亮的大卡片处理。 焦点状态是通过与干净设计的其余部分对齐的比例和阴影来实现的。 元数据也仅在悬停时可见，这使用户可以将注意力集中在当前卡片上。

将最重要的内容或选项首先放在屏幕上，以便用户轻松查看和导航。 必须删除不必要的屏幕级别。 进入不同的层次并再次退出必须是容易和明显的。

设计电视应用程序时最关键的因素是为用户操作提供清晰准确的导航。 如果导航不明确，用户会感到困惑和不安全。

简而言之，用户应该始终准确地知道他们在应用程序中的位置。 请记住，用户仅使用基本控件进行导航。 移动、返回、回车等基本导航功能必须清晰。 用户应该能够通过这些操作使用他们想要的操作。

作为设计师，我们的工作是创建和设计用户界面，使用户能够以清晰且易于浏览的方式访问内容。 我们不能指望用户为了看到我们的内容而适应新的习惯。 相反，我们必须调整我们的用户界面，以便他们可以在黑暗中被那些给我们提供低于他们全部意图的人操作，并且使用非常有限的输入设备。 这是一个相当大的挑战，但潜在的回报是巨大的。 玩得开心设计！

• • •

进一步阅读 Toptal 设计博客：

• 电子商务用户体验——最佳实践概述（附信息图）
• 以人为本的设计在产品设计中的重要性
• 最佳 UX 设计师作品集——鼓舞人心的案例研究和示例
• 移动界面的启发式原则
• 预期设计：如何创造神奇的用户体验