Nawigacja po TV

Urządzenia TV mają ograniczony zestaw elementów sterujących nawigacją w aplikacjach. Stworzenie skutecznego schematu nawigacji w aplikacji TV zależy od zrozumienia tych ograniczonych elementów sterujących oraz ograniczeń użytkowników podczas korzystania z aplikacji. Podczas tworzenia aplikacji na Androida TV zwróć szczególną uwagę na to, jak użytkownik porusza się po aplikacji, używając przycisków pilota zamiast ekranu dotykowego.

Zasady

Nawigacja powinna być naturalna i znajoma, nie powinna dominować w interfejsie ani odwracać uwagi od treści. Te zasady pomagają ustalić podstawowe wymagania dotyczące spójnego i intuicyjnego środowiska użytkownika w aplikacjach na telewizor.

Wydajność

Uprość dostęp do treści. Użytkownicy chcą szybko uzyskiwać dostęp do treści używając jak najmniejszej liczby kliknięć. Uporządkuj informacje w sposób, który wymaga jak najmniejszej liczby ekranów.

Przewidywalność

Postępuj zgodnie ze sprawdzonymi metodami i zaleceniami, aby nawigacja przewidywalna dla użytkowników. Nie twórz niepotrzebnie nowych wzorców nawigacji ponieważ prowadzi to do dezorientacji i nieprzewidywalności.

Intuicyjność

Uprość nawigację na tyle, aby bezproblemowo obsługiwała powszechnie stosowane zachowania użytkowników. Nie komplikuj jej, dodając niepotrzebne warstwy nawigacji.

Kontrolery

Kontrolery są dostępne w różnych stylach – od minimalistycznego pilota po złożone kontrolery do gier. Wszystkie kontrolery mają pad kierunkowy oraz przyciski wyboru, ekranu głównego i wstecz. Inne przyciski różnią się w zależności od modelu.

pilot do telewizora,
Rysunek 1. Przykład pilota do telewizora.

Pad kierunkowy
Podstawową metodą nawigacji na telewizorze jest pad kierunkowy, który obejmuje sprzętowe przyciski kierunkowe: w górę, w dół, w lewo i w prawo. Pad kierunkowy przenosi fokus z jednego obiektu na najbliższy obiekt w kierunku naciśniętego przycisku.

Przycisk wyboru
Wybiera element na ekranie, który jest zaznaczony.

Przycisk ekranu głównego
Przenosi użytkownika na ekran główny systemu.

Przycisk Wstecz
Umożliwia użytkownikom powrót do poprzedniego widoku.

Przycisk mikrofonu
Wywołuje Asystenta Google lub głosowe wprowadzanie tekstu.

Nawigacja za pomocą pada kierunkowego

Na urządzeniu TV użytkownicy poruszają się za pomocą pada kierunkowego lub klawiszy strzałek. Ten typ sterowania ogranicza ruch do góry, w dół, w lewo i w prawo. Aby stworzyć świetną aplikację zoptymalizowaną pod kątem telewizora, musisz zapewnić schemat nawigacji, w którym użytkownik może szybko nauczyć się poruszać po aplikacji za pomocą tych ograniczonych elementów sterujących.

Platforma Android automatycznie obsługuje nawigację kierunkową między elementami układu, więc zwykle nie musisz robić niczego dodatkowego w aplikacji. Warto jednak dokładnie przetestować nawigację za pomocą kontrolera z padem kierunkowym, aby wykryć ewentualne problemy z nawigacją.

Aby sprawdzić, czy system nawigacji aplikacji dobrze współpracuje z padem kierunkowym na urządzeniu TV, postępuj zgodnie z tymi wskazówkami:

  • Upewnij się, że użytkownik z kontrolerem z padem kierunkowym może przejść do wszystkich widocznych elementów sterujących na ekranie.
  • W przypadku list przewijanych z zaznaczeniem upewnij się, że przyciski pada kierunkowego w górę i w dół przewijają listę, a przycisk wyboru wybiera element z listy. Sprawdź, czy użytkownicy mogą wybrać element z listy i czy lista nadal się przewija, gdy element jest zaznaczony.
  • Upewnij się, że przełączanie się między elementami sterującymi jest proste i przewidywalne.

Modyfikowanie nawigacji kierunkowej

Platforma Android automatycznie stosuje schemat nawigacji kierunkowej na podstawie względnego położenia elementów, które można zaznaczyć, w układach. Przetestuj wygenerowany schemat nawigacji w aplikacji za pomocą kontrolera z padem kierunkowym. Jeśli po testach zdecydujesz, że chcesz, aby użytkownicy poruszali się po układach w określony sposób, możesz skonfigurować dla elementów sterujących wyraźną nawigację kierunkową.

Ten przykładowy kod pokazuje, jak zdefiniować następny element sterujący, który ma otrzymać fokus, w przypadku obiektu układu TextView:

<TextView android:id="@+id/Category1" android:nextFocusDown="@+id/Category2" />

W tabeli poniżej znajdziesz listę wszystkich dostępnych atrybutów nawigacji w przypadku widżetów interfejsu użytkownika Androida:

Atrybut Funkcja
nextFocusDown Definiuje następny widok, który ma otrzymać fokus, gdy użytkownik przejdzie w dół.
nextFocusLeft Definiuje następny widok, który ma otrzymać fokus, gdy użytkownik przejdzie w lewo.
nextFocusRight Definiuje następny widok, który ma otrzymać fokus, gdy użytkownik przejdzie w prawo.
nextFocusUp Definiuje następny widok, który ma otrzymać fokus, gdy użytkownik przejdzie w górę.

Aby użyć jednego z tych wyraźnych atrybutów nawigacji, ustaw wartość na android:id innego widżetu w układzie. Upewnij się, że kolejność nawigacji jest ustawiona jako pętla, tak aby ostatni element sterujący kierował fokus z powrotem do pierwszego.

Zapewnianie wyraźnego fokusu i wyboru

Skuteczność schematu nawigacji aplikacji na urządzeniach TV zależy od tego, czy użytkownik może szybko określić, który element interfejsu jest zaznaczony. Jeśli nie zapewnisz wyraźnego wskazania zaznaczonego elementu, a tym samym elementu, na którym użytkownik może wykonać działanie, może się on szybko zniechęcić i opuścić aplikację. Z tego samego powodu ważne jest, aby zawsze mieć zaznaczony element, na którym użytkownik może natychmiast wykonać działanie po uruchomieniu aplikacji lub w dowolnym momencie, gdy jest ona nieaktywna.

W układzie i implementacji aplikacji używaj koloru, rozmiaru, animacji lub ich kombinacji, aby pomóc użytkownikom określić, jakie działania mogą wykonać. Używaj jednolitego schematu wskazywania fokusu w całej aplikacji.

Android udostępnia zasoby listy stanów obiektów rysowalnych aby implementować wyróżnienia zaznaczonych i wybranych elementów sterujących. Ten przykładowy kod pokazuje, jak włączyć zachowanie wizualne przycisku, aby wskazać, że użytkownik przeszedł do elementu sterującego, a następnie go wybrał:

<!-- res/drawable/button.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:drawable="@drawable/button_pressed" /> <!-- pressed -->
    <item android:state_focused="true"
          android:drawable="@drawable/button_focused" /> <!-- focused -->
    <item android:state_hovered="true"
          android:drawable="@drawable/button_focused" /> <!-- hovered -->
    <item android:drawable="@drawable/button_normal" /> <!-- default -->
</selector>

Ten przykładowy kod układu XML stosuje poprzedni obiekt rysowalny listy stanów do Button:

<Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/button" />

Zapewnij wystarczający odstęp w elementach sterujących, które można zaznaczyć i wybrać, aby wyróżnienia wokół nich były wyraźnie widoczne.

Nawigacja za pomocą przycisku Wstecz

Aby zapewnić spójność w aplikacjach na platformie, upewnij się, że działanie przycisku Wstecz jest zgodne z tymi wskazówkami.

Używanie przewidywalnego działania przycisku Wstecz

Aby zapewnić prostą i przewidywalną nawigację, gdy użytkownik naciśnie przycisk Wstecz na pilocie, przenieś go do poprzedniego miejsca docelowego.

Przebieg nawigacji podczas korzystania z menu u góry
Rysunek 2. Przepływ z użyciem nawigacji u góry.
Przepływ nawigacji podczas korzystania z bocznego panelu nawigacyjnego
Rysunek 3. Przepływ z użyciem nawigacji z boku.

Jeśli użytkownik przejdzie z elementu menu do karty na środku strony, a następnie naciśnie przycisk Wstecz, wynik zależy od tego, czy aplikacja używa nawigacji u góry, czy nawigacji z lewej strony:

  • Aplikacja używa nawigacji u góry: przewiń szybko stronę do góry i aktywuj fokus na menu.
  • Aplikacja używa nawigacji z lewej strony: aktywuj boczne menu i zaznacz aktualnie aktywną pozycję menu.

Upewnij się, że przycisk Wstecz nie jest ograniczony ekranami potwierdzenia ani nie jest częścią nieskończonej pętli.

Okno z pytaniem, czy użytkownik chce zamknąć aplikację
Rysunek 4. Ograniczenie wyjścia

Nie
Unikaj ograniczeń wyjścia. Pozwól użytkownikom opuścić aplikację bez potwierdzenia.


Pętla nawigacyjna między zamknięciem a otwarciem menu
Rysunek 5. Pętla nawigacji

Nie
Nigdy nie wchodź w nieskończoną pętlę zamykania i otwierania menu. Najlepiej, aby naciśnięcie przycisku Wstecz powodowało wyjście z aplikacji. Nie pokazuj przycisku wyjścia w menu, chyba że jest to szczególny przypadek, np. profil dziecka.

Nie wyświetlaj przycisku Wstecz ani W górę

W przeciwieństwie do urządzeń przenośnych przycisk Wstecz na pilocie służy do nawigacji wstecz na telewizorze. Nie trzeba wyświetlać wirtualnego przycisku Wstecz na ekranie:

Wirtualny przycisk Wstecz wyświetlany na ekranie
Rysunek 6. Przycisk dotykowy Wstecz

Nie

W razie potrzeby pokaż przycisk Anuluj

Jeśli jedynymi widocznymi działaniami są potwierdzenie, działanie destrukcyjne lub zakup, warto mieć przycisk Anuluj , który wraca do poprzedniego miejsca docelowego:

Przycisk anulowania wyświetlany obok działań destrukcyjnych
Rysunek 7. Przycisk dotykowy Anuluj.

Tak

Implementowanie przechodzenia wstecz

Platforma Android na ogół dobrze obsługuje nawigację wstecz, podobnie jak w przypadku pada kierunkowego. Jeśli używasz komponentu Navigation, możesz obsługiwać różne wykresy nawigacji. Czasami może być konieczne zaimplementowanie niestandardowego działania, np. zresetowanie fokusu na początek długiej listy za pomocą przycisku Wstecz.

ComponentActivity, klasa bazowa dla FragmentActivity i AppCompatActivity, umożliwia kontrolowanie działania przycisku Wstecz za pomocą OnBackPressedDispatcher, który można pobrać, wywołując getOnBackPressedDispatcher().

Więcej informacji znajdziesz w artykule Zapewnianie niestandardowego przechodzenia wstecz.

Elementy sterujące odtwarzaniem na telewizorze

Odtwarzanie filmów to jedna z najważniejszych funkcji na telewizorze. Ważne jest, aby odtwarzacze wideo w aplikacjach na Androida TV działały tak samo. Zapoznaj się ze wskazówkami dotyczącymi elementów sterujących odtwarzaniem na telewizorze.

Nawigacja po karcie Na żywo

Oprócz spełniania wymagań dotyczących jakości aplikacji na telewizor aplikacje ze zintegrowanym kanałem telewizji na żywo na karcie Na żywo muszą też spełniać wymagania dotyczące płynnego odtwarzania i bezpośredniego powrotu, które opisujemy w kolejnych sekcjach.

Płynne odtwarzanie

Płynne odtwarzanie dotyczy zachowania w aplikacji po kliknięciu precyzyjnego linku do kanału na żywo lub kanału linearnego z Google TV i Androida TV.

Gdy użytkownik kliknie precyzyjny link, obowiązują te reguły:

  • Brak opóźnień: użytkownicy muszą być przekierowywani bezpośrednio do odtwarzania kanału bez blokowania lub opóźniania ekranów, takich jak ekrany logowania lub rejestracji czy filmy z brandingiem.
  • Wyjątek dotyczący uruchamiania „na zimno”: jeśli precyzyjny link inicjuje wczytywanie docelowej aplikacji z uruchamiania „na zimno”, opóźnienie uruchamiania jest dozwolone. W tym przypadku dozwolone są też filmy lub animacje z brandingiem podczas uruchamiania aplikacji.
  • Wyjątek dotyczący opóźnienia wczytywania: jeśli przełączenie na kanał trwa kilka sekund, wyświetlanie brandingu jest dozwolone. Czas trwania musi być tak długi, jak wczytywanie kanału.

Jeśli użytkownik jest wylogowany lub nie ma subskrypcji, możesz zablokować odtwarzanie płatnego kanału, aby dokończyć proces logowania lub rejestracji.

Bezpośredni powrót

Gdy użytkownicy uruchomią aplikację za pomocą precyzyjnego linku na karcie Na żywo, a następnie naciśną przycisk Wstecz, muszą wrócić na kartę Na żywo za pomocą jednego naciśnięcia przycisku Wstecz, niezależnie od tego, ile czasu upłynęło. To zachowanie bezpośredniego powrotu jest wymagane w przypadku wszystkich precyzyjnych linków na karcie Na żywo w Google TV i Androidzie TV.

Precyzyjne linki na karcie Na żywo wyróżniają się dołączonym parametrem precyzyjnego linku: ?exit_on_back=[true|false]. Aplikacje muszą analizować ten parametr, aby określić, czy aplikacja została uruchomiona z karty Na żywo. Jeśli exit_on_back ma wartość true, aplikacje muszą implementować zachowanie bezpośredniego powrotu.

Pamiętaj, że jeśli użytkownik naciśnie dowolny przycisk inny niż przycisk Wstecz jako pierwszy przycisk po kliknięciu precyzyjnego linku, wymaganie bezpośredniego powrotu nie będzie obowiązywać i wymagane będzie tylko standardowe działanie przycisku Wstecz jest wymagane.

Załóżmy na przykład, że po kliknięciu precyzyjnego linku użytkownik naciśnie przycisk wyboru na padzie kierunkowym, co spowoduje wyświetlenie nakładki z elementami sterującymi. Użytkownik czeka, aż nakładka zniknie, a następnie naciśnie przycisk Wstecz. Ponieważ pierwszym przyciskiem naciśniętym po kliknięciu precyzyjnego linku był przycisk wyboru na padzie kierunkowym, wymaganie bezpośredniego powrotu nie obowiązuje. Zamiast tego obowiązuje normalna logika stosu wstecz aplikacji.

Wielokrotne naciskanie przycisku Wstecz musi prowadzić użytkownika do katalogu głównego aplikacji, a następnie z powrotem do Google TV lub Androida TV bez żadnych nieskończonych pętli. Więcej informacji znajdziesz w sekcji Przewidywalne działanie przycisku Wstecz behavior.

Dobrze zdefiniowana architektura nawigacji pomaga użytkownikom zrozumieć, gdzie się znajdują w aplikacji i jak uzyskać dostęp do różnych treści. Weź pod uwagę te aspekty projektu nawigacji.

Stałe miejsce docelowe początkowe

Pierwszy ekran, który użytkownik widzi po uruchomieniu aplikacji z programu uruchamiającego, jest też ostatnim ekranem, który widzi po naciśnięciu przycisku Wstecz i powrocie do programu uruchamiającego.

Precyzyjne linki symulują nawigację ręczną

Niezależnie od tego, czy użytkownicy korzystają z precyzyjnych linków, czy ręcznie przechodzą do określonego miejsca docelowego, mogą używać przycisku Wstecz, aby poruszać się po miejscach docelowych z powrotem do miejsca docelowego początkowego.

Zrzuty ekranu przedstawiające link bezpośredni do strony szczegółów w aplikacji.
            Naciśnięcie przycisku Wstecz powoduje przejście do ekranu głównego aplikacji, a ponowne naciśnięcie przycisku Wstecz
            powoduje powrót do pierwotnego ekranu.
Rysunek 8. Precyzyjne linki do strony z informacjami.

Precyzyjne linki do aplikacji z innej aplikacji symulują nawigację ręczną. Jeśli na przykład użytkownik przejdzie bezpośrednio do strony z informacjami w aplikacji Moviestar z Google TV, a następnie naciśnie przycisk Wstecz, zostanie przeniesiony na stronę główną aplikacji Moviestar.

Wyraźna ścieżka do wszystkich elementów, które można zaznaczyć

Umożliwiaj użytkownikom poruszanie się po interfejsie w wyraźnym kierunku. Jeśli nie ma prostej ścieżki do elementu sterującego, rozważ jego przeniesienie.

Układ z elementami sterującymi umieszczonymi w niepokrywających się lokalizacjach
Rysunek 9. Możliwość zaznaczenia elementu sterującego.

Tak
Umieszczaj elementy sterujące, takie jak pokazane tutaj działanie wyszukiwania, w miejscach, które nie nakładają się na inne elementy klikalne.

układ z elementami sterującymi w trudno dostępnych miejscach,
Rysunek 10. Możliwość zaznaczenia elementu sterującego.

Nie
Unikaj układów zawierających elementy sterujące w trudno dostępnych miejscach. Dostęp do pokazanego tutaj działania wyszukiwania może być trudny za pomocą pada kierunkowego.

Osie

Zaprojektuj układ tak, aby wykorzystywał zarówno oś poziomą, jak i pionową. Przypisz każdemu kierunkowi określoną funkcję, aby umożliwić szybkie poruszanie się po dużych hierarchiach.

Układ z kategoriami pionowymi i elementami poziomymi
Rysunek 11. Przemierzanie.

Tak
Kategorie można przeglądać na osi pionowej, a elementy w każdej kategorii – na osi poziomej.

złożoną i zagnieżdżoną hierarchię układu,
Rysunek 12. Przemierzanie.

Nie
Unikaj złożonych i zagnieżdżonych hierarchii układów.