Tablet Patterns

MD3 define tres layouts para tablet: (1) List-Detail muestra dos paneles lado a lado en ancho expandido, colapsa a un solo panel en compacto. (2) Feed usa columnas adaptativas con minSize 180dp, ajustando automaticamente la cantidad de columnas. (3) Supporting Pane usa split 70:30 en expandido, 50:50 en medio, y apila verticalmente en compacto.

MD3 define cinco clases de ancho: Compact (<600dp), Medium (600-839dp), Expanded (840-1199dp), Large (1200-1599dp), Extra-large (>=1600dp). Tablets caen en Medium a Expanded. NavigationSuiteScaffold cambia automaticamente: bottom nav en compact, navigation rail en expanded, navigation drawer en 840dp+.

En pantallas de 600dp+, reemplazar la bottom bar con un navigation rail vertical de 72dp de ancho. Los items llevan icono + label debajo. Max 7 destinos. El rail no se oculta al hacer scroll. En 840dp+ se puede expandir a navigation drawer (256dp) con labels junto al icono.

iPadOS provee cuatro efectos de pointer: Highlight (controles pequenos sin fondo, 37pt alto), Lift (elementos medianos con fondo, escala con sombra), Hover (objetos grandes), Automatic (default recomendado). El pointer default es un circulo de 19pt. En campos de texto muta a beam que coincide con line-height.

iPadOS soporta touch y pointer simultaneamente (trackpad con una mano, pantalla con la otra). El pointer se auto-oculta para fomentar cambio fluido entre input methods. Drag-and-drop responde instantaneamente sin press-and-hold delay. Nunca agregar features exclusivas de pointer ni cambiar densidad segun el input.

Las regiones de toque deben usar ~12pt de padding para elementos con bisel y ~24pt para elementos sin bisel. Las hit regions entre objetos adyacentes deben extenderse sin dejar gaps para evitar morphing innecesario del pointer. Las formas custom del pointer deben mantener peso visual similar al default de 19pt.

Los dedos humanos no cambian de tamano en pantallas mas grandes. El fingertip promedio mide 1.6-2cm. Apple exige 44pt minimo, MD3 exige 48dp minimo, ambos identicos para phone y tablet. Investigaciones sugieren que tablets podrian necesitar targets AUN MAYORES por la distancia de visualizacion. Nunca reducir targets en tablet por "hay mas espacio".

NNG confirma que las UIs de tablet no deben ser phones escalados. Requieren layouts construidos a proposito que aprovechen el espacio. Los websites responsivos funcionan razonablemente bien en tablets con ajustes menores, pero las apps nativas necesitan adaptaciones especificas. Escalar una UI de phone a tablet desperdicia el 40-60% del espacio disponible.

En iPadOS, las "prominent scenes" se presentan modalmente con fondo atenuado. Deben ser utiles por si solas (no dialogos de opciones para otra escena), incluir botones Cancel/Close/Done, y estar dedicadas a contenido especifico. Cada vista de la app debe funcionar como ventana independiente en Stage Manager.

El panel de soporte usa 70% para contenido principal y 30% para contenido complementario en pantallas expandidas (840dp+). En medium (600-839dp) cambia a 50:50. En compact (<600dp) el contenido de soporte baja debajo del principal o se mueve a un bottom sheet. Nunca dar mas espacio al panel secundario que al primario.

Los feeds deben usar columnas adaptativas con tamano minimo de 180dp en vez de fijar el numero de columnas. El sistema calcula automaticamente cuantas columnas caben. En compact se muestra como columna unica con scroll. Nunca hardcodear 2 o 3 columnas; dejar que el ancho disponible dicte la cantidad.

En campos de texto el pointer muta a un beam que coincide con el line-height, haciendo snap vertical por linea (previene colocacion ambigua entre lineas) mientras da precision pixel-level horizontal. Esta diferencia entre touch (seleccion por palabra) y pointer (seleccion por caracter) es fundamental para productividad en tablet con teclado.

UIPointerRegion soporta latchingAxes que mantiene el efecto del pointer adjunto durante arrastre a lo largo de un eje especifico, con rubberbanding en el eje no-anclado. Util para sliders, resize handles y controles lineales donde el usuario arrastra en una sola direccion.

El pointer permite auto-ocultar controles como toolbars y playback controls que reaparecen en hover. Pero estos controles deben permanecer accesibles en modo touch (sin hover). Solucion: mostrar controles por default, auto-ocultarlos solo cuando se detecta input de pointer, y revelar con tap en modo touch.

Las tablets se usan frecuentemente en ambas orientaciones, especialmente con soporte/stand. Ambas orientaciones deben ser completamente funcionales. En landscape, preferir layouts de dos paneles (list-detail, supporting pane). En portrait, colapsar a un panel con navegacion. Nunca bloquear orientacion excepto en juegos o video.