Esses layouts canônicos são layouts de app versáteis e comprovados que oferecem uma experiência do usuário ideal em dispositivos com tamanhos de tela maiores.
Blocos
Os blocos oferecem acesso rápido a informações e ações que os usuários precisam para realizar tarefas. Com um gesto de deslizar no mostrador do relógio, o usuário pode acompanhar o progresso em relação às metas de condicionamento físico, conferir a previsão do tempo e muito mais. Inicie um app ou execute tarefas essenciais rapidamente nos blocos.
Personalização usando nossos componentes e estilo
Você pode aplicar o estilo da sua marca a determinados componentes. Isso inclui a cor principal, o ícone do app, a fonte, os ícones e todos os recursos visuais que se aplicam à experiência do bloco.
Criar para layouts responsivos (telas com altura fixa e margens percentuais)
Para adaptar nosso código e nossos layouts de design a tamanhos de tela maiores, eles foram atualizados para ter um comportamento responsivo integrado, incluindo margens e padding baseados em porcentagem. Se você estiver usando nossos modelos, poderá herdar essas atualizações automaticamente pela API Tiles e só será necessário fornecer layouts em que você adicionou mais conteúdo ou componentes após um ponto de interrupção do tamanho da tela. Para conferir orientações e recomendações completas sobre como aproveitar um tamanho de tela maior, consulte nossas orientações para blocos.
Todos os modelos são criados com os dois pontos de interrupção padrão do tamanho da tela: 192 dp e 225 dp. As margens foram definidas como valores percentuais, com base no tamanho da tela, para que as linhas preencham o espaço disponível, mas não se estendam muito e sejam recortadas pela tela curva nas partes de cima e de baixo. Os blocos têm uma altura de tela fixa. Por isso, ajustamos o padding para maximizar o espaço limitado da tela sem criar recortes indesejados.
Os dois modelos principais, o layout principal e o layout de conteúdo de borda (com um anel de progresso), têm margens diferentes, mas todos os layouts de design são criados para mapear um deles. Há três seções principais para cada bloco e slots que alocam cada um deles. Em alguns casos, pode haver outras margens integradas e padding para ajudar o conteúdo a preencher o espaço disponível, mantendo o design de fácil visualização e equilíbrio.
Crie experiências diferenciadas
Ter quatro layouts canônicos principais, com mais de 80 permutações integradas, permite uma personalização praticamente ilimitada. Os blocos são criados em um sistema baseado em slots. Assim, você pode substituir um slot do layout canônico por qualquer conteúdo que preferir. Nesse caso, mantenha o comportamento responsivo e siga nossas recomendações de design.
Essas personalizações precisam ser limitadas e não podem interromper a estrutura do modelo de blocos. Isso mantém a consistência quando os usuários navegam pelo carrossel de blocos nos dispositivos Wear OS.
Adicionar valor após o ponto de interrupção de tamanho em telas maiores
Para aproveitar melhor o espaço extra em tamanhos de tela maiores, adicione um ponto de interrupção de tamanho em 225 dp. Esse ponto de interrupção possibilita revelar outros conteúdos, incluir mais botões ou dados ou mudar o layout para se adequar melhor à tela maior.
Layouts de apps com e sem rolagem
Ao projetar para layouts adaptáveis em uma tela redonda, visualizações com ou sem rolagem têm requisitos exclusivos para dimensionar elementos da interface e manter um layout e uma composição equilibrados.
Layouts de apps sem rolagem
Layouts canônicos e componentes de tela cheia (incluindo mídia e fitness)
Os layouts de visualização de apps sem rolagem incluem players de mídia, caixas de diálogo de confirmação, seletores, interruptores e telas especiais de condicionamento físico ou monitoramento usando indicadores de progresso. Você pode restringir a altura de qualquer tela, o que garante que o usuário foque em uma tarefa ou conjunto de controles, em vez de precisar navegar por uma lista de opções. Para acomodar dispositivos com telas menores, projete pensando no tamanho limitado, garantindo a nitidez e adotando a tela circular, quando relevante.
Diretrizes de responsividade (margens percentuais)
Defina todas as margens em porcentagens e defina restrições verticais para que o conteúdo principal no meio possa ser esticado para preencher a área de exibição disponível.
É melhor dividir uma tela não rolável em uma seção superior, intermediária e inferior ao projetar. Dessa forma, você pode adicionar margens internas à seção de cima e de baixo para evitar recortes, mas permitir que a seção do meio aproveite a largura total da tela. Considere o uso do botão de rolagem giratória para controlar elementos da tela quando o tamanho for limitado, já que interações de toque podem não oferecer a melhor experiência.
Crie experiências diferenciadas
Os layouts não roláveis são personalizáveis, mas são mais limitados quanto à quantidade de conteúdo que pode ser adicionado à tela e aos tipos de componentes que funcionam melhor. O uso de IconButtons em vez de ícones faz melhor uso do espaço limitado. Além disso, recursos visuais como ProgressIndicators e grandes pontos de dados ajudam a comunicar informações importantes de maneira gráfica.
Todos os elementos que envolvem a borda da tela crescem automaticamente com o tamanho da tela, tornando-os ainda mais impactantes.
Como agregar valor após o ponto de interrupção em tamanhos de tela maiores
Ao criar um design responsivo para tamanhos de tela maiores, os layouts de apps sem rolagem aproveitam ao máximo o espaço adicional na tela. Os elementos existentes podem crescer para preencher o espaço extra, melhorando a usabilidade, e os componentes e conteúdo podem aparecer após um ponto de interrupção do tamanho da tela.
Vários exemplos desse comportamento aparecem na lista a seguir:
- Os players de mídia podem ter botões adicionais ou controles maiores.
- As caixas de diálogo de confirmação podem mostrar uma ilustração ou outras informações.
- As telas de condicionamento físico podem ganhar outras métricas, e os elementos podem aumentar em tamanho.
Layouts de apps de rolagem
Layouts canônicos
Os layouts de visualização de apps de rolagem incluem listas (ScalingLazyColumn) e caixas de diálogo. Esses layouts compõem a maioria das telas do app e representam uma coleção de componentes que precisam se adaptar a telas maiores.
Verifique se os componentes são responsivos, ou seja, se preenchem a largura disponível e adotam os ajustes de ScalingLazyColumn quando mais da altura da tela está disponível. Esses layouts já são criados de forma responsiva, e temos algumas recomendações para aproveitar ainda mais o espaço expandido.
Diretrizes de responsividade (margens percentuais)
Todas as margens superior, inferior e laterais precisam ser definidas em porcentagens para evitar o recorte e fornecer dimensionamento proporcional dos elementos. Considere que o PositionIndicator aparece quando o usuário rola a tela e abraça automaticamente a borda da tela, independente do tamanho.
Crie experiências diferenciadas
As visualizações de rolagem são altamente personalizáveis, com a capacidade de adicionar qualquer combinação de componentes em qualquer ordem.
As margens superior e inferior podem mudar dependendo dos componentes de cima e de baixo. Isso evita que o conteúdo seja recortado pela curva crescente da tela.
Adicionar valor após o ponto de interrupção em telas grandes
Como os layouts de rolagem mostram automaticamente mais do que estava oculto anteriormente abaixo da dobra da tela, não é necessário fazer muito para adicionar valor. Cada componente preenche a largura disponível e, em alguns casos, um componente pode ganhar mais linhas de texto (como cards) ou componentes que se esticam para preencher a largura disponível (como botões de ícones).