O receptor reproduz o conteúdo e reflete o estado dele para o usuário. O destinatário precisa responder imediatamente às ações no app remetente . Por exemplo, quando o conteúdo é pausado no receptor, ele exibe um ícone de pausa. Quando o usuário pressiona "Reproduzir" no app remetente, o receptor começa a reproduzir o conteúdo e remove o ícone de pausa.
Exemplos de feedback da interface do receptor:
- Em exibição
- Pausado
- Posição / busca da reprodução
- Armazenando em buffer
IU do receptor
Obrigatório
A Coloque a maioria dos elementos da interface em 1/4 da parte inferior da tela
e mantenha a consistência com as outras UX.
B Não apresente elementos como controles interativos. Por
exemplo, não reproduza a interface do remetente na interface do destinatário.
Práticas recomendadas
- Use transição (esmaecer), transparência e nuances para suavizar o efeito visual.
- Considere o fato de que os usuários querem ver o máximo possível do conteúdo. Os usuários geralmente pausam o conteúdo para analisá-lo, então esmaeça a interface desnecessária quando possível.
Android
interface do remetente
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-persistent-control2.png?authuser=19&hl=pt)
interface do receptor
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-elements1_a.png?authuser=19&hl=pt)
iOS
interface do remetente
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-persistent-control2.png?authuser=19&hl=pt)
interface do receptor
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-elements1_a.png?authuser=19&hl=pt)
Chrome
interface do remetente
![interface do remetente](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-persistent-control2.png?authuser=19&hl=pt)
interface do receptor
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-elements1_a.png?authuser=19&hl=pt)
App receptor inativo
Uma tela inativa é exibida no receptor quando ele está conectado a um remetente, mas não faz transmissão.
Obrigatório
A Identifica qual app receptor está carregado
Práticas recomendadas
- Use a tela inativa para promover conteúdos ou recursos do app remetente.
- Mude o conteúdo a cada 30 a 60 segundos para exibir mais e evitar que a tela seja queimada.
- Desconecte-se do app receptor e interrompa a execução se ele estiver inativo por cinco minutos. Quando interrompida, a tela inicial do receptor aparece e ajuda a evitar a queima de tela.
Android
Caixa de diálogo "Transmitir", conectada, mas sem transmissão
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-menu-connected1.png?authuser=19&hl=pt)
App receptor carregado / inativo
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1_a.png?authuser=19&hl=pt)
iOS
Caixa de diálogo "Transmitir", conectada, mas sem transmissão
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-menu-connected1.png?authuser=19&hl=pt)
App receptor carregado / inativo
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1_a.png?authuser=19&hl=pt)
Carregamento do app receptor
Quando um usuário se conecta a um receptor, o app receptor precisa ser carregado antes de mostrar o estado inativo ou começar a reproduzir o conteúdo.
Obrigatório
A Identifique qual app receptor está carregando exibindo o
logotipo
B Identifique se o app receptor está sendo carregado exibindo
o ícone de carregamento animado
Android
Conectando do remetente
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states4.png?authuser=19&hl=pt)
App receptor carregando
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1_a.gif?authuser=19&hl=pt)
iOS
Conectando do remetente
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states4.png?authuser=19&hl=pt)
App receptor carregando
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1_a.gif?authuser=19&hl=pt)
Chrome
Conectando do remetente
![Conectando do remetente](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states4.png?authuser=19&hl=pt)
App receptor carregando
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1_a.gif?authuser=19&hl=pt)
Carregamento de conteúdo do destinatário
Depois que o app receptor for carregado, o conteúdo poderá começar a ser transmitido para o receptor.
Obrigatório
A Identifique o conteúdo que está sendo carregado exibindo o
título ou a arte gráfica
B Identifique o conteúdo que está sendo carregado exibindo um
ícone de carregamento animado
Práticas recomendadas
Ao retomar o conteúdo pausado, volte a reprodução de 5 a 10 segundos para que o espectador não perca nada
durante a transição do remetente para o destinatário.
Android
Carregando conteúdo do remetente
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-elements1.gif?authuser=19&hl=pt)
Carregando conteúdo do receptor
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-loading1_a.gif?authuser=19&hl=pt)
iOS
Carregando conteúdo do remetente
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-control-elements1.gif?authuser=19&hl=pt)
Carregando conteúdo do receptor
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-loading1_a.gif?authuser=19&hl=pt)
Chrome
Carregando conteúdo do remetente
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-control-elements1.gif?authuser=19&hl=pt)
Carregando conteúdo do receptor
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-loading1_a.gif?authuser=19&hl=pt)
Reprodução do receptor
Obrigatório
A Identificar o que está sendo reproduzido quando o conteúdo começa
B Identificar a posição de reprodução quando a posição é ajustada
C Identificar que o receptor está buscando conteúdo quando a
posição da reprodução mudou, mas ainda não está sendo reproduzida
Android
Remetente ajustando a posição de reprodução
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-elements3.gif?authuser=19&hl=pt)
Busca de conteúdo do destinatário
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-seek1_a.gif?authuser=19&hl=pt)
iOS
Remetente ajustando a posição de reprodução
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-control-elements3.gif?authuser=19&hl=pt)
Busca de conteúdo do destinatário
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-seek1_a.gif?authuser=19&hl=pt)
Chrome
Remetente ajustando a posição de reprodução
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-control-elements3.gif?authuser=19&hl=pt)
Busca de conteúdo do destinatário
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-seek1_a.gif?authuser=19&hl=pt)
Receptor pausado
Obrigatório
A Identificar se o conteúdo está pausado, exibindo um ícone
pausado e a posição de reprodução
B Identificar qual conteúdo está pausado exibindo o título ou a arte gráfica
C Identificar qual app receptor está carregado exibindo um
logotipo do app
Práticas recomendadas
- Muitas vezes, os usuários pausam o conteúdo para examiná-lo. Portanto, exiba um ícone de pausa para que a interface desapareça desnecessariamente quando pausada por alguns segundos.
- O app receptor não pode continuar a reprodução de conteúdo, a menos que haja uma solicitação explícita do usuário para iniciar a reprodução, como retomar ou pular um item na fila.
- Desconecte-se do app receptor e interrompa a execução se ele estiver inativo por 20 minutos. Quando interrompida, a tela inicial do receptor aparece e ajuda a evitar a queima de tela. Armazene o local pausado para que o usuário possa retomar a reprodução a partir desse ponto mais tarde.
Android
Remetente pausado
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-persistent-control2.png?authuser=19&hl=pt)
Conteúdo do destinatário pausado
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause1_a.png?authuser=19&hl=pt)
Remetente pausado
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-persistent-control2.png?authuser=19&hl=pt)
Receptor pausado após cinco segundos
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause2.png?authuser=19&hl=pt)
iOS
Remetente pausado
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-persistent-control2.png?authuser=19&hl=pt)
Conteúdo do destinatário pausado
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause1_a.png?authuser=19&hl=pt)
Remetente pausado
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-persistent-control2.png?authuser=19&hl=pt)
Receptor pausado após cinco segundos
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause2.png?authuser=19&hl=pt)
Chrome
Remetente pausado
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-persistent-control2.jpg?authuser=19&hl=pt)
Conteúdo do destinatário pausado
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause1_a.png?authuser=19&hl=pt)
Remetente pausado
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-persistent-control2.jpg?authuser=19&hl=pt)
Receptor pausado após cinco segundos
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause2.png?authuser=19&hl=pt)
Armazenamento em buffer do receptor
O armazenamento em buffer no receptor acontece quando a latência da rede ou outros fatores causam um atraso na reprodução.
Obrigatório
A Identifica se o receptor está armazenando em buffer após alguns segundos exibindo um ícone de carregamento de buffer. Espere alguns segundos para indicar que o armazenamento em buffer
vai impedir que o ícone de carregamento do buffer apareça com muita frequência em condições de rede ruins
Práticas recomendadas
Identifique qual conteúdo está sendo armazenado em buffer se ele continuar após cinco segundos.
Android
O remetente indica que o receptor está em buffer
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-elements3.gif?authuser=19&hl=pt)
Armazenamento em buffer do conteúdo do receptor
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-buffer1_a.gif?authuser=19&hl=pt)
iOS
O remetente indica que o receptor está em buffer
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-control-elements3.gif?authuser=19&hl=pt)
Armazenamento em buffer do conteúdo do receptor
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-buffer1_a.gif?authuser=19&hl=pt)
Chrome
O remetente indica que o receptor está em buffer
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-control-elements3.gif?authuser=19&hl=pt)
Armazenamento em buffer do conteúdo do receptor
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-buffer1_a.gif?authuser=19&hl=pt)
O receptor interrompe a transmissão
Quando a reprodução é interrompida ou expira, a interface do receptor precisa promover outros conteúdos ou recursos disponíveis no app remetente.
Obrigatório
A Identifique qual app receptor está carregado ou inativo exibindo um logotipo do app
Práticas recomendadas
- Use a tela inativa após a reprodução para recomendar conteúdos ou recursos do app remetente com base no que acabou de ser transmitido
- Mude o conteúdo da tela inativa a cada 30 a 60 segundos para evitar que a tela seja queimada
- Desconecte-se do app receptor e interrompa a execução se ele estiver inativo por cinco minutos. Quando interrompida, a tela inicial do receptor aparece e ajuda a evitar a queima de tela.
Android
App do remetente inativo
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states4.png?authuser=19&hl=pt)
App receptor inativo
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-complete1_a.png?authuser=19&hl=pt)
Remetente desconectado
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states2.png?authuser=19&hl=pt)
Transmitir tela inicial
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=19&hl=pt)
iOS
App do remetente inativo
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states4.png?authuser=19&hl=pt)
App receptor inativo
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-complete1_a.png?authuser=19&hl=pt)
Remetente desconectado
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states2.png?authuser=19&hl=pt)
Transmitir tela inicial
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=19&hl=pt)
Chrome
App do remetente inativo
![App do remetente inativo](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states4.png?authuser=19&hl=pt)
App receptor inativo
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-complete1_a.png?authuser=19&hl=pt)
Remetente desconectado
![Remetente desconectado](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states2.png?authuser=19&hl=pt)
Transmitir tela inicial
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=19&hl=pt)
As imagens usadas neste guia de design são cortesia da Blender Foundation, compartilhadas sob direitos autorais ou licença Creative Commons.
- Elephant's Dream: (c) copyright 2006, Blender Foundation / English Media Art Institute / www.elephantsdream.org
- Sintel: (c) copyright Blender Foundation | www.sintel.org
- Tears of Steel: (CC) Blender Foundation | mango.blender.org
- Big Buck Bunny: (c) direitos autorais 2008, Blender Foundation / www.bigbuckbunny.org