Diseños de apps
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Cuando diseñes apps para Wear OS, ten en cuenta los diseños que elijas
para cada experiencia. Como Wear OS se ejecuta en pantallas circulares, el recorte es
comunes que en los dispositivos de mano, hay dos categorías de diseños canónicos
que debes tener en cuenta a la hora de diseñar tu aplicación.
Los diseños sin desplazamiento se centran en información visible y ofrecen valor a los usuarios con
interacción escasa o nula. Por eso, puede ser difícil crear
comportamiento responsivo en estos diseños:
- Realiza pruebas en una combinación de idiomas, escala de fuente, dispositivos y variables
contenido.
- Usa diseños que no sean desplazables solo cuando el contenido sea conocido o controlado.
con anticipación o si debes usar un diseño específico.
- Aplica los márgenes superiores, inferiores y laterales recomendados al diseño.
- Define los márgenes en valores porcentuales en los lugares donde el contenido podría,
recortarse.
- Organiza los elementos para aprovechar al máximo el espacio dentro de la
la pantalla y a mantener el equilibrio
entre distintos tamaños de dispositivos.
Para páginas que contienen más información de la que puede caber en una sola pantalla
que son necesarios para soportar recorridos más largos y más inmersivos, usa un desplazamiento
vista.
Las vistas con desplazamiento que usan prácticas de diseño adaptable suelen adaptarse a una variedad de
tamaños de pantalla. Sin embargo, en algunos casos especiales, puedes usar un punto de interrupción
anular dimensiones y aumentar los diseños que muestran opciones adicionales, mejoran
la visibilidad o hacer que el contenido se ajuste mejor a la pantalla. El siguiente ejemplo
muestra cómo, en pantallas más grandes, se amplían los dos botones inferiores:
Kits de diseño de Figma
Visita la página de descargas del kit de diseño para explorar los diseños con funciones
componentes, opciones y recomendaciones para crear diferentes apps y tarjetas
los diseños que siguen las mejores prácticas.
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-07-27 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2025-07-27 (UTC)"],[],[],null,["# App layouts\n\nWhen designing apps for Wear OS, be intentional about the layouts you choose for\neach experience. Because Wear OS runs on circular displays and clipping is more\ncommon than on handheld devices, there are two categories of canonical layouts\nthat you should consider when designing your app.\n\nNon-scrolling app layouts\n-------------------------\n\nNon-scrolling layouts focus on glanceable information and offer users value with\nlittle or no interaction. Because of that, it can be challenging to build\nresponsive behavior into these layouts:\n\n### Build for responsive non-scrolling views\n\n- Test on a combination of languages, font scaling, devices, and variable content.\n- Use non-scrollable layouts only when the content is known or controlled ahead of time, or if you must use a specific design.\n- Apply the [recommended top, bottom, and side margins](/design/ui/wear/guides/components/dialogs#adaptive-layouts) to the layout.\n- Define margins in percentage values in places where content might otherwise be clipped.\n- Arrange elements to make the best possible use of the space within the screen and maintain balance across different device sizes.\n\nScrolling app layouts\n---------------------\n\nFor pages that contain more information than can fit on a single screen, or\nwhich are required to support longer and more immersive journeys, use a scroll\nview.\n\n### Build for responsive scroll views\n\n- Apply the [recommended top, bottom, and side margins](/design/ui/wear/guides/components/dialogs#adaptive-layouts).\n- Define outer margins in percentage values to prevent clipping at the beginning and end of the scrollable container.\n- Apply margins in fixed DP values between UI elements.\n\n### How to build for adaptive scroll views using a screen size breakpoint\n\nScroll views that use responsive design practices usually adapt to a range of\nscreen sizes. However, in some special cases, you can use a breakpoint to\noverride dimensions and augment layouts which show additional options, improve\nglanceability, or make content fit better on screen. The following example\nshows how, on larger screens, the bottom two buttons are widened:\n\nFigma design kits\n-----------------\n\n[Visit the design kit downloads page](/design/ui/wear/guides/foundations/download) to explore design layouts with built-in\ncomponents, options, and recommendations to create different app and tile\ndesigns that follow best practices."]]
