Il destinatario riproduce i contenuti e riflette il suo stato per l'utente. Il destinatario deve rispondere immediatamente alle azioni eseguite nell'app del mittente . Ad esempio, quando i contenuti vengono messi in pausa sul destinatario, viene visualizzata un'icona di pausa e, quando l'utente preme il pulsante di riproduzione sull'app del mittente, il destinatario inizia a riprodurre i contenuti e rimuove l'icona di pausa.
Esempi di feedback sull'interfaccia utente del destinatario:
- In riproduzione
- In pausa
- Posizione di riproduzione / ricerca
- Buffering
UI del destinatario
Obbligatorio
A Posiziona la maggior parte degli elementi UI all'interno del quarto inferiore dello schermo e mantienilo coerente con le altre UX.
B Non presentare elementi come controlli interattivi. Ad esempio, non riprodurre l'UI del mittente su quella del destinatario.
Best practice
- Usa la transizione (dissolvenza), la trasparenza e le sfumature per attenuare l'effetto visivo.
- Tieni presente che gli utenti vogliono vedere quanti più contenuti possibile. Gli utenti mettono spesso in pausa i contenuti per esaminarli, quindi l'UI non necessaria sbiadisce quando possibile.
Android
UI mittente
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-persistent-control2.png?authuser=7&hl=it)
UI ricevitore
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-elements1_a.png?authuser=7&hl=it)
iOS
UI mittente
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-persistent-control2.png?authuser=7&hl=it)
UI ricevitore
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-elements1_a.png?authuser=7&hl=it)
Chrome
UI mittente
![UI mittente](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-persistent-control2.png?authuser=7&hl=it)
UI ricevitore
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-elements1_a.png?authuser=7&hl=it)
App del ricevitore inattiva
Quando il destinatario è connesso a un mittente ma non sta trasmettendo, viene visualizzata una schermata inattiva sul destinatario.
Obbligatorio
A Identifica quale app del destinatario è stata caricata
Best practice
- Usa lo schermo inattivo per promuovere contenuti o funzionalità dell'app del mittente.
- Cambia i contenuti ogni 30-60 secondi per visualizzarli di più e evitare la bruciatura dello schermo.
- Disconnettiti dall'app del destinatario e interrompi l'esecuzione se è inattiva per 5 minuti. Quando il dispositivo è fermo, viene visualizzata la schermata Home del ricevitore, che aiuta a prevenire la bruciatura dello schermo.
Android
Finestra di dialogo Trasmetti, connessione ma non trasmissione
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-menu-connected1.png?authuser=7&hl=it)
App ricevitore caricata / inattiva
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1_a.png?authuser=7&hl=it)
iOS
Finestra di dialogo Trasmetti, connessione ma non trasmissione
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-menu-connected1.png?authuser=7&hl=it)
App ricevitore caricata / inattiva
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1_a.png?authuser=7&hl=it)
Caricamento dell'app del destinatario
Quando un utente si connette a un ricevitore, l'app del destinatario deve essere caricata prima di poter visualizzare lo stato di inattività dell'app o iniziare a riprodurre contenuti.
Obbligatorio
A Identifica quale app del destinatario viene caricata visualizzando il
logo dell'app
B Identifica che l'app del destinatario è in fase di caricamento visualizzando
l'icona di caricamento animata
Android
Connessione del mittente in corso...
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states4.png?authuser=7&hl=it)
Caricamento dell'app del ricevitore in corso...
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1_a.gif?authuser=7&hl=it)
iOS
Connessione del mittente in corso...
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states4.png?authuser=7&hl=it)
Caricamento dell'app del ricevitore in corso...
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1_a.gif?authuser=7&hl=it)
Chrome
Connessione del mittente in corso...
![Connessione del mittente in corso...](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states4.png?authuser=7&hl=it)
Caricamento dell'app del ricevitore in corso...
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1_a.gif?authuser=7&hl=it)
Caricamento dei contenuti del destinatario
Una volta caricata l'app del destinatario, i contenuti possono iniziare a essere trasmessi in streaming al destinatario.
Obbligatorio
A Identifica i contenuti caricati visualizzando il
titolo dei contenuti o l'artwork
B Identifica che i contenuti sono in fase di caricamento visualizzando
una rotellina di caricamento animata
Best practice
Quando riprendi i contenuti in pausa, riavvolgi la riproduzione di 5-10 secondi in modo che lo spettatore non perda nulla durante la transizione dal mittente al destinatario.
Android
Caricamento dei contenuti del mittente
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-elements1.gif?authuser=7&hl=it)
Caricamento dei contenuti del ricevitore
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-loading1_a.gif?authuser=7&hl=it)
iOS
Caricamento dei contenuti del mittente
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-control-elements1.gif?authuser=7&hl=it)
Caricamento dei contenuti del ricevitore
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-loading1_a.gif?authuser=7&hl=it)
Chrome
Caricamento dei contenuti del mittente
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-control-elements1.gif?authuser=7&hl=it)
Caricamento dei contenuti del ricevitore
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-loading1_a.gif?authuser=7&hl=it)
Riproduzione del ricevitore
Obbligatorio
A Identifica cosa viene riprodotto all'avvio dei contenuti
B Identifica la posizione di riproduzione quando la posizione viene regolata
C Identifica che il ricevitore sta cercando contenuti quando cambia la posizione di riproduzione, ma non ancora in riproduzione
Android
Mittente che regola la posizione di riproduzione
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-elements3.gif?authuser=7&hl=it)
Ricerca di contenuti del ricevitore
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-seek1_a.gif?authuser=7&hl=it)
iOS
Mittente che regola la posizione di riproduzione
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-control-elements3.gif?authuser=7&hl=it)
Ricerca di contenuti del ricevitore
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-seek1_a.gif?authuser=7&hl=it)
Chrome
Mittente che regola la posizione di riproduzione
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-control-elements3.gif?authuser=7&hl=it)
Ricerca di contenuti del ricevitore
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-seek1_a.gif?authuser=7&hl=it)
Ricevitore in pausa
Obbligatorio
A Identifica che i contenuti sono in pausa visualizzando un'icona
di pausa e la posizione di riproduzione
B Identifica quali contenuti sono in pausa visualizzando il titolo o l'artwork dei contenuti
C Identifica l'app del destinatario caricata mostrando il logo di un'app
Best practice
- Gli utenti mettono spesso in pausa i contenuti per esaminarli, pertanto l'interfaccia utente non necessaria scompare dopo alcuni secondi dalla visualizzazione di un'icona di pausa.
- L'app del destinatario non deve continuare la riproduzione dei contenuti, a meno che l'utente non abbia richiesto esplicitamente di iniziare la riproduzione, ad esempio riprendere o saltare un elemento in coda.
- Disconnettiti dall'app del destinatario e interrompi l'esecuzione se è inattiva per 20 minuti. Quando il dispositivo è fermo, viene visualizzata la schermata Home del ricevitore, che aiuta a prevenire la bruciatura dello schermo. Memorizza la posizione in pausa per consentire all'utente di riprendere la riproduzione da quel punto in un secondo momento.
Android
Mittente in pausa
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-persistent-control2.png?authuser=7&hl=it)
Contenuti del ricevitore in pausa
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause1_a.png?authuser=7&hl=it)
Mittente in pausa
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-persistent-control2.png?authuser=7&hl=it)
Ricevitore in pausa, dopo 5 secondi
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause2.png?authuser=7&hl=it)
iOS
Mittente in pausa
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-persistent-control2.png?authuser=7&hl=it)
Contenuti del ricevitore in pausa
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause1_a.png?authuser=7&hl=it)
Mittente in pausa
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-persistent-control2.png?authuser=7&hl=it)
Ricevitore in pausa, dopo 5 secondi
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause2.png?authuser=7&hl=it)
Chrome
Mittente in pausa
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-persistent-control2.jpg?authuser=7&hl=it)
Contenuti del ricevitore in pausa
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause1_a.png?authuser=7&hl=it)
Mittente in pausa
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-persistent-control2.jpg?authuser=7&hl=it)
Ricevitore in pausa, dopo 5 secondi
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause2.png?authuser=7&hl=it)
buffering del destinatario
Il buffering sul ricevitore si verifica quando la latenza di rete o altri fattori causano un ritardo nella riproduzione.
Obbligatorio
A Identifica che il destinatario sta eseguendo il buffering dopo alcuni secondi visualizzando un'icona a forma di rotellina di buffering. Attendi qualche secondo per indicare che il buffering impedisce la visualizzazione troppo frequente della rotellina di buffering in condizioni di rete non valide
Best practice
Identifica quali contenuti vengono sottoposti a buffering se il buffering continua dopo 5 secondi.
Android
Il mittente indica il buffering del destinatario
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-elements3.gif?authuser=7&hl=it)
buffering dei contenuti del ricevitore
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-buffer1_a.gif?authuser=7&hl=it)
iOS
Il mittente indica il buffering del destinatario
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-control-elements3.gif?authuser=7&hl=it)
buffering dei contenuti del ricevitore
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-buffer1_a.gif?authuser=7&hl=it)
Chrome
Il mittente indica il buffering del destinatario
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-control-elements3.gif?authuser=7&hl=it)
buffering dei contenuti del ricevitore
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-buffer1_a.gif?authuser=7&hl=it)
Il ricevitore interrompe la trasmissione
Quando la riproduzione si interrompe o si verifica un timeout, l'UI del destinatario deve promuovere altri contenuti o funzionalità disponibili nell'app del mittente.
Obbligatorio
A Identifica quale app del destinatario è caricata o inattiva visualizzando il logo di un'app
Best practice
- Usa la schermata inattiva dopo la riproduzione per consigliare contenuti o funzionalità dall'app del mittente, in base ai contenuti appena trasmessi
- Cambia il contenuto dello schermo inattivo ogni 30-60 secondi per evitare la bruciatura dello schermo
- Disconnettiti dall'app del destinatario e interrompi l'esecuzione se è inattiva per 5 minuti. Quando il dispositivo è fermo, viene visualizzata la schermata Home del ricevitore, che aiuta a prevenire la bruciatura dello schermo.
Android
App mittente inattiva
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states4.png?authuser=7&hl=it)
App ricevitore inattiva
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-complete1_a.png?authuser=7&hl=it)
Mittente disconnesso
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states2.png?authuser=7&hl=it)
Trasmetti schermata Home
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=it)
iOS
App mittente inattiva
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states4.png?authuser=7&hl=it)
App ricevitore inattiva
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-complete1_a.png?authuser=7&hl=it)
Mittente disconnesso
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states2.png?authuser=7&hl=it)
Trasmetti schermata Home
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=it)
Chrome
App mittente inattiva
![App mittente inattiva](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states4.png?authuser=7&hl=it)
App ricevitore inattiva
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-complete1_a.png?authuser=7&hl=it)
Mittente disconnesso
![Mittente disconnesso](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states2.png?authuser=7&hl=it)
Trasmetti schermata Home
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=it)
Le immagini utilizzate in questa guida alla progettazione sono gentilmente concesse da Blender Foundation e sono condivise dietro copyright o licenza Creative Commons.
- Il sogno degli elefanti: (c) copyright 2006, Blender Foundation / Paesi Bassi Media Art Institute/ www.elephantsdream.org
- Sintel: (c) copyright Blender Foundation | www.sintel.org
- Lacrime d'acciaio: (CC) Blender Foundation | mango.blender.org
- Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org