Nível 2: responsivo e otimizado
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Os apps que usam layouts responsivos e se adaptam automaticamente a diferentes tamanhos de tela oferecem mais valor aos usuários e proporcionam experiências mais produtivas e envolventes.
Os layouts responsivos formatam e posicionam dinamicamente elementos como botões, campos de texto e caixas de diálogo para uma experiência do usuário ideal. Ofereça automaticamente
mais valor aos usuários do seu app em telas maiores usando práticas de design
responsivo. Seja mais texto visível rapidamente, mais ações na tela ou alvos de toque maiores e mais acessíveis, as práticas responsivas oferecem uma experiência aprimorada para usuários de telas maiores.
Adicionar valor com design responsivo
check_circle
O que fazer
- Use a biblioteca de componentes do M3 Compose, que tem comportamento responsivo e adaptável integrado.
- Use layouts responsivos, que se ajustam automaticamente e sem problemas para preencher o espaço disponível em todos os tamanhos de tela.
cancel
O que não fazer
- Alongar elementos da interface, incluindo campos de texto, botões e caixas de diálogo, para preencher o espaço extra.
- Aumente os tamanhos das fontes, a menos que elas tenham uma finalidade principalmente gráfica.
Exemplos
As imagens a seguir mostram exemplos de apps responsivos e otimizados.
Bloco com cards de imagens
Lista de cards com imagens
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.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2025-07-27 UTC."],[],[],null,["# Tier 2: Responsive and optimized\n\nApps that employ responsive layouts and automatically adapt to different screen\nsizes offer additional value to users and provide more productive, engaging user\nexperiences.\n\nResponsive layouts dynamically format and position elements such as buttons,\ntext fields, and dialogs for an optimal user experience. Automatically offer\nusers of your app additional value on larger screens by utilizing responsive\ndesign practices. Whether it's more text visible at a glance, more actions on\nscreen, or larger, more accessible tap targets, responsive practices provide an\nenhanced experience for users of larger screens.\n\nAdd value through responsive design\n-----------------------------------\n\ncheck_circle\n\n### Do\n\n- Use the M3 Compose component library which has built-in responsive and adaptive behavior.\n- Utilize responsive layouts, which automatically and smoothly adjust to fill the available space across screen sizes. \ncancel\n\n### Don't\n\n- Stretch UI elements---including text fields, buttons, dialogs---to fill extra space.\n- Increase the sizes of fonts, unless they're serving a primarily graphic purpose.\n\nExamples\n--------\n\nThe following images show examples of apps that are responsive and optimized.\n\n\n### Edge-hugging buttons\n\n\u003cbr /\u003e\n\n\n### List of cards\n\n\u003cbr /\u003e\n\n\n### List of switchers and buttons\n\n\u003cbr /\u003e\n\n\n### Tile with image cards\n\n\u003cbr /\u003e\n\n\n### List of cards with images\n\n\u003cbr /\u003e\n\n\n### Tile with graph\n\n\u003cbr /\u003e"]]
