TVs vary widely in size. On Apple TV, app layouts don’t automatically adapt to the size of the screen like they do in iOS. Instead, apps show the same exact interface on every display. Take extra care in designing your layout so that it looks amazing in a variety of screen sizes.
Optimize assets for the big screen. Design your app’s user interface for a screen resolution of 1920 x 1080 pixels (1080p), which implies a widescreen aspect ratio of 16:9. All assets should be @1x resolution.
Keep primary content away from the edges of the screen. Be mindful of the area spanning 60 pixels from the top and bottom of the screen, and 90 pixels from the sides. It’s difficult to see content that close to the edges, and unintended cropping can occur due to overscanning on older TVs.
Include appropriate padding between focusable elements. If you’re using UIKit and the focus APIs, an element gets bigger when it comes into focus. Consider how elements look when they’re focused, and make sure they don’t unintentionally overlap important information.
Allude to hidden content by partially displaying offscreen elements. In large collections where content doesn't fit on a single screen, hint at the additional content by showing portions of the offscreen items.
Use layout templates to build media-centered apps. If your app layout requires minimal customization and simply needs to present content beautifully, use a predesigned layout template. See Layout Templates.
Collections of content tend to work well in grid format on Apple TV. They showcase content well, are easy to browse at a distance, and are quick to navigate with the remote.
The following grid layouts provide an optimal viewing experience. Be sure to use appropriate spacing between unfocused rows and columns to prevent overlap when an item is brought into focus.
Three-column grid Unfocused content width 548px Horizontal spacing 48px Minimum vertical spacing 100px
Four-column grid Unfocused content width 375px Horizontal spacing 80px Minimum vertical spacing 100px
Five-column grid Unfocused content width 308px Horizontal spacing 50px Minimum vertical spacing 100px
Six-column grid Unfocused content width 250px Horizontal spacing 48px Minimum vertical spacing 100px
Seven-column grid Unfocused content width 204px Horizontal spacing 52px Minimum vertical spacing 100px
Eight-column grid Unfocused content width 172px Horizontal spacing 52px Minimum vertical spacing 100px
Nine-column grid Unfocused content width 148px Horizontal spacing 51px Minimum vertical spacing 100px
If you use the collection view flow element provided by UIKit, the number of columns in a grid is automatically determined based on the width and spacing of your content. For developer guidance, see UICollectionViewFlowLayout.
Adhere to the screen’s safe zone. Inset primary content 60 pixels from the top and bottom of the screen, and 90 pixels from the sides. Only partially displayed offscreen content and elements that deliberately flow offscreen should appear outside this zone.
Include additional vertical spacing for titled rows. If a row has a title, provide appropriate spacing between the bottom of the previous unfocused row and the center of the title. Then, provide additional spacing between the bottom of the title and the top of the unfocused items in the row.
Use consistent spacing. When content isn't consistently spaced, it's harder to scan and no longer looks like a grid.
Size partially hidden content symmetrically. To help direct attention to the fully visible content, keep partially hidden offscreen content the same width on each side of the screen.
Customize templates tastefully. Layout templates are highly customizable; you have control over the background, tinting, size, layout, and more. As you design your app, defer to content whenever possible, avoiding customizations that appear distracting, jarring, or obtrusive.
Understand a template’s purpose before using it. If your customizations make the underlying template unrecognizable, consider using a different template or building a fully custom interface.
For detailed information about integrating templates into your app, see Apple TV Markup Language Reference.
The alert template displays a message onscreen and asks for permission to perform an action, such as confirming a purchase or a destructive action, such as a deletion.
See also Alerts in Interface Elements.
Use the catalog template to display groupings of related items, such as genres of movies or TV shows. View the list of groupings on the left, and focus on one to see its items on the right.
The compilation template displays elements contained by an item, such as songs in an album or tracks in a playlist. It’s most commonly used to display audio-related content.
Descriptive Alert Template
The descriptive alert template shows a lengthy message on the screen and may ask the user to perform an action, such as agreeing to terms and conditions or a licensing agreement.
Show, don’t tell. Whenever possible, avoid descriptive alert text. See if you can present the same information in a more digestible way, such as with images.
Keep it short and avoid scrolling. Reading lots of text on a distant screen strains the eyes and isn’t much fun. Seriously consider how much text your app needs to display.
If the message is scrollable, position buttons side by side. With this placement, scrolling up and down scrolls the text, while scrolling left and right switches focus between buttons.
See also Alerts in Interface Elements.
The list template shows a list of items on the right, such as movies or TV shows. Focus on one to see its related content on the left, such as its artwork or description.
The loading template temporarily displays a progress indicator and some descriptive text while your content is retrieved from the server. It lets people know something is happening, so your app doesn’t appear frozen.
Keep loading text concise and informative. If loading is quick, people may not have time to read longer text before it disappears, making them feel like they’ve missed something.
See also Progress Indicators in Interface Elements.
Main Menu Template
The main menu template displays a full-screen image with a menu along the bottom. It’s commonly used for the home screen of a movie, with menu options for playing the movie and accessing chapters or extras.
Menu Bar Template
The menu bar template is designed for top-level navigation, as an entry page to your content. It includes a menu of items across the top. Focus on an item to display related content below the menu.
Keep the menu bar clutter-free. Each additional item you display adds more choices and increases the complexity of your app.
Keep menu items onscreen. When the menu bar is in focus, all of its items should be visible. In general, include seven or fewer items with short labels, to avoid crowding content and causing items to scroll off the screen.
See also Tab Bars in Interface Elements.
The parade template shows rotating previews for a focused grouping of content, such as movies or albums in a particular genre. A list of groupings is shown on the right. Focus on one grouping to display noninteractive rotating previews of its elements on the left.
The product template promotes movies, TV shows, or other products. It typically includes a product image, background, and descriptive information. A shelf below the product content displays related products, and the user can scroll down to bring up more information, like cast and crew listings, ratings, and reviews.
If you customize the background, make sure it doesn’t clash with your other content. Consider image and text colors carefully before customizing the background. By default, the background displays a blurred copy of your product image, producing a complementary visual effect.
Product Bundle Template
The product bundle template promotes a series of related TV shows, movies, and other products. It typically includes an image, background, and descriptive information. A shelf below the content displays the products contained by the bundle, such as the episodes of a TV season. The user can scroll down to bring up more information, such as cast and crew listings, ratings, and reviews.
The rating template lets people adjust the rating of a particular item, such as a movie or a song.
The search template lets people search your content and view results. It includes a search field, a keyboard, and a list of results.
The stack template displays groups of products (such as different genres of movies) in rows. Each group of products is displayed directly underneath the previous group.
San Francisco is the system font on Apple TV. There are two variants of this font, both of which were designed for high legibility on a big screen: San Francisco Text and San Francisco Display.
When you use the system font for text in labels and other interface elements, Apple TV automatically applies the most appropriate font variant based on the point size. It also switches fonts automatically as needed and respects accessibility settings.
Minimize text. Show, don’t tell. Reading lots of text on a screen across the room strains the eyes and isn’t much fun. Seriously consider how much text your app really needs to show and see what you can communicate with images or an animation instead. If you use images, be sure to provide alternative text that VoiceOver can use to describe the imagery to people with visual impairments.
Choose the appropriate system font at design time. Above all, text must be legible at a distance. Use San Francisco Text for text 39 points or smaller. San Francisco Display is a better choice for text 40 points or larger.
Use built-in text styles whenever possible. The built-in text styles let you express content in ways that are visually distinct, while retaining optimal legibility. These styles are based on the system fonts and allow you to take advantage of key typographic features, such as Dynamic Type, which automatically adjusts tracking and leading for every font size. Use the Body text style for primary content. Use the Footnote and Caption text styles for labels and secondary content.
Make sure custom fonts are legible at a distance. Custom typefaces are supported on Apple TV, but can be tough to read at a distance, especially if they’re too thin. Unless your app has a compelling need for a custom font, such as for branding purposes or to create an immersive gaming experience, stick with the system fonts. If you do use a custom font, make sure it’s readable from across the room.
Implement accessibility features for custom fonts. System fonts automatically react to accessibility features, such as when bold text is enabled. Apps using custom fonts should implement the same behavior by checking whether accessibility features are enabled and registering for notifications when they change. See Accessibility.
Download the San Francisco fonts in Resources.
tvOS uses San Francisco as the system font for Latin, Greek and Cyrillic alphabets, and a variety of other typefaces for other scripts.
Successful branding involves more than just adding brand assets to your app. Great apps express unique brand identity through smart font, color, and image decisions. Provide enough branding to give people context in your app, but don’t overwhelm them.
Incorporate refined, unobtrusive branding. People use your app to be entertained, get information, or get things done, not to watch an advertisement. For the best experience, subtly incorporate your brand through your app’s design. Using colors from your app icon throughout your interface is one great way to provide context in your app.
Defer to content over branding. Showing a persistent bar at the top of the screen that does nothing but display brand assets means there’s less room for viewing content. Instead, consider less intrusive ways to implement branding, such as using a custom color scheme or font, or subtly customizing the background.
Resist the temptation to display your logo throughout your app. Avoid displaying a logo throughout your app unless it’s necessary for providing context.
The Apple TV platform is designed to be lightweight and unobtrusive. Make colors contribute to the immersive experience, drawing people into content rather than the interface around it. When choosing how and where to use color in your app, consider whether it enhances the content.
In general, choose a limited color palette that coordinates with your app logo. Subtle use of color is a great way to communicate your brand.
Preview colors on a real TV. Colors you see on your computer don’t always look the same on a TV screen. For optimal results, use the sRGB color space, and always test colors on an actual television to understand how your color choices translate to the big screen. If possible, preview your app on multiple TVs because colors can vary dramatically between television models.
Be aware of colorblindness and how different cultures perceive color. People see colors differently. Many colorblind people, for example, find it difficult to distinguish red from green (and either color from gray), or blue from orange. Avoid using these color combinations as the only way to distinguish between two states or values. For example, instead of using red and green circles to indicate offline and online, use a red square and a green circle. Some image-editing software includes tools that can help you proof for colorblindness. Also consider how your use of color might be perceived in other countries and cultures. In some cultures, for example, red is used to communicate danger. In others, red has positive connotations. Make sure the colors in your app send the appropriate message.
Show focus through more than just color. Subtle scaling and responsive animation are the primary ways to denote interactivity on Apple TV when an element is in focus.
Preview colors at various display levels. Colors on a TV vary depending on the manufacturer, brightness, and display settings. If some settings cause your content to blend together or become difficult to see, rethink how you use color.
Test your app with the dark appearance enabled.
People can switch from the default light appearance to a dark appearance to create a deeper cinematic experience. When enabled, this mode swaps light system backgrounds and standard interface elements with dark equivalents, and shows light system text in place of dark system text. Make sure your app looks great with both the light and dark appearances. If necessary, provide two versions of your images, content, and custom interface elements, and display the appropriate version based on the current appearance setting.
Throughout the system, soft, delicate, semi-translucent textures appear on windows and overlays to convey a sense of depth and hierarchical structure. These designs also give users a sense of place within an app, but don’t distract from the content. The textures are designed to look great with a variety of colors and in a variety of contexts.
Consider using system textures. System textures can give your app a native feel and create a smooth transition when the user switches from another app to your app. The following textures styles are available.
|Prominent||This is a dynamic texture that displays the extra light texture if the light appearance is enabled, or the extra dark texture if the dark appearance is enabled. This is the recommended texture for full screen backgrounds.|
|Regular||This is a dynamic texture that displays the light texture if the light appearance is enabled, or the dark texture if the dark appearance is enabled. This is the recommended texture for overlay views that partially obscure content onscreen.|
|Extra light||This is good for full screen views that require a light color scheme.|
|Light||This is good for overlay views that partially obscure content onscreen and require a light color scheme.|
|Extra dark||This is good for full screen views that require a dark color scheme.|
|Dark||This is good for overlay views that partially obscure content onscreen and require a dark color scheme.|
Use lighter, translucent textures to elevate content and make it feel fresh. Darker textures evoke a heavier feeling in which content feels older, sinks to the background, and can hide shadows, thereby reducing depth and vigor. It’s difficult to tell what’s in focus when you can’t see the shadows.
For developer guidance, see UIBlurEffectStyle.
The Apple TV video player lets people enjoy media within your app and is designed uniquely for the touch experience. Its seamless integration with the Siri Remote allows viewers to use fluid, intuitive gestures to move through their media.
Using the remote, viewers can:
- Scan quickly through a video by gliding a thumb across the touch surface
- Skip forward and backward in a video by clicking on the left and right sides of the touch surface
- Skip forward or backward through chapters by clicking to reveal the video timeline and then clicking on the left and right sides of the touch surface
- Fast-forward or backward by clicking and holding on the left and right sides of the touch surface
- Swipe downward to display additional information such as subtitles, chapters, audio tracks, and speaker output options
Use the system video player. The built-in video player is designed to provide an exceptional video playback experience. Its controls are minimal and unobtrusive, keeping the media as the center of attention. Unless your app truly requires a custom video player, use the system video player to produce a consistent media viewing experience across the platform.
Defer to content when displaying logos or noninteractive overlays above video. A small, unobtrusive logo or countdown timer may be appropriate for your video. Avoid large, distracting overlays that don’t contribute to the viewing experience. People care about seeing content without distractions, and will appreciate a clean, uncluttered viewing experience.
Show interactive overlays gracefully. Some videos display interactive overlays, such as quizzes, surveys, and progress check-ins. For the best user experience, implement a minimum delay of 0.5 seconds to pause playing media, and display an interactive overlay. Provide a clear way to dismiss the overlay and resume media playback once user interaction is complete.
Provide additional information when it adds value. Customize a video’s additional information by providing an image, title, description, and other useful information. Generally, restrict this content to eight lines or fewer so that it doesn’t obscure media playback.
Information and resources for streaming video can be found on Apple’s HTTP Live Streaming (HLS) page. To provide the best experience possible streaming video content to Apple TV, adhere to the requirements and guidelines in HLS Authoring Specification for Apple TV.
Many animations for focus, selection, and transitions are built right into the Apple TV platform from UIKit, letting you take advantage of them in your own apps. These subtle animations create a visual sense of connection between people and the content on the screen. Use built-in animations in combination with tasteful custom animations to enhance immersion in your content.
Use animation only in response to a user action. Animation that’s not a direct result of an action can make people feel disconnected or distracted. Don’t use animation just for the sake of using animation.
Avoid animations with excessive movement. Animations with superfluous bounce or spring effects may look great on your computer screen, but they can be annoying when projected over a much larger area. Use gentle, easing animated effects instead. Always test your designs to make sure they look great on an actual TV.
Strive for realism and credibility. The design language of Apple TV is light and airy; its key user interface components are made to appear thin and lightweight. Elements that look lightweight shouldn’t act like they have mass by bouncing into place or springing out of place. People tend to accept artistic license, but they can feel disoriented when movement doesn’t make sense or appears to defy physical laws.
Make animations optional. When the option to reduce motion is enabled in accessibility preferences, your app should minimize or eliminate application animations.