Nawigacja po TV

Urządzenia telewizyjne zapewniają ograniczony zestaw elementów sterujących nawigacją w aplikacjach. Opracowanie skutecznego schematu nawigacji w aplikacji na telewizory wymaga zrozumienia tych ograniczonych elementów sterujących oraz ograniczeń użytkowników podczas obsługi aplikacji. Tworząc aplikację na Androida na telewizory, zwróć szczególną uwagę na sposób, w jaki użytkownik porusza się, gdy korzysta z przycisków pilota, a nie ekranu dotykowego.

Zasady

Dzięki niej nawigacja jest przyjazna i przyjazna dla użytkownika bez dominowania nad interfejsem i odwracania uwagi od treści. Poniższe zasady stanowią punkt odniesienia dla spójnego i intuicyjnego korzystania z aplikacji telewizyjnych.

Wydajność

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

Przewidywalne

Stosuj sprawdzone metody i zalecenia, aby zapewnić użytkownikom przewidywalną nawigację. Nie wymyślaj niepotrzebnie wzorców nawigacji, ponieważ prowadzi to do dezorientacji i nieprzewidywalności.

Intuicyjny

Zadbaj o prostą nawigację, aby umożliwić bezproblemową obsługę powszechnie wykorzystywanych zachowań użytkowników. Nie komplikuj nadmiernie, dodając zbędnych warstw nawigacji.

Kontrolery

Kontrolery są dostępne w różnych stylach, od minimalistycznego pilota po skomplikowane kontrolery do gier. Wszystkie kontrolery mają pad kierunkowy (pad kierunkowy) oraz przyciski wyboru, ekranu głównego i Wstecz. Inne przyciski zależą od modelu.

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

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

Przycisk Wybierz
Zaznacza aktywny element na ekranie.

Przycisk strony głównej
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 telewizorach można poruszać się za pomocą pada kierunkowego lub klawiszy strzałek. Ten typ sterowania ogranicza możliwość poruszania się w górę, w dół, w lewo i w prawo. Aby utworzyć świetną aplikację zoptymalizowaną pod kątem telewizora, musisz udostępnić schemat nawigacji, dzięki któremu użytkownik może się szybko nauczyć, jak poruszać się po aplikacji za pomocą tych ograniczonych elementów sterujących.

Platforma Androida automatycznie obsługuje nawigację kierunkową między elementami układu, więc zazwyczaj nie musisz nic więcej robić w swojej aplikacji. Jednak warto dokładnie przetestować nawigację za pomocą kontrolera pada kierunkowego, by wykryć ewentualne problemy z nawigacją.

Aby sprawdzić, czy system nawigacji w aplikacji dobrze działa z padami kierunkowymi na telewizorze, postępuj zgodnie z tymi wskazówkami:

  • Upewnij się, że użytkownik korzystający z pada kierunkowego może przejść do wszystkich widocznych elementów sterujących na ekranie.
  • Jeśli korzystasz z przewijanych list z fokusem, sprawdź, czy przyciski na padzie kierunkowym w górę i w dół powodują przewijanie listy, a przycisk wyboru powoduje wybranie elementu listy. Sprawdź, czy użytkownicy mogą wybrać element na liście i czy po jego wybraniu lista nadal przewija się.
  • Zadbaj o to, aby przełączanie się między ustawieniami było proste i przewidywalne.

Zmień nawigację kierunkową

Platforma Androida 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 pada kierunkowego. Jeśli po przetestowaniu układu zdecydujesz się, że użytkownicy mają przechodzić między układami w określony sposób, możesz skonfigurować jawną nawigację kierunkową elementów sterujących.

Poniższy przykładowy kod pokazuje, jak zdefiniować następny element sterujący, aby przenieść zaznaczenie na obiekt układu TextView:

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

Poniższa tabela zawiera wszystkie atrybuty nawigacji dostępne w przypadku widżetów interfejsu Androida:

Atrybut Funkcja
nextFocusDown Definiuje następny widok, który ma być zaznaczony, gdy użytkownik przejdzie w dół.
nextFocusLeft Definiuje następny widok, który ma być 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 ma być zaznaczony, gdy użytkownik przejdzie w górę.

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

Wyraźnie zaznacz i zaznacz

Sukces schematu nawigacji aplikacji na telewizorach zależy od tego, jak łatwo użytkownik jest w stanie określić, na jakim elemencie interfejsu znajduje się aplikacja. Jeśli nie wskażesz wyraźnie wyróżnionego elementu, a co za tym idzie, do jakiego elementu użytkownik może podjąć działanie, użytkownik może szybko się frustrować i zamknąć aplikację. Z tego samego powodu ważne jest, aby użytkownik zawsze miał dostęp do elementu, na którym będzie mógł wykonać czynność natychmiast po uruchomieniu aplikacji lub gdy będzie nieaktywny.

W układzie i implementacji aplikacji użyj koloru, rozmiaru, animacji lub kombinacji tych atrybutów, aby użytkownicy mogli łatwo określić, co mogą zrobić. Użyj jednolitego schematu do wskazywania całej aplikacji.

Android udostępnia zasoby listy stanów z możliwością rysowania, które pozwalają zaimplementować wyróżnienia w zaznaczonych i wybranych ustawieniach. Ten przykładowy kod pokazuje, jak włączyć wizualne działanie przycisku wskazującego, ż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 poprzednią listę stanów, którą można rysować do obiektu Button:

<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 zaznaczenia wokół nich były dobrze widoczne.

Nawigacja przy użyciu przycisku Wstecz

Aby przycisk Wstecz działał w spójny sposób w różnych aplikacjach na platformie, dopilnuj, aby był on zgodny z tymi wytycznymi.

Korzystaj z przewidywalnego działania przycisku Wstecz

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

Obraz opisujący przepływ nawigacji przy korzystaniu z górnej nawigacji
Rysunek 2. proces z nawigacją u góry strony.
Obraz opisujący przebieg nawigacji podczas korzystania z bocznej nawigacji
Rysunek 3. Procedura z nawigacją z boku.

Jeśli użytkownik przejdzie z elementu menu na kartę na środku strony, a potem naciśnie przycisk Wstecz, efekt zależy od tego, czy aplikacja korzysta z nawigacji u góry czy z lewej:

  • Aplikacja używa górnego paska nawigacyjnego: przenosi użytkownika z powrotem na górę strony przez szybkie przewijanie i aktywowanie fokusu w menu.
  • Aplikacja używa menu po lewej stronie: aktywuj menu po lewej stronie i wybierz aktualnie aktywny element menu.

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

Zrzut ekranu z oknem z pytaniem, czy użytkownik chce zamknąć okno
Rysunek 4. Zamknij bramkowanie

Nie
Unikaj bramki zjazdowej. Pozwól użytkownikom na wyjście z aplikacji bez potwierdzenia.


Zrzut ekranu przedstawiający zapętlenie nawigacji
Rysunek 5. pętla nawigacji

Nie
Nigdy nie przechodzij w nieskończoną pętlę zamykania i otwierania menu. Naciśnięcie przycisku Wstecz spowoduje zakończenie działania aplikacji. Nie pokazuj tego przycisku w menu, chyba że jest to specjalny przypadek, np. profil dziecka.

Nie wyświetlaj przycisków w górę lub Wstecz

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

Zrzut ekranu przedstawiający przycisk cofania
Rysunek 6. Przycisk łagodnego cofania

Nie

Wyświetlanie przycisku anulowania w razie potrzeby

Jeśli jedyne widoczne działania to potwierdzanie, destrukcyjne lub zakup, warto mieć przycisk Anuluj, który wróci do poprzedniego miejsca docelowego:

Zrzut ekranu przedstawiający przycisk do łagodnego anulowania na ekranie
Rysunek 7. Przycisk przenoszenia do kosza.

Tak.

Wdróż nawigację wstecz

Platforma Androida zwykle dobrze radzi sobie z nawigacją wsteczną tak samo jak na padzie kierunkowym. Jeśli używasz komponentu Nawigacja, możesz obsługiwać różne wykresy nawigacyjne. Czasami może być konieczne wdrożenie niestandardowego działania, np. przywrócenie zaznaczenia po naciśnięciu przycisku Wstecz na początku długiej listy.

ComponentActivity, klasa podstawowa dla FragmentActivity i AppCompatActivity, pozwala kontrolować działanie przycisku Wstecz za pomocą 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 w telewizji. Ważne jest, aby odtwarzacze wideo w aplikacjach na Androidzie TV działały tak samo. Więcej informacji znajdziesz w wytycznych dotyczących sterowania odtwarzaniem na telewizorach.

Nawigacja po kartach Na żywo

Oprócz spełniania wymagań dotyczących jakości aplikacji na telewizory aplikacje z kanałem telewizji na żywo zintegrowanej z kartą Na żywo muszą też spełniać wymagania dotyczące bezproblemowego odtwarzania i bezpośredniego odtwarzania, które opisaliśmy w sekcjach poniżej.

Odtwarzanie bez problemów

Odtwarzanie bez zakłóceń dotyczy działania w aplikacji po kliknięciu dowolnego precyzyjnego linku do kanału transmisji na żywo lub linearnej transmisji na żywo z Google TV i Androida TV.

Użytkownicy, którzy klikną precyzyjny link do kanału nadawanego na żywo lub linearnej w Google TV lub na Androidzie TV, muszą być kierowani bezpośrednio do odtwarzania kanału, bez blokowania czy opóźniania ekranu w aplikacji docelowej. Procesy logowania, procesy rejestracji, filmy promujące markę i inne opóźnienia są niedozwolone.

Jeśli jednak precyzyjny link zainicjuje ładowanie aplikacji docelowej z „zimnego rozruchu”, takie opóźnienie uruchomienia przed odtworzeniem jest dozwolone. W tym przypadku dozwolone jest również film lub animacja z elementem marki podczas uruchamiania aplikacji. Taki system uruchomień „na zimno” rzadko wystąpi więcej niż raz na sesję.

Poza tym, jeśli dostrajanie do kanału z precyzyjnymi linkami zajmuje kilka sekund, wyświetlanie elementów marki kanału lub usługi jest dozwolone. Jego długość powinna być jednak wystarczająca do wczytania kanału (i podobna do średniego czasu wczytywania kanału w aplikacji).

Jeśli użytkownik nie jest zalogowany lub nie ma subskrypcji, możesz zablokować odtwarzanie treści z płatnego kanału, aby mógł się zalogować lub zarejestrować.

Bezpośrednio z powrotem

Gdy użytkownik uruchomi aplikację za pomocą precyzyjnego linku na karcie Na żywo, a następnie kliknie przycisk Wstecz, użytkownik musi wrócić na kartę Na żywo jednym kliknięciem, niezależnie od tego, ile czasu upłynęło. Jest to wymagane w przypadku wszystkich precyzyjnych linków na karcie Na żywo w Google TV i na Androidzie TV.

Precyzyjne linki na kartach na żywo są rozróżniane za pomocą dołączonego parametru precyzyjnego linku: ?exit_on_back=[true|false]. Aplikacje muszą przeanalizować ten parametr, by ustalić, czy uruchomiła się z karty Na żywo. Jeśli exit_on_back to true, aplikacje muszą obsługiwać bezpośrednie wywołanie zwrotne.

Pamiętaj, że jeśli użytkownik naciśnie w pierwszym momencie po precyzyjnym linku dowolny przycisk inny niż przycisk Wstecz, wymaganie bezpośredniego działania przycisku Wstecz nie będzie miało zastosowania.

Załóżmy na przykład, że po kliknięciu precyzyjnego linku użytkownik naciśnie przycisk wyboru na padzie kierunkowym, co wyświetla nakładkę z elementami sterującymi. Użytkownik czeka, aż nakładka zniknie, a potem naciska przycisk Wstecz. Ponieważ pierwszy przycisk po kliknięciu precyzyjnego linku został naciśnięty po kliknięciu precyzyjnego linku, przycisk wyboru na padzie kierunkowym nie jest wymagany. Zamiast tego obowiązuje normalny stos aplikacji.

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

Stały punkt początkowy

Pierwszy ekran, który użytkownik widzi przy uruchamianiu aplikacji z programu uruchamiającego, to również ostatni ekran, który widzi po naciśnięciu przycisku Wstecz do programu uruchamiającego.

Precyzyjne linki symulują ręczną nawigację

Niezależnie od tego, czy chcesz korzystać z precyzyjnego linku, czy ręcznie przechodzić do określonego miejsca docelowego, użytkownicy mogą korzystać z przycisku Wstecz, aby przechodzić między miejscami docelowymi z powrotem do miejsca docelowego.

Zrzuty ekranu przedstawiające precyzyjny link do strony z informacjami w aplikacji.
            
            Naciśnięcie przycisku Wstecz powoduje powrót do ekranu głównego aplikacji, a następnie powrót do pierwotnego ekranu.
Rysunek 8. Precyzyjne linki do strony z informacjami.

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

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

Zadbaj o to, aby użytkownicy mogli poruszać się po interfejsie w zrozumiały sposób. Jeśli nie ma prostej drogi do ustawienia, warto rozważyć jego przeniesienie.

Przykład nawigacji, którą można zaznaczyć
Rysunek 9. Kontroluj ostrość.

Tak.
Umieść elementy sterujące, np. pokazane tutaj działanie wyszukiwania, w lokalizacjach, które nie nakładają się na inne klikalne elementy.

Przykład nawigacji, którą można zaznaczyć
Rysunek 10. Kontroluj ostrość.

Nie
Unikaj układów z elementami sterującymi znajdującymi się w trudno dostępnych miejscach. Osiągnięcie widocznego tu działania wyszukiwania za pomocą pada kierunkowego nie jest łatwe.

Osie

Zaprojektuj układ tak, aby wykorzystać oś poziomą i pionową. Nadaj każdemu kierunkowi osobną funkcję, co ułatwi poruszanie się po dużych hierarchiach.

Przykład osi nawigacyjnej
Rysunek 11. Szybkość przemierzania.

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

Przykład osi nawigacyjnej
Rysunek 12. Szybkość przemierzania.

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