Xbox 最佳做法Xbox best practices

默认情况下,所有 UWP 应用都将在 Xbox One 上运行,你无需执行任何额外操作。By default, all UWP apps will run on Xbox One without any extra effort on your part. 但是,如果想要你的应用大放异彩、吸引客户并在 Xbox 最佳应用体验方面具有竞争力,你应该遵循以下做法。However, if want your app to shine, delight your customers, and compete with the best app experiences on Xbox, you should follow the practices below.

备注

在开始之前,查看设计 Xbox 和电视中提供的设计指南。Before you start, take a look at the design guidelines laid out in Designing for Xbox and TV.

生成 Xbox One 的最佳做法To build the best experiences for Xbox One

应做事项: 关闭鼠标模式Do: Turn off mouse mode

Xbox 用户喜欢其控制器。Xbox users love their controllers. 若要优化控制器输入,请 禁用鼠标模式 并启用方向导航 (也称为 XY 焦点导航和交互) 。To optimize for controller input, disable mouse mode and enable directional navigation (also known as XY focus navigation and interaction). 观看重点陷阱和无法访问的 UI。Watch out for focus traps and inaccessible UI.

应做事项: 绘制适用于 10 英尺体验的焦点矩形Do: Draw a focus rectangle that is appropriate for a 10-foot experience

大多数 Xbox 用户面向电视坐在客厅中,因此请记住,标准焦点矩形难以在十英尺远的距离看到屏幕。Most Xbox users are sitting across the living room from their TV, so keep in mind that the standard focus rectangle is hard to see from ten feet away. 若要确保用户始终可以清楚地看到具有输入焦点的 UI 元素,请遵循焦点视觉对象指南。To ensure that the UI element with the input focus is clearly visible to the user at all times, follow the Focus visual guidelines. 在 XAML 中,当你的应用在 Xbox 上运行时,将免费获取此行为,但 HTML 应用需要使用自定义 CSS 样式。In XAML you will get this behavior for free when your app runs on Xbox, but HTML apps will need to use a custom CSS style.

应做事项: 与 SystemMediaTransportControls 类集成Do: Integrate with the SystemMediaTransportControls class

Xbox 用户想要使用 Xbox 媒体遥控器、Cortana(尤其是“播放”和“暂停”语音命令)和 Xbox SmartGlass 控制媒体应用。Xbox users want to control media apps with the Xbox Media Remote, Cortana (especially the "Play" and "Pause" voice commands), and Xbox SmartGlass. 若要免费获取这些功能,你的应用应使用 SystemMediaTransportControls 类,该类将自动包含在 Xbox 媒体控件中。To get these features for free your app should use the SystemMediaTransportControls class, which is automatically included in the Xbox media controls. 如果你的应用具有自定义媒体控件,请确保与 SystemMediaTransportControls 类集成,以向用户提供这些功能。If your app has custom media controls, make sure to integrate with the SystemMediaTransportControls class to provide these features to your users. 如果你要创建背景音乐应用,与 SystemMediaTransportControls 类集成,确保背景音乐控件在 Xbox 多任务选项卡中正常工作。If you are creating a background music app, integrate with the SystemMediaTransportControls class to ensure that the background music controls work correctly in the Xbox multitasking tab.

注意事项: 绘制到屏幕的边缘Consider: Draw to the edge of the screen

许多电视会截断屏幕的边缘,因此你的应用的所有重要内容都应显示在电视安全区域内。Many TVs cut off the edges of the display, so all of your app's important content should be displayed within the TV-safe area. UWP 使用过度扫描使该内容保持在电视安全区域内,但此默认行为可能会围绕你的应用绘制一个明显边框。UWP uses overscan to keep the content within the TV-safe area, but this default behavior can draw an obvious border around your app. 若要提供最佳做法,关闭默认行为,然后按照如何将 UI 绘制到屏幕的边缘中的说明操作。To provide the best experience, turn off the default behavior and follow the instructions at How to draw UI to the edge of the screen.

重要

如果禁用过度扫描,你有责任确保交互式元素和文本保留在电视安全区域内。If you disable overscan, it's your responsibility to make sure that interactive elements and text remain within the TV-safe area.

注意事项: 使用电视安全颜色Consider: Use TV-safe colors

电视不会处理严重的颜色浓度,但计算机监视器会处理。TVs don't handle extreme color intensities as well as computer monitors do. 避免在应用中使用高浓度颜色,以免用户看到奇怪的带状效果或褪色的图像。Avoid high-intensity colors in your app so that users don't see odd banded effects or a washed-out image. 另外,请注意,电视间的差异是指在你的电视上显示良好的颜色可能不适用于用户。Also, be aware that differences between TVs mean that colors that look great on your TV might look very different to your users. 阅读 颜色 以了解如何使你的应用对每个人都非常出色!Read Colors to understand how to make your app look great to everybody!

记住: 可以禁用缩放Remember: You can disable scaling

UWP 应用将自动缩放,以确保 UI 元素(如控件和字体)在所有设备上都符合条件。UWP apps are automatically scaled to ensure that UI elements such as controls and fonts are legible on all devices. 使用 XAML 的应用按 200% 缩放,使用 HTML 的应用按 150% 缩放。Apps that use XAML are scaled by 200%, while apps that use HTML are scaled by 150%. 如果你希望更好地控制你的应用在 Xbox 上的外观,禁用默认的比例系数以使用 HDTV (1920x1080) 的实际像素尺寸。If you want more control over how your app looks on Xbox, disable the default scale factor to use the actual pixel dimensions of an HDTV (1920x1080). 查看如何关闭缩放有效像素和缩放,获取有关定制你的应用以在 Xbox 上良好显示的信息。Take a look at How to turn off scaling and Effective pixels and scaling for information about tailoring your app to look great on Xbox.

如果你想要了解应用于 UWP 应用的一些做法,请观看此视频!If you want to get a glimpse of these practices applied to a UWP app, check out this video!

Channel 9Channel 9

9 频道 上的以下讨论是用于在 Xbox 上构建惊人应用的信息源:The following talks on Channel 9 are a great source of information for building amazing apps on Xbox:

Xbox 上的应用开发App Dev on Xbox

对于在 Xbox 上构建应用程序的开发人员来说, 应用程序在 xbox 事件上的开发 是一种很好的起点。The App Dev on Xbox event is a great starting point for developers new to building apps on Xbox.

另请参阅See also