系统概览
在硬件方面，电视和机顶盒通常比手机和电脑落后几代。它们的组件旨在运行轻量级系统，优化观看体验、能效和寿命。然而即使在这些限制下，不同平台仍提供不同的性能特征、惯例和价格点。
当今一些值得注意的平台/系统包括：
- Roku：最经济实惠且流行，但受弱硬件严重限制
- WebOS：在LG设备上最常见，依赖Web标准并在一般硬件上运行良好
- Android TV：被认为非常灵活和可定制，但对硬件要求相对较高
- Amazon Fire：基于Android但拥有独立生态系统，提供流畅性能但比原生Android略有限制
- tvOS：由苹果提供，提供高端体验伴随高端价格，定制性极低
尽管存在差异，所有这些平台都有一个共同点：遥控器。如果将这些遥控器简化为仅方向键、确认和返回按钮，它们仍然能够成功导航任何电视界面。
电视设计基础
屏幕布局
现代面板以更高精度显示内容，使得考虑标题安全区和动作安全区显得过时。如今，我们可以简单地考虑边距并获得相同结果。
Google要求5%的边距布局，Apple在其布局指南中建议顶部和底部60点边距，侧面80点边距。标准并不完全明确，但要点很简单：在屏幕边缘和内容之间留出一些呼吸空间。
布局网格
流媒体应用如Netflix自然浮现在脑海中。广义上说，所有这些界面共享一个共同的布局结构，其中大量内容以简单网格排列。
这些水平滚动组（有时称为"架子"）类似于书架的排。通常，它们包含数十个不适合初始"折叠"区域的项，因此我们确保最后一个可见项从边缘"窥视"，微妙地向观众表明如果继续滚动还有更多内容可用。
如果定义一个标准的12列布局网格，带有2列宽的项，我们会得到类似这样的结果。如您所见，最后一项落在"安全"区域之外。
提示：设计电视界面时一个有用的技巧是利用奇数列。这允许最后一项落在定义的边距内并更加突出，同时对整个布局影响很小。
排版
电视设计要求我们实践克制，这在处理字体时变得非常明显。所有良好的排版实践都适用于电视设计，但我想指出两个具体要点：
首先，考虑到距离，所有内容（包括字体）都需要放大。在网络上16-18px可能足够作为基线文本，但在电视上24px应该是您的起点，其余比例相应增加。
其次，建议从小的5-6尺寸比例开始，并在必要时调整。电视体验的简单性可以且应该反映在排版本身中，虽然小，但如果设置正确，这样的比例将承担所有"繁重工作"。
颜色
为电影体验构建并经常在弱光环境中使用，电视非常适合较暗和更柔和的界面。明亮的颜色，尤其是纯白色（#ffffff），将转化为最大亮度并可能对眼睛造成压力。作为一般原则，您应该依赖更柔和的调色板。
最后，没有指针或触摸功能，清晰突出交互元素至关重要。虽然使用明亮颜色作为背景可能过于强烈，但少量使用它们以高度对比的方式突出元素状态将完美工作。
焦点状态
通过遥控器交互意味着与界面的某种分离，强制依赖焦点状态来承担电视交互的负担。这是通过视觉强调元素来锚定用户的眼睛并映射界面内的任何后续移动来实现的。
有几种标准方式来设计焦点状态样式：
- 缩放：放大聚焦元素，通过将其移近观看者来创造深度错觉
- 颜色反转：反转背景和文本颜色，常见于突出卡片
- 边框：在突出元素周围添加边框
这些样式独立使用或以各种组合出现于所有电视界面中。
常见电视UI组件
如今，电视上的核心用户旅程围绕浏览（或搜索）内容库、选择项目并打开专用屏幕观看或收听。
这转化为几个基本屏幕：
- 用于内容浏览的库（或主页）
- 用于特定查询的搜索
- 专注于内容播放的播放器屏幕
菜单
作为水平栏出现在屏幕顶部边缘，或作为垂直侧边栏，菜单有助于在应用的不同屏幕之间移动。虽然其方向主要取决于特定系统，但电视似乎更偏爱侧边菜单。
两种菜单类型共享一个共同问题：用户离菜单越远（对于顶部栏垂直向下；对于侧边栏水平向右），返回菜单所需的按钮按下次数就越多。幸运的是，通常添加了返回按钮快捷方式以允许立即聚焦菜单，这大大提高了可用性。
架子、海报和卡片
“架子”（水平滚动组）构成电视内容浏览的基础，通常填充三种不同宽高比的海报：2:3、16:9和1:1。
- 2:3海报：常见于专门从事电影和节目的应用中
- 16:9海报：遵循相同原则但具有水平方向
- 1:1海报：常见于像Spotify这样的音乐应用中
以上所有可以在单个应用中共存，允许更丰富的界面并打破原本统一的内容库。
聚光灯
通常占据屏幕的整个宽度，这些引人注目的组件将突出显示新功能或推广的媒体内容。在统一的架子海洋中，它们可以战略性地放置以引入美学多样性并打破单调性。
聚光灯本身可以是一个可聚焦元素，或者由于其宽敞空间可以暴露多个操作。
搜索和文本输入
手动浏览内容库可以产生结果，但拥有搜索能力将加快速度——尽管并非没有一些障碍。
电视允许以屏幕键盘的形式进行文本输入，类似于现代智能手机中的键盘。然而，由于遥控器控制方案的限制性，使用遥控器输入文本效率相当低。
幸运的是，键盘在所有系统中都有考虑，通常有两种变体。我们有大多数平台使用的网格布局和支持tvOS上启用触摸和基于手势控制的水平布局。
播放器和进度条
虽然电视应用的所有不同部分都有其目的，但播放器占据中心舞台。这是所有路径最终导向的地方，也是观众将花费最多时间的地方。这也是焦点丢失的罕见实例之一，允许界面不妨碍享受内容。
可以说，播放器是电视应用最复杂的功能，将所有不同功能压缩到单个屏幕中。
每个播放器都有一套基本控制，其基础是进度条。
进度条UI元素作为内容持续时间的视觉指示器。在交互期间，焦点不放在条本身，而是放在称为"擦洗器"的可移动旋钮上。通过左右移动擦洗器或停止其轨迹，我们可以控制播放。
调用进度条的另一种间接方法是使用经典播放和暂停按钮。
超越基础思考
长按
大多数现代遥控器支持按下并保持手势作为增强功能的微妙方式，特别是在按钮较少的遥控器上。
例如，在浏览内容时按住方向键会加速滚动，而在播放期间按住左/右会加速时间线搜索。在许多应用中，单次按下OK按钮打开视频，但按住更长时间会打开带有附加操作的上下文菜单。
重新映射键和上下文的重要性
虽然不如长按灵活，但按钮功能可以根据上下文重新映射。例如，亚马逊的Prime Video在播放期间将向上按钮映射到打开其X-Ray功能。
电视上的高效移动
在最佳情况下，电视上的每个操作至少"花费"一次点击。没有无目的的光标移动——如果你想移动，必须按下按钮。
回到主屏幕，我们可以注意到垂直和水平移动服务于两个不同的角色。垂直移动在组之间切换，而水平移动在这些组内切换项。无论你在组内走了多远，单次垂直点击将把你移动到另一个。
超越JPG思考
大多数电视界面由紧密排列的封面和海报艺术驱动。虽然通常设计精美，但这种类型的内容和布局为视觉修饰留出很少空间。多年来，具有小文件大小的平面JPG一直是首选格式，尽管像WebP这样的当代替代品正在慢慢取代它的位置。
同时，我们可以依赖经过试验和测试的PNG为我们的电视界面增添更多光泽。它支持透明度的简单事实可以帮助通常僵硬的UI感觉更精致。战略性地使用并与简单的焦点效果（如背景颜色变化）配对，PNG可以为界面带来微妙的愉悦时刻。
此外，如果支持像缩放和旋转这样的变换，您可以通过分层多个资源真正使那些矩形形状栩栩如生。
结语
植根于传统，具有有限的控制方案和相当"浅"的界面，电视设计提醒我们用我们手头的东西做到最好。我概述的限制不是为了引起幽闭恐惧症并使您在设计选择中感到受限，而是作为指导。正是通过接受这个事实，我们可以找到自由和探索的新途径。