El diseño adaptable es la práctica de crear diseños que se adapten a puntos de interrupción y dispositivos específicos.
Para implementar diseños adaptables de manera eficaz, haz lo siguiente:
Primero, considera el ancho de la clase de ventana del dispositivo para determinar los cambios de diseño y, luego, ajústalo según la altura. Brinda compatibilidad con diferentes tamaños de pantalla.
Android aprovecha los conceptos de diseño responsivo, similares al desarrollo web, y emplea imágenes y cuadrículas flexibles para crear diseños que respondan de manera eficaz a su contexto.
Permite que los diseños respondan a una variedad de tamaños con métodos adaptables: redistribución, revelación y cambio de presentación.
Evita bloquear tu app solo en orientación vertical. Esto provoca el efecto de letterboxing cuando se cambia el tamaño de la app.
Qué no debes hacer
Para obtener lineamientos de diseño sobre la adaptación de diseños a tamaños de pantalla expandidos, lee la guía para desarrolladores Cómo brindar compatibilidad con diferentes tamaños de pantalla en Compose y la página Aplicación de diseño M3. También puedes consultar la galería canónica de pantallas grandes de Android para inspirarte y obtener información sobre la implementación de diseños de pantallas grandes.
Piensa en la adaptación
La adaptación debe ser la opción predeterminada cuando diseñes tu app. El mercado de dispositivos móviles de Android está en constante evolución, por lo que no puedes pensar solo en los teléfonos como dispositivos móviles. En cambio, debe incluir todo, desde teléfonos, dispositivos plegables, tablets y todo lo que se te ocurra.
Si bien es posible que ciertas funciones y casos de uso no tengan sentido en todos los tamaños de pantalla o factores de forma, el diseño adaptable permite a los usuarios tener más libertad en cuanto a ergonomía, usabilidad y calidad de la app.
Métodos y calidad
Puedes comenzar diseñando pantallas clave (comunicar los conceptos esenciales o tu app) con tamaños de clase como puntos de interrupción para que actúen como lineamientos para el resto de la app. Estas experiencias destacadas pueden resaltar las cualidades diferenciadas de adaptación y factor de forma. También puedes diseñar contenido para que sea responsivo a nivel fundamental anotando cómo se debe restringir, expandir o redistribuir el contenido.
En este ejemplo, la navegación y el contenido se redistribuyen, se flexionan y se ajustan para mejorar la navegación ergonómica. La cuadrícula de diseño se expande de orientación vertical a varias columnas. La dirección en la barra de la app y los filtros se redistribuyen y se flexionan para ajustarse a la cuadrícula de diseño.
Qué debes hacer
Qué no debes hacer
Qué debes hacer
Qué debes hacer
Qué no debes hacer
Asegúrate de que las entradas y los botones no estén estirados.
Piensa en términos de contención y paneles.
Usa el concepto de contención de paneles para agrupar contenido para diseños adaptables. Por ejemplo, el ejemplo utilizado es una pantalla de detalles, un panel que se podría mostrar en un diseño de lista-detalles.
Los tamaños compactos deben ajustarse a un diseño de un panel.
El tamaño mediano puede usar diseños de 1 a 2 paneles.
Los tamaños grande y extragrande pueden usar diseños de varios paneles.
Usa contenedores intrínsecos y visuales para agrupar elementos. Los paneles pueden entrar, ocultarse, expandirse, restringirse o aparecer. Pensar con paneles facilita el diseño en todos los dispositivos móviles.
Si bien los paneles no son esenciales en pantallas grandes, debes pensar en el contenido en agrupaciones de contención para obtener flexibilidad.
Permite que los elementos se desplacen y se vuelvan a organizar enfocándote en cómo se adaptan a la cuadrícula. Considera el cambio vertical de los elementos y combínalo con restricciones y cambios de presentación.
Considera la escala y la cantidad de contenido que se muestra.
Una pequeña cuadrícula de videos en un teléfono se vuelve ajustada y abrumadora en una tablet. Actualiza la escala del elemento de la IU según el tamaño de la pantalla, la densidad y la entrada.
Una app de alta calidad debe cumplir con el nivel diferenciado en los lineamientos de calidad de la app principal y de la pantalla grande.
Para obtener más información sobre los diseños, consulta la página Descripción del diseño de Material Design 3 (M3).
Aprovecha los tamaños únicos de los factores de forma.
No olvides los tamaños de pantalla más pequeños ni las diferentes relaciones de aspecto, ya que los teléfonos Android tienen una variedad de tamaños y los dispositivos plegables pueden incluir una pequeña pantalla de portada que puede mostrar tu app.
Para los diseños basados en controles, como los reproductores multimedia, permite que los controles se redistribuyan y que el contenido se revele.
Para ayudar a los usuarios a realizar ajustes, usa un elemento de anclaje, como un botón de reproducción grande, para adaptar el contenido y el diseño destacado se convierte en el fondo de la pantalla de portada.
Más allá de las clases de tamaño
Si bien el tamaño de la ventana es un factor común para el diseño adaptable, tu app también debe estar lista para que los usuarios conecten monitores y dispositivos de entrada, vean contenido a varias distancias y cambien la postura de su dispositivo. Es posible verificar estos
cambios con la API de mediaQuery, que te permite agregar matices cuando
diseñas cómo tu app adapta elementos de la IU específicos a ciertos casos de uso.
Adapta el diseño de tu app a nivel de componente o panel, en lugar de diseñar pantallas completas por tamaño, entrada, factor de forma y postura.
Para obtener más información sobre la interacción de entrada, consulta las guías de interacción de la experiencia de escritorio.
Consulta un caso práctico de ejemplo, Pawparrazzi, creado y diseñado con las APIs adaptables y la orientación de diseño más recientes.
