Otimizado para telas grandes
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
NÍVEL 2: diretrizes de Qualidade de apps para telas
grandes que
preparam seu app para telas grandes e pequenas.
APPS OTIMIZADOS PARA TELAS GRANDES aproveitam as telas expansivas de
dispositivos com tela grande para oferecer uma experiência do usuário mais produtiva e envolvente.
Os apps otimizados são criados com layouts responsivos/adaptáveis que estão em conformidade com
orientações de retrato e paisagem, o modo de várias janelas e os estados do dispositivo dobrado e
desdobrado. As colunas e gavetas de navegação melhoram uma interface do usuário
que formata e posiciona dinamicamente elementos como botões, campos de texto
e caixas de diálogo para uma experiência do usuário ideal.
Os apps otimizados para telas grandes oferecem suporte à navegação pelo teclado,
atalhos de teclado, zoom do mouse e trackpad, cliques com o botão direito do mouse e comportamento de passar o cursor.
O que fazer e o que não fazer
- Criar layouts de dois painéis
- Usar layouts de grade e coluna
- Substituir barras de navegação por grades e gavetas de navegação
- Usar a incorporação de atividades em apps legados e com várias atividades
- Suporte a funcionalidades avançadas de teclado, mouse e trackpad
- Alongar elementos da interface (campos de texto, botões, caixas de diálogo) para preencher o espaço extra
- Esticar ou cortar imagens
- Deixar painéis ou páginas com largura total
Diretrizes
Siga as diretrizes do nível 2 se quiser otimizar seus apps para telas grandes.
Ofereça suporte a telas de todos os tamanhos em dispositivos de todos os tipos com layouts responsivos/adaptáveis que proporcionam uma experiência ideal ao usuário.
Diretrizes LS-U1 a LS-U4
O quê?
Os layouts de apps estão em conformidade com as dimensões de telas grandes. A interface do app inclui:
- Grades e gavetas de navegação de ponta
- Layouts de grade que acomodam mudanças de tamanho de janela
- Layouts de coluna
- Painéis de borda finais que são abertos por padrão em telas grandes
Os layouts de dois painéis aproveitam o espaço amplo na tela. Os apps multiatividades implementam a incorporação de atividades para criar layouts de vários painéis de atividades lado a lado.
As áreas de toque são grandes e acessíveis. Drawables interativos são focalizáveis.
Por quê?
Os dispositivos de tela grande abrangem uma variedade de formatos, incluindo tablets, dobráveis e dispositivos ChromeOS. Os tamanhos das telas variam. Os dispositivos costumam ser usados principalmente na orientação de paisagem.
Como?
Consulte a visão geral da UX.
Suporte a dispositivos de entrada de hardware externos para aumentar a usabilidade do app e a satisfação do usuário.
Diretrizes LS-I3 a LS-I9
O quê?
O app oferece suporte avançado a entradas de teclado, mouse e trackpad. Os menus "opções" podem ser acessados pelo comportamento de clique com o botão direito do mouse e do trackpad (botão secundário do mouse ou toque secundário). O conteúdo do app pode ser ampliado usando a roda de rolagem do mouse e os gestos de pinça do trackpad. Os elementos da interface têm estados de passagem do cursor.
Por quê?
Periféricos como teclados, mouses e trackpads geralmente são conectados a dispositivos de tela grande. Os dispositivos ChromeOS costumam ter um teclado e um trackpad integrados. Os usuários estão acostumados a usar atalhos de teclado, vários botões do mouse, a roda de rolagem do mouse e gestos do trackpad.
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,["# Large screen optimized\n\nTIER 2 --- [Large screen app\nquality](/docs/quality-guidelines/large-screen-app-quality) guidelines that\nprepare your app for displays large and small.\n\nAPPS OPTIMIZED FOR LARGE SCREENS take advantage of the expansive displays of\nlarge screen devices to provide a productive, engaging user experience.\n\nOptimized apps are built with responsive/adaptive layouts that conform to\nportrait and landscape orientations, multi‑window mode, and folded and\nunfolded device states. Navigation rails and drawers enhance a user interface\nthat dynamically formats and positions elements such as buttons, text fields,\nand dialogs for an optimal user experience.\n\nApps optimized for large screens provide support for keyboard navigation,\nkeyboard shortcuts, and mouse and trackpad zoom, \"right‑click,\" and hover\nbehavior.\n\nDo's and don'ts\n---------------\n\ncheck_circle\n\n### Do\n\n- Create two-pane layouts\n- Use grid and column layouts\n- Replace navigation bars with navigation rails and drawers\n- Use activity embedding in legacy, multi-activity apps\n- Support advanced keyboard, mouse, and trackpad functionality \ncancel\n\n### Don't\n\n- Stretch UI elements (text fields, buttons, dialogs) to fill extra space\n- Stretch or crop images\n- Make panels or sheets full width\n\nGuidelines\n----------\n\nFollow the Tier 2 guidelines to optimize your apps for large screens. \n\n### [UX](/docs/quality-guidelines/large-screen-app-quality#t2_ux)\n\nSupport screens of all sizes on devices of all kinds with responsive/adaptive layouts that provide an optimal user experience.\n\nGuidelines [LS-U1](/docs/quality-guidelines/large-screen-app-quality#LS-U1) through [LS-U4](/docs/quality-guidelines/large-screen-app-quality#LS-U4) \n\n#### What\n\nApp layouts conform to large screen dimensions. App UI includes:\n\n- Leading-edge navigation rails and drawers\n- Grid layouts that accommodate window size changes\n- Column layouts\n- Trailing-edge panels that are open by default on large screens\n\nTwo-pane layouts take advantage of large screen space. Multi‑activity apps implement activity embedding to create multi‑pane layouts of activities side by side.\n\nTouch targets are large and reachable. Interactive drawables are focusable. \n\n#### Why\n\nLarge screen devices encompass a variety of form factors, including tablets, foldables, and ChromeOS devices. Display sizes vary. Devices are often---sometimes primarily---used in landscape orientation. \n\n#### How\n\nSee the [UX](/guide/topics/large-screens/ux) overview. \n\n### [Keyboard, mouse, and trackpad](/docs/quality-guidelines/large-screen-app-quality#t2_keyboard_mouse_trackpad)\n\nSupport external hardware input devices to increase app usability and user satisfaction.\n\nGuidelines [LS-I3](/docs/quality-guidelines/large-screen-app-quality#LS-I3) through [LS-I9](/docs/quality-guidelines/large-screen-app-quality#LS-I9) \n\n#### What\n\nApp provides enhanced support for keyboard, mouse, and trackpad input. Options menus are accessible by mouse and trackpad right‑click (secondary mouse button or secondary tap) behavior. App content can be zoomed using the mouse scroll wheel and trackpad pinch gestures. UI elements have hover states. \n\n#### Why\n\nPeripherals such as keyboards, mice, and trackpads are often connected to large screen devices. ChromeOS devices typically have a built‑in keyboard and trackpad. Users are accustomed to using keyboard shortcuts, multiple mouse buttons, mouse scroll wheel, and trackpad gestures. \n\n#### How\n\nSee the [Keyboard, mouse, and trackpad](/guide/topics/large-screens/keyboard-mouse-and-trackpad-tier-2) overview."]]
