Diseño para objetos plegables: posturas, tamaños de ventanas y gestos
Cómo diseñar aplicaciones para teléfonos plegables: diseños plegados y desplegados, posturas de mesa y de libro, clases de tamaño de ventanas, continuidad y gestos cerca del pliegue.
Idea clave
Diseñe diseños plegables según el tamaño de ventana disponible, no por el modelo de dispositivo: las clases de tamaño de ventana de Android tratan los anchos inferiores a 600 dp como compactos, de 600 a 840 dp como medianos y de 840 a 1200 dp como expandidos. Admite posturas plegadas, abiertas y medio abiertas (sobre la mesa), mantiene el lugar del usuario cuando el dispositivo se pliega o despliega y mantiene el contenido clave y los objetivos táctiles lejos del pliegue.
Posturas
La documentación para desarrolladores de Android describe los elementos plegables en varias posturas: plegado, abierto en plano, abierto en plano girado hacia el paisaje y medio abierto, conocido como tablero. El pliegue divide la pantalla en dos porciones, ya sea como un área flexible de una pantalla o como una bisagra entre dos pantallas, y puede oscurecer parte de la pantalla.
Diseño por clases de tamaño de ventana.
En lugar de apuntar a dispositivos específicos, Android agrupa el espacio disponible en clases de tamaño de ventana. El ancho compacto (menos de 600 ppp) cubre casi todos los teléfonos en posición vertical; el ancho medio (600 a 840 dp) cubre la mayoría de las tabletas en vertical y muchas pantallas interiores grandes desplegadas en vertical; El ancho ampliado (840 a 1200 ppp) cubre la mayoría de las tabletas y pantallas grandes desplegadas en posición horizontal. Las clases grandes y extragrandes cubren tabletas y computadoras de escritorio más grandes.
Diseños que utilizan el pliegue
Patrones comunes:
- Plegado: la disposición normal del teléfono.
- Plano abierto: diseños de lista-detalle o de dos paneles, con cada panel en un lado del pliegue.
- Tablero: contenido como vídeo en la mitad superior, controles en la mitad inferior.
- Nunca coloques un botón, una línea de texto o una cara en el pliegue.
Continuidad
Cuando alguien despliega un dispositivo a mitad de una tarea, la aplicación debe continuar donde estaba: la misma posición de desplazamiento, el mismo borrador, la misma reproducción. Trate el plegado y el despliegue como un cambio de diseño, no como un reinicio, y anime la transición para que las personas puedan seguir dónde se movió el contenido.
Gestos y alcance
Las pantallas desplegadas más grandes cambian el alcance del pulgar: coloque controles frecuentes cerca de los bordes donde descansan las manos y evite deslizar los bordes que entren en conflicto con los gestos del sistema. El movimiento basado en la física también ayuda aquí: los paneles que se deslizan y se asientan con resortes hacen que el cambio entre posturas se sienta natural en lugar de discordante.
Principios clave para recordar
- Diseño por clase de tamaño de ventana, no por modelo de dispositivo
- Compacto < 600 ppp, mediano 600–840 ppp, ampliado 840–1200 ppp
- Admite posturas plegadas, abiertas y sobre la mesa.
- Mantenga el contenido y los controles fuera del pliegue
- Preservar el estado y animar los cambios de postura.
Preguntas frecuentes
Fuentes
- Learn about foldables — Desarrolladores Android
- Use window size classes — Desarrolladores Android