电视系统概览

在硬件方面，电视和机顶盒通常比手机和电脑落后几代。它们的组件用于运行轻量级系统，针对观看体验、能效和寿命进行了优化。尽管存在这些限制，不同平台仍提供各异的性能特征、惯例和价格点。

当今一些值得注意的平台/系统包括：

• Roku：最经济实惠且流行，但受弱硬件严重限制
• WebOS：最常见于LG设备，依赖Web标准并在适度硬件上运行良好
• Android TV：被认为非常灵活和可定制，但对硬件要求相对较高
• Amazon Fire：基于Android但拥有独立生态系统，提供流畅性能但比原生Android稍有限制
• tvOS：由苹果提供，提供高端体验伴随高端价格，定制性极低

尽管存在差异，所有这些平台都有一个共同点：遥控器。如果将这些遥控器简化为仅保留方向键、确定和返回按钮，它们仍然能够成功导航任何电视界面。

TV设计基础

屏幕布局

现代面板以更高精度显示内容，使得考虑标题和安全区域显得过时。如今，我们可以简单地考虑边距并获得相同结果。

Google要求5%的边距布局，Apple在其布局指南中建议顶部和底部60点边距，侧面80点边距。标准并不完全明确，但要点很简单：在屏幕边缘和内容之间留出一些呼吸空间。

布局网格

流媒体应用界面共享一个共同的布局结构，其中大量内容以简单网格形式排列。这些水平滚动的组（有时称为"架子"）类似于书架的排。

如果定义一个标准的12列布局网格，带有2列宽的项目，我们会得到类似这样的结果。最后一个项目落在"安全"区域之外。

提示：设计TV界面时的一个有用技巧是利用奇数列。这允许最后一个项目落在定义的边距内并更加突出，同时对整个布局影响很小。

排版

TV设计需要我们实践克制，这在处理字体时变得非常明显。所有良好的排版实践都适用于TV设计，但有两点特别需要注意：

首先，考虑到距离，所有内容（包括字体）都需要放大。在网络上16-18px可能足够作为基线文本，但在TV上24px应该是起点，其余比例相应增加。

其次，建议从5-6个尺寸的小尺度开始，并在必要时调整。TV体验的简单性可以且应该反映在排版本身中。

色彩

为电影体验构建并经常在弱光环境中使用，电视非常适合较暗和更柔和的界面。明亮的颜色，尤其是纯白色（#ffffff），将转化为最大亮度并可能使眼睛疲劳。作为一般原则，您应该依赖更柔和的调色板。

没有指针或触摸功能，清晰突出交互元素至关重要。虽然使用明亮颜色作为背景可能过于强烈，但少量使用它们以高度对比的方式突出元素状态将完美工作。

焦点状态

通过遥控器交互意味着与界面的某种分离，需要依赖焦点状态来承担TV交互的负担。这是通过视觉强调元素来锚定用户的眼睛并映射界面内的任何后续移动来实现的。

有几种标准方式来设计焦点状态：

• 缩放：放大聚焦元素，通过将其移近观看者来创造深度错觉
• 颜色反转：反转背景和文本颜色
• 边框高亮：在突出显示的元素周围添加边框

这些样式可以独立使用或以各种组合出现，出现在所有TV界面中。

常见TV UI组件

菜单

作为水平栏出现在屏幕顶部边缘，或作为垂直侧边栏，菜单有助于在应用的不同屏幕之间移动。虽然其方向主要取决于特定系统，但TV似乎更偏爱侧边菜单。

两种菜单类型都有一个共同问题：用户离菜单越远（对于顶部菜单是垂直向底部；对于侧边栏是水平向右），返回菜单所需的按键次数就越多。幸运的是，通常添加返回按钮快捷方式以允许立即聚焦菜单，这大大提高了可用性。

架子、海报和卡片

“架子”（水平滚动组）构成了TV内容浏览的基础，通常以三种不同宽高比的海报填充：2:3、16:9和1:1。

• 2:3海报：常见于专门从事电影和节目的应用中，其垂直方向参考了传统电影海报
• 16:9海报：遵循相同原则但具有水平方向，通常与文本标签配对
• 1:1海报：常见于音乐应用如Spotify，其形状让人联想到专辑封面和黑胶唱片套

所有这些都可以在单个应用中共存，允许更丰富的界面并打破原本统一的内容库。

聚光灯

通常占据屏幕的整个宽度，这些引人注目的组件将突出显示新功能或推广的媒体内容。在统一的架子海洋中，它们可以战略性地放置以引入美学多样性并打破单调。

聚光灯本身可以是一个可聚焦元素，或者由于其宽敞的空间而可以暴露多个操作。

搜索和文本输入

TV允许以屏幕键盘的形式进行文本输入，类似于现代智能手机中的键盘。然而，由于遥控器控制方案的限制，使用遥控器输入文本效率相当低。

幸运的是，键盘在所有系统中都有考虑，通常有两种变体。我们有大多数平台使用的网格布局和tvOS上支持触摸和基于手势控制的水平布局。

播放器和进度条

虽然TV应用的所有不同部分都有其目的，但播放器占据中心舞台。这是所有路径最终导向的地方，也是观众花费最多时间的地方。这也是焦点丢失的罕见实例之一，允许界面不妨碍享受内容。

每个播放器都有一套基本控件，其基础是进度条。

进度条UI元素用作内容持续时间的视觉指示器。在交互期间，焦点不会放在条本身，而是放在称为"擦洗器"的可移动旋钮上。通过左右移动擦洗器或在其轨道上停止，我们可以控制播放。

调用进度条的另一种间接方法是使用传统的播放和暂停按钮。

超越基础思考

长按

大多数现代遥控器支持按压并保持手势，作为增强功能的微妙方式，特别是在按钮较少的遥控器上。

例如，在浏览内容时按住方向键会加速滚动，而在播放期间按住左/右会加速时间线搜索。在许多应用中，单次按下OK按钮打开视频，但长时间按住会打开带有附加操作的上下文菜单。

重新映射键和上下文的重要性

按钮功能可以根据上下文重新映射。例如，亚马逊的Prime Video在播放期间将向上按钮映射到打开其X-Ray功能。

由于输入有限，上下文成为强大工具。它不仅清理界面以允许更专注于特定任务，还使同一组按钮能够根据观众在应用中的位置触发不同的操作。

TV上的高效移动

在最佳情况下，TV上的每个操作至少"花费"一次点击。没有无目的的光标移动 - 如果您想移动，必须按下按钮。

回到主屏幕，我们可以注意到垂直和水平移动扮演两个不同的角色。垂直移动在组之间切换，而水平移动在这些组内切换项目。无论您在组内走了多远，单次垂直点击都会将您移动到另一个组。

超越JPG思考

大多数TV界面由紧密排列的封面和海报艺术驱动。虽然通常设计精美，但这种类型的内容和布局为视觉装饰留出很少空间。多年来，具有小文件大小的平面JPG一直是首选格式，尽管当代替代品如WebP正在慢慢取代它的位置。

同时，我们可以依赖经过试验和测试的PNG为我们的TV界面增添更多光彩。它支持透明度的简单事实可以帮助通常僵化的UI感觉更精致。