Cómo comenzar a usar diseños adaptables
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
El ecosistema de Wear OS está compuesto por dispositivos que tienen una amplia variedad de tamaños de pantalla. El uso de principios de IU adaptables es fundamental para ofrecer la experiencia de la más alta calidad a todos los usuarios.
¿Qué es la IU adaptable?
Las IUs adaptables se estiran y cambian para aprovechar al máximo todo el espacio de pantalla disponible, independientemente del tamaño de la pantalla en la que se renderizan.
Las IUs adaptables cambian de forma responsiva, con componentes y métodos compilados directamente en la lógica del diseño. Estos diseños también utilizan puntos de inflexión de tamaño de pantalla (que aplican un diseño diferente en diferentes tamaños de pantalla) para crear una experiencia aún más enriquecida para los usuarios.
Tamaños de pantalla clave
Obtén información sobre los tamaños de referencia clave que debes tener en cuenta cuando diseñes experiencias nuevas
Tamaños de pantalla
Tipos de diseños
Cuando diseñas para diseños adaptables en la pantalla redonda, las vistas con desplazamiento y sin desplazamiento tienen requisitos únicos para escalar los elementos de la IU y mantener un diseño y una composición equilibrados.
Vistas de desplazamiento
Todos los márgenes superior, inferior y lateral deben definirse en porcentajes para evitar recortes y proporcionar una escala proporcional de los elementos.
Vistas sin desplazamiento
Todos los márgenes deben definirse en porcentajes, y las restricciones verticales deben definirse de modo que el contenido principal en el medio pueda estirarse para llenar el área disponible.
Agrega valor con diseños adaptables y prácticas de diseño
Cuando diseñas para diseños adaptables en la pantalla redonda, las vistas con desplazamiento y sin desplazamiento tienen requisitos únicos para escalar los elementos de la IU y mantener un diseño y una composición equilibrados.
Las siguientes imágenes son sugerencias generales; los ejemplos son solo con fines ilustrativos. Consulta cada componente o página de la plataforma para obtener orientación detallada, contextual y responsiva.
Más contenido de un vistazo
Los diseños responsivos permiten que más chips, más tarjetas, más líneas de texto y más botones se ajusten en una sola pantalla.
Más elementos de contenido visibles
Usa diseños nuevos, aplicados en puntos de inflexión de tamaño de pantalla definidos, para permitir la introducción de contenido nuevo cuando sea posible, lo que le brinda al usuario un valor adicional en dispositivos con tamaños de pantalla más grandes.
Mayor visibilidad
Usa espacio de pantalla adicional para proporcionar contenedores más grandes, texto más grande, anillos más gruesos y visualización de datos más detallada para brindar una mejor visibilidad a los usuarios.
Usabilidad mejorada
Usa espacio de pantalla adicional para proporcionar objetivos de toque más grandes, una jerarquía visual más clara y espacio adicional entre los elementos de contenido para que las interfaces sean más fáciles y cómodas de usar.
Composiciones optimizadas
Usa nuestros componentes y plantillas actualizados para ofrecer un mejor aspecto de nuestras IU en todos los tamaños de pantalla.
Calidad de la app
Nuestros lineamientos de calidad se organizan en tres niveles. Cumple con los lineamientos de los tres niveles para brindar la mejor experiencia posible a los usuarios.
Lineamientos de calidad
Listo para todos los tamaños de pantalla
Asegúrate de que tu app ofrezca una experiencia de calidad en todos los tamaños de pantalla. Crea diseños que usen por completo el espacio disponible de la app.
Comenzar
Responsivo y optimizado
Publica más contenido para los usuarios en los dispositivos que lo permitan y usa diseños responsivos que se adapten automáticamente a diferentes tamaños de pantalla.
Comenzar
Adaptativo y diferenciado
Aprovecha al máximo el espacio adicional con los puntos de inflexión para ofrecer experiencias nuevas y potentes en pantallas más grandes que no son posibles en dispositivos con pantallas más pequeñas.
Comenzar
Utiliza diseños canónicos establecidos
Usa diseños canónicos establecidos para ayudar a que tus IUs se adapten sin problemas en una variedad de tamaños de dispositivos.
Nuestros diseños canónicos se desarrollaron de forma cuidadosa para ofrecer una experiencia de alta calidad en todos los tamaños de pantalla.
Diseños canónicos
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)
[null,null,["Última actualización: 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"]]
