Bewährte Methoden für XboxXbox best practices

Standardmäßig können UWP-Apps auf Xbox One ohne zusätzlichen Aufwand von Ihrer Seite ausgeführt werden.By default, all UWP apps will run on Xbox One without any extra effort on your part. Wenn Sie Ihre Kunden allerdings mit Ihrer App beeindrucken möchten und mit den besten Apps auf Xbox konkurrieren möchten, sollten Sie die folgenden bewährten Methoden anwenden.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.

Hinweis

Bevor Sie beginnen, sehen Sie sich die Entwurfsrichtlinien in Entwerfen für Xbox und Fernsehgeräte an.Before you start, take a look at the design guidelines laid out in Designing for Xbox and TV.

So erzielen Sie optimale Ergebnisse für Xbox OneTo build the best experiences for Xbox One

Empfohlen: Deaktivieren des MausmodusDo: Turn off mouse mode

Xbox-Benutzer schätzen Ihre Controller.Xbox users love their controllers. Um die Controller Eingaben zu optimieren, deaktivieren Sie den Maus Modus und aktivieren die direktionale Navigation (auch als " XY-Fokus Navigation und Interaktion" bezeichnet).To optimize for controller input, disable mouse mode and enable directional navigation (also known as XY focus navigation and interaction). Achten Sie darauf, dass Fokus-Traps und die Benutzeroberfläche nicht zugänglichWatch out for focus traps and inaccessible UI.

Empfohlen: Ziehen Sie ein Fokusrechteck, das für einen Abstand von 3 m geeignet istDo: Draw a focus rectangle that is appropriate for a 10-foot experience

Die meisten Xbox-Nutzer sitzen im Wohnzimmer am Fernseher. Denken Sie also daran, dass das Standard-Fokusrechteck aus 3 m Entfernung schwer zu erkennen ist.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. Um sicherzustellen, dass das UI-Element mit dem Eingabefokus jederzeit deutlich für die Nutzer sichtbar ist, befolgen Sie die Richtlinien zur Fokusanzeige.To ensure that the UI element with the input focus is clearly visible to the user at all times, follow the Focus visual guidelines. In XAML erhalten Sie dieses Verhalten automatisch, wenn Ihre App auf Xbox ausgeführt wird, aber für HTML-Apps ist eine benutzerdefinierte CSS-Formatvorlage erforderlich.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.

Empfohlen: Integration in die SystemMediaTransportControls-KlasseDo: Integrate with the SystemMediaTransportControls class

Xbox-Benutzer möchten Medien-Apps mit der Xbox-Medienfernbedienung Cortana (insbesondere mit den Sprachbefehlen „Wiedergabe“ und „Anhalten“) und mit Xbox SmartGlass steuern.Xbox users want to control media apps with the Xbox Media Remote, Cortana (especially the "Play" and "Pause" voice commands), and Xbox SmartGlass. Diese Features erhalten Sie automatisch, wenn in Ihren Apps die SystemMediaTransportControls-Klasse verwendet wird, die automatisch in den Xbox-Mediensteuerelementen enthalten ist.To get these features for free your app should use the SystemMediaTransportControls class, which is automatically included in the Xbox media controls. Wenn in Ihrer App benutzerdefinierte Mediensteuerelemente verwendet werden, stellen Sie sicher, dass diese in die SystemMediaTransportControls-Klasse integriert werden, damit diese Features für Ihre Nutzer bereitstehen.If your app has custom media controls, make sure to integrate with the SystemMediaTransportControls class to provide these features to your users. Wenn Sie eine App mit Hintergrundmusik erstellen, integrieren Sie die SystemMediaTransportControls-Klasse, um sicherzustellen, dass die Hintergrundmusik-Steuerelemente in der Xbox-Multitasking-Registerkarte richtig funktionieren.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.

Beachten: Zeichnen bis zum BildschirmrandConsider: Draw to the edge of the screen

Viele Fernseher schneiden das Bild an den Bildschirmrändern ab. Daher sollte der wichtige Inhalt Ihrer App im fernsehsicheren Bereich angezeigt werden.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 hält den Inhalt mit Overscan im fernsehsicheren Bereich, aber bei diesem Standardverhalten könnte ein sichtbarer Rahmen um die App gezeichnet werden.UWP uses overscan to keep the content within the TV-safe area, but this default behavior can draw an obvious border around your app. Sie erzielen optimale Ergebnisse, wenn Sie das Standardverhalten deaktivieren und die Anweisungen auf So wird's gemacht - Zeichnen der Benutzeroberfläche bis zum Bildschirmrand befolgen.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.

Wichtig

Wenn Sie Overscan deaktivieren, müssen Sie selbst sicherstellen, dass interaktive Elemente und Text innerhalb des fernsehsicheren Bereichs bleiben.If you disable overscan, it's your responsibility to make sure that interactive elements and text remain within the TV-safe area.

Beachten: Verwenden von fernsehsicheren FarbenConsider: Use TV-safe colors

Fernsehgeräte gehen mit hohen Farbintensitäten nicht so gut wie Computermonitore um.TVs don't handle extreme color intensities as well as computer monitors do. Vermeiden Sie in Ihren Apps Farben mit hoher Intensität, damit die Benutzer keine merkwürdigen Bandeffekte und keine verwaschenen Bilder sehen.Avoid high-intensity colors in your app so that users don't see odd banded effects or a washed-out image. Beachten Sie auch, dass Unterschiede zwischen Fernsehern dazu führen können, dass Farben, die auf Ihrem Fernseher gut aussehen, für Ihre Benutzer völlig anders aussehen können.Also, be aware that differences between TVs mean that colors that look great on your TV might look very different to your users. Lesen Sie die Farben , um zu verstehen, wie Sie Ihre APP für alle Benutzer hervorragend gestalten!Read Colors to understand how to make your app look great to everybody!

Denken Sie daran: Die Skalierung kann deaktiviert werden.Remember: You can disable scaling

UWP-Apps werden automatisch skaliert, um sicherzustellen, dass Elemente der Benutzeroberfläche wie Steuerelemente und Schriftarten auf allen Geräten lesbar sind.UWP apps are automatically scaled to ensure that UI elements such as controls and fonts are legible on all devices. XAML-Apps werden auf 200 %, skaliert, während HTML-Apps auf 150 % skaliert werden.Apps that use XAML are scaled by 200%, while apps that use HTML are scaled by 150%. Wenn Sie eine bessere Kontrolle über das Aussehen Ihrer App auf der Xbox möchten, deaktivieren Sie den Standardskalierungsfaktor und verwenden Sie die tatsächliche Pixelanzahl eines HDTV-Geräts (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). Sehen Sie sich So wird's gemacht: Deaktivieren der Skalierung und Effektive Pixel und Skalierung an, um Informationen zum Anpassen Ihrer App für die Xbox zu erhalten.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.

Wenn Sie einen Überblick über diese Vorgehensweisen erhalten möchten, die auf eine UWP-App angewendet werden, sehen Sie sich dieses Video an.If you want to get a glimpse of these practices applied to a UWP app, check out this video!

Channel 9Channel 9

Die folgenden Gespräche auf Channel 9 sind eine hervorragende Informationsquelle zum Entwickeln von tollen apps auf Xbox:The following talks on Channel 9 are a great source of information for building amazing apps on Xbox:

App-Entwicklung auf XboxApp Dev on Xbox

Das App dev on Xbox -Ereignis ist ein idealer Ausgangspunkt für Entwickler, die noch nicht mit der Entwicklung von apps auf Xbox vertraut sind.The App Dev on Xbox event is a great starting point for developers new to building apps on Xbox.

Weitere InformationenSee also