Os usuários do Android interagem com diferentes tipos de mídia, incluindo audiolivros, música, podcasts e rádio. É importante projetar apps que permitam que os usuários acessem o conteúdo de mídia no relógio de maneira conveniente. O relógio é uma plataforma única em que a facilidade e a velocidade das interações são uma prioridade, já que os usuários passam muito menos tempo interagindo com o relógio do que com o smartphone ou tablet.
Para saber mais, consulte o Kit de ferramentas de mídia no GitHub.
Arquitetura de apps de mídia
Crie apps de mídia que atendam aos requisitos de design do Wear OS. Os apps de mídia geralmente incluem páginas Procurar e Entidade.
Procurar
Permite que os usuários encontrem mídia para reproduzir. Priorize itens transferidos por download para ajudar os usuários a iniciar ou retomar a reprodução rapidamente.
Entidade
Oferece aos usuários mais informações sobre um item de mídia específico. Contexto e ações importantes importantes precisam estar disponíveis, como download, reprodução ou ordem aleatória.
Reduza a hierarquia do seu app e exiba a mídia para o usuário. Crie uma arquitetura de informação simples que permita aos usuários acessar listas rapidamente e mostrar miniaturas aos usuários. Considere usar componentes de design personalizados para o Wear OS. Para mais informações, confira as recomendações de design para ícones e cards.
Telas de controle de mídia
Esses aplicativos também precisam incluir telas de controles de mídia. Criar controles de mídia usando um layout de cinco botões. Isso garante que os requisitos de área mínima de toque sejam atendidos. Confira a seguir exemplos de controles de mídia para um app de música e um app de podcasts:
Os controles de mídia mostrados devem combinar com o tipo de conteúdo. Use um ícone flutuante de três pontos para direcionar os usuários a outra página se você quiser incluir mais de cinco ações. É possível usar ícones e fontes personalizados no app.
Controlar o volume
Os controles de volume são um dos controles de mídia mais importantes para os usuários no smartwatch. Os controles de mídia precisam incluir um botão de volume para entrar na tela de controles de volume.
A maioria dos dispositivos Wear OS tem uma borda ou um botão lateral giratório (RSB, na sigla em inglês). Alguns dispositivos Wear OS também têm outros botões de hardware para controlar o volume. Use o RSB, a borda ou o outro botão para controlar o volume. Só mostre o indicador quando o RSB ou a borda for girada, como mostrado no exemplo.
Casos de uso comuns
Ao projetar apps de mídia, priorize os seguintes casos de uso importantes:
- Ouvir mídia transferida por download
- Ouvir música por streaming no relógio
Ouvir mídia transferida por download
Uma página de entidade precisa permitir que os usuários façam o download manual de mídias.
Informe ao usuário onde ele está fazendo o download do conteúdo, o progresso do download, o tempo necessário e o tamanho do download, conforme mostrado no exemplo a seguir:
Quando o usuário procurar mídia, mostre o download mais recente:
Se o conteúdo já foi baixado, deixe isso claro mostrando uma ação para remover o download do relógio. Nesse caso, você também precisa mostrar quanto espaço o download está ocupando no relógio, conforme mostrado na imagem a seguir:
Se o dispositivo de origem for o relógio, solicite que os usuários conectem um fone de ouvido antes de começar a ouvir música. Quando o fone de ouvido estiver conectado, abra os controles de mídia e reproduza a mídia.
Ouvir música por streaming usando o relógio
O streaming de mídia a partir do relógio tem um efeito significativo na bateria de um dispositivo Wear OS. Priorize o conteúdo transferido por download quando os usuários escolherem ouvir no dispositivo Wear OS expondo os downloads usados recentemente na lista de navegação. Considere adicionar um botão que leve a uma lista completa de downloads, como mostrado nas imagens a seguir:
Para saber mais, consulte o Kit de ferramentas de mídia no GitHub.
Layouts adaptáveis
As adaptações para telas maiores de apps de mídia se concentram exclusivamente na experiência do player de mídia. Todos os outros elementos são capturados em páginas de ícones, botões, caixas de diálogo e listas que descrevem o comportamento adequado do app para acomodar telas maiores.
Configuração do botão
Para seguir os princípios de dimensionamento da área de toque, mostre um layout de dois botões em dispositivos Wear OS menores que 225 dp e um layout de três botões em dispositivos com telas maiores. As imagens a seguir descrevem exemplos adicionais, como um layout de um botão e um layout de dois botões com um logotipo:
Botão de controle de resposta
O controle principal (reproduzir/pausar) dimensiona de 60 dp para 80 dp em dispositivos Wear OS com mais de 225 dp, deixando a seção intermediária com 80 dp de altura e, portanto, aumentando as áreas de toque para todos os controles nela. Ele é um comportamento responsivo que você herdará do modelo do Media Player.
Escalonamento em diferentes tamanhos de tela:
< 225 dp: 60 dp x 60 dp
> 225 dp: 80 dp x 80 dp
Comportamento com marcações
No cabeçalho, use uma margem universal de 9,38%, com uma margem adicional do Título da música de 4,16%. Use um gradiente de 8 dp para rolar a tela de títulos e um intervalo adicional de 8 dp quando um ícone estiver presente. Inclua todas as transições de rolagem do letreiro abaixo do ícone, cuja posição permanece fixa.
Margens do atom do cabeçalho
9,38%
Margem interna do título da música
4,16%
Gradientes
Sangria de 8 dp
Lacuna do ícone
8 dp
Áreas de toque
Em dispositivos Wear OS com telas maiores, os ícones nas seções do meio e do rodapé aproveitam o espaço extra para aumentar os tamanhos das áreas de toque. Isso significa que, além de um átomo de controle fixo, "preencher espaço disponível" são aplicadas a contêineres de ícones:
Telas pequenas do Wear OS
< 225 dp
Telas maiores do Wear OS
> 225 dp