Gamepad i interakcje zdalnego sterowania

Wiele doświadczeń interakcji jest dzielonych pomiędzy gamepad, pilot i klawiaturę

Twórz środowiska interakcji w aplikacjach systemu Windows, które zapewniają, że aplikacja jest dostępna zarówno za pośrednictwem tradycyjnych typów danych wejściowych komputerów, laptopów i tabletów (myszy, klawiatury, dotyku i tak dalej), jak również typów danych wejściowych typowych dla telewizora i konsoli Xbox 10 stóp , takich jak gamepad i zdalne sterowanie.

Zobacz Projektowanie dla konsoli Xbox i TV, aby uzyskać ogólne wskazówki dotyczące projektowania aplikacji systemu Windows w środowisku z odległości 10 stóp.

Przegląd

W tym temacie omówimy, co należy wziąć pod uwagę w projekcie interakcji (lub czego nie musisz robić samodzielnie, jeśli platforma robi to za Ciebie) oraz przedstawimy wskazówki, zalecenia i sugestie dotyczące tworzenia aplikacji dla systemu Windows, które są przyjemne w użyciu niezależnie od urządzenia, typu wprowadzenia, umiejętności i preferencji użytkownika.

Podsumowując, aplikacja powinna być tak intuicyjna i łatwa w użyciu w trybie 2 stóp, jak w trybie 10 stóp (i na odwrót). Obsługa preferowanych urządzeń użytkownika, uściślić fokus interfejsu użytkownika i zapewnić czytelność, rozmieścić zawartość, aby nawigacja była spójna i przewidywalna, i dać użytkownikom najkrótszą możliwą ścieżkę do tego, co chcą zrobić.

Uwaga / Notatka

Większość fragmentów kodu w tym temacie jest w języku XAML/C#; jednak zasady i pojęcia dotyczą wszystkich aplikacji systemu Windows. Jeśli tworzysz aplikację HTML/JavaScript dla systemu Windows dla konsoli Xbox, zapoznaj się z doskonałą biblioteką TVHelpers w witrynie GitHub.

Optymalizacja pod kątem doświadczeń użytkownika przy bliskiej i dalszej odległości

Zalecamy przetestowanie aplikacji, aby upewnić się, że dobrze działają w odległości 2 stóp i 10 stóp od ekranu, oraz że wszystkie funkcje są łatwo wykrywalne i dostępne przy użyciu gamepada Xbox oraz pilota.

Oto kilka innych sposobów, jak zoptymalizować aplikację do użycia w odległościach 2 i 10 stóp oraz na wszystkich urządzeniach wejściowych (każdy sposób prowadzi do odpowiedniej sekcji w tym temacie).

Uwaga / Notatka

Ponieważ pady Xbox i piloty zdalnego sterowania obsługują wiele zachowań i środowisk klawiatury systemu Windows, te zalecenia są odpowiednie dla obu typów wejściowych. Aby uzyskać bardziej szczegółowe informacje o klawiaturze, zobacz Interakcje klawiatury .

Funkcja	Description
Nawigacja i interakcja fokusu XY	Nawigacja fokusu XY umożliwia użytkownikowi poruszanie się po interfejsie użytkownika aplikacji. Ogranicza to jednak użytkownika do nawigowania w górę, w dół, w lewo i w prawo. Zalecenia dotyczące radzenia sobie z tym i innymi zagadnieniami zostały opisane w tej sekcji.
Tryb myszy	Nawigacja fokusu XY nie jest praktyczna, a nawet możliwa dla niektórych typów aplikacji, takich jak mapy lub aplikacje do rysowania i malowania. W takich przypadkach tryb myszy pozwala użytkownikom swobodnie poruszać się za pomocą gamepadu lub zdalnego sterowania, podobnie jak mysz na komputerze.
Wizualizacja fokusu	Wizualizacja fokusu to obramowanie, które wyróżnia obecnie skoncentrowany element interfejsu użytkownika. Ułatwia to użytkownikowi szybkie identyfikowanie interfejsu użytkownika, z którego nawigują lub wchodzą w interakcję.
Zaangażowanie fokusu	Zaangażowanie fokusu wymaga od użytkownika naciśnięcia przycisku A/Select na gamepad lub zdalnego sterowania, gdy element interfejsu użytkownika ma fokus w celu interakcji z nim.
Przyciski sprzętowe	Gamepad i pilot zapewniają bardzo różne przyciski i konfiguracje.

Gamepad i zdalne sterowanie

Podobnie jak klawiatura i mysz są dla komputera, a dotyk dla telefonu i tabletu, gamepad i pilot zdalnego sterowania to główne urządzenia wejściowe dla doświadczenia typu 10-foot. W tej sekcji przedstawiono, czym są przyciski sprzętowe i co robią. W trybie nawigacji i interakcji fokusu XY oraz w trybie myszy dowiesz się, jak zoptymalizować aplikację podczas korzystania z tych urządzeń wejściowych.

Jakość gamepada i zachowanie pilota, które masz do dyspozycji, zależy od tego, jak dobrze klawiatura jest obsługiwana aplikacji. Dobrym sposobem zapewnienia, że aplikacja będzie dobrze działać z gamepadem/zdalnym, jest upewnienie się, że działa dobrze z klawiaturą na komputerze, a następnie przetestować z gamepadem/zdalnym, aby znaleźć słabe punkty w interfejsie użytkownika.

Przyciski sprzętowe

W tym dokumencie przyciski będą określane przez nazwy podane na poniższym diagramie.

Jak widać na diagramie, istnieje kilka przycisków, które są obsługiwane na gamepadzie, ale nie są obsługiwane na zdalnym sterowaniu, i odwrotnie. Chociaż można użyć przycisków, które są obsługiwane tylko na jednym urządzeniu wejściowym, aby szybciej nawigować po interfejsie użytkownika, należy pamiętać, że użycie ich do interakcji krytycznych może spowodować sytuację, w której użytkownik nie może wchodzić w interakcje z niektórymi częściami interfejsu użytkownika.

Poniższa tabela zawiera listę wszystkich przycisków sprzętowych obsługiwanych przez aplikacje systemu Windows oraz obsługiwanych przez nie urządzeń wejściowych.

Button	Kontroler	Zdalne sterowanie
Przycisk A/Select	Tak	Tak
Przycisk B lub Wstecz	Tak	Tak
Podkładka kierunkowa (D-pad)	Tak	Tak
Przycisk menu	Tak	Tak
Przycisk Wyświetl	Tak	Tak
Przyciski X i Y	Tak	Nie.
Lewy drążek	Tak	Nie.
Prawy drążek	Tak	Nie.
Wyzwalacze z lewej i prawej	Tak	Nie.
Lewe i prawe zderzaki	Tak	Nie.
Przycisk OneGuide	Nie.	Tak
Przycisk regulacji głośności	Nie.	Tak
Przycisk kanału	Nie.	Tak
Przyciski sterowania multimediami	Nie.	Tak
Przycisk Wycisz	Nie.	Tak

Obsługa wbudowanych przycisków

Platforma UWP automatycznie mapuje istniejące zachowanie wprowadzania klawiatury na gamepad i wejście zdalnego sterowania. W poniższej tabeli wymieniono te wbudowane mapowania.

Keyboard	Gamepad/remote
klawisze strzałek	D-pad (również lewy kij na gamepad)
Spacja	Przycisk A/Select
Wejść	Przycisk A/Select
Ucieczka	Przycisk B/Wstecz*

*Jeśli ani zdarzenia KeyDown , ani KeyUp dla przycisku B nie są obsługiwane przez aplikację, zdarzenie SystemNavigationManager.BackRequested zostanie wyzwolone, co powinno spowodować powrót nawigacji w aplikacji. Należy jednak zaimplementować to samodzielnie, tak jak w poniższym fragmencie kodu:

// This code goes in the MainPage class

public MainPage()
{
    this.InitializeComponent();

    // Handling Page Back navigation behaviors
    SystemNavigationManager.GetForCurrentView().BackRequested +=
        SystemNavigationManager_BackRequested;
}

private void SystemNavigationManager_BackRequested(
    object sender,
    BackRequestedEventArgs e)
{
    if (!e.Handled)
    {
        e.Handled = this.BackRequested();
    }
}

public Frame AppFrame { get { return this.Frame; } }

private bool BackRequested()
{
    // Get a hold of the current frame so that we can inspect the app back stack
    if (this.AppFrame == null)
        return false;

    // Check to see if this is the top-most page on the app back stack
    if (this.AppFrame.CanGoBack)
    {
        // If not, set the event to handled and go back to the previous page in the
        // app.
        this.AppFrame.GoBack();
        return true;
    }
    return false;
}

Uwaga / Notatka

Jeśli przycisk B jest używany do powrotu, nie pokazuj przycisku Wstecz w interfejsie użytkownika. Jeśli używasz widoku nawigacji, przycisk Wstecz zostanie automatycznie ukryty. Aby uzyskać więcej informacji na temat nawigacji wstecz, zobacz Historia nawigacji i nawigacja wstecz dla aplikacji systemu Windows.

Aplikacje systemu Windows na konsoli Xbox One obsługują również naciśnięcie przycisku Menu , aby otworzyć menu kontekstowe. Aby uzyskać więcej informacji, zobacz CommandBar i ContextFlyout.

Obsługa akceleratora

Przyciski akceleratora to przyciski, których można użyć do przyspieszenia nawigacji za pośrednictwem interfejsu użytkownika. Jednak te przyciski mogą być unikatowe dla określonego urządzenia wejściowego, dlatego należy pamiętać, że nie wszyscy użytkownicy będą mogli korzystać z tych funkcji. W rzeczywistości gamepad jest obecnie jedynym urządzeniem wejściowym obsługującym funkcje akceleratora dla aplikacji systemu Windows na konsoli Xbox One.

W poniższej tabeli wymieniono obsługę akceleratora wbudowaną w platformę UWP, a także tę, którą można zaimplementować samodzielnie. Użyj tych zachowań w niestandardowym interfejsie użytkownika, aby zapewnić spójne i przyjazne środowisko użytkownika.

Interakcja	Klawiatura/mysz	Kontroler	Wbudowane dla:	Zalecane w przypadku:
Strona w górę/w dół	Przewiń stronę w górę/w dół	Lewy/prawy przycisk	CalendarView, ListBox, ListViewBase, ListView, ScrollViewer, Selector, LoopingSelector, ComboBox, FlipView	Widoki obsługujące przewijanie w pionie
Przewijanie strony w lewo/w prawo	Żaden	Zderzaki z lewej/prawej	ListBox, ListViewBase, ListView, ScrollViewerSelector, LoopingSelector, FlipView	Widoki obsługujące przewijanie w poziomie
Powiększanie/pomniejszanie	Ctrl +/-	Wyzwalacze lewy/prawy	Żaden	ScrollViewer, widoki, które obsługują powiększanie i pomniejszanie
Otwieranie/zamykanie okienka nawigacji	Żaden	View	Żaden	Okienka nawigacji
Search	Żaden	Przycisk Y	Żaden	Skrót do głównej funkcji wyszukiwania w aplikacji
Otwórz menu kontekstowe	Kliknij prawym przyciskiem myszy pozycję	Przycisk menu	ContextFlyout	Menu kontekstowe

Nawigacja i interakcja fokusu XY

Jeśli aplikacja obsługuje właściwą nawigację fokusu dla klawiatury, będzie to dobrze przekładać się na gamepad i zdalne sterowanie. Nawigacja za pomocą strzałek jest mapowana na D-pad (oraz lewą gałkę na gamepadzie), a interakcja z elementami interfejsu użytkownika jest mapowana na klawisz Enter/Select (zobacz Gamepad i pilot zdalnego sterowania).

Wiele zdarzeń i właściwości jest używanych zarówno przez klawiaturę, jak i gamepad — zarówno zdarzenia KeyDown, jak i KeyUp są uruchamiane, a oba te urządzenia mogą nawigować tylko do kontrolek, które mają właściwości IsTabStop="True" i Visibility="Visible". Aby uzyskać wskazówki dotyczące projektowania klawiatury, zobacz Interakcje z klawiaturą.

Jeśli obsługa klawiatury jest prawidłowo zaimplementowana, aplikacja będzie działać rozsądnie dobrze; jednak może istnieć dodatkowa praca wymagana do obsługi każdego scenariusza. Zastanów się nad konkretnymi potrzebami aplikacji, aby zapewnić najlepsze możliwe środowisko użytkownika.

Ważne

Tryb myszy jest domyślnie włączony dla aplikacji systemu Windows działających na konsoli Xbox One. Aby wyłączyć tryb myszy i włączyć nawigację fokusu XY, ustaw wartość Application.RequiresPointerMode=WhenRequested.

Problemy z fokusem debugowania

Metoda FocusManager.GetFocusedElement informuje, który element aktualnie ma fokus. Jest to przydatne w sytuacjach, w których lokalizacja elementu wizualnego fokusu może nie być oczywista. Te informacje można zarejestrować w oknie danych wyjściowych programu Visual Studio w następujący sposób:

page.GotFocus += (object sender, RoutedEventArgs e) =>
{
    FrameworkElement focus = FocusManager.GetFocusedElement() as FrameworkElement;
    if (focus != null)
    {
        Debug.WriteLine("got focus: " + focus.Name + " (" +
            focus.GetType().ToString() + ")");
    }
};

Istnieją trzy typowe przyczyny, dla których nawigacja XY może nie działać w oczekiwany sposób:

• Właściwość IsTabStop lub Visibility jest ustawiona nieprawidłowo.
• Kontrolka uzyskująca fokus jest faktycznie większa niż myślisz — nawigacja XY sprawdza całkowity rozmiar kontrolki (ActualWidth i ActualHeight), a nie tylko część kontrolki, która renderuje coś interesującego.
• Jedna kontrolka z możliwością koncentracji uwagi znajduje się na drugim — nawigacja XY nie obsługuje kontrolek nakładających się na siebie.

Jeśli nawigacja XY nadal nie działa zgodnie z oczekiwaniami po rozwiązaniu tych problemów, możesz ręcznie wskazać element, który chcesz skupić, korzystając z metody opisanej w temacie Zastępowanie nawigacji domyślnej.

Jeśli nawigacja XY działa zgodnie z oczekiwaniami, ale nie jest wyświetlany żaden wskaźnik fokusu, może to być spowodowane jednym z następujących problemów:

• Przeprowadziłeś ponowne szablonowanie kontrolki i nie zawarłeś wizualizacji skupienia. Ręczne ustawianie UseSystemFocusVisuals="True" lub dodawanie wizualizacji fokusu.
• Fokus został przeniesiony przez wywołanie metody Focus(FocusState.Pointer). Parametr FocusState steruje tym, co dzieje się z wizualizacją fokusu. Zazwyczaj należy ustawić tę wartość na FocusState.Programmatic, co zachowuje wcześniejszy stan widoczności fokusa – pozostaje widoczny, jeśli był widoczny wcześniej, lub ukryty, jeśli był ukryty wcześniej.

Pozostała część tej sekcji zawiera szczegółowe informacje na temat typowych wyzwań projektowych podczas korzystania z nawigacji XY i oferuje kilka sposobów ich rozwiązywania.

Niedostępny interfejs użytkownika

Ponieważ nawigacja przy pomocy fokusu XY ogranicza użytkownika do poruszania się w górę, w dół, w lewo i w prawo, może prowadzić do sytuacji, w których części interfejsu użytkownika są niedostępne. Na poniższym diagramie przedstawiono przykładowy układ interfejsu użytkownika, którego nawigacja fokusu XY nie obsługuje. Należy pamiętać, że element w środku nie jest dostępny za pomocą gamepada lub pilota zdalnego sterowania, ponieważ pionowa i pozioma nawigacja mają priorytet, a środkowy element nigdy nie będzie miał wystarczająco wysokiego priorytetu, aby otrzymać fokus.

Jeśli z jakiegoś powodu zmiana układu interfejsu użytkownika nie jest możliwa, użyj jednej z technik omówionych w następnej sekcji, aby zastąpić domyślne zachowanie fokusu.

Zastąpienie domyślnej nawigacji

Podczas gdy platforma uniwersalna systemu Windows próbuje upewnić się, że nawigacja w okienku D/lewym kiju ma sens dla użytkownika, nie może zagwarantować zachowania zoptymalizowanego pod kątem intencji aplikacji. Najlepszym sposobem zapewnienia, że nawigacja jest zoptymalizowana pod kątem aplikacji, jest przetestowanie jej za pomocą gamepadu i potwierdzenie, że każdy element interfejsu użytkownika może być dostępny dla użytkownika w sposób zrozumiały dla scenariuszy aplikacji. W przypadku, gdy scenariusze aplikacji wywołają zachowanie, które nie zostało osiągnięte za pośrednictwem udostępnionej nawigacji fokusu XY, rozważ wykonanie zaleceń w poniższych sekcjach i/lub zastąpienie zachowania, aby umieścić fokus na elemencie logicznym.

Poniższy fragment kodu ilustruje, jak można nadpisać zachowanie nawigacji fokusu XY.

<StackPanel>
    <Button x:Name="MyBtnLeft"
            Content="Search" />
    <Button x:Name="MyBtnRight"
            Content="Delete"/>
    <Button x:Name="MyBtnTop"
            Content="Update" />
    <Button x:Name="MyBtnDown"
            Content="Undo" />
    <Button Content="Home"  
            XYFocusLeft="{x:Bind MyBtnLeft}"
            XYFocusRight="{x:Bind MyBtnRight}"
            XYFocusDown="{x:Bind MyBtnDown}"
            XYFocusUp="{x:Bind MyBtnTop}" />
</StackPanel>

W takim przypadku, gdy fokus znajduje się na Home przycisku, a użytkownik przechodzi do lewej strony, fokus zostanie przeniesiony do MyBtnLeft przycisku. Jeśli użytkownik przejdzie w prawo, fokus zostanie przeniesiony do MyBtnRight przycisku itd.

Aby zapobiec przeniesieniu focusu z kontrolki w określonym kierunku, użyj właściwości XYFocus*, aby skierować go na tę samą kontrolkę.

<Button Name="HomeButton"  
        Content="Home"  
        XYFocusLeft ="{x:Bind HomeButton}" />

Przy użyciu tych XYFocus właściwości, kontrolka nadrzędna może również wymusić nawigację elementów podrzędnych, gdy następny kandydat fokusu jest poza drzewem wizualnym, chyba że element podrzędny, który ma fokus, używa tej samej XYFocus właściwości.

<StackPanel Orientation="Horizontal" Margin="300,300">
    <UserControl XYFocusRight="{x:Bind ButtonThree}">
        <StackPanel>
            <Button Content="One"/>
            <Button Content="Two"/>
        </StackPanel>
    </UserControl>
    <StackPanel>
        <Button x:Name="ButtonThree" Content="Three"/>
        <Button Content="Four"/>
    </StackPanel>
</StackPanel>

W powyższym przykładzie, jeśli fokus znajduje się na Button Dwa, a użytkownik nawiguje w prawo, najlepszym kandydatem fokusowym jest Button Cztery; jednak fokus jest przenoszony do Button Trzy, ponieważ element nadrzędny UserControl wymusza nawigowanie tam, gdy jest poza jego drzewem wizualnym.

Ścieżka najmniejszych kliknięć

Spróbuj zezwolić użytkownikowi na wykonywanie najbardziej typowych zadań w najmniejszej liczbie kliknięć. W poniższym przykładzie element TextBlock jest umieszczany między przyciskiem Play (który początkowo przyciąga fokus) a często używanym elementem, w taki sposób, aby niepotrzebny element znajdował się pomiędzy zadaniami priorytetowymi.

W poniższym przykładzie TextBlock zamiast tego zostanie umieszczony nad przyciskiem Play. Wystarczy zmienić kolejność interfejsu użytkownika, aby niepotrzebne elementy nie zostały umieszczone między zadaniami priorytetowymi, znacznie poprawią użyteczność aplikacji.

CommandBar i ContextFlyout

Podczas korzystania z paska poleceń należy pamiętać o problemie przewijania listy, jak wspomniano w temacie Problem: elementy interfejsu użytkownika znajdujące się po długim przewijaniu listy/siatki. Na poniższej ilustracji przedstawiono układ interfejsu użytkownika z CommandBar u dołu listy/siatki. Użytkownik musi przewinąć w dół do końca listę/siatkę CommandBar, aby dotrzeć do CommandBar.

Co by było, gdybyś umieścił to nad listą/układem? Podczas gdy użytkownik, który przewinął w dół listę/siatkę, musiałby przewinąć z powrotem w górę, aby dosięgnąć CommandBar, jest to nieco mniej nawigacji niż w poprzedniej konfiguracji. Należy pamiętać, że przy założeniu, iż początkowy fokus aplikacji znajduje się obok lub powyżej CommandBar, to podejście nie będzie działać równie dobrze, jeśli początkowy fokus znajduje się poniżej listy/siatki. Jeśli te CommandBar elementy są globalnymi elementami akcji, do których nie trzeba uzyskiwać dostępu bardzo często (na przykład przycisk Synchronizuj ), może być dopuszczalne ich umieszczenie nad listą/siatką.

Chociaż nie można umieścić elementów CommandBar w pionie, umieszczenie ich przeciwnie do kierunku przewijania (na przykład po lewej lub prawej stronie listy przewijanej pionowo lub u góry lub u dołu listy przewijanej poziomo) jest inną opcją, którą warto rozważyć, jeśli dobrze pasuje do układu interfejsu użytkownika.

Jeśli aplikacja ma element CommandBar , którego elementy muszą być łatwo dostępne dla użytkowników, warto rozważyć umieszczenie tych elementów wewnątrz elementu ContextFlyout i usunięcie ich z elementu CommandBar. ContextFlyout jest właściwością UIElement i to menu kontekstowe skojarzone z tym elementem. Na komputerze, po kliknięciu prawym przyciskiem myszy elementu z ContextFlyout, zostanie wyświetlone menu kontekstowe. Na konsoli Xbox One nastąpi to po naciśnięciu przycisku Menu , gdy fokus znajduje się na takim elemmencie.

Wyzwania związane z układem interfejsu użytkownika

Niektóre układy interfejsu użytkownika są trudniejsze ze względu na charakter nawigacji fokus XY i powinny być oceniane indywidualnie. Chociaż nie ma jednego "właściwego" sposobu i wybór rozwiązania zależy od konkretnych potrzeb aplikacji, istnieją pewne techniki, które można wykorzystać, aby stworzyć doskonałe wrażenia telewizyjne.

Aby lepiej to zrozumieć, przyjrzyjmy się wyimaginowanej aplikacji, która ilustruje niektóre z tych problemów i technik ich przezwyciężenia.

Uwaga / Notatka

Ta fałszywa aplikacja ma na celu zilustrowanie problemów z interfejsem użytkownika i potencjalnych rozwiązań dla nich i nie ma na celu pokazania najlepszego środowiska użytkownika dla określonej aplikacji.

Poniżej znajduje się wyimaginowana aplikacja nieruchomości, która pokazuje listę domów dostępnych do sprzedaży, mapę, opis nieruchomości i inne informacje. Ta aplikacja stanowi trzy wyzwania, które można przezwyciężyć, korzystając z następujących technik:

• Zmiana rozmieszczania interfejsu użytkownika
• Zaangażowanie fokusu
• Tryb myszy

Problem: Elementy interfejsu użytkownika znajdujące się po długim przewijaniu listy/siatki

ListView właściwości pokazywanych na ilustracji poniżej jest bardzo długą przewijaną listą. Jeśli interakcjanie jest wymagana na ListView, gdy użytkownik przejdzie do listy, fokus zostanie umieszczony na pierwszym elemencie listy. Aby użytkownik dotarł do przycisku Wstecz lub Dalej , musi przejść przez wszystkie elementy na liście. W takich przypadkach, gdy wymaganie od użytkownika przejścia przez całą listę jest niekomfortowe — innymi słowy, gdy lista nie jest na tyle krótka, by taka sytuacja była akceptowalna — warto rozważyć inne opcje.

Solutions

Zmiana rozmieszczania interfejsu użytkownika

O ile początkowy fokus nie zostanie umieszczony w dolnej części strony, elementy interfejsu użytkownika umieszczone powyżej długiej przewijanej listy są zwykle łatwiej dostępne niż w przypadku umieszczania poniżej. Jeśli ten nowy układ działa dla innych urządzeń, zmiana układu dla wszystkich rodzin urządzeń zamiast wprowadzania specjalnych zmian interfejsu użytkownika tylko dla konsoli Xbox One może być mniej kosztowna. Ponadto umieszczenie elementów interfejsu użytkownika względem kierunku przewijania (czyli poziomo względem listy przewijanej w pionie lub pionowo względem listy przewijanej w poziomie) zapewni lepszą dostępność.

Zaangażowanie fokusu

Gdy zaangażowanie jest wymagane, cała ListView staje się pojedynczym celem uwagi. Użytkownik będzie mógł pominąć zawartość listy, aby przejść do następnego elementu z możliwością koncentracji uwagi. Dowiedz się więcej o tym, jakie kontrolki obsługują interakcje i jak ich używać w Skupienie na interakcjach.

Aplikacja nieruchomości: ustaw aktywację na wymaganą, aby do przycisków Poprzedni/Następny wystarczyło tylko jedno kliknięcie.

Problem: ScrollViewer bez żadnych elementów z możliwością koncentracji uwagi

Ponieważ nawigacja fokusu XY polega na przechodzeniu do jednego elementu interfejsu użytkownika w danym momencie, ScrollViewer, który nie zawiera żadnych fokusowalnych elementów (na przykład wtedy, gdy zawiera tylko tekst, jak w tym przypadku), może prowadzić do sytuacji, w której użytkownik nie jest w stanie wyświetlić całej zawartości w ScrollViewer. Aby zapoznać się z rozwiązaniami tego i innych powiązanych scenariuszy, zobacz Koncentracja zaangażowania.

Problem: interfejs użytkownika z przewijaniem swobodnym

Jeśli aplikacja wymaga swobodnie przewijanego interfejsu użytkownika, taka jak powierzchnia rysunku lub w tym przykładzie mapa, nawigacja fokusu XY po prostu nie działa. W takich przypadkach możesz włączyć tryb myszy , aby umożliwić użytkownikowi swobodne nawigowanie wewnątrz elementu interfejsu użytkownika.

Tryb myszy

Zgodnie z opisem w sekcji nawigacja i interakcja fokusu XY na konsoli Xbox One fokus jest przenoszony przy użyciu systemu nawigacji XY, dzięki czemu użytkownik może przesunąć fokus z kontrolki na kontrolkę, przechodząc w górę, w dół, w lewo i w prawo. Jednak niektóre kontrolki, takie jak WebView i MapControl, wymagają interakcji podobnej do myszy, w której użytkownicy mogą swobodnie przenosić wskaźnik wewnątrz granic kontrolki. Istnieją również niektóre aplikacje, w których warto, aby użytkownik mógł przenieść wskaźnik na całej stronie, mając doświadczenie z gamepadem/zdalnym podobnym do tego, co użytkownicy mogą znaleźć na komputerze z myszą.

W tych scenariuszach należy zażądać wskaźnika (trybu myszy) dla całej strony lub kontrolki wewnątrz strony. Na przykład aplikacja może mieć stronę z kontrolką WebView, która używa trybu myszy, gdy znajduje się wewnątrz kontrolki, a na zewnątrz używa nawigacji fokusu XY. Aby zażądać wskaźnika, możesz określić, czy chcesz go gdy kontrolka lub strona jest zaangażowana, czy gdy strona ma skupienie.

Uwaga / Notatka

Żądanie wskaźnika, gdy kontrolka uzyskuje fokus, nie jest obsługiwana.

W przypadku aplikacji internetowych XAML i hostowanych na konsoli Xbox One tryb myszy jest domyślnie włączony dla całej aplikacji. Zdecydowanie zaleca się wyłączenie tej funkcji i zoptymalizowanie aplikacji pod kątem nawigacji XY. Aby to zrobić, ustaw właściwość Application.RequiresPointerMode na WhenRequested, aby włączyć tryb myszy tylko wtedy, gdy kontrolka lub strona tego wymaga.

Aby to zrobić w aplikacji XAML, użyj następującego kodu w App klasie:

public App()
{
    this.InitializeComponent();
    this.RequiresPointerMode =
        Windows.UI.Xaml.ApplicationRequiresPointerMode.WhenRequested;
    this.Suspending += OnSuspending;
}

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

Na poniższym diagramie przedstawiono mapowania przycisków dla gamepad/remote w trybie myszy.

Uwaga / Notatka

Tryb myszy jest obsługiwany tylko na konsoli Xbox One z gamepadem/zdalnym. Na innych rodzinach urządzeń i typach wejść jest to ignorowane bez powiadomienia.

Użyj właściwości RequiresPointer na kontrolce lub stronie, aby aktywować na niej tryb myszy. Ta właściwość ma trzy możliwe wartości: Never (wartość domyślna), WhenEngagedi WhenFocused.

Aktywowanie trybu myszy na kontrolce

Gdy użytkownik aktywuje element sterujący za pomocą RequiresPointer="WhenEngaged" polecenia, tryb myszy zostaje włączony w elemencie sterującym, dopóki użytkownik go nie wyłączy. Poniższy fragment kodu przedstawia prosty MapControl, który aktywuje tryb myszy, gdy jest włączony:

<Page>
    <Grid>
        <MapControl IsEngagementRequired="true"
                    RequiresPointer="WhenEngaged"/>
    </Grid>
</Page>

Uwaga / Notatka

Jeśli kontrolka aktywuje tryb myszy podczas uruchamiania, musi również wymagać interakcji z IsEngagementRequired="true"; w przeciwnym razie tryb myszy nigdy nie zostanie aktywowany.

Gdy kontrolka jest w trybie myszy, jej zagnieżdżone kontrolki również będą w trybie myszy. Żądany tryb jego elementów podrzędnych zostanie zignorowany — niemożliwe jest, aby rodzic był w trybie myszy, a dziecko nie było.

Ponadto żądany tryb kontrolki jest sprawdzany tylko wtedy, gdy zostanie ustawiony fokus, więc tryb nie zmieni się dynamicznie, gdy ma fokus.

Aktywowanie trybu myszy na stronie

Gdy strona ma właściwość RequiresPointer="WhenFocused", tryb myszy zostanie włączony dla całej strony, gdy zyska fokus. Poniższy fragment kodu demonstruje nadanie stronie tej właściwości:

<Page RequiresPointer="WhenFocused">
    ...
</Page>

Uwaga / Notatka

Wartość WhenFocused jest obsługiwana tylko w obiektach Page. Jeśli spróbujesz ustawić tę wartość w kontrolce, zostanie zgłoszony wyjątek.

Wyłączanie trybu myszy dla zawartości pełnoekranowej

Zazwyczaj podczas wyświetlania wideo lub innych typów zawartości na pełnym ekranie warto ukryć kursor, ponieważ może rozpraszać użytkownika. Ten scenariusz występuje, gdy reszta aplikacji używa trybu myszy, ale chcesz wyłączyć ją podczas wyświetlania zawartości pełnoekranowej. Aby to osiągnąć, umieść zawartość pełnoekranową na własną rękę Page, a następnie wykonaj poniższe kroki.

1. W obiekcie App ustaw RequiresPointerMode="WhenRequested".
2. W każdym Page obiekcie z wyjątkiem pełnego ekranu Pageustaw wartość RequiresPointer="WhenFocused".
3. Dla pełnego ekranu Pageustaw wartość RequiresPointer="Never".

Dzięki temu kursor nigdy nie będzie wyświetlany podczas wyświetlania zawartości pełnoekranowej.

Wizualizacja fokusu

Wizualizacja fokusu to obramowanie wokół elementu interfejsu użytkownika, który obecnie ma fokus. Dzięki temu użytkownik może łatwo poruszać się po interfejsie użytkownika bez utraty orientacji.

Dzięki aktualizacji wizualnej i wielu opcji dostosowywania dodanych do wizualnej reprezentacji fokusu deweloperzy mogą mieć pewność, że pojedyncza wizualna reprezentacja fokusu będzie działać dobrze na komputerach i Xbox One, a także na innych urządzeniach z systemem Windows, które obsługują klawiaturę i/lub gamepad/pilot.

Chociaż ta sama wizualizacja punktu uwagi może być używana na różnych platformach, kontekst, w którym użytkownik ma do czynienia z nim, jest nieco inny w przypadku doświadczenia z odległości 10 stóp. Należy założyć, że użytkownik nie zwraca pełnej uwagi na cały ekran telewizora, dlatego ważne jest, aby aktualnie skoncentrowany element był wyraźnie widoczny dla użytkownika przez cały czas, aby uniknąć frustracji podczas wyszukiwania wizualizacji.

Należy również pamiętać, że wizualizacja fokusu jest domyślnie wyświetlana podczas korzystania z gamepadu lub zdalnego sterowania, ale nie klawiatury. W związku z tym nawet jeśli go nie zaimplementujesz, będzie ona wyświetlana po uruchomieniu aplikacji na konsoli Xbox One.

Początkowe wizualne umieszczenie fokusu

Podczas uruchamiania aplikacji lub przechodzenia do strony umieść fokus na elemecie interfejsu użytkownika, który ma sens jako pierwszy element, na którym użytkownik podejmie działania. Na przykład aplikacja fotograficzna może skupić się na pierwszym elemencie w galerii, a aplikacja muzyczna przechodzi do szczegółowego widoku utworu może skupić się na przycisku odtwarzania, aby ułatwić odtwarzanie muzyki.

Spróbuj umieścić fokus początkowy w lewym górnym regionie aplikacji (lub w prawym górnym rogu dla przepływu od prawej do lewej). Większość użytkowników zwykle skupia się najpierw na tym rogu, ponieważ to właśnie tam zazwyczaj rozpoczyna się przepływ treści aplikacji.

Uwidocznienie fokusu

Jeden element fokusu powinien być zawsze widoczny na ekranie, aby umożliwić użytkownikowi kontynuowanie od miejsca, w którym przerwał pracę, bez konieczności ponownego szukania fokusu. Podobnie cały czas powinien istnieć element z możliwością koncentracji uwagi — na przykład nie należy używać wyskakujących okienek tylko z tekstem i bez elementów z fokusem.

Wyjątkiem od tej reguły są pełnoekranowe doświadczenia, takie jak oglądanie filmów wideo lub wyświetlanie obrazów, w takich przypadkach nie byłoby odpowiednie, aby pokazać wskaźnik fokusu.

Uwypuklenie fokusu

Odsłanianie fokusu to efekt oświetlenia, który animuje obramowanie elementów, takich jak przycisk, gdy użytkownik przenosi do nich gamepad lub klawiaturę. Poprzez animację blasku wokół obramowania skupionych elementów, funkcja Reveal focus daje użytkownikom lepsze zrozumienie, gdzie jest ostrość i dokąd zmierza.

Odsłanianie fokusu jest domyślnie wyłączone. W przypadku interakcji z odległości 10 stóp należy skonfigurować ujawnianie fokusu, ustawiając właściwość Application.FocusVisualKind w konstruktorze aplikacji.

    if(AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Xbox")
    {
        this.FocusVisualKind = FocusVisualKind.Reveal;
    }

Aby uzyskać więcej informacji, zobacz wskazówki dotyczące funkcji Ujawnianie fokusu.

Dostosowywanie wizualizacji fokusu

Jeśli chcesz dostosować wizualizację fokusu, możesz to zrobić, modyfikując właściwości powiązane z wizualizacją fokusu dla każdej kontrolki. Istnieje kilka takich właściwości, które można wykorzystać do personalizowania aplikacji.

Możesz nawet zrezygnować z wizualizacji punktu skupienia udostępnianych przez system, tworząc własne przy użyciu stanów wizualnych. Aby dowiedzieć się więcej, zobacz VisualState.

Jasny odrzuć nakładkę

Aby zwrócić uwagę użytkownika na elementy interfejsu użytkownika, które użytkownik aktualnie manipuluje za pomocą kontrolera gry lub zdalnego sterowania, platforma UWP automatycznie dodaje warstwę "dymu", która obejmuje obszary poza wyskakującym interfejsem użytkownika, gdy aplikacja jest uruchomiona na konsoli Xbox One. Nie wymaga to dodatkowej pracy, ale jest czymś, o czym należy pamiętać podczas projektowania interfejsu użytkownika. Możesz ustawić właściwość LightDismissOverlayMode na dowolnym FlyoutBase, aby włączyć lub wyłączyć warstwę dymu. Domyślnie wartość Auto oznacza, że jest włączona na Xbox, a wyłączona na innych urządzeniach. Aby uzyskać więcej informacji, zobacz Modalne i lekkie odrzucanie.

Skupienie na zaangażowaniu

Kierowanie fokusem ma na celu ułatwienie korzystania z gamepada lub pilota do interakcji z aplikacją.

Uwaga / Notatka

Ustawienie zaangażowania fokusu nie ma wpływu na klawiaturę lub inne urządzenia wejściowe.

Gdy właściwość IsFocusEngagementEnabled obiektu FrameworkElement jest ustawiona na True, oznacza to, że kontrolka wymaga uzyskania fokusu. Oznacza to, że użytkownik musi nacisnąć przycisk A/Select , aby "zaangażować" kontrolkę i wchodzić z nią w interakcje. Kiedy zakończą, mogą nacisnąć przycisk B/Wstecz, aby odłączyć kontrolę i wyjść z niej.

Uwaga / Notatka

IsFocusEngagementEnabled to nowy interfejs API, który nie został jeszcze udokumentowany.

Zamykanie fokusu

Uwięzienie fokusu jest tym, co dzieje się, gdy użytkownik próbuje poruszać się po interfejsie użytkownika aplikacji, ale zostaje "uwięziony" w kontrolce, co utrudnia lub nawet uniemożliwia przejście poza tę kontrolkę.

W poniższym przykładzie pokazano interfejs użytkownika, który zapewnia blokadę fokusu.

Jeśli użytkownik chce przejść od lewego przycisku do prawego przycisku, logiczne byłoby założenie, że wszystko, co musi zrobić, to dwukrotnie nacisnąć prawy D-pad/lewy kij. Jeśli jednak suwak nie wymaga interakcji, nastąpi następujące zachowanie: gdy użytkownik naciśnie w prawo po raz pierwszy, fokus zmieni się na Slider, a kiedy ponownie naciśnie w prawo, uchwyt Slider przesunie się w prawo. Użytkownik kontynuował przesuwanie uchwytu w prawo i nie będzie w stanie dosięgnąć przycisku.

Istnieje kilka podejść do obejścia tego problemu. Jednym z rozwiązań jest zaprojektowanie innego układu, na wzór przykładu aplikacji nieruchomości przedstawionego w nawigacji i interakcji z fokusem XY, gdzie przenieśliśmy przyciski Wstecz i Dalej powyżej ListView. Układanie kontrolek w pionie zamiast poziomo, jak na poniższej ilustracji, rozwiąże problem.

Teraz użytkownik może przejść do każdego z elementów sterujących, naciskając w górę i w dół na krzyżaku/lewym drążku, a gdy Slider jest aktywny, może naciskać w lewo i w prawo, aby przesunąć uchwyt Slider, odpowiednio.

Innym podejściem do rozwiązania tego problemu jest wymaganie zaangażowania w programie Slider. Jeśli ustawisz wartość IsFocusEngagementEnabled="True", spowoduje to następujące zachowanie.

Slider Gdy wymagane jest zaangażowanie fokusu, użytkownik może dostać się do przycisku po prawej stronie, naciskając prawym przyciskiem na d-pad/lewym kijem dwa razy. To rozwiązanie jest doskonałe, ponieważ nie wymaga dostosowania interfejsu użytkownika i generuje oczekiwane zachowanie.

Kontrolki elementów

Oprócz kontrolki Suwak istnieją inne kontrolki, które mogą wymagać zakontraktowania, takie jak:

• ListBox
• Widok listy
• GridView
• FlipView

W przeciwieństwie do kontrolki Slider te kontrolki nie skupiają się na sobie, ale mogą powodować problemy z użytecznością, gdy zawierają duże ilości danych. Poniżej przedstawiono przykład obiektu ListView zawierającego dużą ilość danych.

Podobnie jak w przykładzie Slider, spróbujmy nawigować od przycisku u góry do przycisku na dole przy użyciu gamepada/pilota. Zaczynając od skupienia na górnym przycisku, naciśnięcie przycisku na D-padzie/kij spowoduje umieszczenie skupienia na pierwszym elemencie w ListView ("Element 1"). Gdy użytkownik ponownie naciska w dół, następny element na liście zostanie fokus, a nie przycisk znajdujący się u dołu. Aby przejść do przycisku, użytkownik musi najpierw przejść przez każdy element w komponencie ListView. Jeśli element ListView zawiera dużą ilość danych, może to być niewygodne i nieoptymalne doświadczenie użytkownika.

Aby rozwiązać ten problem, ustaw właściwość IsFocusEngagementEnabled="True" na ListView, aby wymagać zaangażowania. Pozwoli to użytkownikowi szybko pominąć ListView po prostu naciskając przycisk w dół. Nie będą jednak mogli przewijać listy ani wybierać z niej elementu, chyba że zaangażują go, naciskając przycisk A/Select , gdy ma fokus, a następnie naciskając przycisk B/Back , aby go odłączyć.

Przeglądarka przewijania

Od tych kontrolek nieco różni się ScrollViewer, który ma swoje własne dziwactwa, które należy wziąć pod uwagę. Jeśli masz ScrollViewer zawartość z możliwością koncentracji uwagi, domyślnie przechodzenie do elementu ScrollViewer umożliwia przechodzenie przez jego elementy fokusowe. Podobnie jak w elemencie ListView, należy przewijać poszczególne elementy, aby przechodzić poza obiekt ScrollViewer.

Jeśli obiekt ScrollViewernie ma zawartości, która może być fokusowana—na przykład, jeśli zawiera tylko tekst—możesz ustawić IsFocusEngagementEnabled="True", aby użytkownik mógł obsługiwać ScrollViewer za pomocą przycisku A/Select. Po rozpoczęciu mogą przewijać tekst za pomocą D-pada/lewego drążka, a następnie nacisnąć przycisk B/Wstecz, aby zakończyć.

Innym podejściem byłoby ustawienie IsTabStop="True" na ScrollViewer, aby użytkownik nie musiał aktywnie używać kontrolki — może po prostu skupić się na niej, a następnie przewinąć za pomocą D-pada/lewego drążka, gdy w ScrollViewer nie ma elementów, na których można się skupić.

Domyślne ustawienia skupienia

Niektóre elementy sterujące powodują blokowanie fokusu na tyle częste, by uzasadniać ich domyślne ustawienia wymagające aktywacji fokusu, podczas gdy inne mają domyślnie wyłączoną tę funkcję, ale mogą zyskać na jej włączeniu. W poniższej tabeli wymieniono te kontrolki i ich domyślne zachowania aktywacji fokusu.

Kontrola	Domyślne zaangażowanie ostrości
Wybieracz daty z kalendarza	On
FlipView	Off
Widok siatki	Off
ListBox	Off
Lista widokowa	Off
Przeglądarka przewijania	Off
SemanticZoom	Off
Suwak	On

Wszystkie inne kontrolki systemu Windows nie spowodują żadnych zmian w zachowaniu ani wyglądzie, gdy IsFocusEngagementEnabled="True".

Podsumowanie

Można tworzyć aplikacje systemu Windows zoptymalizowane pod kątem określonego urządzenia lub środowiska, ale Platforma uniwersalna Windows umożliwia również tworzenie aplikacji, które mogą być pomyślnie używane na różnych urządzeniach, w środowiskach zarówno do bliskiej jak i dalekiej odległości użytkowania, i niezależnie od używanego urządzenia wejściowego czy możliwości użytkownika. Korzystając z zaleceń zawartych w tym artykule, możesz upewnić się, że Twoja aplikacja działa tak dobrze, jak to możliwe zarówno na telewizorze, jak i na komputerze.

Powiązane artykuły

• Projektowanie dla Xboxa i telewizora
• Podstawy urządzeń dla aplikacji systemu Windows