Cómo comenzar a usar diseños adaptables

El ecosistema de Wear OS se compone de dispositivos que tienen una amplia variedad de tamaños de pantalla. El uso de principios de IU adaptables es fundamental para ofrecer una 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, sin importar el tamaño de pantalla en el que se rendericen.

Las IUs adaptables cambian de manera responsiva con componentes y métodos integrados directamente en la lógica de diseño. Estos diseños también usan puntos de interrupción del tamaño de la pantalla (que aplican un diseño diferente en distintos 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 para tener en cuenta cuando diseñes nuevas experiencias

Tamaños de pantalla

Tipos de diseños

Cuando se diseña para diseños adaptables en la pantalla redonda, las vistas de 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 el recorte y proporcionar un ajuste proporcional de los elementos.
Vistas sin desplazamiento
Todos los márgenes se deben definir en porcentajes y las restricciones verticales deben definirse de modo que el contenido principal del medio se pueda estirar para llenar el área disponible.

Agrega valor a través de diseños adaptables y prácticas de diseño

Cuando se diseña para diseños adaptables en la pantalla redonda, las vistas de 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 amplias. Los ejemplos se usan solo con fines ilustrativos. Consulta cada componente o página de la plataforma para obtener una guía detallada, contextual y responsiva.

Más contenido de un vistazo
Los diseños responsivos permiten que quepan más chips, más tarjetas, más líneas de texto y más botones en una sola pantalla
Más elementos de contenido visibles
Usa diseños nuevos, aplicados en puntos de interrupción de tamaño de pantalla definido, para permitir la introducción de nuevo contenido cuando sea posible, lo que brinda al usuario un valor adicional en dispositivos con tamaños de pantalla más grandes.
Visibilidad mejorada
Usa espacio adicional en la pantalla para proporcionar contenedores más grandes, texto más grande, anillos más gruesos y una visualización de datos más detallada para brindar una mejor visibilidad a los usuarios.
Usabilidad mejorada
Usa espacio adicional en la pantalla para proporcionar objetivos táctiles más grandes, una mejor jerarquía visual y espacio adicional entre los elementos de contenido para que las interfaces sean más fáciles y cómodas de interactuar.
Composiciones optimizadas
Usa nuestros componentes y plantillas actualizados para ofrecer una mejor apariencia de nuestras IUs en todos los tamaños de pantalla.

Calidad de la app

Nuestros lineamientos de calidad están organizados en tres niveles. Cumple con los lineamientos de los tres niveles para brindar la mejor experiencia posible a los usuarios.

Lineamientos de calidad

Compatible con todos los tamaños de pantalla
Asegúrate de que la 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
Entrega más contenido a los usuarios en dispositivos que lo permitan y usa diseños responsivos que se adapten automáticamente a diferentes tamaños de pantalla.

Primeros pasos

Adaptable y diferenciado
Aprovecha al máximo el espacio adicional con puntos de interrupción para ofrecer nuevas experiencias potentes en pantallas más grandes, lo cual no es posible 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 IU se adapten sin problemas a una variedad de tamaños de dispositivos.

Nuestros diseños canónicos se desarrollaron cuidadosamente para ofrecer una experiencia de alta calidad en todos los tamaños de pantalla.

Diseños canónicos