Entwerfen für Xbox und TV

Entwerfen Sie Ihre Windows-App so, dass sie gut aussieht und auf Xbox One- und Fernsehbildschirmen gut funktioniert.

Unter Gamepad- und Fernbedienungsinteraktionen finden Sie Anleitungen zu Interaktionserfahrungen in UWP-Anwendungen in der 10-Fuß- Erfahrung.

Überblick

Mit der universellen Windows-Plattform können Sie ansprechende Umgebungen auf mehreren Windows-Geräten erstellen. Die meisten vom UWP-Framework bereitgestellten Funktionen ermöglichen Apps die Verwendung derselben Benutzeroberfläche (UI) auf diesen Geräten, ohne dass zusätzliche Arbeit erforderlich ist. Um Ihre App an die Anforderungen anzupassen und zu optimieren, damit sie auf Xbox One- und TV-Bildschirmen hervorragend funktioniert, sind jedoch besondere Überlegungen erforderlich.

Auf Ihrer Couch im Raum zu sitzen und mit einem Gamepad oder einer Fernbedienung mit Ihrem Fernseher zu interagieren, wird als 10-Fuß-Bedienungserlebnisbezeichnet. Es ist so benannt, weil der Benutzer im Allgemeinen ca. 10 Fuß vom Bildschirm entfernt sitzt. Dies bietet einzigartige Herausforderungen, die nicht in der 2-Fuß- Erfahrung oder interaktion mit einem PC vorhanden sind. Wenn Sie eine App für Xbox One oder ein anderes Gerät entwickeln, das auf den Fernsehbildschirm ausgibt und einen Controller für die Eingabe verwendet, sollten Sie dies immer beachten.

Nicht alle Schritte in diesem Artikel sind erforderlich, damit Ihre App gut für 10-Fuß-Erfahrungen funktioniert, doch das Verständnis dieser Schritte und die richtigen Entscheidungen für Ihre App führen zu einer besseren 10-Fuß-Erfahrung, die auf die spezifischen Bedürfnisse Ihrer App zugeschnitten ist. Wenn Sie Ihre App in der 10-Fuß-Umgebung zum Leben erwecken, sollten Sie die folgenden Designprinzipien berücksichtigen.

Einfach

Das Gestalten für die 10-Fuß-Umgebung stellt eine einzigartige Reihe von Herausforderungen dar. Auflösung und Sehabstand können es Menschen erschweren, zu viele Informationen zu verarbeiten. Versuchen Sie, Ihr Design sauber zu halten, auf die einfachsten möglichen Komponenten reduziert. Die Menge der informationen, die auf einem Fernsehgerät angezeigt werden, sollte mit dem vergleichbar sein, was sie auf einem Mobiltelefon anstelle auf einem Desktop sehen.

Kohärent

UWP-Apps in der 10-Fuß-Umgebung sollten intuitiv und einfach zu bedienen sein. Machen Sie den Fokus klar und unverkennbar. Ordnen Sie Inhalte so an, dass die Bewegung im gesamten Raum konsistent und vorhersehbar ist. Geben Sie den Menschen den kürzesten Weg zu dem, was sie tun möchten.

Alle filme, die im Screenshot gezeigt werden, sind auf Microsoft Movies & TV verfügbar.

Fesselnd

Die immersiven, filmischen Erlebnisse finden auf dem großen Bildschirm statt. Rand-zu-Rand-Landschaft, elegante Bewegung und dynamische Verwendung von Farbe und Typografie bringen Ihre Apps auf die nächste Ebene. Sei mutig und schön.

Optimierungen für die 10-Fuß-Erfahrung

Nachdem Sie nun die Prinzipien eines guten UWP-App-Designs für die 10-Fuß-Erfahrung kennen, lesen Sie die folgende Übersicht über die spezifischen Möglichkeiten, wie Sie Ihre App optimieren und eine hervorragende Benutzererfahrung erzielen können.

Zusätzlich zu den vorherigen Entwurfs- und Layoutaspekten gibt es eine Reihe von Optimierungen für Gamepad- und Fernbedienungsinteraktionen, die Sie beim Erstellen Ihrer App berücksichtigen sollten.

Größe von UI-Elementen

Da der Benutzer einer App in der 10-Fuß-Umgebung eine Fernbedienung oder ein Gamepad verwendet und mehrere Fuß vom Bildschirm entfernt sitzt, gibt es einige Überlegungen zur Benutzeroberfläche, die in Ihr Design berücksichtigt werden müssen. Stellen Sie sicher, dass die Benutzeroberfläche über eine entsprechende Inhaltsdichte verfügt und nicht zu unübersichtlich ist, damit der Benutzer leicht navigieren und Elemente auswählen kann. Denken Sie daran: Einfachheit ist der Schlüssel.

Skalierungsfaktor und adaptives Layout

Skalierungsfaktor hilft dabei, sicherzustellen, dass UI-Elemente mit der richtigen Größenanpassung für das Gerät angezeigt werden, auf dem die App ausgeführt wird. Auf dem Desktop finden Sie diese Einstellung in Einstellungen > System > Anzeige als Schieberegler. Diese Einstellung ist auch auf dem Smartphone vorhanden, wenn es vom Gerät unterstützt wird.

Auf der Xbox One gibt es keine solche Systemeinstellung. Für UWP-UI-Elemente werden XAML-Apps standardmäßig auf 200% und HTML-Apps auf 150% skaliert, damit sie entsprechend für Fernsehgeräte angepasst sind. Solange die UI-Elemente für andere Geräte in geeigneter Größe sind, werden sie auch für Fernsehgeräte in geeigneter Größe sein. Xbox One rendert Ihre App mit 1080p (1920 x 1080 Pixel). Stellen Sie daher beim Übertragen einer App von anderen Geräten wie dem PC sicher, dass die Benutzeroberfläche bei einer Auflösung von 960 x 540 px bei 100% Skalierung (oder 1280 x 720 px bei 100% Skalierung für HTML-Apps) unter Verwendung von adaptiven Technikengut aussieht.

Das Entwerfen für Xbox unterscheidet sich etwas vom Entwerfen für PC, da Sie sich nur um eine Auflösung von 1920 x 1080 kümmern müssen. Es spielt keine Rolle, ob der Benutzer über ein Fernsehgerät verfügt, das eine bessere Auflösung hat – UWP-Apps werden immer auf 1080p skaliert.

Die korrekten Ressourcengrößen aus dem Satz 200% (oder 150% für HTML-Apps) werden auch für Ihre App berücksichtigt, wenn sie auf der Xbox One läuft, unabhängig von der TV-Auflösung.

Inhaltsdichte

Denken Sie beim Entwerfen Ihrer App daran, dass der Benutzer die Benutzeroberfläche aus einer Entfernung betrachtet und mit ihr interagiert, indem er eine Fernbedienung oder einen Gamecontroller verwendet, was mehr Zeit in Anspruch nimmt als die Verwendung von Maus- oder Toucheingaben.

Größen von UI-Steuerelementen

Interaktive UI-Elemente sollten eine Mindesthöhe von 32 epx (effektive Pixel) haben. Dies ist die Standardeinstellung für allgemeine UWP-Steuerelemente, und bei Verwendung mit einer Skalierung von 200% stellt sie sicher, dass UI-Elemente aus einer Entfernung sichtbar sind und die Inhaltsdichte verringern können.

Anzahl der Klicks

Wenn der Benutzer von einem Rand des Fernsehbildschirms zum anderen navigiert, sollte es nicht mehr als sechs Klicks dauern, um die Benutzeroberfläche zu vereinfachen. Auch hier gilt das Prinzip der Einfachheit.

Textgrößen

Verwenden Sie die folgenden Faustregeln, um die Benutzeroberfläche aus einer Entfernung sichtbar zu machen:

• Haupttext und Leseinhalt: mindestens 15 Epx
• nicht kritischer Text und zusätzlicher Inhalt: mindestens 12 epx

Wenn Sie größeren Text in der Benutzeroberfläche verwenden, wählen Sie eine Größe aus, die den Platz auf dem Bildschirm nicht zu stark begrenzt, sodass Platz beansprucht wird, den andere Inhalte möglicherweise ausfüllen können.

Deaktivierung des Skalierungsfaktors

Es wird empfohlen, dass Ihre App die Skalierungsfaktorunterstützung nutzt, wodurch sie auf allen Geräten ordnungsgemäß ausgeführt wird, indem sie für jeden Gerätetyp skaliert wird. Es ist jedoch möglich, dieses Verhalten zu deaktivieren und alle Ui-Elemente mit einer Skalierung von 100% zu entwerfen. Beachten Sie, dass Sie den Skalierungsfaktor nicht auf einen anderen Wert als 100%ändern können.

Für XAML-Apps können Sie den Skalierungsfaktor deaktivieren, indem Sie den folgenden Codeausschnitt verwenden:

bool result =
    Windows.UI.ViewManagement.ApplicationViewScaling.TrySetDisableLayoutScaling(true);

result informiert Sie darüber, ob Sie sich erfolgreich abgemeldet haben.

Weitere Informationen, einschließlich Beispielcode für HTML/JavaScript, finden Sie unter Deaktivieren der Skalierung.

Bitte achten Sie darauf, die entsprechenden Größen von UI-Elementen zu berechnen, indem Sie die in diesem Thema erwähnten effektiven Pixelwerte verdoppeln, um sie in tatsächliche Pixelwerte umzuwandeln (oder indem Sie sie für HTML-Apps mit 1,5 multiplizieren).

Fernsehsicherer Bereich

Nicht alle Fernseher zeigen Inhalte an den Rändern des Bildschirms aus historischen und technologischen Gründen an. Standardmäßig vermeidet die UWP das Anzeigen von UI-Inhalten in nicht TV-sicheren Bereichen und zeichnet stattdessen nur den Seitenhintergrund.

Der nicht fernsehtaugliche Bereich wird durch den blauen Bereich in der untenstehenden Abbildung dargestellt.

Sie können den Hintergrund auf eine statische oder designierte Farbe oder auf ein Bild festlegen, wie die folgenden Codeausschnitte veranschaulichen.

Themenfarbe

<Page x:Class="Sample.MainPage"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>

Abbildung

<Page x:Class="Sample.MainPage"
      Background="\Assets\Background.png"/>

So sieht Ihre App ohne zusätzliche Arbeit aus.

Dies ist nicht optimal, da er der App einen "eingeschränkten" Effekt verleiht, wobei Benutzeroberflächenelemente wie der Navigationsbereich und das Raster scheinbar abgeschnitten werden. Sie können jedoch Optimierungen vornehmen, um Teile der Benutzeroberfläche auf die Ränder des Bildschirms zu erweitern, um der App einen kinotischen Effekt zu verleihen.

Zeichnen der Benutzeroberfläche an den Rand

Es wird empfohlen, bestimmte UI-Elemente zu verwenden, um die Ränder des Bildschirms zu erweitern, um dem Benutzer mehr Immersion zu bieten. Dazu gehören ScrollViewers, Navigationsbereicheund CommandBars.

Andererseits ist es auch wichtig, dass interaktive Elemente und Text immer die Bildschirmränder vermeiden, um sicherzustellen, dass sie auf einigen Fernsehgeräten nicht abgeschnitten werden. Es wird empfohlen, nur nicht-essentielle visuelle Elemente in einem Abstand von 5% zu den Bildschirmrändern zu zeichnen. Wie in die Größe der UI-Elementeerwähnt, verwendet eine UWP-App, die dem Standardskalierungsfaktor der Xbox One-Konsole von 200% folgt, einen Bereich von 960 x 540 epx, sodass Sie in der UI Ihrer App vermeiden sollten, wichtige UI-Elemente in den folgenden Bereichen zu platzieren:

• 27 Epx von oben und unten
• 48 epx von den linken und rechten Seiten

In den folgenden Abschnitten wird beschrieben, wie Die Benutzeroberfläche auf die Bildschirmränder erweitert wird.

Hauptfenstergrenzen

Für UWP-Apps, die nur auf das 10-Fuß-Erlebnis abzielen, ist die Verwendung der Grenzen des Kernfensters eine einfachere Option.

Fügen Sie in der OnLaunched-Methode von App.xaml.csden folgenden Code hinzu:

Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().SetDesiredBoundsMode
    (Windows.UI.ViewManagement.ApplicationViewBoundsMode.UseCoreWindow);

Mit dieser Codezeile wird das App-Fenster auf die Ränder des Bildschirms erweitert, sodass Sie alle interaktiven und wesentlichen UI-Elemente in den zuvor beschriebenen fernsehsicheren Bereich verschieben müssen. Vorübergehende Benutzeroberfläche, z. B. Kontextmenüs und geöffnete ComboBoxes, verbleiben automatisch im fernsehsicheren Bereich.

Fensterhintergründe

Navigationsbereiche werden in der Regel in der Nähe des Bildschirmrands angezeigt, sodass der Hintergrund in den TV-unsicheren Bereich erweitert werden sollte, um ungünstige Lücken zu vermeiden. Dazu können Sie einfach die Farbe des Hintergrunds des Navigationsbereichs in die Farbe des Hintergrunds der App ändern.

Wenn Sie die Kernfenstergrenzen wie zuvor beschrieben verwenden, können Sie die Benutzeroberfläche auf die Ränder des Bildschirms zeichnen, aber Sie sollten dann positive Ränder auf den SplitViewverwenden, um sie im TV-sicheren Bereich zu halten.

Hier wurde der Hintergrund der Navigationsleiste bis zu den Rändern des Bildschirms erweitert, während die Navigationselemente im TV-sicheren Bereich bleiben. Der Inhalt von SplitView (in diesem Fall ein Elementraster) wurde bis zum unteren Rand des Bildschirms erweitert, sodass es aussieht, als ob es fortlaufend wäre und nicht abgeschnitten wird, während sich der obere Teil des Rasters noch im TV-sicheren Bereich befindet. (Erfahren Sie mehr darüber, wie Sie dies in Bildlaufenden von Listen und Rastern).

Der folgende Codeausschnitt erreicht diesen Effekt:

<SplitView x:Name="RootSplitView"
           Margin="48,0,48,0">
    <SplitView.Pane>
        <ListView x:Name="NavMenuList"
                  ContainerContentChanging="NavMenuItemContainerContentChanging"
                  ItemContainerStyle="{StaticResource NavMenuItemContainerStyle}"
                  ItemTemplate="{StaticResource NavMenuItemTemplate}"
                  ItemInvoked="NavMenuList_ItemInvoked"
                  ItemsSource="{Binding NavMenuListItems}"/>
    </SplitView.Pane>
    <Frame x:Name="frame"
           Navigating="OnNavigatingToPage"
           Navigated="OnNavigatedToPage"/>
</SplitView>

CommandBar- ist ein weiteres Beispiel für einen Bereich, der häufig in der Nähe eines oder mehrerer Ränder der App positioniert ist, und aus diesem Grund sollte sich der Hintergrund auf den Bildschirmrand erstrecken. Es enthält in der Regel auch eine Schaltfläche "Mehr", dargestellt durch "..." auf der rechten Seite, die im fernsehsicheren Bereich verbleiben sollte. Im Folgenden sind einige verschiedene Strategien aufgeführt, um die gewünschten Interaktionen und visuellen Effekte zu erzielen.

Option 1: Ändern Sie die CommandBar Hintergrundfarbe, indem Sie sie entweder transparent machen oder dieselbe Farbe wie der Seitenhintergrund verwenden.

<CommandBar x:Name="topbar"
            Background="{ThemeResource SystemControlBackgroundAltHighBrush}">
            ...
</CommandBar>

Dadurch wird CommandBar so aussehen, als ob es sich auf demselben Hintergrund wie der Rest der Seite befindet, sodass der Hintergrund nahtlos bis zum Rand des Bildschirms fließt.

Option 2: Fügen Sie ein Hintergrundrechteck hinzu, dessen Füllung die gleiche Farbe wie der CommandBar Hintergrund aufweist, und lassen Sie es sich unterhalb der CommandBar und auf der restlichen Seite befinden:

<Rectangle VerticalAlignment="Top"
            HorizontalAlignment="Stretch"      
            Fill="{ThemeResource SystemControlBackgroundChromeMediumBrush}"/>
<CommandBar x:Name="topbar"
            VerticalAlignment="Top"
            HorizontalContentAlignment="Stretch">
            ...
</CommandBar>

Beide Ansätze gelten auch für die anderen Typen von Steuerelementen, die in diesem Abschnitt aufgeführt sind.

Am Ende von Listen und Rastern scrollen

Es ist üblich, dass Listen und Raster mehr Elemente enthalten, als gleichzeitig auf dem Bildschirm passen können. Wenn dies der Fall ist, empfehlen wir, die Liste oder das Raster bis zum Rand des Bildschirms zu erweitern. Das horizontale Scrollen von Listen und Rastern sollte bis zum rechten Rand erweitert werden, und vertikal scrollende Listen und Raster sollten bis zum unteren Rand erweitert werden.

Während eine Liste oder ein Raster so erweitert wird, ist es wichtig, das visuelle Fokus und das zugehörige Element innerhalb des sicheren Fernsehbereichs beizubehalten.

Die UWP verfügt über Funktionen, mit denen die Fokusanzeige innerhalb der VisibleBounds-beibehalten wird. Sie müssen jedoch Polsterung hinzufügen, um sicherzustellen, dass die Listen-/Rasterelemente in den sichtbaren Bereich scrollen können. Insbesondere fügen Sie dem ListView- oder GridViewItemsPresenter-einen positiven Rand hinzu, wie im folgenden Codeausschnitt gezeigt:

<Style x:Key="TitleSafeListViewStyle"
       TargetType="ListView">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListView">
                <Border BorderBrush="{TemplateBinding BorderBrush}"
                        Background="{TemplateBinding Background}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <ScrollViewer x:Name="ScrollViewer"
                                  TabNavigation="{TemplateBinding TabNavigation}"
                                  HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                  HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                  IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
                                  VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                  VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                  IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
                                  IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                  IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                  ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
                                  IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                  BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
                                  AutomationProperties.AccessibilityView="Raw">
                        <ItemsPresenter Header="{TemplateBinding Header}"
                                        HeaderTemplate="{TemplateBinding HeaderTemplate}"
                                        HeaderTransitions="{TemplateBinding HeaderTransitions}"
                                        Footer="{TemplateBinding Footer}"
                                        FooterTemplate="{TemplateBinding FooterTemplate}"
                                        FooterTransitions="{TemplateBinding FooterTransitions}"
                                        Padding="{TemplateBinding Padding}"
                                        Margin="0,27,0,27"/>
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Sie würden den vorherigen Codeausschnitt entweder auf der Seite oder den App-Ressourcen platzieren und dann wie folgt darauf zugreifen:

<Page>
    <Grid>
        <ListView Style="{StaticResource TitleSafeListViewStyle}"
                  ... />

Wenn Ihre Anwendung auf Version 1803 oder höher ausgerichtet ist, können Sie das UIElement.BringIntoViewRequested-Ereignisverwenden, um genauer zu steuern, wie Elemente angezeigt werden. Sie können es auf dem ItemsPanel- für das ListView-/GridView- ablegen, um es abzufangen, bevor es der interne ScrollViewer- tut, wie in den folgenden Codeausschnitten gezeigt.

<GridView x:Name="gridView">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid Orientation="Horizontal"
                           BringIntoViewRequested="ItemsWrapGrid_BringIntoViewRequested"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>

// The BringIntoViewRequested event is raised by the framework when items receive keyboard (or Narrator) focus or 
// someone triggers it with a call to UIElement.StartBringIntoView.
private void ItemsWrapGrid_BringIntoViewRequested(UIElement sender, BringIntoViewRequestedEventArgs args)
{
    if (args.VerticalAlignmentRatio != 0.5)  // Guard against our own request
    {
        args.Handled = true;
        // Swallow this request and restart it with a request to center the item.  We could instead have chosen
        // to adjust the TargetRect's Y and Height values to add a specific amount of padding as it bubbles up, 
        // but if we just want to center it then this is easier.

        // (Optional) Account for sticky headers if they exist
        var headerOffset = 0.0;
        var itemsWrapGrid = sender as ItemsWrapGrid;
        if (gridView.IsGrouping && itemsWrapGrid.AreStickyGroupHeadersEnabled)
        {
            var header = gridView.GroupHeaderContainerFromItemContainer(args.TargetElement as GridViewItem);
            if (header != null)
            {
                headerOffset = ((FrameworkElement)header).ActualHeight;
            }
        }

        // Issue a new request
        args.TargetElement.StartBringIntoView(new BringIntoViewOptions()
        {
            AnimationDesired = true,
            VerticalAlignmentRatio = 0.5, // a normalized alignment position (0 for the top, 1 for the bottom)
            VerticalOffset = headerOffset, // applied after meeting the alignment ratio request
        });
    }
}

Farben

Standardmäßig skaliert die Universelle Windows-Plattform die Farben Ihrer App auf den fernsehsicheren Bereich (siehe fernsehsichere Farben), damit Ihre App auf jedem Fernsehgerät gut aussieht. Darüber hinaus gibt es Verbesserungen, die Sie an den Farben vornehmen können, die Ihre App verwendet, um die visuelle Erfahrung auf fernsehgeräten zu verbessern.

Anwendungsthema

Sie können ein Anwendungsdesign (dunkel oder hell) auswählen, je nachdem, was für Ihre App am besten geeignet ist, oder Sie können das Design deaktivieren. Weitere Informationen zu allgemeinen Empfehlungen für Themen in Farbdesigns.

Die UWP ermöglicht Apps auch das dynamische Festlegen des Designs basierend auf den Systemeinstellungen, die von den Geräten bereitgestellt werden, auf denen sie ausgeführt werden. Während die UWP immer die vom Benutzer angegebenen Designeinstellungen respektiert, stellt jedes Gerät auch ein entsprechendes Standarddesign bereit. Aufgrund der Art der Xbox One, bei der mehr Medien als Produktivität Erfahrungen erwartet werden, wird standardmäßig auf ein dunkles Systemdesign zurückgegriffen. Wenn das Design Ihrer App auf den Systemeinstellungen basiert, erwarten Sie, dass es auf Xbox One standardmäßig dunkel ist.

Akzentfarbe

Die UWP bietet eine bequeme Möglichkeit, die Akzentfarbe verfügbar zu machen, die der Benutzer in seinen Systemeinstellungen ausgewählt hat.

Auf Xbox One kann der Benutzer eine Benutzerfarbe auswählen, genauso wie er eine Akzentfarbe auf einem PC auswählen kann. Solange Ihre App diese Akzentfarben über Pinsel oder Farbressourcen aufruft, wird die Farbe verwendet, die der Benutzer in den Systemeinstellungen ausgewählt hat. Beachten Sie, dass Akzentfarben auf Xbox One pro Benutzer und nicht pro System vorliegen.

Bitte beachten Sie auch, dass der Satz von Benutzerfarben auf Xbox One nicht mit dem auf PCs, Smartphones und anderen Geräten identisch ist.

Solange Ihre App eine Pinselressource wie SystemControlForegroundAccentBrushoder eine Farbressource (SystemAccentColor) verwendet oder stattdessen Akzentfarben direkt über die UIColorType.Accent* API aufruft, werden diese Farben durch Akzentfarben ersetzt, die auf Xbox One verfügbar sind. Pinselstrichfarben mit hohem Kontrast werden ebenfalls vom System auf die gleiche Weise wie auf einem PC und Smartphone übernommen.

Weitere Informationen zur Akzentfarbe im Allgemeinen finden Sie unter Akzentfarbe.

Farbabweichung zwischen Fernsehgeräten

Beachten Sie beim Entwerfen für Fernsehgeräte, dass die Farben je nach Fernsehgerät, auf dem sie gerendert werden, ganz anders angezeigt werden. Gehen Sie nicht davon aus, dass die Farben genauso aussehen, wie auf Ihrem Monitor. Wenn Ihre App auf subtile Farbunterschiede angewiesen ist, um Teile der Benutzeroberfläche zu unterscheiden, könnten Farben miteinander verwechselt werden, und Benutzer könnten verwirrt werden. Versuchen Sie, Farben zu verwenden, die unterschiedlich genug sind, damit Benutzer sie unabhängig vom verwendeten Fernsehgerät deutlich unterscheiden können.

Fernsehsichere Farben

Die RGB-Werte einer Farbe stellen Intensitäten für Rot, Grün und Blau dar. Fernseher verarbeiten extreme Helligkeiten nicht sehr gut – sie können einen merkwürdigen Bandeffekt erzeugen oder auf bestimmten Modellen ausgewaschen erscheinen. Darüber hinaus können Farben mit hoher Intensität zu Blüte führen (in der Nähe beginnen Pixel mit dem Zeichnen derselben Farben). Obwohl es verschiedene Ansichten darüber gibt, was als fernsehsichere Farben betrachtet wird, sind Farben innerhalb der RGB-Werte von 16-235 (oder 10-EB im Hexadezimalsystem) im Allgemeinen sicher für die Verwendung im Fernsehen.

Historisch mussten Apps auf der Xbox ihre Farben so anpassen, dass sie in den "fernsehsicheren" Farbbereich fallen, aber ab dem Fall Creators Update skaliert die Xbox One den vollständigen Bereichsinhalt automatisch in den fernsehsicheren Bereich. Dies bedeutet, dass sich die meisten App-Entwickler nicht mehr um fernsehsichere Farben kümmern müssen.

Wenn Sie eine App mit DirectX 11 oder DirectX 12 entwickeln und eine eigene Swapchain zum Rendern der Benutzeroberfläche oder von Videos erstellen, können Sie den von Ihnen verwendeten Farbraum angeben, indem Sie IDXGISwapChain3::SetColorSpace1benutzen. Dadurch wird dem System mitgeteilt, ob Farben skaliert werden müssen oder nicht.

Richtlinien für UI-Steuerelemente

Es gibt mehrere UI-Steuerelemente, die auf verschiedenen Geräten gut funktionieren, jedoch bestimmte Aspekte bei der Verwendung auf Fernsehern berücksichtigen. Lesen Sie einige bewährte Methoden für die Verwendung dieser Steuerelemente beim Entwerfen für die 10-Fuß-Erfahrung.

Navigationsbereich

Ein Navigationsbereich (auch als Hamburger-Menübezeichnet) ist ein Navigationssteuerelement, das häufig in UWP-Apps verwendet wird. In der Regel handelt es sich um einen Bereich mit mehreren Optionen, aus denen der Benutzer in einem Menü im Listenformat auswählen kann, das zu verschiedenen Seiten führt. Im Allgemeinen ist dieser Bereich anfangs eingeklappt, um Platz zu sparen, und der Benutzer kann ihn öffnen, indem er auf eine Schaltfläche klickt.

Während Navigationsbereiche mit Maus und Toucheingabe sehr zugänglich sind, verringert ein Gamepad oder eine Fernbedienung die Zugänglichkeit, da der Benutzer zu einer Schaltfläche navigieren muss, um den Bereich zu öffnen. Daher empfiehlt es sich, die Schaltfläche Ansicht so einzurichten, dass sie den Navigationsbereich öffnet, sowie dem Benutzer zu ermöglichen, diesen zu öffnen, indem er ganz nach links zur Seite navigiert. Ein Codebeispiel zur Implementierung dieses Entwurfsmusters finden Sie im Dokument zur programmgesteuerten Fokusnavigation. Dadurch erhält der Benutzer sehr einfachen Zugriff auf den Inhalt des Fensters. Weitere Informationen dazu, wie sich Navigationsbereiche in unterschiedlichen Bildschirmgrößen verhalten, sowie bewährte Methoden für die Gamepad-/Remotenavigation finden Sie unter Navigationsbereiche.

CommandBar-Beschriftungen

Es ist ratsam, die Beschriftungen rechts von den Symbolen in einer CommandBar zu platzieren, damit die Höhe minimiert und konsistent bleibt. Dazu können Sie die eigenschaft CommandBar.DefaultLabelPosition auf CommandBarDefaultLabelPosition.Rightfestlegen.

Das Festlegen dieser Eigenschaft bewirkt auch, dass die Beschriftungen immer angezeigt werden, was gut für das 10-Fuß-Benutzererlebnis geeignet ist, da die Anzahl der Klicks für den Benutzer minimiert wird. Auch für andere Gerätetypen ist dies ein hervorragendes Modell.

QuickInfo

Das QuickInfo--Steuerelement wurde eingeführt, um weitere Informationen in der Benutzeroberfläche bereitzustellen, wenn der Benutzer mit der Maus über ein Element fährt oder es antippt und den Finger darauf hält. Bei Gamepad und Fernbedienung wird Tooltip nach einem kurzen Moment angezeigt, wenn das Element den Fokus erhält, für kurze Zeit auf dem Bildschirm bleibt und dann verschwindet. Dieses Verhalten kann ablenkend sein, wenn zu viele Tooltipverwendet werden. Versuchen Sie, die Verwendung von Tooltip beim Entwerfen für Fernsehgeräte zu vermeiden.

Schaltflächenformatvorlagen

Während die standardmäßigen UWP-Schaltflächen auf Fernsehgeräten gut funktionieren, weisen einige visuelle Stile von Schaltflächen besser auf die Benutzeroberfläche hin, die Sie für alle Plattformen in Betracht ziehen möchten, insbesondere bei der 10-Fuß-Benutzererfahrung, die davon profitiert, klar zu kommunizieren, wo sich der Fokus befindet. Weitere Informationen zu diesen Stilen finden Sie unter Schaltflächen.

Geschachtelte UI-Elemente

Die geschachtelte Benutzeroberfläche stellt verschachtelte interaktive Elemente bereit, die in einem Container-Element eingeschlossen sind, wobei sowohl das verschachtelte Element als auch das Containerelement unabhängig voneinander fokussiert werden können.

Geschachtelte Benutzeroberflächen eignen sich gut für einige Eingabetypen, jedoch nicht immer für Gamepads und Fernbedienungen, die auf der XY-Navigation basieren. Achten Sie darauf, die Anleitungen in diesem Thema zu befolgen, um sicherzustellen, dass Ihre Benutzeroberfläche für die 10-Fuß-Umgebung optimiert ist und dass der Benutzer problemlos auf alle interagierbaren Elemente zugreifen kann. Eine gängige Lösung besteht darin, geschachtelte UI-Elemente in einem ContextFlyoutzu platzieren.

Weitere Informationen zur verschachtelten Benutzeroberfläche finden Sie unter Verschachtelte Benutzeroberfläche in Listenelementen.

MediaTransportControls

Mit dem MediaTransportControls--Element können Benutzer mit ihren Medien interagieren, indem sie eine Standardwiedergabe nutzen, die es ihnen ermöglicht, Medien abzuspielen, zu pausieren, Untertitel zu aktivieren und vieles mehr. Dieses Steuerelement ist eine Eigenschaft des MediaPlayerElements und unterstützt zwei Layoutoptionen: den Einzeilen- und den Doppelzeilen-. Im Einzeilenlayout befinden sich die Schieberegler- und Wiedergabeschaltflächen in einer Zeile, wobei sich die Schaltfläche "Wiedergabe/Pause" links vom Schieberegler befindet. Im Doppelzeilenlayout nimmt der Schieberegler eine eigene Zeile ein, wobei die Wiedergabeschaltflächen in einer separaten unteren Zeile angezeigt werden. Beim Entwerfen für die 10-Fuß-Erfahrung sollte die doppelte Zeilenanordnung verwendet werden, da sie eine bessere Navigation für das Gamepad bietet. Um das Layout mit doppelter Zeile zu aktivieren, legen Sie IsCompact="False" für das MediaTransportControls-Element in der eigenschaft TransportControls des MediaPlayerElementfest.

<MediaPlayerElement x:Name="mediaPlayerElement1"  
                    Source="Assets/video.mp4"
                    AreTransportControlsEnabled="True">
    <MediaPlayerElement.TransportControls>
        <MediaTransportControls IsCompact="False"/>
    </MediaPlayerElement.TransportControls>
</MediaPlayerElement>

Besuchen Sie Medienwiedergabe, um mehr über das Hinzufügen von Medien zu Ihrer App zu erfahren.

Sucherlebnis

Die Suche nach Inhalten ist eine der am häufigsten genutzten Funktionen im 10-Fuß-Erlebnis. Wenn Ihre App eine Suchoberfläche bietet, ist es hilfreich, dass der Benutzer über die Schaltfläche Y- auf dem Gamepad als Zugriffstaste schnell darauf zugreifen kann.

Die meisten Kunden sollten bereits mit diesem Beschleuniger vertraut sein, aber wenn Sie möchten, können Sie der Benutzeroberfläche eine visuelle Y Glyphe hinzufügen, um darauf hinzuweisen, dass der Kunde die Schaltfläche verwenden kann, um auf die Suchfunktion zuzugreifen. Wenn Sie diesen Hinweis hinzufügen, achten Sie darauf, dass Sie das Symbol aus der Schriftart Segoe Xbox MDL2 Symbol ( für XAML-Apps, \E426 für HTML-Apps) verwenden, um die Konsistenz mit der Xbox-Shell und anderen Apps sicherzustellen.

Da die schaltfläche Y nur auf gamepad verfügbar ist, stellen Sie sicher, dass Sie andere Methoden für den Zugriff auf die Suche bereitstellen, z. B. Schaltflächen in der Benutzeroberfläche. Andernfalls können einige Kunden möglicherweise nicht auf die Funktionalität zugreifen.

In der 10-Fuß-Erfahrung ist es für Kunden oft einfacher, ein Vollbildsucherlebnis zu verwenden, da auf dem Display nur begrenzter Platz vorhanden ist. Unabhängig davon, ob Sie eine Vollbild- oder Teilbild-Suche verwenden, empfehlen wir, dass die Bildschirmtastatur bereits geöffnet erscheint, wenn der Benutzer die Sucherfahrung öffnet, damit der Kunde unmittelbar Suchbegriffe eingeben kann.

Benutzerdefinierter visueller Zustandsauslöser für Xbox

Um Ihre UWP-App auf die 10-Fuß-Erfahrung anzupassen, empfehlen wir, Layoutänderungen vorzunehmen, wenn die App erkennt, dass sie auf einer Xbox-Konsole gestartet wurde. Eine Möglichkeit hierzu ist die Verwendung eines benutzerdefinierten visuellen Zustandsauslöser. Visuelle Zustandsauslöser sind am nützlichsten, wenn Sie in Blend für Visual Studiobearbeiten möchten. Der folgende Codeausschnitt zeigt, wie Ein visueller Zustandsauslöser für Xbox erstellt wird:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState>
            <VisualState.StateTriggers>
                <triggers:DeviceFamilyTrigger DeviceFamily="Windows.Xbox"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="RootSplitView.OpenPaneLength"
                        Value="368"/>
                <Setter Target="RootSplitView.CompactPaneLength"
                        Value="96"/>
                <Setter Target="NavMenuList.Margin"
                        Value="0,75,0,27"/>
                <Setter Target="Frame.Margin"
                        Value="0,27,48,27"/>
                <Setter Target="NavMenuList.ItemContainerStyle"
                        Value="{StaticResource NavMenuItemContainerXboxStyle}"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Um den Trigger zu erstellen, fügen Sie ihrer App die folgende Klasse hinzu. Dies ist die Klasse, auf die im obigen XAML-Code verwiesen wird:

class DeviceFamilyTrigger : StateTriggerBase
{
    private string _currentDeviceFamily, _queriedDeviceFamily;

    public string DeviceFamily
    {
        get
        {
            return _queriedDeviceFamily;
        }

        set
        {
            _queriedDeviceFamily = value;
            _currentDeviceFamily = AnalyticsInfo.VersionInfo.DeviceFamily;
            SetActive(_queriedDeviceFamily == _currentDeviceFamily);
        }
    }
}

Nachdem Sie ihren benutzerdefinierten Trigger hinzugefügt haben, nimmt Ihre App automatisch die Layoutänderungen vor, die Sie im XAML-Code angegeben haben, wenn erkannt wird, dass sie auf einer Xbox One-Konsole ausgeführt wird.

Eine andere Möglichkeit, um zu überprüfen, ob Ihre App auf Xbox ausgeführt wird, und dann die entsprechenden Anpassungen vornehmen, erfolgt über Code. Sie können die folgende einfache Variable verwenden, um zu überprüfen, ob Ihre App auf Xbox ausgeführt wird:

bool IsTenFoot = (Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily ==
                    "Windows.Xbox");

Anschließend können Sie im Codeblock nach dieser Überprüfung die entsprechenden Anpassungen an der Benutzeroberfläche vornehmen.

Zusammenfassung

Beim Entwerfen für die 10-Fuß-Erfahrung gibt es besondere Aspekte, die berücksichtigt werden müssen, wodurch es sich von der Gestaltung für andere Plattformen unterscheidet. Sie können zwar einen einfachen Port Ihrer UWP-App auf die Xbox One durchführen, und sie wird funktionieren, aber sie ist nicht unbedingt für das 10-Fuß-Erlebnis optimiert, was zu Frustrationen bei den Benutzern führen kann. Wenn Sie die Richtlinien in diesem Artikel befolgen, stellen Sie sicher, dass Ihre App auf dem Fernseher so gut wie möglich ist.

Verwandte Artikel

• Geräte-Einführung für Windows-Anwendungen
• Gamepad- und Fernbedienungsinteraktionen
• Sound in UWP-Apps