tvos-design-guidelines

tvOS 设计指南

Apple TV 是一款客厅设备，完全依靠基于焦点的导航和 Siri Remote 操作。它没有指针、触摸屏或鼠标。每项设计决策都必须考虑 10 英尺的观看距离、遥控器的简洁性，以及电视内容消费的放松特性。

---

1. 基于焦点的导航（关键）

焦点系统是所有 tvOS 交互的基础。这里没有光标——用户通过 Siri Remote 触控表面在各个元素之间移动焦点。

规则

FOCUS-01：每个交互元素都必须有清晰可见的焦点状态。 焦点所在的项目必须与未聚焦项目明显区分。使用缩放（通常为 1.05x-1.1x）、通过阴影增强层次感、调整亮度或添加边框高亮。切勿只依赖颜色。

FOCUS-02：焦点移动必须可预测，并遵循合理的空间布局。 用户向右滑动时，焦点必须移动到视觉上位于右侧的元素。避免使用焦点会意外跳跃到屏幕另一处的布局。网格和线性布局最为稳妥。

FOCUS-03：使用焦点引导（UIFocusGuide）连接布局中的间隙。 可聚焦元素之间存在视觉间隙时，应添加不可见的焦点引导，避免用户无法继续移动焦点。每次滑动都应让焦点移至有意义的位置。

FOCUS-04：为聚焦项目应用视差效果。 聚焦的卡片、海报和图标应能响应触控表面移动，呈现轻微的视差倾斜效果。使用分层图像（LSR 格式），包含前景、中景和背景层。这能营造景深感，并确认焦点所在位置。

正确：

// SwiftUI — custom focus engine with explicit focus state
struct ContentView: View {
    @FocusState private var focusedItem: String?

    var body: some View {
        HStack(spacing: 40) {
            ForEach(items) { item in
                CardView(item: item)
                    .focusable()
                    .focused($focusedItem, equals: item.id)
                    .scaleEffect(focusedItem == item.id ? 1.1 : 1.0)
                    .shadow(radius: focusedItem == item.id ? 20 : 0)
                    .animation(.easeInOut(duration: 0.15), value: focusedItem)
            }
        }
    }
}

错误：

// SwiftUI — no focus state: unfocused and focused items look identical
struct ContentView: View {
    var body: some View {
        HStack(spacing: 40) {
            ForEach(items) { item in
                CardView(item: item)
                    .focusable()
                // No scale, shadow, or visual change on focus
                // User cannot tell which item is selected
            }
        }
    }
}

FOCUS-05：确保焦点目标足够大，便于舒适地导航。 卡片建议的最小触控目标为 250x150pt。通过滑动导航时，很难准确选中较小的元素。尽可能将较小的操作归并到一个可聚焦的父元素下。

FOCUS-06：为每个屏幕提供默认焦点元素。 视图出现时，必须已有一个元素处于焦点状态。选择最符合用户意图的元素——通常是主要内容项目或集合中的第一个项目。

FOCUS-07：返回屏幕时保留焦点记忆。 用户离开屏幕后再返回时，焦点应恢复到该屏幕上最后聚焦的项目，而不是重置为默认焦点。

FOCUS-08：绝不困住焦点。 用户必须始终能够将焦点移出任何元素。如果焦点无法离开某个区域，应用就会显得无法正常工作。

FOCUS-09：降低重新定位的成本。 保持行顺序稳定，返回时恢复先前的焦点，并优先选择附近的焦点目标，避免用户每次导航后都得重新浏览整个屏幕。

视差分层参考

图层	用途	移动幅度
背景	静态背景、模糊图像	最小（1-2pt）
中景	主要插图或内容图像	适中（3-5pt）
前景	标题文字、标志、徽章	最大（5-8pt）

在资源目录中使用 Xcode 的 LSR（分层静态图像）格式来制作静态分层图像——系统会在焦点变化时自动为其添加动画。若要以编程方式自定义视差，可堆叠多个 UIImageView 实例，并使用焦点引擎回调（didUpdateFocus(in:with:) 和 UIFocusAnimationCoordinator）在焦点过渡期间控制图层移动。（UIMotionEffect 只会响应 Siri Remote 陀螺仪的细微动作，并非由焦点驱动视差的实现机制。）

---

2. Siri Remote（关键）

Siri Remote 是主要（且通常是唯一的）输入设备。它配备触控表面、Menu 按钮、Play/Pause 按钮、Siri/麦克风按钮、音量按钮和电源按钮。

规则

REMOTE-01：触控表面的滑动用于移动焦点。 向某个方向滑动，焦点就会朝对应方向移动。点击触控表面可选择当前聚焦的项目。这是两种基本交互——所有设计都应以此为核心。

REMOTE-02：菜单按钮必须始终用于返回。 按下“菜单”按钮应关闭当前屏幕或叠加层，或返回上一级。在顶层时，它会返回 Apple TV 主屏幕。绝不要改变用户对这一操作的预期。

REMOTE-03：播放/暂停按钮必须控制媒体播放。 如果正在播放媒体，无论当前显示哪个屏幕，播放/暂停按钮都应切换播放状态。不要将此按钮改作非媒体用途。

REMOTE-04：绝不要要求复杂手势或多指手势。 Siri Remote 的触控表面很小。不要要求用户使用捏合、旋转、多次点击或长按手势。只使用单指滑动和点击。

REMOTE-05：滑动方向必须直观且一致。 水平滑动时水平滚动，垂直滑动时垂直滚动。绝不要反转轴向。内容沿对角线移动时，应以滑动的主要方向为准。

REMOTE-06：支持使用 Siri 语音输入进行搜索和文本输入。 在 tvOS 上使用屏幕键盘输入文本很繁琐。始终提供听写和 Siri 搜索作为键盘输入的替代方式。

REMOTE-07：提供点击反馈。 用户点击触控表面选择项目时，应立即提供视觉反馈（动画、高亮变化或类似触觉反馈的视觉脉冲），让点击操作显得灵敏。

REMOTE-08：绝不要让屏幕键盘成为唯一实用的文本输入方式。 对于搜索、登录和设置，应优先使用听写、最近搜索、自动填充或简短的代码输入流程，而不是让用户使用遥控器输入长文本。使用遥控器输入文本会带来较高的动作和认知负担。

---

3. 10 英尺 UI（高优先级）

Apple TV 内容通常在距离屏幕 8-12 英尺（2.5-3.5 米）的房间另一端观看。所有视觉设计都必须考虑这一观看距离。

规则

DISTANCE-01：正文最小字号为 29pt。 小于 29pt 的文本在客厅观看距离下会很难阅读。标题应为 48pt 或更大。使用 San Francisco Display 或同等易读字体。

DISTANCE-02：确保文本与背景具有高对比度。 默认使用深色背景搭配浅色文本。tvOS 使用深色主题。对比度应达到 WCAG AA 或更高标准（正文为 4.5:1，大号文本为 3:1）。

DISTANCE-03：限制每个屏幕显示的文本量。 电视是视觉媒介。显示标题、简短描述和元数据，而不是段落。如果需要展示较长文本，应使用由用户主动打开的可滚动文本叠加层。

DISTANCE-04：使用醒目、清晰的高分辨率图像。 全屏背景图像应为 1920x1080 或 3840x2160（4K）。内容插图应清晰且具有视觉吸引力。避免使用在远处观看时会失去清晰度的小型精细插图。

DISTANCE-05：保持布局简洁、宽松。 留出充足的边距和内边距。不要在屏幕上挤满许多小元素。单行显示 5-7 张卡片优于排列密集的 20+ 张缩略图网格。

DISTANCE-06：使用电视安全区域。 所有关键内容都应放在安全区域内（距离边缘 60pt）。由于过扫描，部分电视可能会裁切靠近屏幕边缘的内容。

DISTANCE-07：避免使用细字体和极细边框。 细线条在电视显示屏上会消失，运动模糊和压缩伪影会使这一问题更加明显。至少使用中等或半粗字重。

字号参考

元素	最小字号	推荐字号
正文	29pt	31-35pt
次要标签	25pt	29pt
标题	48pt	52-76pt
大号标题	64pt	76-96pt
按钮	29pt	35-38pt

---

4. 顶层展示区（高）

当用户在 Apple TV 主屏幕上聚焦于你的应用图标时，顶层展示区会显示一个醒目的内容区域，是展示内容的黄金位置。

规则

SHELF-01：提供顶层展示扩展。 应用应包含一个可返回动态内容的 TVTopShelfContentProvider（tvOS 14+）。TVTopShelfProvider 自 tvOS 14 起已弃用，请勿使用。静态顶层展示区会错失吸引用户互动的机会。

SHELF-02：为内容选择正确的布局样式。

• 内嵌横幅：1 个较大的焦点项，两侧是较小的项。最适合精选内容或编辑推荐内容。
• 分区内容：按类别分组的多个可滚动项目行。最适合媒体库。

SHELF-03：顶层展示区项目必须深度链接到应用内。 选中每个项目时，都必须打开对应内容。切勿将所有项目都链接到同一个通用首页。

SHELF-04：使用高质量、引人注目的图片。 顶层展示区图片会以较大尺寸显示在主屏幕上。模糊、低分辨率或文字过多的图片会显得不专业。建议图片尺寸：

• 内嵌横幅：1940x624pt (@1x) 或 3880x1248pt (@2x)
• 分区项目：404x608pt (@1x)

SHELF-05：保持顶层展示区内容常新。 定期更新顶层展示区内容，最好能展示最近新增、热门或个性化内容。过时的顶层展示区内容会让人觉得应用已被弃用。

---

5. 媒体与播放（中）

Apple TV 主要用于消费媒体内容。播放界面必须遵循既定的电视交互规范。

规则

MEDIA-01：使用标准播放控制项。 提供播放、暂停、快进（10 秒）、快退（10 秒）和时间线拖动条。使用 AVPlayerViewController 即可直接获得这些功能，并确保行为一致。

MEDIA-02：播放期间向下轻扫时显示信息浮层。 播放期间向下轻扫应显示信息面板，其中包含标题、描述和元数据。再次向下轻扫或按下 Menu 可将其关闭。

MEDIA-03：支持通过触控表面拖动播放进度。 播放期间在触控表面上向左或向右轻扫应能拖动时间线。尽可能在拖动时显示缩略图预览。

MEDIA-04：支持字幕和备用音轨。 通过信息浮层或标准播放器控制项提供字幕选择和音轨切换功能。

MEDIA-05：在适当情况下支持画中画。 对于视频内容，应支持 PiP，以便用户在观看时浏览其他内容。实现 AVPictureInPictureController 集成。

MEDIA-06：记住播放位置。 用户返回之前观看过的内容时，应从上次离开的位置继续播放。在内容缩略图上显示进度指示器。

MEDIA-07：妥善处理中断。 如果用户在播放期间按下 TV 按钮或切换应用，应保存播放位置并正常暂停。用户返回时应能继续播放，且无需重新缓冲。

---

6. 标签栏（中）

tvOS 标签栏位于屏幕顶部，与位于底部的 iOS 标签栏不同。它用于在应用的各个版块之间进行主要导航。

规则

TAB-01：将标签栏置于屏幕顶部。 这是 tvOS 的标准约定。底部标签栏是 iOS 的设计模式，用在电视上会显得不合适。

TAB-02：标签栏应为半透明，并覆盖在内容上方。 标签栏悬浮于内容上方，并带有模糊效果。当用户聚焦标签栏时，内容会向下移动，为标签栏腾出空间。

TAB-03：使用 3-7 个标签。 少于 3 个标签意味着应用过于简单，不适合采用标签导航。超过 7 个标签则会导致水平滑动导航变得困难。

TAB-04：每个标签都必须有文字标签。 仅使用图标的标签，在电视观看距离下无法满足需求。为确保清晰易懂，必须使用文字标签。可以搭配图标，但并非必需。

TAB-05：聚焦标签栏时，体验应轻盈流畅。 焦点移至标签栏时，标签栏应平滑显示。半透明栏下方应能看到内容预览。切换标签后，下方内容应立即更新，或显示加载状态。

TAB-06：在应用每次启动时记住所选标签。 如果用户离开应用时位于“Search”标签页，则重新打开应用时应返回“Search”。

---

7. 辅助功能（关键）

Apple TV 支持 VoiceOver。视力正常的用户通过焦点导航；VoiceOver 用户还会听到语音描述。两种方式都必须正常使用。

规则

ACCESS-01：每个交互元素都必须有含义明确的辅助功能标签。 仅使用图标的按钮和图片卡片都必须有标签。焦点到达时，VoiceOver 会播报所聚焦项目的名称。

ACCESS-02：为不明显的交互提供辅助功能提示。 如果点按卡片会执行打开内容以外的操作（例如播放预告片而非完整内容），应通过辅助功能提示说明。

ACCESS-03：确保 VoiceOver 焦点顺序与视觉焦点顺序一致。 VoiceOver 遍历元素的顺序必须与焦点引擎导航产生的顺序一致。通过 UIFocusGuide 自定义焦点顺序时，不得导致 VoiceOver 阅读顺序出现断层。

ACCESS-04：遵循“减少动态效果”设置。 当用户在“辅助功能”设置中启用“减少动态效果”时，必须减少或停用视差效果及其他动画。

ACCESS-05：响应“粗体文本”设置。 当用户启用“粗体文本”时，自定义渲染的文本必须相应调整。SwiftUI 动态字体样式会自动处理；自定义文本渲染必须检查 UIAccessibility.isBoldTextEnabled 或使用 @Environment(\.legibilityWeight)。

ACCESS-06：响应“增强对比度”设置。 当用户启用“增强对比度”（“加深系统颜色”）时，自定义颜色必须提供对比度更高的变体。在 SwiftUI 中使用 @Environment(\.colorSchemeContrast)，或在 UIKit 中使用 UIAccessibility.isDarkerSystemColorsEnabled 检测设置并应用适当的值。

ACCESS-07：遵循“动态字体 / 更大字体”设置。 tvOS 通过 UIContentSizeCategory 支持“更大字体”辅助功能设置。使用 SwiftUI 语义化文本样式（Font.TextStyle），以便文本自动缩放。对于 UIKit，应使用 UIFontMetrics，相对于基础 UIFont.TextStyle 缩放自定义字体。

正确：

// SwiftUI — semantic text styles scale with Larger Text automatically
Text("Now Playing")
    .font(.title2)        // Scales with UIContentSizeCategory
Text("Episode description")
    .font(.body)          // Scales with UIContentSizeCategory

// UIKit — scale custom font with UIFontMetrics
let baseFont = UIFont(name: "CustomFont-Regular", size: 29)!
let scaledFont = UIFontMetrics(forTextStyle: .body).scaledFont(for: baseFont)
label.font = scaledFont
label.adjustsFontForContentSizeCategory = true

错误：

// SwiftUI — hardcoded size ignores Larger Text preference
Text("Now Playing")
    .font(.system(size: 29)) // Does not scale

// UIKit — hardcoded font ignores UIContentSizeCategory
label.font = UIFont(name: "CustomFont-Regular", size: 29)
// Missing adjustsFontForContentSizeCategory = true

---

评估清单

审核 tvOS 应用的设计或实现时，请使用此清单。

焦点系统

• 每个交互元素都有明显且独特的焦点状态
• 焦点可向所有方向进行可预测的移动
• 应用中不存在焦点陷阱
• 焦点引导可跨越布局间隙
• 内容卡片和图标应用了视差效果
• 每个屏幕都设置了默认焦点
• 返回导航时会保留焦点记忆

Siri Remote

• 每个屏幕上的“菜单”按钮都可用于返回
• 播放/暂停控件可全局控制媒体播放
• 无需执行复杂手势
• 点击反馈即时且清晰可见
• 支持通过 Siri / 听写输入文本

10 英尺 UI

• 正文文字不小于 29pt
• 所有文字都具有高对比度
• 文字内容简洁，避免大段文字
• 图像分辨率高、视觉清晰
• 布局留白充足，并遵循电视安全边距
• 不使用细字体或极细线条

Top Shelf

• Top Shelf 扩展提供动态内容
• 所有 Top Shelf 项目都能正确深度链接
• 图像质量高且尺寸正确
• 内容定期更新

媒体与播放

• 提供标准播放控制
• 可通过触控表面拖动播放进度
• 可访问字幕和音轨
• 记住播放位置
• 妥善处理播放中断

标签栏

• 标签栏位于屏幕顶部
• 标签带有文字标签
• 使用 3-7 个标签
• 所选标签在应用重新启动后仍保持不变

无障碍功能

• 每个交互元素和内容卡片都有有意义的无障碍标签
• 对不明显的交互提供无障碍提示
• VoiceOver 焦点顺序与视觉焦点引擎顺序一致
• 启用“减少动态效果”时，停用视差效果和装饰性动画
• 遵循“粗体文本”偏好设置（SwiftUI 会自动处理；自定义文本需检查 isBoldTextEnabled）
• 遵循“提高对比度”偏好设置（自定义颜色需提供对比度更高的变体）
• 遵循“大号文本”（动态字体）偏好设置（在 SwiftUI 中使用 Font.TextStyle，或在 UIKit 中使用 UIFontMetrics）

---

电视端的反模式

不要将移动端模式直接照搬到 tvOS。以下是一些常见错误：

反模式	不适用的原因	正确做法
底部标签栏	属于 iOS 惯例，在电视上显得不合适	使用顶部标签栏
小型触控目标	通过滑动导航无法精确选中	卡片至少为 250x150pt
文字密集的屏幕	在 10 英尺外难以阅读	只显示标题和简短说明
汉堡菜单	电视上无法通过点击显示菜单	使用标签栏或由焦点驱动的菜单
下拉刷新	Siri Remote 不支持下拉手势	自动刷新或提供明确的刷新按钮
Toast 通知	在大屏幕电视上很容易被忽略	使用模态提醒或持久横幅
滚动指示器	细滚动条在远处难以看清	显示部分可见的下一项内容
捏合缩放	Siri Remote 无法执行多指手势	提供明确的缩放控件
长表单	在 tvOS 上输入很不方便	预填内容、使用个人资料，或转移到 iPhone 上填写
纤细／轻量字体	在电视显示屏上难以看清	至少使用中等字重