Começar a usar os layouts adaptáveis
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
O ecossistema do Wear OS é composto por dispositivos com uma ampla variedade de tamanhos
de tela. Usar os princípios de interface adaptativa é fundamental para oferecer a melhor
experiência de qualidade a todos os usuários.
O que é uma interface adaptativa?
As interfaces adaptativas se esticam e mudam para aproveitar ao máximo todo o espaço
disponível na tela, não importa o tamanho da tela em que elas são renderizadas.
As interfaces adaptativas 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 rica para os usuários.
Principais tamanhos de tela
Saiba quais são os principais tamanhos de referência que você precisa considerar ao projetar novas experiências
Tamanhos de tela
Tipos de layouts
Ao projetar layouts adaptáveis na tela redonda, as visualizações com rolagem e
sem rolagem têm requisitos exclusivos para dimensionar elementos da interface e
manter um layout e uma composição equilibrados.
Visualizações de rolagem
Todas as margens de cima, de baixo e laterais
precisam ser definidas em porcentagens para evitar o corte e fornecer
escala proporcional dos elementos.
Visualizações sem rolagem
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.
Adicionar valor com layouts e práticas de design adaptáveis
Ao projetar layouts adaptáveis na tela redonda, as visualizações com rolagem e
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 gerais. Os exemplos são apenas para fins
ilustrativos. Confira cada componente ou página de exibição para receber orientações detalhadas,
contextualizadas e responsivas.
Mais conteúdo em resumo
Os layouts responsivos permitem que mais ícones, cards, linhas de texto e
botões caibam em uma única tela.
Mais elementos de conteúdo visíveis
Utilize novos layouts, aplicados em pontos de interrupção de tamanho de tela definidos, para permitir
a introdução de novos conteúdos sempre que possível, dando ao usuário um valor extra
em dispositivos com telas maiores.
Melhoria na visualização
Use o espaço extra da tela para fornecer contêineres maiores, texto maior, anéis mais grossos
e uma visualização de dados mais detalhada para facilitar a visualização dos usuários.
Melhoria na usabilidade
Use espaço extra na tela para oferecer alvos de toque maiores, hierarquia visual
maior e espaço adicional entre os itens de conteúdo para facilitar a interação com as interfaces.
Composições otimizadas
Use nossos componentes e modelos atualizados para oferecer uma aparência melhor
para nossas interfaces em todos os tamanhos de tela.
Qualidade do app
Nossas diretrizes de qualidade são organizadas em três níveis. Ofereça a melhor experiência
possível aos usuários atendendo às diretrizes das três camadas.
Diretrizes de qualidade
Pronto para todos os tamanhos de tela
Verifique se o app oferece uma experiência de qualidade em todos os tamanhos
de tela. Crie layouts que usem totalmente o espaço disponível do app.
Primeiras etapas
Responsivo e otimizado
Ofereça mais conteúdo aos usuários em dispositivos que permitem isso e use
layouts responsivos que se adaptam automaticamente a diferentes tamanhos de tela.
Primeiras etapas
Adaptativo e diferenciado
Aproveite o espaço extra usando pontos de interrupção para oferecer
novas experiências em telas maiores, o que não é possível em dispositivos
com telas menores.
Primeiras etapas
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 com cuidado para oferecer uma experiência
de alta qualidade em todos os tamanhos de tela.
Layouts canônicos
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2025-07-27 UTC.
[null,null,["Última atualização 2025-07-27 UTC."],[],[],null,["# Get started with adaptive layouts\n\nThe Wear OS ecosystem is made up of devices that have a wide variety of screen\nsizes. Utilizing adaptive UI principles is critical to delivering the highest\nquality experience for all users.\n\nWhat is adaptive UI?\n--------------------\n\nAdaptive UIs stretch and change to make the best possible use of all available\nscreen space, no matter what size screen they're rendered on.\n\nAdaptive UIs change responsively, using components and methods built directly\ninto the layout logic. These layouts also utilize screen size\nbreakpoints---applying a different design on different screen sizes---to create an\neven richer experience for users.\n\nKey screen sizes\n----------------\n\n\nLearn about key reference sizes to keep in mind as you design new experiences\n\n[Screen sizes](/design/ui/wear/guides/foundations/screen-sizes) \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nTypes of layouts\n----------------\n\nWhen designing for adaptive layouts on the round screen, scrolling and\nnon-scrolling views each have unique requirements for scaling UI elements and\nmaintaining a balanced layout and composition.\n\n\n**Scrolling views**\n\nAll top, bottom, and side margins\nshould be defined in percentages to avoid clipping and provide\nproportional scaling of elements. \n\n**Non-scrolling views**\n\nAll margins should be defined\nin percentages and vertical constraints should be defined such that the\nmain content in the middle can stretch to fill the available area.\n\n\u003cbr /\u003e\n\nAdd value through adaptive layouts and design practices\n-------------------------------------------------------\n\nWhen designing for adaptive layouts on the round screen, scrolling and\nnon-scrolling views each have unique requirements for scaling UI elements and\nmaintaining a balanced layout and composition.\n\nThe following images are broad suggestions; examples are for illustrative\npurposes only. View each component or surface page for detailed, contextual,\nresponsive guidance.\n\n\n**More content at a glance**\n\nResponsive layouts allow for more chips, more cards, more lines of text, and\nmore buttons to fit on a single screen \n\n**More content elements visible**\n\nUtilize new layouts, applied at defined screen size breakpoints, to allow for\nthe introduction of new content when possible, giving the user additional value\non devices with larger screen sizes.\n\n\u003cbr /\u003e\n\n\n**Improved glanceability**\n\nUse extra screen space to provide larger containers, larger text, thicker rings,\nand more granular data visualization to provide better glanceability for users. \n\n**Improved usability**\n\nUse extra screen space to provide bigger tap targets, greater visual hierarchy,\nand additional space between content items to make interfaces easier and more\ncomfortable to interact with.\n\n\u003cbr /\u003e\n\n\n**Optimized compositions**\n\nUtilize our updated components and templates to offer a better look and feel for\nour UIs across all screen sizes. \n\n\u003cbr /\u003e\n\nApp quality\n-----------\n\n\nOur quality guidelines are organized into three levels. Enable the best possible\nexperience for your users by meeting guidelines in all three tiers.\n\n[Quality guidelines](/docs/quality-guidelines/wear-app-quality) \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n*** ** * ** ***\n\n\n**Ready for all screen sizes**\n\nMake sure your app is delivering a quality experience across all screen\nsizes. Create layouts that fully use the available app space.\n\n[Get started](/design/ui/wear/guides/foundations/larger-screens-ready) \n**Responsive and optimized**\n\nDeliver more content to users on devices which allow for it, and utilize\nresponsive layouts that automatically adapt to different screen sizes.\n\n[Get started](/design/ui/wear/guides/foundations/larger-screens-optimized) \n**Adaptive and differentiated**\n\nMake the most of additional real estate by utilizing breakpoints to offer\npowerful new experiences on larger screens which are not possible on devices\nwith smaller screens.\n\n[Get started](/design/ui/wear/guides/foundations/larger-screens-differentiated)\n\n\u003cbr /\u003e\n\n*** ** * ** ***\n\nUtilize established canonical layouts\n-------------------------------------\n\n\nUse established canonical layouts to help your UIs adapt smoothly across a range\nof device sizes.\n\nOur canonical layouts have been developed thoughtfully to offer a high quality\nexperience across all screen sizes.\n\n[Canonical layouts](/design/ui/wear/guides/foundations/canonical-adaptive-layouts) \n\n\u003cbr /\u003e"]]
