Práticas recomendadas para blocos

Design em preto

Projetar em um plano de fundo preto é crucial para o Wear OS por dois motivos principais:

  • Eficiência da bateria:cada pixel iluminado na tela consome energia. Ao usar um plano de fundo preto, você minimiza o número de pixels ativos, prolongando a duração da bateria.
  • Estética perfeita:um plano de fundo preto ajuda a minimizar visualmente a caixa do relógio, criando a ilusão de uma superfície contínua que se estende até a borda do dispositivo. Conter elementos da interface nesse espaço aumenta ainda mais esse efeito.

Faça isso

Sempre defina a cor do plano de fundo como preto.

Não faça isso

Não defina o plano de fundo como uma imagem sem margens ou com uma cor sólida.

Incluir apenas os elementos necessários

Quando a opção estiver ativada (por exemplo, usando o ProtoLayout Material3 PrimaryLayout), o Wear OS vai mostrar automaticamente o ícone permanente do app, que será exibido automaticamente conforme o usuário rola pelo carrossel de Blocos. O ícone do app não deve ser projetado e adicionado como parte do Bloco.

Verifique se o ícone do app fornecido é monocromático se você estiver usando temas dinâmicos no bloco. Confira as diretrizes de ícones de produtos Android sobre como criar o ícone do app para sua marca.

Faça isso

O Wear OS pode mostrar o ícone do app automaticamente conforme o usuário percorre o carrossel. Não é necessário colocar o ícone do app no design do bloco.

Não faça isso

Não adicione o ícone do app no design do bloco, porque ele pode aparecer duas vezes/sobreposto se também for mostrado no nível do sistema.

Ocultar títulos de apps para garantir áreas de toque mínimas

Para garantir espaço suficiente para elementos interativos em telas menores, o título do app pode ser ocultado quando um Bloco usa duas linhas (e uma seção na parte de baixo). Isso garante que as linhas tenham altura suficiente (pelo menos 48 dp). O título pode reaparecer em telas maiores (225 dp ou mais).

Faça isso

Em telas pequenas, o título do app fica oculto para garantir que as duas linhas tenham uma altura mínima e uma área de toque de 48 dp.

Não faça isso

Se você não ocultar o título do app na tela pequena e tiver duas linhas, a altura dos componentes não vai obedecer aos nossos padrões de acessibilidade e será menor que o tamanho mínimo de toque. Neste exemplo, o espaço para os botões é menor que 48 dp, então ele é cortado.

Escolha um único caso de uso principal para destacar

Para garantir que os usuários saibam o que fazer com cada Bloco, seja abrir um app, iniciar uma atividade ou saber mais, eles precisam incluir pelo menos um elemento interativo no layout.

Faça isso

Esse bloco específico é eficaz porque oferece uma pequena coleção de opções e a capacidade de ver mais.

Não faça isso

Essa solução é menos útil para o usuário porque causa paralisia de decisão devido a muitas opções fornecidas.

Inclua pelo menos um contêiner

Cada bloco no app precisa conter pelo menos um elemento de contêiner e ser totalmente acionável, vinculando a uma tela correspondente no app. As informações do bloco, contidas no contêiner ou apresentadas separadamente, precisam comunicar claramente o conteúdo vinculado ou a ação disponível.

Se botões forem usados, eles precisam seguir as convenções de design padrão e indicar claramente a função deles.

Faça isso

Esse bloco funciona bem porque o usuário pode realizar ações em cada um dos recursos fornecidos, já que eles têm recursos de toque claros.

Não faça isso

Esse bloco é menos eficaz porque não deixa claro que o usuário pode tocar no conteúdo para conferir mais informações.

Tornar as ações imediatamente compreensíveis

As experiências no relógio não têm o luxo de ter espaço amplo para comunicar o significado delas. Por isso, os Blocos mais eficazes têm componentes interativos facilmente previsíveis.

Faça isso

Um bloco bem-sucedido aproveita ao máximo o espaço disponível para comunicar claramente o resultado de cada ação.

Não faça isso

As ações no bloco não estão claras. Para onde o contêiner com a capa do álbum leva o usuário? Isso é diferente do botão "Play"?

Priorizar ações visualmente

Para ajudar os usuários a entender a ação mais importante em um Bloco, os contêineres interativos precisam ser visualmente priorizados.

  • Use cores primárias nos botões de ação principais.
  • Usar cores secundárias/terciárias em ações secundárias

Faça isso

Este Bloco usa uma combinação de preenchimento (com funções de cor primária e secundária) com uma função de botão inferior terciário claro, usando o estilo de preenchimento tonal.

Não faça isso

Este bloco contém muitos usos de botões de estilo preenchido, além de todos usarem a função de cor primária.

Simplificar para menos contêineres

Os blocos não devem usar mais de um componente interativo para acionar uma ação específica. Em vez disso, tente simplificar o layout geral em menos contêineres.

Faça isso

Esse bloco usa vários contêineres, e cada contêiner funciona como um botão para realizar uma ação específica, como iniciar um timer ou criar um novo.

Não faça isso

O uso de quatro contêineres aqui é desnecessário, já que todas as informações vão navegar para o mesmo local.

Usar contêineres para fins funcionais

Para garantir que os usuários possam prever o que cada componente em um Bloco vai fazer, não recomendamos o uso de contêineres para fins decorativos ou estruturais, para evitar toques que não fazem nada.

Faça isso

Essa solução funciona porque a única ação do Bloco é um fluxo de criação, e todo o outro conteúdo flutua no plano de fundo preto.

Não faça isso

Esse bloco é mais confuso porque parece que o usuário pode interagir com todos os contêineres.

Mostrar representações de gráficos de visualização fácil

A visualização rápida é fundamental para o design do Wear OS. Com o tempo de tela limitado (cerca de 7 segundos), priorize as informações essenciais em um formato claro e fácil de entender.

O relógio complementa a experiência do smartphone, oferecendo acesso rápido aos detalhes principais.

Faça isso

Mostre representações de informações numéricas ou estatísticas com visualização rápida para que o usuário toque e confira mais detalhes em um app, se for preciso.

Não faça isso

Mostrar informações numéricas ou estatísticas detalhadas no bloco