Odbiorca odtwarza treść i przekazuje użytkownikowi jej stan. Odbiorca musi natychmiast odpowiadać na działania w aplikacji nadawcy . Jeśli na przykład odtwarzanie treści na odbiorniku zostanie wstrzymane, pojawi się ikona wstrzymania, a użytkownik naciśnie przycisk odtwarzania w aplikacji nadawcy, a odbiorca zacznie odtwarzać treści i usuwa ikonę wstrzymywania.
Przykłady opinii w interfejsie odbiorcy:
- Odtwarzam
- Wstrzymano
- Pozycja odtwarzania / przewijanie
- Buforuję
Interfejs odbiornika
Wymagany
A Większość elementów interfejsu należy umieścić w dolnej 1/4 ekranu i zachować spójność z innymi elementami interfejsu.
B Nie prezentuj elementów jako interaktywnych elementów sterujących. Na przykład nie odtwarzaj UI nadawcy w interfejsie odbiorcy.
Sprawdzone metody
- Użyj przejścia (zanikania), przezroczystości i niuansów, aby złagodzić efekt wizualny.
- Zastanów się, czy użytkownicy chcą mieć dostęp do jak największej ilości treści. Użytkownicy często wstrzymują treści, aby je sprawdzić, więc jeśli to możliwe, umieszczaj niepotrzebne elementy interfejsu.
Android
Interfejs nadawcy

Interfejs odbiornika

iOS
Interfejs nadawcy

Interfejs odbiornika

Chrome
Interfejs nadawcy

Interfejs odbiornika

Nieaktywna aplikacja odbiornika
Gdy odbiornik jest połączony z nadawcą, ale nie przesyła, na odbiorniku jest wyświetlany ekran bezczynności.
Wymagany
A Określ, która aplikacja odbierająca jest załadowana
Sprawdzone metody
- Użyj ekranu bezczynności, aby promować treści lub funkcje aplikacji nadawcy.
- Zmieniaj treść co 30–60 sekund, aby wyświetlać więcej i zapobiegać wypaleniu ekranu.
- Odłącz się od aplikacji odbierającej i wyłącz jej działanie, jeśli będzie nieaktywna przez 5 minut. Po zatrzymaniu pojawia się ekran główny odbiornika, co pomaga zapobiegać wypaleniu ekranu.
Android
Okno przesyłania – połączono, ale nie przesyłasz

Aplikacja odbiornika załadowana / bezczynna

iOS
Okno przesyłania – połączono, ale nie przesyłasz

Aplikacja odbiornika załadowana / bezczynna

Wczytywanie aplikacji odbiornika
Gdy użytkownik łączy się z odbiornikiem, aplikacja odbierająca musi się najpierw wczytać, aby wyświetlić stan bezczynności aplikacji lub rozpocząć odtwarzanie treści.
Wymagany
A Sprawdzanie, która aplikacja odbiornika wczytuje się,
wyświetlając jej logo
B Sprawdzanie, czy aplikacja odbierająca się wczytuje, wyświetlając animowany wskaźnik postępu.
Android
Nadawca łączy

Wczytuję aplikację odbiornika

iOS
Nadawca łączy

Wczytuję aplikację odbiornika

Chrome
Nadawca łączy

Wczytuję aplikację odbiornika

Wczytywanie treści odbiornika
Po załadowaniu aplikacji odbierającej treści można zacząć przesyłać strumieniowo.
Wymagany
A Określ, jakie treści są wczytywane, wyświetlając tytuł lub grafikę w sekcji
B Sprawdź, czy treść się wczytuje, wyświetlając animowany wskaźnik postępu.
Sprawdzone metody
Podczas wznawiania wstrzymanych treści przewiń odtwarzanie do tyłu o 5–10 sekund, aby widz niczego nie przegapił w trakcie przechodzenia od nadawcy do odbiorcy.
Android
Wczytuję treść nadawcy

Wczytuję zawartość odbiornika

iOS
Wczytuję treść nadawcy

Wczytuję zawartość odbiornika

Chrome
Wczytuję treść nadawcy

Wczytuję zawartość odbiornika

Odtwarzanie odbiornika
Wymagany
A Określ, co jest odtwarzane po rozpoczęciu odtwarzania
B Określ pozycję odtwarzania po zmianie pozycji
C Sprawdź, czy odbiornik szuka treści, gdy
pozycja odtwarzania jest zmieniona,
ale urządzenie jeszcze nie jest odtwarzane
Android
Nadawca dostosowuje pozycję odtwarzania

Przewijanie treści odbiorcy

iOS
Nadawca dostosowuje pozycję odtwarzania

Przewijanie treści odbiorcy

Chrome
Nadawca dostosowuje pozycję odtwarzania

Przewijanie treści odbiorcy

Odbiornik wstrzymany
Wymagany
A Sprawdź, czy odtwarzanie treści jest wstrzymane, wyświetlając ikonę wstrzymania i pozycję odtwarzania
B Wyświetl tytuł lub grafikę, aby sprawdzić, które treści zostały wstrzymane
C Aby określić, która aplikacja odbierająca została wczytana,
wyświetlając jej logo
Sprawdzone metody
- Użytkownicy często wstrzymują treści, aby je sprawdzić, więc niepotrzebne zanikanie interfejsu po wstrzymaniu na kilka sekund może być spowodowane wyświetleniem ikony wstrzymania.
- Aplikacja odbierająca nie powinna kontynuować odtwarzania treści, chyba że użytkownik wyraźnie poprosi o rozpoczęcie odtwarzania, na przykład wznowić odtwarzanie lub pominąć element w kolejce.
- Odłącz się od aplikacji odbierającej i wyłącz ją, jeśli jest nieaktywna przez 20 minut. Po zatrzymaniu pojawia się ekran główny odbiornika, co pomaga zapobiegać wypaleniu ekranu. Zapisuje lokalizację wstrzymania, aby użytkownik mógł później wznowić odtwarzanie od tego momentu.
Android
Nadawca wstrzymany

Zawartość odbiornika została wstrzymana

Nadawca wstrzymany

Odbiornik wstrzymany po 5 sekundach

iOS
Nadawca wstrzymany

Zawartość odbiornika została wstrzymana

Nadawca wstrzymany

Odbiornik wstrzymany po 5 sekundach

Chrome
Nadawca wstrzymany

Zawartość odbiornika została wstrzymana

Nadawca wstrzymany

Odbiornik wstrzymany po 5 sekundach

Buforowanie odbiornika
Buforowanie na odbiorniku ma miejsce, gdy opóźnienie sieci lub inne czynniki powodują opóźnienie odtwarzania.
Wymagany
A Sprawdź, czy odbiornik buforuje się po kilku sekundach, wyświetlając wskaźnik postępu buforowania. Odczekanie kilku sekund w celu wskazania, że trwa buforowanie, zapobiegnie zbyt częstemu wyświetlaniu się wskaźnika buforowania w przypadku problemów z siecią.
Sprawdzone metody
Określ, które treści są buforowane, jeśli buforowanie trwa nadal przez 5 sekund.
Android
Nadawca wskazuje buforowanie odbiorcy

Buforowanie treści odbiornika

iOS
Nadawca wskazuje buforowanie odbiorcy

Buforowanie treści odbiornika

Chrome
Nadawca wskazuje buforowanie odbiorcy

Buforowanie treści odbiornika

Odbiornik zatrzymuje przesyłanie
Gdy odtwarzanie zatrzyma się lub minie limit czasu, UI odbiorcy powinien promować inne treści lub funkcje dostępne w aplikacji nadawcy.
Wymagany
A Określ, która aplikacja odbierająca jest załadowana, a która jest nieaktywna, wyświetlając jej logo
Sprawdzone metody
- Korzystaj z ekranu bezczynności po odtworzeniu, aby polecać treści lub funkcje z aplikacji nadawcy na podstawie tego, co zostało właśnie przesłane
- Zmieniaj zawartość nieaktywnego ekranu co 30–60 sekund, aby zapobiec wypaleniu ekranu
- Odłącz się od aplikacji odbierającej i wyłącz jej działanie, jeśli będzie nieaktywna przez 5 minut. Po zatrzymaniu pojawia się ekran główny odbiornika, co pomaga zapobiegać wypaleniu ekranu.
Android
Aplikacja nadawcy jest nieaktywna

Aplikacja odbiornika jest nieaktywna

Nadawca został rozłączony

Prześlij ekran główny

iOS
Aplikacja nadawcy jest nieaktywna

Aplikacja odbiornika jest nieaktywna

Nadawca został rozłączony

Prześlij ekran główny

Chrome
Aplikacja nadawcy jest nieaktywna

Aplikacja odbiornika jest nieaktywna

Nadawca został rozłączony

Prześlij ekran główny

Obrazy użyte w tym przewodniku projektowym pochodzą od Blender Foundation i są udostępniane na licencji Creative Commons.
- Elephant's Dream: (c) prawa autorskie 2006, Blender Foundation / Holandia Media Art Institute / www.elephantsdream.org
- Sintel: (c) fundacja Blendera praw autorskich | www.sintel.org
- Tears of Steel: (CC) Blender Foundation | mango.blender.org
- Big Buck Bunny: (c) prawa autorskie 2008, Blender Foundation / www.bigbuckbunny.org