diseño-iphone-duo

Diseñando para iPhone Duo

Resumen

Fuente: Normas de Interfaz Humana de Apple, "Diseñando para iPhone Duo" (página nueva, 9 de septiembre de 2026). https://developer.apple.com/design/human-interface-guidelines/designing-for-iphone-duo

Principio fundamental: una sola aplicación que se redimensiona fluidamente a través de dos pantallas y muchas poses. No diseñe un diseño por pose; use clases de tamaño (ancho compacto = pantalla externa, ancho regular = pantalla interna) y deje que los componentes estándar del sistema hagan la adaptación. Todas las normas normales de iOS HIG siguen siendo aplicables.

Consulte la página anterior cuando necesite la redacción exacta o la API de desarrollador para una regla.

El hardware en un párrafo

Pantalla externa (usada cerrada): más ancha y más baja que otros iPhones, la cámara fija en una esquina y siempre visible. Pantalla interna (usada abierta): cámara oculta detrás de la pantalla hasta que esté activa. Una bisagra central permite poses de libro, plana y apoyada en el borde. Las barras de herramientas, barras de pestañas, barra de estado y la Isla Dinámica se sitúan en el lateral (eje vertical) excepto en la pantalla interna en retrato.

Lista de verificación rápida

Disposición

• Construya para redimensionar: clases de tamaño, márgenes de diseño, áreas seguras. Sin anchos fijos, nada vinculado a una única pantalla.
• Misma funcionalidad y estado en ambas pantallas y en cada pose. La pantalla interna puede agregar un nivel extra de jerarquía (Correo: lista o mensaje cuando está cerrado, ambos lado a lado cuando está abierto).
• Respete las regiones reservadas: cámara externa (siempre, crece hacia la Isla Dinámica), cámara interna (solo cuando está activa), región de plegado (solo cuando está parcialmente abierta). Use ReservedRegion (SwiftUI) / UIView.ReservedRegion (UIKit) para componentes personalizados.
• Al plegar: prefiera contenedores auto-adaptables (las vistas divididas igualan los anchos de los paneles), use un número par de columnas de cuadrícula, haga pequeños ajustes, nunca reorganizaciones drásticas.
• Vistas divididas: se expanden en la pantalla interna, se colapsan a un panel en la externa, automáticamente.
• Vistas de disposición (ArrangementView / UIArrangementViewController): dos vistas, primaria + secundaria. Dividida (lado a lado o apilada, a partir de diseños tipo HStack/VStack) o superpuesta (en capas, a partir de diseños tipo ZStack). Mantenga los contenedores de navegación fuera de ellas.

Controles verticales

• Mantenga la ubicación lateral del sistema; en general no la anule.
• El área de contenido es asimétrica: use áreas seguras para que los controles laterales (incluyendo los de otra aplicación en Vista Dividida) nunca cubran el contenido. Los controles permanecen en el mismo lado en idiomas RTL.
• Orden de la barra de herramientas, de arriba abajo: navegación principal (Atrás, Cerrar), luego acciones prominentes (Listo), luego los grupos restantes tal cual.
• El desbordamiento va de abajo arriba por defecto; establezca la prioridad de visibilidad (ToolbarItemVisibilityPriority / UIBarButtonItemVisibilityPriority) para que las acciones frecuentes (Redactar, Nueva Nota) y los elementos con distintivos permanezcan visibles.
• Agrupe elementos con ToolbarItemGroup / UIBarButtonItemGroup; nunca agregue espaciado fijo manual.
• Cada elemento de barra de herramientas no textual obtiene tanto un título como un símbolo. Minimice los botones de solo texto (permanecen en una barra horizontal).
• Espacio ajustado: las vistas centradas en navegación comprimen la barra de herramientas en desbordamiento (predeterminado); las vistas centradas en tareas minimizan la barra de pestañas en su lugar (ToolbarVerticalCompressionBehavior / UIVerticalBarCompressionBehavior).
• Use el menú de desbordamiento del sistema; los puntos suspensivos son solo para desbordamiento.
• Los controles que pertenecen a un panel no final permanecen junto a ese panel (los controles de la lista de Correo permanecen sobre la lista).
• Las interfaces de usuario inmersivas y sin desplazamiento pueden abarcar todo el ancho si nada choca con la Isla Dinámica o la barra de estado (la Calculadora va a 5 columnas x 4 filas).

Juegos

• Jugable en cada pose. El bloqueo de orientación está bien, pero llene la pantalla. Mantenga el texto y los tamaños de control consistentes. Prefiera cambiar la relación de aspecto en lugar de letterbox/pillarbox; si es inevitable, rellene el relleno con arte.

De las charlas técnicas de Apple

Detalle de las tres charlas técnicas sobre Duo que la página HIG no especifica (111466 Diseñar para iPhone Duo, 111462 Elevar el nivel con iPhone Duo, 111463 Adoptar una pose con diseños adaptables).

Comportamiento del sistema a considerar en el diseño

• Pantalla externa: los controles se sitúan en el lado derecho para el alcance del pulgar derecho. La Isla Dinámica se expande verticalmente a medida que llegan las Actividades en Vivo y comparte la franja lateral con las barras de la aplicación. La falta de espacio hace que los elementos de la aplicación se colapsen automáticamente en desbordamiento.
• Parcialmente plegado (libro): el texto, las imágenes y los elementos interactivos se alejan de la curva. En pliegue en retrato, los elementos interactivos se mueven a la mitad inferior.
• Multitarea con Vista Dividida: arrastre una aplicación al lado usando el gesto de inicio, dando una división uniforme 50/50. Los controles de cada aplicación se sitúan en su borde exterior.
• Picture in Picture se puede fijar en la parte superior; la aplicación debajo se redimensiona verticalmente y el video llena la mitad de la pantalla cuando está plegado.
• Hojas: en la pantalla externa, las barras de herramientas de la hoja se vuelven verticales. En la pantalla interna, las hojas están centradas con barras horizontales. Cuando están plegadas, las hojas se deslizan fuera del pliegue. Con preferredPlacement, una hoja colocada a la izquierda no tiene barra vertical y una colocada a la derecha sí.
• Evitación de pliegue incorporada (hojas, alertas, menús, botones de barra de herramientas y más) empuja los elementos interactivos fuera del pliegue. El contenido desplazable no necesita evitar el pliegue.

Optar por barras verticales

1. Reconstruya contra el SDK más reciente.
2. Use las barras propiedad de los contenedores de navegación: .toolbar de SwiftUI en NavigationStack, NavigationSplitView o TabView; elementos de UIKit establecidos en un controlador de vista dentro de UINavigationController/UITabBarController. El contenido personalizado de UIToolbar/UINavigationBar/UITabBar no se mueve.

• Solo los contenedores en el borde de la pantalla se vuelven verticales. En una vista dividida, solo la columna de detalle lo hace; los inspectores no tienen su propia barra vertical.
• Mapeo: los elementos de la barra de herramientas superior van a la parte superior de la franja, los elementos inferiores a la parte inferior, y la barra de pestañas permanece alineada en la parte inferior. Los espaciadores flexibles tienen altura cero; los espaciadores fijos mantienen su tamaño.
• Atrás/Cerrar: automático con un controlador de navegación. Los personalizados usan .cancellationAction (SwiftUI) o un elemento principal con leftItemSupplementsBackButton = false (UIKit). Las acciones prominentes usan topBarPinnedTrailing (SwiftUI) o pinnedTrailingGroup (UIKit).

Qué se vuelve vertical, qué permanece horizontal

• Las barras verticales tienen un ancho fijo y una altura flexible, por lo que son adecuadas para elementos de solo símbolo. Los elementos con un icono se vuelven verticales; los elementos de solo texto (Editar, controles segmentados, botones de texto anchos) permanecen en la barra de navegación horizontal.
• Anule con la nueva API AxisBehavior: use solo horizontal para un elemento que cambia entre símbolo y texto (un Select personalizado; el botón Editar del sistema maneja esto por sí mismo) y preferido vertical para una vista personalizada que tiene una forma vertical (por ejemplo, una brújula).
• Convierta elementos de texto y símbolo en solo símbolo con un distintivo (API de distintivos de iOS 26), por ejemplo, un recuento de la bandeja de entrada. Mantenga el texto si lleva información real (un total del carrito).
• Las barras accesorias del teclado permanecen adjuntas al teclado.
• Vistas personalizadas: ajuste el ancho fijo o proporcione un diseño vertical. Lea toolbarVerticalEdge (valor de entorno o rasgo), que es nulo cuando las barras no pueden ser verticales.
• Las barras verticales no tienen efecto de borde de desplazamiento por defecto. Obtienen un fondo solo cuando la Reducción de Transparencia está activada, por lo que el contenido personalizado debe permanecer legible de cualquier manera.
• Para optar por no participar (una aplicación de una sola página con mucho contenido en la parte inferior como Calculadora, o una hoja con solo un botón Cerrar), use toolbarVerticalBehavior / preferredVerticalBarBehavior. Una hoja sin barra vertical se detiene justo antes de la cámara.
• Compresión por vista: toolbarCompressionBehavior. La prioridad de visibilidad puede ser alta, baja o personalizada; ajústela primero por grupo, luego por elemento.

Patrones de diseño

• Pantalla externa: la mayor parte del contenido necesita un desplazamiento para no quedar oculto detrás de los controles, lo cual la alineación con las áreas seguras horizontales hace por usted. Centre en la pantalla completa solo para interfaces de usuario inmersivas y sin desplazamiento donde nada interactivo esté debajo de las barras. Un enfoque mixto es un fondo de ancho completo con contenido de desplazamiento con sangría, manteniendo todos los elementos interactivos dentro del área con sangría.
• Pantalla interna, para que no sea solo una aplicación de teléfono estirada: use una vista dividida, un diseño apilado que se convierte en 2 columnas cuando es ancho (Música) o, para aplicaciones densas en información, la barra de pestañas mostrada como una barra lateral (Salud).
• Diseño opcional de pose de mesa (portátil): medios en la parte superior, controles en la mitad inferior estable. Debe mantener todos los controles y la misma jerarquía.
• Desplazamiento: mueva un elemento fuera de una región reservada a la región que se adapte a su propósito. Elija el alcance: mueva un elemento solo si está solo, mueva elementos relacionados juntos y no mueva cosas lejos de su origen. En pose de libro, las alertas van al lado final, cerca de donde reaparecerán cuando se cierren. En pose de mesa, el contenido de un vistazo va arriba y los controles táctiles van abajo. La búsqueda permanece sobre la vista que busca. Para una cuadrícula, mantenga los márgenes exteriores y ensanche el canal en la bisagra (Fitness).
• Las vistas divididas del sistema se igualan al 50/50 cuando están plegadas (Recordatorios).

API de región reservada

• SwiftUI: reservedRegion en GeometryProxy (desde GeometryReader o onGeometryChange). UIKit: reservedRegion en UIView. Use .frame para el diseño.
• Hay dos tipos. Una región de división (el pliegue) está activa solo cuando está plegada y tiene ancho cero cuando está plana. Una región de oclusión (la cámara interna de FaceTime) está activa solo cuando la cámara está encendida.
• Las regiones activas se devuelven por defecto; use includeInactive para planificar con antelación (por ejemplo, elija un número par de columnas siempre que exista una región de división).
• Para aplicaciones centradas en la cámara, mantenga el contenido clave y los controles alejados de la cámara interna.
• El estado de pliegue como entrada de interacción se cubre en la charla Aprovechar múltiples pantallas y escenas en iPhone Duo, que no está en esta habilidad.

Vistas de disposición (iOS 27.1)

• SwiftUI: ArrangementView(primary, secondary) dentro de un NavigationStack, estilizado con .arrangementViewStyle(.split) (el predeterminado) o .overlay. Use .split.axes(...) para limitar la dirección de división; si no puede dividirse a lo largo del eje principal, muestra solo la vista primaria.
• UIKit: UIArrangementViewController como raíz del controlador de navegación, updateArrangement con UISplitArrangement.
• Superposición: apilada cuando está plana, lado a lado cuando está plegada. Lea overlayArrangementZIndex (SwiftUI) o state(for:) luego .zIndex (UIKit) para alternar entre vistas secundarias colapsadas y expandidas.
• Elección: siga los patrones existentes (HStack/VStack se convierte en dividida, ZStack se convierte en superpuesta). De lo contrario, use superpuesta para una relación de primer plano/fondo donde ocultar parcialmente contenido desplazable está bien (Lector de Accesibilidad), y dividida para principal/detalle donde ninguna vista puede estar oculta (Transcripciones de Podcasts).
• No ponga contenedores de navegación dentro de un ArrangementView, y no ponga un ArrangementView dentro de List/ScrollView.

Auditoría de preparación (de las charlas)

1. Reconstruya con el SDK más reciente.
2. Audite las barras: contenedores del sistema, orden de elementos, símbolos con títulos.
3. Haga que los elementos personalizados estén listos para vertical.
4. Establezca prioridades de desbordamiento.
5. Audite los diseños centrados: ¿debería cada uno convertirse en 2 columnas, desplazarse o usar un ArrangementView?
6. Adopte la API de región reservada para controles de alta prioridad y diseño manual.

Capa artesanal de Duo (de la habilidad apple-design)

La HIG dice qué se adapta. Esta sección aplica la guía de interfaces fluidas y principios de diseño de Apple (WWDC Diseñando interfaces fluidas, Principios del gran diseño) a cómo debería sentirse en Duo. Estos son principios aplicados, no reglas de la HIG. Para el conjunto completo de herramientas de movimiento (proyección, efecto de goma, transferencia de velocidad), también cargue la habilidad apple-design de Emil Kowalski (de emilkowalski/skills) y traduzca sus ejemplos web a SwiftUI/UIKit.

Movimiento de pliegue y redimensionamiento

• El pliegue es un gesto continuo impulsado por el usuario. Los cambios de diseño que lo siguen (los anchos de los paneles se igualan, la redistribución de la cuadrícula, el contenido que se aleja de la región de plegado) deben seguir la bisagra suavemente y ser interrumpibles: una persona puede detenerse o invertir el pliegue a medio camino, por lo que siempre anime desde el valor actual en pantalla, nunca salte al estado final.
• Use resortes críticamente amortiguados para la redistribución (SwiftUI .spring(duration: 0.4, bounce: 0) o .smooth; UIKit UIView.animate(springDuration:bounce:) con bounce: 0). Sin rebote: el usuario no movió nada, por lo que un sobreimpulso se lee como roto.
• Consistencia espacial a través de las pantallas: cuando alguien abre el dispositivo, el elemento que estaba mirando en la pantalla externa permanece como ancla (el correo electrónico abierto de Correo se convierte en el panel final, no en una pantalla nueva). Mantenga la posición de desplazamiento y la selección; el nivel de jerarquía adicional aparece a su lado.
• Pequeños ajustes sobre reorganización (HIG) es la misma regla que "insinuar en la dirección del cambio": los elementos deben deslizarse visiblemente hacia su nuevo lugar, no teletransportarse.

Controles laterales como una capa de material

• Las barras de herramientas laterales y las barras de pestañas flotan sobre el contenido sin efecto de borde de desplazamiento y sin fondo por defecto (según la charla técnica). No agregue un divisor duro o su propio fondo; use las áreas seguras para que el contenido no quede oculto detrás de la barra.
• Las vistas personalizadas colocadas en la barra deben permanecer legibles sobre lo que se desplace detrás de ellas, y sobre el fondo sólido que aparece con la Reducción de Transparencia.

Principios aplicados a Duo

• Familiaridad: no anule la ubicación de la barra vertical; es la nueva memoria muscular de la plataforma.
• Agrupación y mapeo: los controles permanecen junto al panel que afectan (controles de la lista de Correo sobre la lista).
• Orientación: en cada pose, las personas aún deberían poder responder "¿dónde estoy, cómo vuelvo". Atrás/Cerrar está siempre en la parte superior del eje vertical.
• Flexibilidad: un diseño adaptable, el Tipo Dinámico escala con él. Pruebe el tamaño de texto más grande en la pantalla externa estrecha-alta con barras laterales presentes.
• Respuesta: los cambios de pose nunca deben bloquear la entrada. Los toques durante un pliegue aún deben aterrizar.

Accesibilidad

• Con Movimiento Reducido activado, reemplace los desplazamientos/amortiguadores de redistribución con fundidos cruzados cortos.
• Con Reducción de Transparencia activada, las barras laterales se vuelven sólidas.
• Superficies grandes que se mueven durante un pliegue: mantenga el movimiento corto y evite grandes saltos de brillo.

Errores comunes

Error	Solución
Diseño personalizado por pose	Clases de tamaño más diseño redimensionable
Ocultar funciones en una pantalla	Misma funcionalidad en ambas
No usar vistas de disposición	Adoptar ArrangementView para contenido superpuesto o lado a lado
Ignorar regiones reservadas	Usar la API ReservedRegion para la cámara y el pliegue
Añadir espaciado fijo en barras verticales	Usar ToolbarItemGroup y dejar que el sistema gestione el desbordamiento
Anular la ubicación lateral de las barras	Mantener la ubicación del sistema para la consistencia de la plataforma
Texto y símbolos sin título	Cada elemento no textual obtiene tanto un título como un símbolo
Forzar el diseño de la pantalla interna	Dejar que las vistas divididas y las columnas pares se adapten
Controles superpuestos con la cámara externa	Usar márgenes de área segura
Usar contenedores de navegación dentro de ArrangementView	Mantenerlos fuera; ArrangementView va dentro de un NavigationStack
Animaciones bruscas en el pliegue	Resortes críticamente amortiguados, sin rebote, interrumpibles