O ecossistema do Wear OS é composto de dispositivos que têm uma ampla variedade de tamanhos de tela. O uso de princípios adaptáveis da interface é fundamental para oferecer a melhor experiência de qualidade a todos os usuários.
O que é a interface adaptável?
As interfaces adaptáveis são esticadas e mudam para fazer o melhor uso possível de todo o espaço disponível na tela, independente do tamanho da tela em que são renderizadas.
As interfaces adaptáveis mudam de forma responsiva, usando componentes e métodos criados diretamente na lógica do layout. Esses layouts também usam pontos de interrupção de tamanho de tela, aplicando um design diferente em diferentes tamanhos de tela, para criar uma experiência ainda mais completa para os usuários.
Principais tamanhos de tela
Saiba mais sobre os principais tamanhos de referência para ter em mente ao projetar novas experiências
Tipos de layouts
Ao projetar para layouts adaptáveis na 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.
Todas as margens superior, inferior e laterais precisam ser definidas em porcentagens para evitar recorte e fornecer dimensionamento proporcional dos elementos.
Todas as margens precisam ser definidas em porcentagens, e as restrições verticais precisam ser definidas de modo que o conteúdo principal no meio possa se esticar para preencher a área disponível.
Agregar valor usando layouts adaptáveis e práticas de design
Ao projetar para layouts adaptáveis na 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.
As imagens a seguir são sugestões amplas. Os exemplos são apenas para fins ilustrativos. Confira cada componente ou página da plataforma para orientações detalhadas, contextuais e responsivas.
Os layouts responsivos permitem que você tenha mais ícones, cards, linhas de texto e mais botões para caber em uma única tela
Use novos layouts, aplicados em pontos de interrupção de tamanho de tela definidos, para permitir a introdução de novos conteúdos quando possível, oferecendo ao usuário mais valor em dispositivos com tamanhos de tela maiores.
Use mais espaço na tela para fornecer contêineres maiores, textos maiores, anéis mais espessos e uma visualização de dados mais granular para proporcionar uma visualização mais clara aos usuários.
Use mais espaço na tela para oferecer áreas de toque maiores, maior hierarquia visual e mais espaço entre itens de conteúdo para tornar as interfaces mais fáceis e confortáveis de interagir.
Use nossos componentes e modelos atualizados para oferecer uma aparência melhor às interfaces do usuário em todos os tamanhos de tela.
Qualidade do app
Nossas diretrizes de qualidade são organizadas em três níveis. Atenda às diretrizes nos três níveis para oferecer a melhor experiência possível aos usuários.
|
Pronto para todos os tamanhos de tela |
Responsivo e otimizado |
Adaptável e diferenciado |
Usar layouts canônicos estabelecidos
Use layouts canônicos estabelecidos para ajudar as interfaces a se adaptarem perfeitamente a vários tamanhos de dispositivo.
Nossos layouts canônicos foram desenvolvidos cuidadosamente para oferecer uma experiência de alta qualidade em todos os tamanhos de tela.