tvos-design-guidelines
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChinesetvOS Design Guidelines
tvOS 设计指南
Apple TV is a living room device driven entirely by focus-based navigation and the Siri Remote. There is no pointer, no touch screen, and no mouse. Every design decision must account for the 10-foot viewing distance, the simplicity of the remote, and the lean-back nature of TV consumption.
Apple TV 是一款完全基于焦点导航和Siri Remote操作的客厅设备。它没有指针、触摸屏或鼠标。每一个设计决策都必须考虑10英尺的观看距离、遥控器的简洁性以及电视消费的“后仰放松”特性。
1. Focus-Based Navigation (CRITICAL)
1. 基于焦点的导航（至关重要）
The focus system is the foundation of all tvOS interaction. There is no cursor -- users move focus between elements using the Siri Remote touch surface.
焦点系统是所有tvOS交互的基础。这里没有光标——用户通过Siri Remote的触控表面在元素之间移动焦点。
Rules
规则
FOCUS-01: Every interactive element must have a clearly visible focus state.
The focused item must be unmistakably distinguished from unfocused items. Use scaling (typically 1.05x-1.1x), elevation via shadow, brightness changes, or border highlights. Never rely on color alone.
FOCUS-02: Focus movement must be predictable and follow a logical spatial layout.
When a user swipes right, focus must move to the element visually to the right. Avoid layouts where focus jumps unexpectedly across the screen. Grid and linear layouts are safest.
FOCUS-03: Use focus guides (UIFocusGuide) to bridge gaps in layouts.
When visual gaps exist between focusable elements, add invisible focus guides so the user does not get stuck. Every swipe should move focus somewhere meaningful.
FOCUS-04: Apply the parallax effect to focused items.
Focused cards, posters, and icons should exhibit a subtle parallax tilt responding to touch surface movement. Use layered images (LSR format) with foreground, midground, and background layers. This communicates depth and confirms focus.
FOCUS-05: Make focus targets large enough for comfortable navigation.
Minimum recommended touch target is 250x150pt for cards. Smaller elements are difficult to land on with swipe-based navigation. Group small actions under a focused parent when possible.
FOCUS-06: Provide a default focused element on every screen.
When a view appears, one element must already hold focus. Choose the most likely user intent -- typically the primary content item or the first item in a collection.
FOCUS-07: Preserve focus memory when returning to a screen.
If a user navigates away and returns, focus should restore to the last focused item on that screen, not reset to the default.
FOCUS-08: Never trap focus.
Users must always be able to move focus away from any element. If focus cannot leave a region, the app feels broken.
FOCUS-01：每个交互元素必须具备清晰可见的焦点状态。
获得焦点的项目必须与未获得焦点的项目有明确区分。可使用缩放（通常为1.05倍-1.1倍）、阴影提升、亮度变化或边框高亮。切勿仅依赖颜色区分。
FOCUS-02：焦点移动必须可预测且遵循合理的空间布局。
当用户向右滑动时，焦点必须移动到视觉上位于右侧的元素。避免出现焦点在屏幕上意外跳转的布局。网格和线性布局是最安全的选择。
FOCUS-03：使用焦点指南（UIFocusGuide）填补布局中的间隙。
当可聚焦元素之间存在视觉间隙时，添加不可见的焦点指南，避免用户操作受阻。每一次滑动都应将焦点移动到有意义的位置。
FOCUS-04：为获得焦点的项目应用视差效果。
获得焦点的卡片、海报和图标应呈现出响应触控表面移动的细微视差倾斜效果。使用包含前景、中景和背景图层的分层图像（LSR格式）。这能传达深度感并确认焦点位置。
FOCUS-05：确保焦点目标的大小便于舒适导航。
卡片的最小建议触控目标为250x150pt。较小的元素难以通过滑动导航精准定位。尽可能将小操作分组到一个获得焦点的父元素下。
FOCUS-06：在每个屏幕上设置默认的焦点元素。
当视图显示时，必须有一个元素已处于焦点状态。选择最符合用户预期的元素——通常是主要内容项或集合中的第一个项目。
FOCUS-07：返回屏幕时保留焦点记忆。
如果用户导航离开后返回，焦点应恢复到该屏幕上最后获得焦点的项目，而非重置为默认项。
FOCUS-08：切勿设置焦点陷阱。
用户必须始终能够从任何元素移开焦点。如果焦点无法离开某个区域，应用会给人一种“损坏”的感觉。
Parallax Layer Reference
视差图层参考
| Layer | Purpose | Movement Amount |
|---|---|---|
| Background | Static backdrop, blurred imagery | Minimal (1-2pt) |
| Midground | Primary artwork or content image | Moderate (3-5pt) |
| Foreground | Title text, logos, badges | Maximum (5-8pt) |
Use Xcode's LSR (Layered Static Image) format or dynamically compose layers at runtime via or custom focus effects.
TVMonogramView| 图层 | 用途 | 移动幅度 |
|---|---|---|
| 背景 | 静态背景、模糊图像 | 极小（1-2pt） |
| 中景 | 主要插图或内容图像 | 中等（3-5pt） |
| 前景 | 标题文本、标志、徽章 | 最大（5-8pt） |
使用Xcode的LSR（分层静态图像）格式，或通过或自定义焦点效果在运行时动态组合图层。
TVMonogramView2. Siri Remote (CRITICAL)
2. Siri Remote（至关重要）
The Siri Remote is the primary (and often only) input device. It has a touch surface, Menu button, Play/Pause button, Siri/microphone button, volume buttons, and a power button.
Siri Remote是主要（且通常是唯一）的输入设备。它配备了触控表面、菜单按钮、播放/暂停按钮、Siri/麦克风按钮、音量按钮和电源按钮。
Rules
规则
REMOTE-01: Touch surface swipes control focus movement.
Swiping moves focus in the corresponding direction. Clicking the touch surface selects the focused item. These are the two fundamental interactions -- design everything around them.
REMOTE-02: Menu button must always navigate back.
Pressing Menu should dismiss the current screen, close an overlay, or navigate up the hierarchy. At the top level, it returns to the Apple TV home screen. Never override this expectation.
REMOTE-03: Play/Pause button must control media playback.
If media is playing, Play/Pause should toggle playback regardless of what screen is visible. Do not repurpose this button for non-media actions.
REMOTE-04: Never require complex or multi-finger gestures.
The Siri Remote touch surface is small. Do not require pinch, rotate, multi-tap, or long-press gestures. Stick to single-finger swipe and click.
REMOTE-05: Swipe directions must be intuitive and consistent.
Horizontal swipes scroll horizontally; vertical swipes scroll vertically. Never invert axes. Diagonal content movement should follow the dominant swipe axis.
REMOTE-06: Support Siri voice input for search and text entry.
Text input via the on-screen keyboard is tedious on tvOS. Always support dictation and Siri search as alternatives to keyboard entry.
REMOTE-07: Provide click feedback.
When the user clicks the touch surface to select an item, provide immediate visual feedback (animation, highlight change, or haptic-style visual pulse) so the click feels responsive.
REMOTE-01：触控表面滑动控制焦点移动。
滑动操作会向对应方向移动焦点。点击触控表面可选择获得焦点的项目。这是两个基础交互——所有设计都应围绕它们展开。
REMOTE-02：菜单按钮必须始终用于返回导航。
按下菜单按钮应关闭当前屏幕、关闭覆盖层或向上导航层级。在顶层时，它会返回Apple TV主屏幕。切勿违背这一预期。
REMOTE-03：播放/暂停按钮必须控制媒体播放。
如果媒体正在播放，无论当前显示哪个屏幕，播放/暂停按钮都应切换播放状态。切勿将此按钮用于非媒体操作。
REMOTE-04：切勿要求复杂或多手指手势。
Siri Remote的触控表面很小。不要要求捏合、旋转、多点点击或长按手势。坚持使用单手指滑动和点击操作。
REMOTE-05：滑动方向必须直观且一致。
水平滑动控制水平滚动；垂直滑动控制垂直滚动。切勿反转轴方向。对角线内容移动应遵循主导滑动轴。
REMOTE-06：支持Siri语音输入用于搜索和文本输入。
在tvOS上通过屏幕键盘输入文本非常繁琐。始终支持听写和Siri搜索作为键盘输入的替代方案。
REMOTE-07：提供点击反馈。
当用户点击触控表面选择项目时，应提供即时视觉反馈（动画、高亮变化或类触觉的视觉脉冲），让点击操作感觉有响应。
3. 10-Foot UI (HIGH)
3. 10英尺UI（高度重要）
Apple TV content is viewed from across a room, typically 8-12 feet (2.5-3.5 meters) from the screen. All visual design must account for this distance.
Apple TV内容是从房间另一端观看的，通常距离屏幕8-12英尺（2.5-3.5米）。所有视觉设计都必须考虑这个距离。
Rules
规则
DISTANCE-01: Minimum body text size is 29pt.
Text below 29pt becomes difficult to read at living room distances. Titles should be 48pt or larger. Use San Francisco Display or comparable high-legibility typeface.
DISTANCE-02: Maintain high contrast between text and backgrounds.
Use light text on dark backgrounds as the default. tvOS uses a dark theme. Contrast ratio should meet WCAG AA or higher (4.5:1 for body text, 3:1 for large text).
DISTANCE-03: Limit text per screen.
TV is a visual medium. Show headlines, short descriptions, and metadata -- not paragraphs. If extended text is necessary, use scrollable text overlays that the user explicitly opens.
DISTANCE-04: Use bold, clear imagery at high resolution.
Full-screen background images should be 1920x1080 or 3840x2160 (4K). Content artwork should be sharp and visually engaging. Avoid small, detailed illustrations that lose clarity at distance.
DISTANCE-05: Keep layouts simple and spacious.
Generous margins and padding. Do not crowd the screen with many small elements. A single row of 5-7 cards is preferable to a dense grid of 20+ thumbnails.
DISTANCE-06: Use the TV-safe area.
Keep all critical content within the safe area (60pt inset from edges). Content near screen edges may be cropped on some TV sets due to overscan.
DISTANCE-07: Avoid thin fonts and hairline borders.
Thin strokes disappear on TV displays, especially with motion blur and compression artifacts. Use medium or semibold weights minimum.
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：避免细字体和细线边框。
细线条在电视显示屏上会消失，尤其是在有运动模糊和压缩伪影的情况下。至少使用中等或半粗体字重。
Text Size Reference
字号参考
| Element | Minimum Size | Recommended Size |
|---|---|---|
| Body text | 29pt | 31-35pt |
| Secondary labels | 25pt | 29pt |
| Titles | 48pt | 52-76pt |
| Large headers | 64pt | 76-96pt |
| Buttons | 29pt | 35-38pt |
| 元素 | 最小字号 | 推荐字号 |
|---|---|---|
| 正文文本 | 29pt | 31-35pt |
| 次要标签 | 25pt | 29pt |
| 标题 | 48pt | 52-76pt |
| 大型标题 | 64pt | 76-96pt |
| 按钮 | 29pt | 35-38pt |
4. Top Shelf (HIGH)
4. Top Shelf（高度重要）
The Top Shelf is a prominent content area displayed when the user focuses on your app icon on the Apple TV home screen. It is prime real estate for showcasing content.
Top Shelf是当用户在Apple TV主屏幕上聚焦到你的应用图标时显示的突出内容区域。这是展示内容的黄金位置。
Rules
规则
SHELF-01: Provide a Top Shelf extension.
Apps should include a TVTopShelfProvider that returns dynamic content. A static Top Shelf is a missed opportunity for engagement.
SHELF-02: Use the correct layout style for your content.
- Inset banner: 1 large focused item with smaller items on either side. Best for featured or editorial content.
- Sectioned content: Multiple scrollable rows of items grouped by category. Best for media libraries.
SHELF-03: Top Shelf items must deep-link into the app.
Each item must open the corresponding content when selected. Never link all items to the same generic landing page.
SHELF-04: Use high-quality, engaging imagery.
Top Shelf images are displayed large on the home screen. Blurry, low-resolution, or text-heavy images look unprofessional. Recommended image sizes:
- Inset banner: 1940x624pt (@1x) or 3880x1248pt (@2x)
- Sectioned items: 404x608pt (@1x)
SHELF-05: Keep Top Shelf content fresh.
Update Top Shelf content regularly -- ideally reflecting recently added, trending, or personalized content. Stale Top Shelf content signals an abandoned app.
SHELF-01：提供Top Shelf扩展。
应用应包含TVTopShelfProvider以返回动态内容。静态的Top Shelf会错失用户参与的机会。
SHELF-02：根据内容选择正确的布局样式。
- 内嵌横幅：1个大型焦点项目，两侧配有较小项目。最适合推荐或编辑内容。
- 分区内容：按类别分组的多个可滚动项目行。最适合媒体库。
SHELF-03：Top Shelf项目必须深度链接到应用内。
每个项目在被选中时必须打开对应的内容。切勿将所有项目链接到同一个通用着陆页。
SHELF-04：使用高质量、有吸引力的图像。
Top Shelf图像会在主屏幕上大尺寸显示。模糊、低分辨率或文本过多的图像看起来不专业。推荐图像尺寸：
- 内嵌横幅：1940x624pt（@1x）或3880x1248pt（@2x）
- 分区项目：404x608pt（@1x）
SHELF-05：保持Top Shelf内容新鲜。
定期更新Top Shelf内容——最好反映最近添加、热门或个性化的内容。过时的Top Shelf内容会暗示应用已被弃用。
5. Media & Playback (MEDIUM)
5. 媒体与播放（中等重要）
Apple TV is primarily a media consumption device. Playback interfaces must follow established TV conventions.
Apple TV主要是一款媒体消费设备。播放界面必须遵循既定的电视惯例。
Rules
规则
MEDIA-01: Use standard transport controls.
Provide play, pause, skip forward (10s), skip back (10s), and a scrubber timeline. Use to get these for free with consistent behavior.
AVPlayerViewControllerMEDIA-02: Show an info overlay on swipe-down during playback.
Swiping down during playback should reveal an info panel showing title, description, and metadata. Swiping down again or pressing Menu dismisses it.
MEDIA-03: Support scrubbing via the touch surface.
Swiping left/right on the touch surface during playback should scrub through the timeline. Show thumbnail previews during scrubbing when possible.
MEDIA-04: Support subtitles and alternative audio tracks.
Provide access to subtitle selection and audio track switching via the info overlay or the standard player controls.
MEDIA-05: Support Picture in Picture where appropriate.
For video content, allow PiP so users can browse other content while watching. Implement integration.
AVPictureInPictureControllerMEDIA-06: Remember playback position.
When a user returns to previously watched content, resume from where they left off. Display a progress indicator on content thumbnails.
MEDIA-07: Handle interruptions gracefully.
If the user presses the TV button or switches apps during playback, save position and pause cleanly. Resume without re-buffering when the user returns.
MEDIA-01：使用标准传输控件。
提供播放、暂停、快进（10秒）、快退（10秒）和 scrubber 时间轴。使用可免费获得这些控件，且行为一致。
AVPlayerViewControllerMEDIA-02：播放期间向下滑动显示信息覆盖层。
播放期间向下滑动应显示一个信息面板，展示标题、描述和元数据。再次向下滑动或按下菜单按钮可关闭它。
MEDIA-03：支持通过触控表面进行 scrub 操作。
播放期间在触控表面左右滑动应能 scrub 时间轴。可能的话，在scrub期间显示缩略图预览。
MEDIA-04：支持字幕和替代音轨。
通过信息覆盖层或标准播放器控件提供字幕选择和音轨切换功能。
MEDIA-05：在合适的场景下支持画中画（Picture in Picture）。
对于视频内容，允许画中画功能，让用户在观看视频时浏览其他内容。实现集成。
AVPictureInPictureControllerMEDIA-06：记住播放位置。
当用户返回之前观看的内容时，从上次暂停的位置继续播放。在内容缩略图上显示进度指示器。
MEDIA-07：优雅处理中断。
如果用户在播放期间按下电视按钮或切换应用，保存播放位置并干净地暂停。当用户返回时，无需重新缓冲即可恢复播放。
6. Tab Bar (MEDIUM)
6. 标签栏（中等重要）
The tvOS tab bar sits at the top of the screen, unlike iOS where it sits at the bottom. It provides primary navigation between app sections.
tvOS的标签栏位于屏幕顶部，这与iOS中位于底部的标签栏不同。它提供应用各板块之间的主要导航。
Rules
规则
TAB-01: Place the tab bar at the top of the screen.
This is the standard tvOS convention. Bottom tab bars are an iOS pattern and feel wrong on TV.
TAB-02: Tab bar should be translucent and overlay content.
The tab bar floats over content with a blur effect. When the user focuses on the tab bar, content shifts down to make room.
TAB-03: Use 3-7 tabs.
Fewer than 3 tabs suggests the app is too simple for tab navigation. More than 7 tabs becomes difficult to navigate with horizontal swiping.
TAB-04: Every tab must have a text label.
Icon-only tabs are insufficient at TV viewing distances. Text labels are required for clarity. Icons may accompany text but are not required.
TAB-05: Focus on the tab bar should feel lightweight.
When focus moves to the tab bar, it should appear smoothly. Content preview should be visible beneath the translucent bar. Switching tabs should update the content below immediately or show a loading state.
TAB-06: Remember the selected tab across app launches.
If the user was on the "Search" tab when they left the app, return to "Search" when they re-open it.
TAB-01：将标签栏放置在屏幕顶部。
这是tvOS的标准惯例。底部标签栏是iOS的模式，在电视上会显得格格不入。
TAB-02：标签栏应半透明并覆盖在内容之上。
标签栏通过模糊效果悬浮在内容上方。当用户聚焦到标签栏时，内容会向下移动以腾出空间。
TAB-03：使用3-7个标签。
少于3个标签意味着应用对于标签导航来说过于简单。超过7个标签会让水平滑动导航变得困难。
TAB-04：每个标签必须配有文本标签。
仅使用图标的标签在电视观看距离下辨识度不足。必须使用文本标签以确保清晰。图标可与文本搭配，但并非必需。
TAB-05：聚焦到标签栏的操作应感觉轻盈。
当焦点移动到标签栏时，它应平滑显示。半透明栏下方应能看到内容预览。切换标签应立即更新下方内容，或显示加载状态。
TAB-06：跨应用启动记住选中的标签。
如果用户离开应用时处于“搜索”标签，重新打开应用时应返回“搜索”标签。
Evaluation Checklist
评估清单
Use this checklist when reviewing a tvOS app design or implementation.
在审核tvOS应用设计或实现时使用此清单。
Focus System
焦点系统
- Every interactive element has a visible, distinct focus state
- Focus movement is predictable in all directions
- No focus traps exist anywhere in the app
- Focus guides bridge layout gaps
- Parallax effect is applied to content cards and icons
- Default focus is set on every screen
- Focus memory is preserved when navigating back
- 每个交互元素都有可见、独特的焦点状态
- 所有方向的焦点移动均可预测
- 应用中不存在任何焦点陷阱
- 焦点指南填补了布局间隙
- 内容卡片和图标应用了视差效果
- 每个屏幕都设置了默认焦点
- 返回导航时保留了焦点记忆
Siri Remote
Siri Remote
- Menu button navigates back on every screen
- Play/Pause controls media playback globally
- No complex gestures are required
- Click feedback is immediate and visible
- Siri/dictation supported for text input
- 每个屏幕上的菜单按钮都用于返回导航
- 播放/暂停按钮全局控制媒体播放
- 不要求任何复杂手势
- 点击反馈即时且可见
- 支持Siri/听写用于文本输入
10-Foot UI
10英尺UI
- Body text is 29pt or larger
- High contrast ratios on all text
- Text content is concise, not paragraph-heavy
- Imagery is high resolution and visually clear
- Layout uses generous spacing with TV-safe margins
- No thin fonts or hairline strokes
- 正文字号为29pt或更大
- 所有文本都具备高对比度
- 文本内容简洁，无大量段落
- 图像分辨率高且视觉清晰
- 布局使用充足间距和电视安全边距
- 无细字体或细线条
Top Shelf
Top Shelf
- Top Shelf extension provides dynamic content
- All Top Shelf items deep-link correctly
- Images are high quality and correctly sized
- Content updates regularly
- Top Shelf扩展提供动态内容
- 所有Top Shelf项目都能正确深度链接
- 图像质量高且尺寸正确
- 内容定期更新
Media & Playback
媒体与播放
- Standard transport controls are available
- Scrubbing works via touch surface
- Subtitles and audio tracks are accessible
- Playback position is remembered
- Interruptions are handled gracefully
- 提供标准传输控件
- 支持通过触控表面进行scrub操作
- 可访问字幕和音轨
- 记住播放位置
- 优雅处理中断
Tab Bar
标签栏
- Tab bar is at the top of the screen
- Tabs have text labels
- 3-7 tabs are used
- Selected tab persists across launches
- 标签栏位于屏幕顶部
- 标签配有文本标签
- 使用3-7个标签
- 选中的标签在应用启动时保持选中状态
Anti-Patterns for TV
TV设计反模式
Do not bring mobile patterns directly to tvOS. The following are common mistakes:
| Anti-Pattern | Why It Fails | Correct Approach |
|---|---|---|
| Bottom tab bar | iOS convention; feels wrong on TV | Use top tab bar |
| Small touch targets | Cannot precisely target with swipe navigation | Minimum 250x150pt cards |
| Dense text screens | Unreadable at 10-foot distance | Headlines + short descriptions only |
| Hamburger menus | No tap-to-reveal interaction on TV | Use tab bar or focus-driven menus |
| Pull-to-refresh | No pull gesture on Siri Remote | Auto-refresh or explicit refresh button |
| Toast notifications | Easy to miss on a large TV screen | Use modal alerts or persistent banners |
| Scroll indicators | Thin scrollbars invisible at distance | Use content peek (partially visible next item) |
| Pinch-to-zoom | Multi-finger gestures impossible on Siri Remote | Provide explicit zoom controls |
| Long forms | Keyboard input is painful on tvOS | Pre-fill, use profiles, or offload to iPhone |
| Thin/light typography | Disappears on TV displays | Medium weight minimum |
切勿直接将移动模式带到tvOS中。以下是常见错误：
| 反模式 | 失败原因 | 正确做法 |
|---|---|---|
| 底部标签栏 | iOS惯例；在电视上显得格格不入 | 使用顶部标签栏 |
| 小触控目标 | 无法通过滑动导航精准定位 | 卡片最小尺寸为250x150pt |
| 密集文本屏幕 | 在10英尺距离下无法阅读 | 仅显示标题+简短描述 |
| 汉堡菜单 | 电视上没有点击展开的交互 | 使用标签栏或基于焦点的菜单 |
| 下拉刷新 | Siri Remote无下拉手势 | 自动刷新或提供明确的刷新按钮 |
| 提示通知（Toast） | 在大电视屏幕上容易被忽略 | 使用模态提醒或持久横幅 |
| 滚动指示器 | 细滚动条在远距离下不可见 | 使用内容预览（部分可见下一个项目） |
| 捏合缩放 | Siri Remote无法实现多手指手势 | 提供明确的缩放控件 |
| 长表单 | 在tvOS上通过键盘输入非常痛苦 | 预填充、使用配置文件或转移到iPhone上完成 |
| 细/轻量字体 | 在电视显示屏上会消失 | 至少使用中等字重 |