Xbox 最佳做法Xbox best practices

根據預設,所有 UWP App 都可在 Xbox One 上執行,而不需要您進行任何額外的工作。By default, all UWP apps will run on Xbox One without any extra effort on your part. 不過,如果您希望使 App 受到注目、讓您的顧客滿意,並和 Xbox 上最佳的 App 體驗進行競爭,您應該遵循下列做法。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 使用者會坐在客廳電視的另一端,因此請留意標準的焦點矩形很難在 10 英呎的距離外看清楚。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 中,您會在您的 App 於 Xbox 上執行時免費獲得這項行為,但是 HTML App 將需要使用自訂 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 Media Remote、Cortana (特別是「播放」和「暫停」語音命令) 及 Xbox SmartGlass 控制媒體 App。Xbox users want to control media apps with the Xbox Media Remote, Cortana (especially the "Play" and "Pause" voice commands), and Xbox SmartGlass. 若要免費取得這些功能,您的 App 應該使用 SystemMediaTransportControls 類別,這個類別會自動包含在 Xbox 媒體控制項中。To get these features for free your app should use the SystemMediaTransportControls class, which is automatically included in the Xbox media controls. 如果您的 App 有自訂的媒體控制項,請務必整合 SystemMediaTransportControls 類別以將這些功能提供給您的使用者。If your app has custom media controls, make sure to integrate with the SystemMediaTransportControls class to provide these features to your users. 如果您正在建立背景音樂 App,請整合 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

許多電視會截斷顯示器的邊緣,因此您 App 所有的重要內容應該要顯示在電視安全區域內。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 使用溢出掃描來將內容保持在電視安全區域內顯示,但是這個預設行為會在您 App 的周圍繪製一個明顯的邊界。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. 請避免在您的 App 中使用高濃度色彩,這樣使用者才不會看到奇怪的條狀效果或褪色的影像。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 App 會自動縮放,以確保 UI 元素 (例如控制項與字型) 可在所有裝置上辨識。UWP apps are automatically scaled to ensure that UI elements such as controls and fonts are legible on all devices. 使用 XAML 的 App 會放大 200%,而使用 HTML 的 App 則會放大 150%。Apps that use XAML are scaled by 200%, while apps that use HTML are scaled by 150%. 如果您想要取得更多 Xbox 上的 App 外觀控制項,請停用預設縮放比例以使用 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). 如需有關自訂 App 以在 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 app 的做法,請觀查這段影片!If you want to get a glimpse of these practices applied to a UWP app, check out this video!

Channel 9Channel 9

Channel 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