Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Material 3 Expressive se inclina hacia el lenguaje de formas de una manera mucho más expansiva y significativa, ya que utiliza formas de contenedor flexibles para aplicar el redondeo y el afilado de los radios de las esquinas para admitir listas de transformación de formas y estados de botones.
El sistema de diseño también presenta botones que se ajustan a los bordes como un patrón de diseño icónico y propio para dispositivos redondos en Wear OS.
Cómo mantener el escalamiento de los elementos de la IU
Cuando diseñas diseños en una pantalla redonda, las vistas de desplazamiento y las que no son de desplazamiento tienen requisitos únicos para mantener el ajuste de escala de los elementos de la IU y conservar un diseño y una composición equilibrados.
Vistas de desplazamiento
En el caso de las vistas de desplazamiento, usa porcentajes para definir todos los márgenes superior, inferior y laterales para evitar el recorte y proporcionar un ajuste de escala proporcional de los elementos.
Todos los márgenes superior, inferior y laterales deben definirse en porcentajes para evitar el recorte y proporcionar un ajuste proporcional de los elementos.
Vistas sin desplazamiento
En el caso de las vistas que no se desplazan, usa porcentajes y restricciones verticales para todos los márgenes. De esta manera, el contenido principal del medio puede estirarse para llenar el área disponible.
Todos los márgenes deben definirse en porcentajes, y las restricciones verticales deben definirse de manera que el contenido principal del medio se pueda expandir para llenar el área disponible.
Niveles de lineamientos de calidad
Nuestros lineamientos de calidad se organizan en tres niveles. Habilita la mejor experiencia posible para tus usuarios cumpliendo con los lineamientos de los tres niveles.
Listo para todos los tamaños de pantalla
Asegúrate de que tu app brinde una experiencia de calidad en todos los tamaños de pantalla.
Crea diseños que usen por completo el espacio disponible de la app.
Diseño adaptable y optimizado
Ofrece más contenido a los usuarios en los dispositivos que lo permiten y utiliza diseños responsivos que se adapten automáticamente a diferentes tamaños de pantalla.
Adaptativo y diferenciado
Aprovecha al máximo el espacio adicional utilizando puntos de interrupción para ofrecer nuevas experiencias potentes en pantallas más grandes que no son posibles en dispositivos con pantallas más pequeñas.
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-26 (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-26 (UTC)"],[],[],null,["# Design quality tiers\n\nMaterial 3 Expressive leans into shape language in a much more expansive and\nmeaningful way by utilizing flexible container shapes to apply rounding and\nsharpening of corner radii to support shape morphing lists and button states.\nThe design system also introduces edge-hugging buttons as an ownable and iconic\ndesign pattern for round devices on Wear OS.\n\nMaintain UI element scaling\n---------------------------\n\nWhen designing layouts on a round screen, scrolling and non-scrolling\nviews each have unique requirements to maintain UI element scaling and preserve\na balanced layout and composition.\n\n\n**Scrolling views**\n\nFor scrolling views, use percentages to define all top, bottom, and side\nmargins to avoid clipping and provide proportional scaling of elements.\n\nAll top, bottom, and side margins should be defined in percentages to avoid\nclipping and provide proportional scaling of elements. \n**Non-scrolling views**\n\nFor non-scrolling views, use percentages and vertical constraints for all\nmargins. That way, the main content in the middle can stretch to fill the\navailable area.\n\nAll margins should be defined in percentages and vertical constraints should be\ndefined such that the main content in the middle can stretch to fill the\navailable area.\n\n\u003cbr /\u003e\n\nTiers of quality guidelines\n---------------------------\n\nOur quality guidelines are organized into three tiers. Enable the best possible\nexperience for your users by meeting guidelines in all three tiers.\n\n\n**Ready for all screen sizes**\n\nEnsure your app is delivering a quality experience across all screen sizes.\nCreate layouts that fully use the available app space. \n\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**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\u003cbr /\u003e\n\n| **Caution:** A larger display size should *never* display less information than ones that are smaller than it, this is especially relevant for custom behaviors added in at the breakpoint. A common example of this is when components or text sizes are increased past the breakpoint and end up showing less are the larger screens. Screens should always show \"more value\" and never \"less value\" with increasing size."]]
