Las apps que emplean diseños responsivos y se adaptan automáticamente a diferentes tamaños de pantalla ofrecen un valor adicional a los usuarios y proporcionan experiencias más productivas y atractivas.
Los diseños responsivos formatean y posicionan de forma dinámica elementos como botones, campos de texto y diálogos para lograr una experiencia del usuario óptima. Ofrece automáticamente a los usuarios de tu app un valor adicional en pantallas más grandes con prácticas de diseño responsivo. Ya sea que se trate de más texto visible de un vistazo, más acciones en la pantalla o objetivos táctiles más grandes y accesibles, las prácticas responsivas proporcionan una experiencia mejorada para los usuarios de pantallas más grandes.
Agrega valor con el diseño responsivo
Qué debes hacer
- Usa la biblioteca de componentes de Compose de M3, que tiene un comportamiento responsivo y adaptable integrado.
- Utiliza diseños responsivos, que se ajustan automáticamente y sin problemas para llenar el espacio disponible en todos los tamaños de pantalla.
Qué no debes hacer
- No estires los elementos de la IU, incluidos los campos de texto, los botones y los diálogos, para llenar espacio adicional.
- Aumenta el tamaño de las fuentes, a menos que tengan un propósito principalmente gráfico.
Crea tarjetas y apps responsivas para Wear OS
Las IU responsivas se expanden 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.
Cuando diseñas diseños responsivos en una pantalla redonda, las vistas con desplazamiento y sin desplazamiento tienen requisitos únicos para mantener la escala de los elementos de la IU y preservar un diseño y una composición equilibrados. En el caso de las vistas de desplazamiento, usa porcentajes para definir todos los márgenes superior, inferior y lateral para evitar recortes y proporcionar un escalamiento proporcional de los elementos. Para las vistas sin desplazamiento, 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.
Vistas de desplazamiento
Todos los márgenes superior, inferior y lateral deben definirse en porcentajes para evitar cortes 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.
Ejemplos
En las siguientes imágenes, se muestran ejemplos de apps responsivas y optimizadas.
Botones ajustados a los bordes
Lista de tarjetas
Lista de interruptores y botones
Mosaico con tarjetas de imágenes
Lista de tarjetas con imágenes
Tarjeta con gráfico
