Projektowanie pod kątem konsoli Xbox i telewizora

Zaprojektuj aplikację systemu Windows, aby wyglądała dobrze i dobrze działa na ekranach Xbox One i telewizorach.

Zobacz interakcje z gamepadem i pilotem, aby uzyskać wskazówki dotyczące doświadczeń interakcji w aplikacjach UWP w kontekście 10 stóp.

Przegląd

Platforma uniwersalna systemu Windows umożliwia tworzenie wspaniałych środowisk na wielu urządzeniach z systemem Windows. Większość funkcji zapewnianych przez platformę platformy UWP umożliwia aplikacjom korzystanie z tego samego interfejsu użytkownika (UI) na tych urządzeniach bez dodatkowej pracy. Jednak dostosowywanie i optymalizowanie aplikacji w celu doskonałego działania na ekranach Xbox One i telewizora wymaga szczególnych zagadnień.

Doświadczenie siedzenia na kanapie w całym pokoju, za pomocą gamepadu lub zdalnego interakcji z telewizorem, nazywa się 10-foot doświadczenie. Jest tak nazwany, ponieważ użytkownik zazwyczaj siedzi około 10 metrów od ekranu. Zapewnia to unikatowe wyzwania, których nie ma, powiedzmy, w doświadczeniu o długości 2 stóp ani podczas interakcji z komputerem. Jeśli tworzysz aplikację dla konsoli Xbox One lub dowolnego innego urządzenia, które wyświetla dane wyjściowe na ekranie telewizora i używasz kontrolera do wprowadzania danych wejściowych, zawsze należy pamiętać o tym.

Nie wszystkie kroki opisane w tym artykule są wymagane, aby aplikacja działała dobrze w środowisku 10 stóp, ale zrozumienie ich i podjęcie odpowiednich decyzji dla aplikacji spowoduje lepsze środowisko 10 stóp, dopasowane do specyficznych potrzeb aplikacji. W miarę opracowywania aplikacji w środowisku 10-stopowym należy wziąć pod uwagę następujące zasady projektowania.

Uproszczony

Projektowanie pod kątem środowiska 10 stóp stanowi unikatowy zestaw wyzwań. Rozdzielczość i odległość oglądania mogą utrudniać ludziom przetwarzanie zbyt dużej ilości informacji. Staraj się zachować czyste projektowanie, zredukowane do najprostszych możliwych składników. Ilość informacji wyświetlanych na telewizorze powinna być porównywalna z tym, co można zobaczyć na telefonie komórkowym, a nie na pulpicie.

Spójne

Aplikacje UWP w środowisku 10 stóp powinny być intuicyjne i łatwe w użyciu. Uczyń skupienie jasnym i nie do pomylenia. Rozmieść zawartość tak, aby ruch w przestrzeni był spójny i przewidywalny. Daj ludziom najkrótszą ścieżkę do tego, co chcą zrobić.

aplikacja

Wszystkie filmy wyświetlane na zrzucie ekranu są dostępne w programie Microsoft Movies &TV.

Wciągająca

Najbardziej wciągające, kinowe doświadczenia odbywają się na dużym ekranie. Pełnoekranowa sceneria, płynny ruch i żywe wykorzystanie kolorów i typografii przenoszą Twoje aplikacje na wyższy poziom. Bądź odważny i piękny.

Optymalizacje dla doświadczenia 10 stóp

Teraz, gdy znasz zasady dobrego projektowania aplikacji platformy uniwersalnej systemu Windows dla środowiska użytkownika z większej odległości, zapoznaj się z następującym omówieniem konkretnych sposobów optymalizacji aplikacji i stworzenia doskonałego doświadczenia użytkownika.

Oprócz powyższych zagadnień dotyczących projektowania i układu istnieje wiele interakcji z gamepadem i zdalnym sterowaniem optymalizacji, które należy wziąć pod uwagę podczas tworzenia aplikacji.

Ustalanie rozmiaru elementu interfejsu użytkownika

Ponieważ użytkownik aplikacji w środowisku 10 stóp używa zdalnego sterowania lub gamepadu i siedzi kilka metrów od ekranu, istnieją pewne zagadnienia dotyczące interfejsu użytkownika, które należy uwzględnić w projekcie. Upewnij się, że interfejs użytkownika ma odpowiednią gęstość zawartości i nie jest zbyt zaśmiecony, aby użytkownik mógł łatwo nawigować i wybierać elementy. Pamiętaj: prostota jest kluczem.

Współczynnik skalowania i układ adaptacyjny

współczynnik skalowania pomaga zapewnić, że elementy interfejsu użytkownika są wyświetlane z odpowiednim rozmiarem dla urządzenia, na którym jest uruchomiona aplikacja. To ustawienie można znaleźć na pulpicie w Ustawienia > System > Wyświetlanie jako wartość przesuwaną. To samo ustawienie istnieje również na telefonie, jeśli urządzenie go obsługuje.

Na konsoli Xbox One nie ma takiego ustawienia systemowego. Jednak aby elementy interfejsu użytkownika platformy uniwersalnej systemu Windows miały odpowiedni rozmiar na telewizorze, są skalowane domyślnie w 200% dla aplikacji XAML i 150% dla aplikacji HTML. Tak długo, jak elementy interfejsu użytkownika mają odpowiedni rozmiar dla innych urządzeń, będą miały odpowiedni rozmiar dla telewizora. Konsola Xbox One renderuje aplikację na 1080p (1920 x 1080 pikseli). W związku z tym podczas przenoszenia aplikacji z innych urządzeń, takich jak PC, upewnij się, że interfejs użytkownika wygląda świetnie w rozdzielczości 960 x 540 px w skali 100% (lub 1280 x 720 px w skali 100% dla aplikacji HTML) przy użyciu adaptacyjnych technik .

Projektowanie dla konsoli Xbox jest nieco inne niż projektowanie dla komputerów PC, ponieważ trzeba się martwić tylko o jedną rozdzielczość, 1920 x 1080. Nie ma znaczenia, czy użytkownik ma telewizor, który ma lepszą rozdzielczość — aplikacje platformy UWP zawsze będą skalowane do 1080p.

Prawidłowe rozmiary elementów zawartości z zestawu 200% (lub 150% dla aplikacji HTML) również zostaną pobrane dla aplikacji podczas uruchamiania na konsoli Xbox One, niezależnie od rozdzielczości telewizora.

Gęstość zawartości

Podczas projektowania aplikacji należy pamiętać, że użytkownik będzie oglądał interfejs użytkownika z oddali i wchodził z nim w interakcję, używając pilota lub kontrolera do gier, co zajmuje więcej czasu niż przy użyciu myszy lub dotykowego interfejsu.

Rozmiary kontrolek interfejsu użytkownika

Interakcyjne elementy interfejsu użytkownika powinny mieć rozmiar minimalnej wysokości 32 epx (efektywne piksele). Jest to ustawienie domyślne dla typowych kontrolek platformy UWP systemu Windows, a w przypadku użycia w skali 200% gwarantuje, że elementy interfejsu użytkownika są dobrze widoczne nawet z daleka i pomagają zmniejszyć gęstość zawartości.

przycisk UWP

Liczba kliknięć

Gdy użytkownik nawiguje z jednej krawędzi ekranu telewizora do drugiej, nie powinno to zająć więcej niż sześć kliknięć, co pozwala uprościć interfejs użytkownika. Ponownie zasada prostoty ma zastosowanie tutaj.

Rozmiary tekstu

Aby interfejs użytkownika był widoczny z daleka, użyj następujących zasad:

• Tekst główny i zawartość do czytania: minimum 15 epx
• Niekrytyczna zawartość tekstowa i dodatkowa: minimum 12 epx

Podczas używania większego tekstu w interfejsie użytkownika wybierz rozmiar, który nie zajmuje zbyt wiele miejsca na ekranie, pozostawiając przestrzeń dla pozostałej zawartości.

Rezygnacja ze współczynnika skalowania

Zalecamy, aby aplikacja korzystała z obsługi współczynników skalowania, co pomoże ją uruchomić odpowiednio na wszystkich urządzeniach przez skalowanie dla każdego typu urządzenia. Można jednak zrezygnować z tego zachowania i zaprojektować cały interfejs użytkownika w skali 100%. Należy pamiętać, że nie można zmienić współczynnika skalowania na wartość inną niż 100%.

W przypadku aplikacji XAML możesz zrezygnować ze współczynnika skalowania przy użyciu następującego fragmentu kodu:

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

result poinformuje Cię, czy pomyślnie zrezygnowałeś/zrezygnowałaś.

Aby uzyskać więcej informacji, w tym przykładowy kod HTML/JavaScript, zobacz Jak wyłączyć skalowanie.

Pamiętaj, aby obliczyć odpowiednie rozmiary elementów interfejsu użytkownika, podwajając wartości pikseli efektywnych wymienionych w tym temacie do wartości pikseli rzeczywistych (lub mnożąc przez 1,5 w przypadku aplikacji HTML).

Obszar bezpieczny dla telewizora

Nie wszystkie telewizory wyświetlają zawartość na krawędziach ekranu ze względu na powody historyczne i technologiczne. Domyślnie platforma UWP unika wyświetlania jakiejkolwiek zawartości interfejsu użytkownika w obszarach niebezpiecznych dla telewizji, a zamiast tego narysuje tylko tło strony.

Obszar niebezpieczny dla TV jest reprezentowany przez niebieski obszar na poniższym obrazie.

Tło można ustawić na kolor statyczny lub motywowy albo na obraz, jak pokazano w poniższych fragmentach kodu.

Kolor motywu

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

Obraz

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

Tak będzie wyglądać Twoja aplikacja bez dodatkowej pracy.

Nie jest to optymalne, ponieważ daje aplikacji efekt "zamknięty w ramce", z częściami interfejsu użytkownika, takimi jak okienko nawigacji i siatka, które wydają się być obcięte. Można jednak dokonać optymalizacji w celu rozszerzenia części interfejsu użytkownika na krawędzie ekranu, aby dać aplikacji bardziej kinowy efekt.

Rysowanie interfejsu użytkownika na krawędzi

Zalecamy użycie niektórych elementów interfejsu użytkownika w celu wydłużenia ich do krawędzi ekranu, aby zapewnić większą immersję użytkownika. Należą do nich ScrollViewers, okienka nawigacjii CommandBars.

Z drugiej strony ważne jest również, aby interaktywne elementy i tekst zawsze unikały krawędzi ekranu, aby upewnić się, że nie zostaną odcięte na niektórych telewizorach. Zalecamy rysowanie tylko nieistotnych wizualizacji w ciągu 5% krawędzi ekranu. Jak wspomniano w rozmiarowania elementu interfejsu użytkownika, aplikacja platformy UWP przy domyślnym współczynniku skalowania konsoli Xbox One wynoszącym 200% będzie korzystać z obszaru 960 x 540 epx, więc w interfejsie użytkownika aplikacji należy unikać umieszczania kluczowych elementów interfejsu użytkownika w następujących obszarach:

• 27 epx od góry i dołu
• 48 epx z lewej i prawej strony

W poniższych sekcjach opisano sposób rozszerzania interfejsu użytkownika na krawędzie ekranu.

Granice okna podstawowego

W przypadku aplikacji platformy UWP przeznaczonych tylko dla środowiska 10 stóp użycie podstawowych granic okna jest bardziej prostą opcją.

W metodzie OnLaunchedApp.xaml.csdodaj następujący kod:

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

Dzięki temu wierszowi kodu okno aplikacji zostanie rozszerzone na krawędzie ekranu, dlatego konieczne będzie przeniesienie całego interaktywnego i niezbędnego interfejsu użytkownika do opisanego wcześniej obszaru bezpiecznego dla telewizora. Tymczasowy interfejs użytkownika, jak na przykład menu kontekstowe i otwarte ComboBoxes, automatycznie pozostanie w bezpiecznym obszarze telewizora.

granice okna

Tła paneli

Okienka nawigacji są zwykle rysowane w pobliżu krawędzi ekranu, więc tło powinno rozciągać się na obszar niebezpieczny dla telewizora, aby nie wprowadzać niezręcznych przerw. Możesz to zrobić, zmieniając kolor tła okienka nawigacji na kolor tła aplikacji.

Użycie podstawowych granic okna zgodnie z wcześniejszym opisem umożliwi rysowanie interfejsu użytkownika na krawędziach ekranu, ale następnie należy użyć dodatnich marginesów na SplitViewzawartości, aby zachować go w obszarze bezpiecznym dla telewizora.

W tym miejscu tło okienka nawigacji zostało rozszerzone na krawędzie ekranu, podczas gdy jego elementy nawigacji są przechowywane w bezpiecznym obszarze telewizora. Zawartość SplitView (w tym przypadku siatka elementów) została rozszerzona do dolnej krawędzi ekranu, aby wyglądała na ciągłą i nie była odcięta, podczas gdy górna część siatki pozostaje w obszarze bezpiecznym dla TV. (Dowiedz się więcej o tym, jak to zrobić w sekcji „Przewijanie końców list i siatek”).

Poniższy fragment kodu osiąga ten efekt:

<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 to kolejny przykład okienka, który jest często umieszczony w pobliżu co najmniej jednej krawędzi aplikacji, a na telewizorze jego tło powinno rozciągać się na krawędzie ekranu. Zwykle zawiera również przycisk Więcej reprezentowany przez "..." po prawej stronie, który powinien pozostać w bezpiecznym dla telewizora obszarze. Poniżej przedstawiono kilka różnych strategii umożliwiających osiągnięcie żądanych interakcji i efektów wizualnych.

opcja 1: zmień kolor tła CommandBar na przezroczysty lub taki sam kolor jak tło strony:

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

Spowoduje to, że CommandBar wygląda jak na tym samym tle co pozostała część strony, więc tło bezproblemowo przechodzi do krawędzi ekranu.

opcja 2: Dodaj prostokąt tła, którego wypełnienie jest tym samym kolorem co tło CommandBar, i znajduje się poniżej CommandBar i w pozostałej części strony:

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

Oba te podejścia dotyczą również innych typów kontrolek wymienionych w tej sekcji.

Przewijanie końców list i siatek

Często zdarza się, że listy i siatki zawierają więcej elementów niż można zmieścić na ekranie jednocześnie. W takim przypadku zalecamy rozszerzenie listy lub siatki na krawędź ekranu. Przewijanie poziome list i siatek powinno rozciągać się do prawej krawędzi, a przewijanie pionowe powinno rozciągać się do dołu.

odcięcie siatki bezpiecznej strefy TV

Podczas gdy lista lub siatka jest rozszerzana w ten sposób, ważne jest, aby utrzymać wizualny fokus i skojarzony element wewnątrz obszaru bezpiecznego dla telewizorów.

Platforma UWP ma funkcjonalność, która utrzyma punkt skupienia wizualizacji w obrębie VisibleBounds, ale należy dodać margines, aby upewnić się, że elementy listy/siatki mają możliwość przewinięcia do bezpiecznego obszaru widoku. W szczególności dodajesz dodatni margines do ListView lub GridViewItemsPresenter, jak w poniższym fragmencie kodu.

<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>

Poprzedni fragment kodu można umieścić w zasobach strony lub aplikacji, a następnie uzyskać do niego dostęp w następujący sposób:

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

Aby uzyskać bardziej szczegółową kontrolę nad sposobem wyświetlania elementów, jeśli aplikacja jest przeznaczona dla wersji 1803 lub nowszej, możesz użyć zdarzenia UIElement.BringIntoViewRequested. Możesz umieścić go na ItemsPanel dla ListView/GridView, aby przechwycić go przed wewnętrznym ScrollViewer, jak w poniższych fragmentach kodu:

<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
        });
    }
}

Kolory

Domyślnie platforma uniwersalna systemu Windows skaluje kolory aplikacji do zakresu bezpiecznego dla telewizorów (zobacz kolory bezpieczne tv, aby uzyskać więcej informacji), aby aplikacja wyglądała dobrze na dowolnym telewizorze. Ponadto istnieją ulepszenia, które można wprowadzić w zestawie kolorów używanych przez aplikację w celu ulepszenia środowiska wizualnego w telewizji.

Motyw aplikacji

Możesz wybrać motyw aplikacji (ciemny lub jasny) zgodnie z tym, co jest odpowiednie dla aplikacji, lub możesz zrezygnować z motywu. Przeczytaj więcej na temat ogólnych zaleceń dotyczących motywów kolorystycznych w motywach kolorystycznych.

Platforma UWP umożliwia również aplikacjom dynamiczne ustawianie motywu na podstawie ustawień systemowych udostępnianych przez urządzenia, na których są uruchamiane. Chociaż platforma UWP zawsze uwzględnia ustawienia motywu określone przez użytkownika, każde urządzenie udostępnia również odpowiedni motyw domyślny. Ze względu na charakter konsoli Xbox One, która ma mieć więcej środowiska niż środowiska produktywności, domyślnie jest to ciemny motyw systemowy. Jeśli motyw aplikacji jest oparty na ustawieniach systemowych, należy oczekiwać, że ustawienie domyślne będzie ciemne na konsoli Xbox One.

Kolor wyróżniający

Platforma UWP zapewnia wygodny sposób uwidocznienia koloru akcentu, które użytkownik wybrał ze swoich ustawień systemowych.

Na konsoli Xbox One użytkownik może wybrać kolor użytkownika, tak jak może wybrać kolor wyróżniający na komputerze. Jeśli aplikacja wywołuje te kolory wyróżniające za pomocą pędzli lub zasobów kolorów, będzie używany kolor wybrany przez użytkownika w ustawieniach systemowych. Należy pamiętać, że kolory wyróżniające na konsoli Xbox One są na użytkownika, a nie na system.

Należy również pamiętać, że zestaw kolorów użytkownika na konsoli Xbox One nie jest taki sam jak na komputerach, telefonach i innych urządzeniach.

Jeśli Twoja aplikacja używa zasobu pędzla graficznego, takiego jak SystemControlForegroundAccentBrush, lub zasobu kolorów (SystemAccentColor), lub zamiast tego przywołuje kolory akcentowe bezpośrednio za pośrednictwem interfejsu API UIColorType.Accent*, te kolory są zastępowane kolorami wyróżniającymi dostępnymi na konsoli Xbox One. Kolory szczotki o wysokim kontraście są również ściągane z systemu w taki sam sposób jak na komputerze i telefonie.

Aby dowiedzieć się więcej na temat ogólnego koloru akcentu, zobacz Kolor akcentu.

Wariancja kolorów między telewizorami

Podczas projektowania dla telewizora należy pamiętać, że kolory są wyświetlane zupełnie inaczej w zależności od telewizora, na którym są renderowane. Nie zakładaj, że kolory będą wyglądać dokładnie tak, jak na monitorze. Jeśli aplikacja opiera się na subtelnych różnicach w kolorze w celu odróżnienia części interfejsu użytkownika, kolory mogą łączyć się ze sobą, a użytkownicy mogą się mylić. Spróbuj użyć kolorów, które są wystarczająco różne, że użytkownicy będą mogli wyraźnie je rozróżnić, niezależnie od telewizora, z którego korzystają.

Bezpieczne kolory telewizora

Wartości RGB koloru reprezentują natężenia koloru czerwonego, zielonego i niebieskiego. Telewizory nie radzą sobie dobrze ze skrajnymi intensywnościami — mogą one powodować dziwny efekt pasmowy lub obraz może być wyblakły na niektórych telewizorach. Ponadto kolory o wysokiej intensywności mogą powodować rozkwit (pobliskie piksele zaczynają rysować te same kolory). Chociaż istnieją różne podejścia do tego, które kolory są uważane za bezpieczne dla TV, kolory w wartościach RGB 16-235 (lub 10-EB w zapisie szesnastkowym) są ogólnie bezpieczne do stosowania w telewizji.

zakres kolorów bezpiecznych dla telewizorów

Historycznie aplikacje na Konsoli Xbox musiały dostosować kolory, aby mieściły się w tym "bezpiecznym dla telewizora" zakresie kolorów; Jednak począwszy od aktualizacji Fall Creators Update, Xbox One automatycznie skaluje pełną zawartość w zakresie bezpiecznym dla telewizorów. Oznacza to, że większość deweloperów aplikacji nie musi już martwić się o bezpieczne kolory telewizyjne.

Jeśli tworzysz aplikację przy użyciu programu DirectX 11 lub DirectX 12 i tworzysz własny łańcuch wymiany w celu renderowania interfejsu użytkownika lub wideo, możesz określić przestrzeń kolorów używaną przez wywołanie IDXGISwapChain3::SetColorSpace1, co pozwoli systemowi znać, czy wymaga skalowania kolorów, czy nie.

Wskazówki dotyczące kontrolek interfejsu użytkownika

Istnieje kilka kontrolek interfejsu użytkownika, które działają dobrze na wielu urządzeniach, ale wymagają pewnych względów, gdy są używane na telewizorze. Przeczytaj o niektórych najlepszych rozwiązaniach dotyczących używania tych kontrolek podczas projektowania środowiska 10 stóp.

Okienko nawigacji

Okienko nawigacji (znane również jako menu hamburger) to kontrolka nawigacji często używana w aplikacjach platformy UWP. Zazwyczaj jest to okienko z kilkoma opcjami do wyboru w menu stylu listy, które spowoduje przejście użytkownika na różne strony. Zazwyczaj to okienko zaczyna się zwijać, aby zaoszczędzić miejsce, a użytkownik może go otworzyć, klikając przycisk.

Chociaż okienka nawigacji są bardzo dostępne za pomocą myszy i dotyku, gamepad/remote sprawia, że są one mniej dostępne, ponieważ użytkownik musi przejść do przycisku, aby otworzyć okienko. W związku z tym dobrym rozwiązaniem jest otwarcie okienka nawigacji za pomocą przycisku Wyświetl, a także zezwolenie użytkownikowi na jego otwarcie przez przejście do lewej strony. Przykładowy kod dotyczący implementacji tego wzorca projektowego można znaleźć w dokumencie Nawigacja fokusowa zdefiniowana programowo. Zapewni to użytkownikowi bardzo łatwy dostęp do zawartości okienka. Aby uzyskać więcej informacji na temat zachowania okienek nawigacyjnych w różnych rozmiarach ekranu, a także najlepszych praktyk dotyczących gamepada i nawigacji zdalnej, zobacz okienka nawigacyjne.

Etykiety paska poleceń

Dobrym pomysłem jest umieszczenie etykiet po prawej stronie ikon na CommandBar, aby jego wysokość była zminimalizowana i pozostaje spójna. Można to zrobić, ustawiając właściwość CommandBar.DefaultLabelPosition na CommandBarDefaultLabelPosition.Right.

Gdy ta właściwość zostanie ustawiona, etykiety będą zawsze wyświetlane, co sprawdza się dobrze w odniesieniu do doświadczenia 10 stóp, ponieważ minimalizuje liczbę kliknięć dla użytkownika. Jest to również doskonały model dla innych typów urządzeń do naśladowania.

Podpowiedź

Kontrolka etykietki narzędzia została wprowadzona jako sposób udostępnienia większej ilości informacji w interfejsie użytkownika, gdy użytkownik najecha kursorem myszy lub naciśnie i trzyma figurę na elemecie. W przypadku gamepadu i zdalnego sterowania, Tooltip pojawia się po krótkiej chwili, gdy element uzyskuje fokus, pozostaje na ekranie przez krótki czas, a następnie znika. Takie zachowanie może rozpraszać uwagę, jeśli jest używanych zbyt wiele Tooltip. Staraj się unikać używania Tooltip podczas projektowania dla telewizora.

Style przycisku

Podczas gdy standardowe przyciski UWP działają dobrze na telewizorze, niektóre style wizualne przycisków lepiej zwracają uwagę na interfejs użytkownika, co warto wziąć pod uwagę dla wszystkich platform, szczególnie w przypadku środowiska 10 stóp, co jest korzystne z punktu widzenia jasnego komunikowania, gdzie znajduje się punkt skupienia. Aby dowiedzieć się więcej na temat tych stylów, zobacz Przyciski.

Zagnieżdżone elementy interfejsu użytkownika

Zagnieżdżony interfejs użytkownika uwidacznia zagnieżdżone elementy z możliwością działania znajdujące się wewnątrz elementu interfejsu użytkownika kontenera, w którym zarówno zagnieżdżony element, jak i element kontenera mogą skupić się na sobie niezależnie.

Zagnieżdżony interfejs użytkownika działa dobrze w przypadku niektórych typów wejściowych, ale nie zawsze w przypadku gamepada i pilota, które opierają się na nawigacji XY. Pamiętaj, aby postępować zgodnie ze wskazówkami w tym temacie, aby upewnić się, że interfejs użytkownika jest zoptymalizowany pod kątem środowiska 10 stóp i że użytkownik może łatwo uzyskać dostęp do wszystkich elementów, które można wchodzić w interakcję. Jednym z typowych rozwiązań jest umieszczenie elementów interfejsu użytkownika zagnieżdżonych w ContextFlyout.

Aby uzyskać więcej informacji na temat zagnieżdżonego interfejsu użytkownika, zobacz zagnieżdżony interfejs użytkownika w elementach listy.

MediaTransportControls

Element MediaTransportControls umożliwia użytkownikom interakcję z nośnikiem, zapewniając domyślne środowisko odtwarzania, które pozwala im odtwarzać, wstrzymywać, włączać napisy zamknięte i nie tylko. Ta kontrolka jest właściwością MediaPlayerElement i obsługuje dwie opcje układu: jednorzędowy i dwurzędowy. W układzie z jednym wierszem przyciski suwaka i odtwarzania znajdują się w jednym wierszu z przyciskiem odtwarzania/wstrzymywania znajdującym się po lewej stronie suwaka. W układzie o podwójnym wierszu suwak zajmuje własny wiersz, a przyciski odtwarzania są umieszczone w oddzielnym dolnym wierszu. Podczas projektowania pod kątem 10 stóp należy użyć układu dwurzędowego, ponieważ zapewnia lepszą nawigację dla gamepadu. Aby włączyć układ podwójnych wierszy, ustaw na elemencie we właściwości TransportControls .

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

Odwiedź Odtwarzanie multimediów, aby dowiedzieć się więcej na temat dodawania multimediów do swojej aplikacji.

Środowisko wyszukiwania

Wyszukiwanie zawartości jest jedną z najczęściej wykonywanych funkcji w 10-stopowym środowisku. Jeśli aplikacja udostępnia środowisko wyszukiwania, przydatne jest, aby użytkownik miał szybki dostęp do niej za pomocą przycisku Y na gamepad jako akceleratora.

Większość klientów powinna być już zaznajomiona z tym akceleratorem, ale jeśli chcesz, możesz dodać wizualny symbol Y do interfejsu użytkownika, aby wskazać, że klient może użyć przycisku w celu uzyskania dostępu do funkcji wyszukiwania. Jeśli dodasz ten sygnał, pamiętaj, aby użyć symbolu z Segoe Xbox MDL2 Symbol ( dla aplikacji XAML, \E426 dla aplikacji HTML) dla zachowania spójności z powłoką Xbox i innymi aplikacjami.

Ponieważ przycisk Y jest dostępny tylko na gamepad, upewnij się, że zapewnia inne metody dostępu do wyszukiwania, takie jak przyciski w interfejsie użytkownika. W przeciwnym razie niektórzy klienci mogą nie mieć dostępu do funkcji.

W środowisku 10 stóp klientom jest często łatwiej korzystać z pełnoekranowego środowiska wyszukiwania, ponieważ na wyświetlaczu jest ograniczone miejsce. Niezależnie od tego, czy korzystasz z wyszukiwania pełnoekranowego, czy częściowego, "w miejscu", zalecamy, aby po otwarciu przez użytkownika środowiska wyszukiwania klawiatura ekranowa była już otwarta, gotowa do wprowadzania terminów wyszukiwania.

Niestandardowy wyzwalacz stanu wizualnego dla konsoli Xbox

Aby dostosować aplikację UWP do doświadczenia 10 stóp, zalecamy wprowadzenie zmian w układzie po wykryciu, że aplikacja została uruchomiona na konsoli Xbox. Jednym ze sposobów wykonania tej czynności jest użycie niestandardowego wyzwalacza stanu wizualnego . Wyzwalacze stanu wizualnego są najbardziej przydatne, gdy chcesz edytować w programie Blend for Visual Studio. Poniższy fragment kodu pokazuje, jak utworzyć wyzwalacz stanu wizualnego dla Xbox.

<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>

Aby utworzyć wyzwalacz, dodaj następującą klasę do aplikacji. Jest to klasa, do którego odwołuje się powyższy kod XAML:

class DeviceFamilyTrigger : StateTriggerBase
{
    private string _currentDeviceFamily, _queriedDeviceFamily;

    public string DeviceFamily
    {
        get
        {
            return _queriedDeviceFamily;
        }

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

Po dodaniu wyzwalacza niestandardowego aplikacja automatycznie wprowadzi modyfikacje układu określone w kodzie XAML za każdym razem, gdy wykryje, że jest uruchomiona w konsoli Xbox One.

Innym sposobem sprawdzenia, czy aplikacja jest uruchomiona na konsoli Xbox, a następnie wprowadzić odpowiednie korekty, jest za pomocą kodu. Aby sprawdzić, czy aplikacja jest uruchomiona na konsoli Xbox, możesz użyć następującej prostej zmiennej:

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

Następnie możesz wprowadzić odpowiednie korekty interfejsu użytkownika w bloku kodu po wykonaniu tej kontroli.

Podsumowanie

Projektowanie z myślą o środowisku 10 stóp wymaga uwzględnienia szczególnych czynników, które odróżniają je od projektowania dla każdej innej platformy. Chociaż z pewnością można wykonać prosty port aplikacji platformy uniwersalnej Windows na konsolę Xbox One i będzie działać, może nie być zoptymalizowany pod kątem doświadczenia dziesięciu stóp i może prowadzić do frustracji użytkownika. Stosowanie się do wytycznych zawartych w tym artykule zapewni, że Twoja aplikacja będzie jak najlepsza na telewizorze.

Powiązane artykuły

• Primer urządzeń dla aplikacji systemu Windows
• Gamepad i interakcje za pomocą pilota
• Dźwięk w aplikacjach UWP