Bonnes pratiques pour XboxXbox best practices

Par défaut, toutes les applications UWP sont exécutées sur Xbox One sans aucune action de votre part.By default, all UWP apps will run on Xbox One without any extra effort on your part. Toutefois, si vous voulez que votre application sorte du lot, suscite l’enthousiasme de vos clients et compte parmi les meilleures expériences d’applications sur Xbox, vous devriez suivre les pratiques ci-dessous.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.

Notes

Avant de commencer, lisez les recommandations de conception présentées dans Conception pour Xbox et télévision.Before you start, take a look at the design guidelines laid out in Designing for Xbox and TV.

Pour créer des expériences optimales sur Xbox OneTo build the best experiences for Xbox One

À faire : Désactiver le mode sourisDo: Turn off mouse mode

Les utilisateurs de Xbox aiment leurs contrôleurs.Xbox users love their controllers. Pour optimiser l’entrée du contrôleur, désactivez le mode souris et activez la navigation directionnelle (également appelée navigation de focus XY et interaction).To optimize for controller input, disable mouse mode and enable directional navigation (also known as XY focus navigation and interaction). Méfiez-vous des pièges de focus et de l’interface utilisateur inaccessible.Watch out for focus traps and inaccessible UI.

À faire : Tracer un rectangle de focus qui soit approprié à une expérience TV (« 10-foot experience »).Do: Draw a focus rectangle that is appropriate for a 10-foot experience

La plupart des utilisateurs Xbox sont assis dans leur salon face à leur télévision, donc gardez en tête que le rectangle de focus standard est difficile à voir à une distance de 3 mètres ( 10-foot).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. Pour être sûr que l’utilisateur voit toujours clairement l’élément d’interface utilisateur qui a le focus d’entrée, suivez les recommandations présentées dans Visuel du focus.To ensure that the UI element with the input focus is clearly visible to the user at all times, follow the Focus visual guidelines. En XAML, vous obtenez ce comportement sans rien faire lorsque votre application s’exécute sur Xbox. Par contre, vous devez utiliser un style CSS personnalisé pour les applications HTML.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.

À faire : Intégrer la classe SystemMediaTransportControlsDo: Integrate with the SystemMediaTransportControls class

Les utilisateurs Xbox veulent pouvoir contrôler les applications multimédias avec la télécommande multimédia Xbox, Cortana (en particulier les commandes vocales « Lecture » et « Pause ») et 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. Pour bénéficier gratuitement de ces fonctionnalités, votre application doit utiliser la classe SystemMediaTransportControls, qui est automatiquement incluse dans les commandes multimédias de la Xbox.To get these features for free your app should use the SystemMediaTransportControls class, which is automatically included in the Xbox media controls. Si votre application utilise des commandes multimédias personnalisées, veillez à les intégrer à la classe SystemMediaTransportControls afin de fournir ces fonctionnalités à vos utilisateurs.If your app has custom media controls, make sure to integrate with the SystemMediaTransportControls class to provide these features to your users. Si vous créez une application de musique en arrière-plan, intégrez la classe SystemMediaTransportControls afin que les contrôles de musique en arrière-plan fonctionnent correctement dans l’onglet multitâche de la 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.

À envisager : Étendre jusqu’au bord de l’écranConsider: Draw to the edge of the screen

Sur de nombreux téléviseurs, les bords de l’affichage sont coupés. Tout le contenu important de votre application doit donc être affiché dans la zone adaptée à l’écran de TV.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 utilise la suranalyse pour conserver le contenu dans la zone de télévision sécurisée, mais ce comportement par défaut peut dessiner une bordure évidente autour de votre application.UWP uses overscan to keep the content within the TV-safe area, but this default behavior can draw an obvious border around your app. Pour une expérience optimale, désactivez le comportement par défaut et suivez les instructions de l’article Comment étirer l’IU vers le bord de l’écran.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.

Important

Si vous désactivez le surbalayage, vous devez vous-même vous assurer que les éléments et le texte interactifs demeurent dans la zone adaptée à l’écran de TV.If you disable overscan, it's your responsibility to make sure that interactive elements and text remain within the TV-safe area.

À envisager : Utiliser des couleurs adaptées aux écrans de télévisionConsider: Use TV-safe colors

Les écrans de télévision ne gèrent pas les intensités de couleurs extrêmes aussi bien que les écrans d’ordinateur.TVs don't handle extreme color intensities as well as computer monitors do. Évitez d’utiliser des couleurs trop intenses dans votre application. Celles-ci peuvent en effet produire un effet de bandes ou apparaître délavées.Avoid high-intensity colors in your app so that users don't see odd banded effects or a washed-out image. En outre, n’oubliez pas que les téléviseurs présentent des différences, donc les couleurs qui semblent parfaites sur votre téléviseur peuvent apparaître autrement chez vos utilisateurs.Also, be aware that differences between TVs mean that colors that look great on your TV might look very different to your users. Lisez les couleurs pour comprendre comment rendre votre application plus attrayante pour tout le monde !Read Colors to understand how to make your app look great to everybody!

Ne pas oublier : Vous pouvez désactiver la mise à l’échelleRemember: You can disable scaling

Les applications UWP sont automatiquement dimensionnées pour garantir la lisibilité des éléments d’interface utilisateur tels que les commandes et les polices sur tous les appareils.UWP apps are automatically scaled to ensure that UI elements such as controls and fonts are legible on all devices. Les applications sont mises à une échelle de 200 % pour XAML et de 150 % pour les applications HTML.Apps that use XAML are scaled by 200%, while apps that use HTML are scaled by 150%. Si vous souhaitez contrôler davantage l’apparence de votre application sur Xbox, désactivez le facteur d’échelle par défaut et utilisez les dimensions en pixels réelles d’un téléviseur haute définition (1920 x 1080).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). Consultez les articles Comment désactiver la mise à l’échelle et Pixels effectifs et mise à l’échelle pour plus d’informations sur la personnalisation de votre application pour un rendu optimal sur 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.

Si vous souhaitez obtenir un aperçu de ces pratiques appliquées à une application UWP, consultez cette vidéo !If you want to get a glimpse of these practices applied to a UWP app, check out this video!

Channel 9Channel 9

Les conversations suivantes sur Channel 9 constituent une source d’informations précieuse pour créer des applications étonnantes sur Xbox :The following talks on Channel 9 are a great source of information for building amazing apps on Xbox:

Application dev sur XboxApp Dev on Xbox

L’événement app dev on Xbox est un excellent point de départ pour les développeurs qui créent des applications sur Xbox.The App Dev on Xbox event is a great starting point for developers new to building apps on Xbox.

Voir aussiSee also