iPhone Duo: adónde van las barras de tu app

La pantalla exterior del iPhone Duo es más ancha y menos alta que la de un iPhone. Apple sacó de ello una regla sencilla: la barra de navegación, la TabBar y los botones dejan la parte superior e inferior de la pantalla para formar una columna en el lateral, junto a la barra de estado y la cámara. La altura vuelve al contenido y los controles quedan al alcance de la mano. Apple llama a esta columna «vertical controls».

Sin embargo, el sistema solo mueve sus propias barras. Las de una app GoodBarber vienen de su design system, y el sistema las deja donde la app las colocó. Así que la pregunta era, ante todo, de diseño: ¿en qué se convierte una TabBar cuando pasa de una fila a una columna, y cómo sigue siendo reconocible una app en una franja tan estrecha? El rail tenía que seguir siendo la app, no convertirse en una barra de Apple.

Primera decisión de diseño para las apps GoodBarber: un solo ancho para todo lo que entra en el rail del iPhone Duo, el de un acceso directo, con su icono en el centro. El botón de volver, la búsqueda, los favoritos y cada pestaña de la TabBar caben en la misma casilla, y la columna se lee de un vistazo. El rail solo lleva iconos; sus nombres no desaparecen por ello, VoiceOver los lee. En Eastside, la app de demostración de una escuela de música, la columna se mantiene tranquila y deja en primer plano los colores de los avisos.

Segunda decisión, la de Apple: lo que estaba arriba sigue arriba y lo que estaba abajo sigue abajo. El botón de volver y los accesos directos abren la columna, la TabBar la cierra. Quien conoce la app en su teléfono no tiene nada que volver a aprender: su mapa de la app es el mismo, solo ha girado.

En un artículo, una app GoodBarber en el iPhone Duo solo conserva lo que sirve al texto. La TabBar se retira, como en el teléfono en cuanto una pantalla tiene un botón de volver; ese botón sube solo a lo alto del rail, y una cápsula abajo reúne las herramientas del lector: comentar, compartir, agrandar la letra, guardar para más tarde. Las acciones que van juntas comparten cápsula. Al abrir el artículo, las cápsulas del rail cambian con un fundido, al ritmo de la página que llega: el rail acompaña la navegación en un solo movimiento.

La foto de cabecera, por su parte, sube hasta lo alto de la pantalla y pasa por debajo del rail. Los iconos de una barra transparente suelen ser claros, pensados para posarse sobre una imagen; sin fondo, acabarían blancos sobre una página blanca. Por eso cada cápsula conserva un fondo, ni blanco puro ni negro puro, sino un tono suavizado, teñido del color de sus iconos, con el contraste que pide la accesibilidad. El contraste justo y no el más fuerte: un fondo matizado es más cuidado.

En una app GoodBarber, cada barra la dibuja la app: lleva sus propios colores y su propia forma, y el rail los conserva. Cada cápsula toma el fondo de la barra de la que viene. Su forma sigue la de tu TabBar, de las esquinas rectas a la píldora, en todas las pantallas de la app, incluso en las que la TabBar no aparece. Uno al lado del otro, los rails de Eastside, Tweed & Cheviot y The Current no hablan el mismo lenguaje visual, y es a propósito.

El motor de GoodBarber hace el resto. Pide al sistema el espacio de una barra en ese lado, que ya esquiva la cámara, y coloca allí las cápsulas en el orden de la pantalla. El rail sigue el diseño que ya tienes, sin ningún ajuste que añadir.

Desde el back office, recompila tu app iOS para que incluya el rail; la actualización llega a tus usuarios una vez publicada, tras la revisión de la App Store. Nada que rediseñar, nada que ajustar. Tu app Android, tu PWA y tu app para iPad se quedan como están.

Para ver moverse el rail, abre y cierra el iPhone Duo en nuestra página del iPhone Duo. Lo que cambia para tu app, de una pantalla a otra, está en nuestro artículo de lanzamiento. Las reglas de Apple y sus fuentes están reunidas, en inglés, en las fichas Where the bars go y Custom bars de DuoApps. Y si todavía no tienes app, crea la tuya.