UX
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
NÍVEL 2: otimizado para telas grandes
Para os usuários, a interface é o app. A IU determina a experiência do usuário,
que determina a satisfação do usuário, o uso do app, as compras do app e a retenção
do cliente.
Telas grandes oferecem espaço de exibição amplo para interfaces inovadoras e acolhedoras
que oferecem uma UX que telas pequenas não podem replicar.
Inclua os seguintes elementos de IU para otimizar seu app para telas grandes:
- Coluna ou gaveta de navegação
- Áreas de toque grandes
- Menus e caixas de diálogo bem posicionados
- Layouts com vários painéis
Layouts adaptáveis
Crie layouts adaptáveis que otimizem a interface do app em telas grandes e pequenas.
Projete e crie para vários formatos ao mesmo tempo. Prepare seu app
para novos tipos de dispositivos.
Layouts canônicos
Aproveite os layouts de tela grande comprovados para tornar a UX do app excepcional.
Crie um layout de feed, de detalhes e de suporte para tornar o conteúdo
mais gerenciável e agradável.
Interface responsiva
Formate elementos da interface com base no tamanho da tela. Os botões, cards
e campos de texto que ficam em tela cheia nas telas pequenas precisam ter uma largura
adequada e funcional em telas grandes. Não deixe caixas de diálogo e outras janelas
modais preencherem toda a tela. Posicione os menus de contexto e outros
pop-ups relacionados a elementos adjacentes ao elemento selecionado pelo usuário
em vez de centralizados na tela.
Incorporação de atividades
Atualize seus apps legados baseados em atividades com layouts de vários painéis em telas
grandes. Não é necessário refatorar o código. Configure seus layouts em XML ou com algumas
chamadas da API Jetpack WindowManager.
Próximas etapas
Para saber mais sobre o desenvolvimento de interfaces para uma UX otimizada, consulte os seguintes guias
para desenvolvedores:
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,["# UX\n\nTIER 2 --- Large screen optimized\n| **Objective:** Make your app [large screen\n| optimized](/docs/quality-guidelines/large-screen-app-quality#large_screen_optimized) by meeting the [LS-U1](/docs/quality-guidelines/large-screen-app-quality#LS-U1) through [LS-U4](/docs/quality-guidelines/large-screen-app-quality#LS-U4) user interface requirements of the [Large screen app\n| quality](/docs/quality-guidelines/large-screen-app-quality) guidelines.\n\nTo users, the user interface is the app. The UI determines the user experience,\nwhich determines user satisfaction, app usage, app purchases, customer\nretention.\n\nLarge screens offer expansive display space for innovative, accommodative UIs\nthat provide a UX small screens can't replicate.\n\nOptimize your app for large screens by including the following UI elements:\n\n- Navigation rail or navigation drawer\n- Large touch targets\n- Well-placed menus and dialogs\n- Multipane layouts\n\nAdaptive layouts\n----------------\n\nCreate adaptive layouts that optimize your app's UI on screens large and small.\nDesign and build for multiple form factors simultaneously. Future-proof your app\nfor new device types.\n\nCanonical layouts\n-----------------\n\nTake advantage of proven large screen layouts to make your app UX exceptional.\nCreate a list‑detail, supporting pane, or feed layout to make more content\nmore manageable and more enjoyable.\n\nResponsive UI\n-------------\n\nFormat UI elements based on screen size. Constrain the width of buttons, cards,\nand text fields that are full width on small screens to a functionally\nappropriate size on large screens. Don't let dialog boxes and other modal\nwindows fill the entire screen. Position context menus and other\nelement‑related pop‑up displays adjacent to the element the user\nselected, not centered on screen.\n\nActivity embedding\n------------------\n\nUpdate your activity‑based legacy apps with multipane layouts on large\nscreens. No code refactoring required. Configure your layouts in XML or with a\nfew Jetpack WindowManager API calls.\n\nNext steps\n----------\n\nTo learn about UI development for optimized UX, see the following developer\nguides:\n\n- [About adaptive layouts](/develop/ui/compose/layouts/adaptive)\n- [Canonical layouts](/develop/ui/compose/layouts/adaptive/canonical-layouts)\n- [Build responsive navigation](/develop/ui/views/layout/build-responsive-navigation)\n- [Activity embedding](/develop/ui/views/layout/activity-embedding)"]]
