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 do remetente . Por exemplo, quando o conteúdo é pausado no receptor, um ícone de pausa é exibido. Quando o usuário pressiona o botão de reprodução 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 da reprodução / busca
- Armazenamento em buffer
Interface do receptor
Obrigatório
A Coloque a maioria dos elementos de UI no quarto inferior da tela
e mantenha a consistência com as outras experiências do usuário.
B Não apresente elementos como controles interativos. Por exemplo, não reproduza a interface do remetente na interface do receptor.
Práticas recomendadas
- Use transição (fade), transparência e nuance para suavizar o efeito visual.
- Considere que os usuários querem ver o máximo de conteúdo possível. Os usuários costumam pausar o conteúdo para analisá-lo. Portanto, desfaça a interface desnecessária sempre que possível.
Android
Interface do remetente
Interface do receptor
iOS
Interface do remetente
Interface do receptor
Chrome
Interface do remetente
Interface do receptor
Inatividade do app receptor
Uma tela inativa é mostrada no receptor quando ele está conectado a um remetente, mas não transmitindo.
Obrigatório
A Identifique qual app receptor está carregado
Práticas recomendadas
- Use a tela inativa para promover conteúdo ou recursos do app remetente.
- Mude o conteúdo a cada 30 a 60 segundos para mostrar mais e evitar o burn-in da tela.
- Desconecte-se do app receptor e interrompa a execução se ele ficar inativo por cinco minutos. Quando parado, a tela inicial do receptor aparece e ajuda a evitar o efeito burn-in.
Android
Caixa de diálogo de transmissão, conectada, mas sem transmissão
App receptor carregado / inativo
iOS
Caixa de diálogo de transmissão, conectada, mas sem transmissão
App receptor carregado / inativo
Carregamento do app receptor
Quando um usuário se conecta a um receptor, o app precisa ser carregado antes de mostrar o estado ocioso ou começar a reproduzir conteúdo.
Obrigatório
A Identifique qual app receptor está carregando mostrando o
logotipo do app
B Identifique que o app receptor está carregando mostrando
o ícone de carregamento animado
Android
Conexão do remetente
Carregamento do app receptor
iOS
Conexão do remetente
Carregamento do app receptor
Chrome
Conexão do remetente
Carregamento do app receptor
Carregamento de conteúdo do receptor
Depois que o app receptor for carregado, o conteúdo poderá começar a ser transmitido para ele.
Obrigatório
A Identifique o conteúdo que está sendo carregado mostrando o
título ou a arte da capa
B Identifique que o conteúdo está sendo carregado mostrando 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
Carregamento de conteúdo do remetente
Carregamento de conteúdo do receptor
iOS
Carregamento de conteúdo do remetente
Carregamento de conteúdo do receptor
Chrome
Carregamento de conteúdo do remetente
Carregamento de conteúdo do receptor
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 ela é ajustada
C Identificar que o receptor está buscando conteúdo quando a
posição de reprodução é alterada, mas ainda não está sendo reproduzida
Android
Remetente ajustando a posição de reprodução
Busca de conteúdo do receptor
iOS
Remetente ajustando a posição de reprodução
Busca de conteúdo do receptor
Chrome
Remetente ajustando a posição de reprodução
Busca de conteúdo do receptor
Receptor pausado
Obrigatório
A Identifique que o conteúdo está pausado mostrando um ícone de pausa e a posição de reprodução
B Identifique qual conteúdo está pausado mostrando o título ou a arte
C Identifique qual app receptor está carregado mostrando um logotipo
Práticas recomendadas
- Os usuários costumam pausar o conteúdo para analisá-lo. Por isso, faça com que a interface desnecessária desapareça quando o conteúdo for pausado por alguns segundos, mostrando um ícone de pausa.
- O app receptor não deve 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 ficar inativo por 20 minutos. Quando parado, a tela inicial do receptor aparece e ajuda a evitar o efeito burn-in. Armazene o local pausado para que o usuário possa retomar a reprodução desse ponto mais tarde.
Android
Remetente pausado
Conteúdo pausado no receptor
Remetente pausado
O receptor foi pausado após 5 segundos.
iOS
Remetente pausado
Conteúdo pausado no receptor
Remetente pausado
O receptor foi pausado após 5 segundos.
Chrome
Remetente pausado
Conteúdo pausado no receptor
Remetente pausado
O receptor foi pausado após 5 segundos.
Buffer do receptor
O buffer no receptor acontece quando a latência da rede ou outros fatores causam um atraso na reprodução.
Obrigatório
Um Identifique que o receptor está armazenando em buffer após alguns
segundos mostrando um spinner de buffer. Aguardar alguns segundos para indicar o buffer vai
impedir que o spinner de buffer apareça com muita frequência em condições ruins de rede.
Práticas recomendadas
Identifique qual conteúdo está em buffer se o problema persistir após 5 segundos.
Android
O remetente indica o buffer do receptor
Buffer de conteúdo do receptor
iOS
O remetente indica o buffer do receptor
Buffer de conteúdo do receptor
Chrome
O remetente indica o buffer do receptor
Buffer de conteúdo do receptor
O receptor interrompe a transmissão
Quando a reprodução para ou atinge o tempo limite, a interface do receptor precisa promover outros conteúdos ou recursos disponíveis no app remetente.
Obrigatório
Um Identifique qual app receptor está carregado ou inativo
exibindo um logotipo do app
Práticas recomendadas
- Usar a tela inativa após a reprodução para recomendar conteúdo 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 o efeito burn-in
- Desconecte-se do app receptor e interrompa a execução se ele ficar inativo por cinco minutos. Quando parado, a tela inicial do receptor aparece e ajuda a evitar o efeito burn-in.
Android
Remetente inativo
App receptor inativo
O remetente se desconectou
Transmitir a tela inicial
iOS
Remetente inativo
App receptor inativo
O remetente se desconectou
Transmitir a tela inicial
Chrome
Remetente inativo
App receptor inativo
O remetente se desconectou
Transmitir a tela inicial
As imagens usadas neste guia de design são cortesia da Blender Foundation e foram compartilhadas sob direitos autorais ou licença Creative Commons.
- Elephant's Dream: (c) copyright 2006, Blender Foundation / Netherlands 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) copyright 2008, Blender Foundation / www.bigbuckbunny.org