Nawigacja po TV

Telewizory mają ograniczony zestaw elementów sterujących nawigacją dla aplikacji. Aby utworzyć skuteczny schemat nawigacji w aplikacji na telewizory, musisz zapoznać się z tymi ograniczonymi elementami sterującymi oraz ograniczeniami użytkowników podczas korzystania z aplikacji. Tworząc aplikację na Androida na telewizory, zwróć szczególną uwagę na sposób, w jaki użytkownik porusza się za pomocą przycisków pilota, a nie ekranu dotykowego.

Zasady

Nawigacja ma być naturalne i znajoma, a jednocześnie nie zdominować interfejsu użytkownika ani odwracać uwagi od treści. Podane niżej zasady pomagają wyznaczyć punkt odniesienia dla spójnego i intuicyjnego sposobu korzystania z aplikacji na telewizory.

Wydajność

Zadbaj o szybki i łatwy dostęp do treści. Użytkownicy chcą mieć szybki dostęp do treści przy użyciu minimalnej liczby kliknięć. Uporządkuj informacje w sposób, który wymaga jak najmniejszej liczby ekranów.

Przewidywalne

Postępuj zgodnie ze sprawdzonymi metodami i zaleceniami, aby zapewnić użytkownikom przewidywalność nawigacji. Nie wymyślaj niepotrzebnie wzorców nawigacji, ponieważ może to być mylące i nieprzewidywalne.

Intuicyjna

Nawigacja powinna być na tyle prosta, że bez problemu obsługuje powszechnie przyjęte zachowania użytkowników. Nie komplikuj też zbyt wielu elementów, dodając niepotrzebne warstwy nawigacji.

Kontrolery

Kontrolery mają różne style, od minimalistycznego pilota po bardziej skomplikowane kontrolery do gier. Wszystkie kontrolery mają pad kierunkowy (pad kierunkowy) oraz przyciski wyboru, ekranu głównego i Wstecz. Pozostałe przyciski różnią się w zależności od modelu.

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

Pad kierunkowy
Główną metodą nawigacyjną na telewizorze jest korzystanie z pada kierunkowego, który obejmuje klawisze kierunkowe w górę, w dół, w lewo i w prawo. Pad kierunkowy przenosi zaznaczenie z jednego obiektu do najbliższego obiektu w kierunku naciśniętego przycisku.

Przycisk Wybierz
Wybiera zaznaczony element na ekranie.

Przycisk ekranu głównego
Przenosi użytkownika do ekranu głównego systemu.

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

Przycisk mikrofonu
Wywołuje Asystenta Google lub rozpoznawanie mowy.

Nawigacja za pomocą pada kierunkowego

Na telewizorze użytkownicy mogą poruszać się za pomocą pada kierunkowego lub klawiszy strzałek. Ten typ elementu sterującego umożliwia ograniczenie ruchu w górę, w dół, w lewo i w prawo. Aby utworzyć świetną aplikację zoptymalizowaną pod kątem telewizora, musisz udostępnić schemat nawigacji, który pozwoli użytkownikowi szybko nauczyć się poruszać się po aplikacji przy użyciu ograniczonych ustawień.

Platforma Androida automatycznie obsługuje nawigację kierunkową między elementami układu, więc w związku z tym zwykle nie musisz niczego robić. Musisz jednak dokładnie przetestować nawigację za pomocą kontrolera kierunkowego, by wykryć ewentualne problemy z nawigacją.

Aby sprawdzić, czy system nawigacyjny aplikacji działa dobrze z padem kierunkowym na telewizorze, postępuj zgodnie z tymi wskazówkami:

  • Upewnij się, że użytkownik korzystający z kontrolera pada kierunkowego może przejść do wszystkich elementów sterujących widocznych na ekranie.
  • Jeśli chcesz przewinąć listę z zaznaczoną opcją, upewnij się, że przyciski na padzie kierunkowym przewijają listę, a przycisk wyboru powoduje wybranie elementu na liście. Sprawdź, czy użytkownicy mogą wybrać element listy i czy po wybraniu tego elementu lista nadal się przewija.
  • Zadbaj o to, aby przełączanie się między elementami sterującymi było proste i przewidywalne.

Zmienianie nawigacji kierunkowej

Platforma Androida automatycznie stosuje schemat nawigacji kierunkowej na podstawie względnego położenia elementów, które można zaznaczyć w Twoich układach. Przetestuj wygenerowany schemat nawigacji w aplikacji za pomocą kontrolera na padzie kierunkowym. Jeśli po zakończeniu testów uznasz, że chcesz, aby użytkownicy poruszali się między układami w określony sposób, możesz skonfigurować bezpośrednią nawigację kierunkową dla elementów sterujących.

Poniższy przykładowy kod pokazuje, jak zdefiniować kolejny element sterujący, który ma być zaznaczony obiektem układu TextView:

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

W tabeli poniżej znajdziesz wszystkie atrybuty nawigacji dostępne w przypadku widżetów interfejsu użytkownika Androida:

Atrybut Funkcja
nextFocusDown Definiuje następny widok, który zostanie zaznaczony, gdy użytkownik przejdzie w dół.
nextFocusLeft Określa następny widok, który zostanie zaznaczony, gdy użytkownik przejdzie w lewo.
nextFocusRight Definiuje następny widok, który zostanie zaznaczony, gdy użytkownik przejdzie w prawo.
nextFocusUp Definiuje następny widok, który zostanie zaznaczony, gdy użytkownik przejdzie w górę.

Aby użyć jednego z tych jawnych atrybutów nawigacyjnych, ustaw wartość na android:id innego widżetu w układzie. Pamiętaj, aby ustawić kolejność nawigacji jako pętlę, tak by ostatni element sterujący skierował użytkownika z powrotem na pierwszy element.

Wyraźnie zaznaczaj i zaznaczaj opcje

Sukces schematu nawigacji aplikacji na telewizorach zależy od tego, jak łatwo jest określić, na którym elemencie interfejsu użytkownik chce się skupić. Jeśli nie podasz wyraźnie wybranego elementu i tego, na jaki element może podjąć działania, użytkownik może szybko poczuć się sfrustrowany i zamknąć aplikację. Z tego samego powodu należy zawsze skupiać się na elemencie, który użytkownik może podjąć natychmiast po uruchomieniu aplikacji lub za każdym razem, gdy jest nieaktywny.

W układzie i implementacji aplikacji użyj koloru, rozmiaru, animacji lub kombinacji tych atrybutów, aby ułatwić użytkownikom określenie, jakie działania mogą wykonać. Użyj jednolitego schematu do wskazywania koncentracji na aplikacji.

Android zapewnia zasoby z listą stanów rysunkowych, które pozwalają wdrożyć wyróżnione informacje o zaznaczonych i wybranych elementach sterujących. Ten przykładowy kod pokazuje, jak włączyć działanie wizualne przycisku wskazujące, że użytkownik przeszedł do elementu sterującego i go wybrał:

<!-- res/drawable/button.xml -->
<?xml version="1.0" encoding="utf-8"?>
<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 XML układu stosuje do elementu Button poprzednią listę stanów, którą można pobierać:

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

Zadbaj o odpowiednie dopełnienie w elementach sterujących, które można zaznaczyć i wybrać, aby podświetlenia wokół nich były dobrze widoczne.

Nawigacja po przycisku Wstecz

Aby zachować spójność między aplikacjami na platformie, upewnij się, że przycisk Wstecz działa zgodnie z tymi wytycznymi.

Używaj przewidywalnego działania przycisku Wstecz

Aby nawigacja była łatwa i przewidywalna, po naciśnięciu przez użytkownika przycisku Wstecz na pilocie przejdź do poprzedniego miejsca docelowego.

Podczas korzystania z nawigacji u góry
Obraz pokazujący przepływ nawigacji podczas korzystania z nawigacji u góry
Gdy używasz nawigacji po lewej stronie
Obraz pokazujący przepływ nawigacji przy korzystaniu z nawigacji po lewej stronie

Jeśli użytkownik przejdzie z elementu menu na kartę na środku strony, a potem naciśnie przycisk Wstecz, wynik będzie zależał od tego, czy aplikacja korzysta z nawigacji powyżej czy po lewej:

  • Aplikacja korzysta z nawigacji powyżej: aby przenieść użytkownika z powrotem na górę strony, szybko przewijaj i aktywuj menu.
  • Aplikacja używa nawigacji po lewej stronie: aktywuj menu po lewej stronie i zaznacz aktualnie aktywną pozycję menu.

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

Zrzut ekranu przedstawiający okno z pytaniem, czy użytkownicy chcą zamknąć okno

Przeciwwskazania
Unikaj bramki wyjściowej. Pozwól użytkownikom wyjść z aplikacji bez potwierdzenia.


Zrzut ekranu przedstawiający zapętlenie nawigacji

Przeciwwskazania
Nigdy nie włączaj nieskończonej pętli zamknięcia i otwierania menu. Najlepiej jest nacisnąć przycisk Wstecz, aby wyjść z aplikacji. Nie pokazuj przycisku wyjścia w menu, chyba że jest to wyjątkowy przypadek, np. w przypadku profilu dziecka.

Nie wyświetlaj przycisku w górę ani w dół

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

Zrzut ekranu przedstawiający przycisk łagodnego cofania

Przeciwwskazania

W razie potrzeby pokaż przycisk anulowania

Jeśli widoczne są tylko działania potwierdzające, szkodliwe lub związane z zakupem, warto dodać przycisk Anuluj, który powróci do poprzedniego miejsca docelowego:

Zrzut ekranu przedstawiający przycisk cichego anulowania na ekranie

Tak.

Implementacja przechodzenia wstecz

Platforma Android dobrze sobie radzi z nawigacją wsteczną, tak jak w przypadku pada kierunkowego. Jeśli używasz komponentu Nawigacja, możesz obsługiwać różne wykresy nawigacyjne. Czasami może być konieczne wdrożenie niestandardowego działania, na przykład przywrócenie przycisku Wstecz na początek długiej listy.

ComponentActivity, klasa bazowa dla FragmentActivity i AppCompatActivity, pozwala kontrolować działanie przycisku Wstecz, używając jego OnBackPressedDispatcher, który można pobrać, wywołując getOnBackPressedDispatcher().

Więcej informacji znajdziesz w artykule Zapewnianie niestandardowej nawigacji wstecz.

Sterowanie odtwarzaniem na telewizorze

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

Nawigacja po karcie Na żywo

Oprócz wymagań dotyczących jakości aplikacji na telewizory aplikacje z transmisjami na żywo zintegrowanymi z kartą Na żywo muszą też spełniać wymagania dotyczące płynnego odtwarzania i bezpośredniego odtwarzania, jak opisano w sekcjach poniżej.

Płynne odtwarzanie

Bezproblemowe odtwarzanie dotyczy zachowania w aplikacji po precyzyjnym linku do kanału linearnego lub na żywo z Google TV i Androida TV.

Po kliknięciu precyzyjnego linku do kanału linearnego lub na żywo w Google TV lub na Androidzie TV użytkownik musi przejść bezpośrednio do odtwarzania kanału bez blokowania lub opóźnienia ekranów w aplikacji docelowej. Nie zezwalamy na procesy logowania, procedury rejestracji, filmy promujące markę ani inne opóźnienia.

Jeśli jednak precyzyjny link zainicjuje ładowanie docelowej aplikacji podczas uruchamiania „na zimno”, takie opóźnienie przed odtworzeniem jest dozwolone. W tym przypadku dozwolony jest także film lub animacja promująca rozruch aplikacji. Taki proces „na zimno” prawdopodobnie nie wystąpi częściej niż 1 raz na sesję.

Poza tym, jeśli dostęp do kanału z precyzyjnymi linkami trwa kilka sekund, wyświetlanie marki kanału lub usługi jest dozwolone. Czas trwania powinien być jednak taki sam jak czas potrzebny na wczytanie kanału (i podobny do średniego czasu wczytywania kanału w aplikacji).

Jeśli użytkownik nie jest zalogowany lub nie subskrybuje kanału, możesz zablokować odtwarzanie na płatnym kanale, aby ukończyć proces logowania lub rejestracji.

Bezpośrednio do tyłu

Gdy użytkownik uruchomi aplikację za pomocą precyzyjnego linku na karcie Na żywo, a potem naciśnie przycisk Wstecz, musi wrócić na kartę Na żywo po jednokrotnym naciśnięciu przycisku Wstecz, niezależnie od tego, ile czasu upłynęło. To zachowanie jest wymagane w przypadku wszystkich precyzyjnych linków do karty Na żywo w Google TV i na Androidzie TV.

Precyzyjne linki do karty na żywo mają dołączony parametr 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ć działanie bezpośrednie.

Pamiętaj, że jeśli użytkownik naciśnie dowolny przycisk oprócz przycisku Wstecz w momencie, gdy pierwszy raz po precyzyjnym linku naciśnie przycisk, to wymaganie dotyczące bezpośredniego połączenia nie będzie obowiązywać i wymagane będzie tylko standardowe działanie przycisku Wstecz.

Załóżmy np., że po kliknięciu precyzyjnego linku użytkownik naciska przycisk wyboru na padzie kierunkowym, co powoduje wyświetlenie nakładki elementów sterujących. Użytkownik czeka, aż nakładka zniknie, a potem naciśnie przycisk Wstecz. Pierwszym przyciskiem naciśniętym po precyzyjnym linku był przycisk wyboru na padzie kierunkowym, więc wymóg bezpośredniego przejścia wstecz nie ma zastosowania. Zamiast tego obowiązuje typowa logika wsteczna aplikacji.

Powtarzające się naciśnięcia przycisku Wstecz muszą kierować użytkownika do katalogu głównego aplikacji, a następnie do Google TV lub Androida TV bez zapętleń. Więcej informacji znajdziesz w sekcji Przewidywalne zachowanie przycisku Wstecz.

Stałe miejsce docelowe rozpoczęcia

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

Precyzyjne linki symulują ręczną nawigację

Niezależnie od tego, czy stosuję precyzyjne linki, czy ręcznie przechodzisz do konkretnego miejsca docelowego, użytkownicy mogą użyć przycisku Wstecz, aby wrócić do miejsca docelowego.

Zrzuty ekranu przedstawiające precyzyjny link do strony z informacjami w aplikacji.
            Naciśnięcie Wstecz spowoduje powrót do ekranu głównego aplikacji, a następnie ponowne naciśnięcie
            klawisza Wstecz.

Precyzyjne linki do aplikacji z innej aplikacji symulują ręczną nawigację. Jeśli na przykład użytkownik otworzy w Google TV stronę z informacjami w aplikacji Moviestar, a potem naciśnie przycisk Wstecz, zostanie przekierowany na stronę główną tej aplikacji.

Wyczyść ścieżkę do wszystkich elementów, które można zaznaczyć

Pozwól użytkownikom poruszać się po interfejsie w jasny sposób. Jeśli nie ma prostej ścieżki dostępu do elementu sterującego, rozważ jego przeniesienie.

Przykład nawigacji, którą można zaznaczyć

Tak.
Umieść elementy sterujące, takie jak pokazane tutaj działanie wyszukiwania, w miejscach, które nie zachodzą na inne elementy klikalne.

Przykład nawigacji, którą można zaznaczyć

Przeciwwskazania
Unikaj układów zawierających elementy sterujące w trudno dostępnych miejscach. Przejście do pokazanego tu działania wyszukiwania nie jest łatwe do zarządzania za pomocą pada kierunkowego.

Osie

Zaprojektuj układ tak, aby korzystał zarówno z osi poziomej, jak i pionowej. Nadaj każdemu kierunkowi konkretną funkcję, aby przyspieszyć poruszanie się po dużych hierarchiach.

Przykład osi nawigacji

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

Przykład osi nawigacji

Przeciwwskazania
Unikaj złożonych i zagnieżdżonych hierarchii układu.