El diseño de Android abarca una amplia variedad de aspectos y dispositivos únicos, por lo que no basta con observar los puntos de interrupción. Los usuarios pueden ajustar y reorientar las ventanas de las apps en sus dispositivos. Con los dispositivos plegables, un solo dispositivo puede abarcar todos estos casos de uso. Es fundamental pensar en paneles para la adaptabilidad del contenido.
Cambios de orientación
No bloquees las apps en orientación vertical. Si lo haces, puede parecer un error y se crea un letterboxing no deseado cuando realizas varias tareas a la vez.
Los usuarios suelen reorientar sus dispositivos por motivos de ergonomía y para ver el contenido. Tu app debe admitir estos cambios de orientación.
En dispositivos más grandes, la orientación vertical y horizontal pueden tener efectos más sutiles a medida que pasan de un tamaño mediano a uno grande, pero la orientación horizontal proporciona un tamaño de ventana mediano con una vista vertical compacta.
Ten en cuenta las siguientes prácticas de diseño para la orientación horizontal:
Se admiten barras del sistema de borde a borde.
Decide qué componente de navegación admite mejor tu contenido, como una barra de navegación horizontal o un riel de navegación.
Considera volver a fluir el contenido o cambiar la densidad.
Los diseños horizontales pueden usar una IU de ancho medio.
La orientación horizontal puede aprovechar la altura reducida de una barra de navegación inferior orientada horizontalmente.
En el caso del contenido, intenta usar un contenedor para agregarle buzón o usa una orientación de contenido diferente cuando esté disponible, como vertical en lugar de video horizontal. El contenido de ancho completo en un diseño compacto vertical ocupa la mayor parte de la pantalla en un diseño horizontal grande. Si el contenido no se desplazó en orientación vertical, no lo hagas desplazarse en horizontal, ya que esto puede confundir a los usuarios.
La imagen principal ocupa el espacio destacado y se mantiene fija. La barra inferior de la aplicación se desacopla.
De vertical a horizontal: Ambos grupos de contenedores rotan en su lugar.
En el caso de una hoja de filtro, el componente de hoja puede cambiar a una hoja lateral. Si se necesita más atención, la hoja permanece en pantalla completa, pero se adapta a un diseño de dos columnas.
Posturas
Ten en cuenta los casos de uso de factores de forma únicos, como las posiciones de plegado (plegado, plano y de mesa).
Tu app no tiene que tener en cuenta específicamente cada posición, pero considera aprovechar una para tu app. Por ejemplo, un reproductor multimedia puede mostrar una IU de mesa y portada únicas.
Fijo
Un dispositivo plegable está en posición plana cuando se despliega. Por lo general, la pantalla tiene un tamaño de clase mediano o grande.
Plegado
Cuando un dispositivo plegable está cerrado, se encuentra en una postura plegada. En esta posición, interactúas con la pantalla externa, que suele ser compacta.
Mesa
La posición de mesa está parcialmente plegada en posición horizontal. Esta posición te permite usar diseños únicos, como controles grandes y videos horizontales.
Bisagra
Haz que tu app sea compatible con la bisagra para que el contenido fluya sin problemas y no se pierda en la bisagra. Esto podría no ser necesario en diseños de un solo panel. Sin embargo, considera si los controles y el texto deben evitar el espacio de la bisagra.
Si diseñas con una cuadrícula de diseño y paneles, permite un margen más ancho para acomodar la bisagra, como en un diseño de lista-detalles de dos paneles.
Algunos dispositivos plegables, como los trípticos, tienen varias bisagras.
Portada
Algunos teléfonos plegables pueden tener una pantalla exterior con una relación de aspecto cuadrada, como un teléfono con tapa.
Cuando diseñes para pantallas de cubierta, sigue estos lineamientos:
- Asegúrate de que las apps sean de borde a borde.
- Asegúrate de que los elementos de la IU no estén cubiertos por los cortes de la cámara.
- Mantén el enfoque en los casos de uso y la IU.
Por ejemplo, cuando un dispositivo se usa solo como reproductor multimedia, la portada puede convertirse en el fondo para revelar una vista rápida que requiere menos información.
En pantallas y relaciones de aspecto más pequeñas, considera la experiencia del contenido enfocado. La imagen principal ocupa la mayor parte de la portada para atraer visualmente, con un vistazo al título y al contenido para facilitar el desplazamiento y la legibilidad.
La cobertura debe seguir enfocándose en la entrada. Por ejemplo, cuando aparece el teclado, el mensaje es el enfoque principal.
En pantallas más pequeñas, como las de las portadas, la hoja de filtro ocupa toda la pantalla, pero la ubicación y el ajuste de escala de los botones se adaptan.
Aunque es compacto, un riel de navegación puede ser más ergonómico en una pantalla de cubierta.
Las portadas más grandes pueden aprovechar cualquier orientación de navegación. Considera cómo podrían interactuar los usuarios con el contenido.
Un riel de navegación pequeño puede evitar la IU del sistema y los cortes de la cámara, a la vez que respeta la altura condensada.
Qué debes hacer
