Navegación inferior y encabezados iOS

Diseñar para iOS exige decisiones claras desde el inicio. Aquí se define una navegación inferior con tres ítems, un flujo lineal viaje > destino > planes y un encabezado flexible que sostiene el contexto y la acción. El enfoque prioriza la claridad, la affordance y componentes reutilizables que facilitan el trabajo en papel antes de pasar a alta fidelidad.

¿Cómo se define la navegación inferior en iOS para una app de viajes?

La pantalla ocupa todo el lienzo del iPhone, sin barras del navegador como en web con Safari. Por eso, la navegación va abajo con ícono y subtítulo, y el acceso inicial cae en viajes. Se suma una sección de actividad para notificaciones “accesible universalmente” y un perfil/ajustes para gestionar notificaciones, otros ajustes y hacer logout.

• Viajes: punto de entrada y base del flujo lineal viaje > destino > planes.
• Actividad: acceso directo a notificaciones y actividad relevante.
• Perfil o ajustes: gestión de notificaciones, ajustes y logout.

¿Qué rol cumple el encabezado en iOS?

El encabezado muestra dónde estás y qué puedes hacer. Se propone título grande alineado a la izquierda, acción común contextual a la derecha y control de back. La segunda línea del título puede sumar datos útiles cuando haga falta.

¿Por qué el flujo es viaje > destino > planes?

Se simplifica la navegación: de un viaje se accede a destinos, y dentro de cada destino se accede a planes. Esta linealidad ordena la información y reduce fricción al decidir el siguiente paso.

¿Cómo se muestra el viaje para priorizar foco y acción?

En viaje pueden verse amigos con avatares. En lugar de un mapa, se opta por listado de ciudades para mantener el foco en lo que importa: entrar rápido a un destino. El componente de ítem de ciudad incluye separador por país, título con nombre de ciudad, autor (quién la agregó) y un ícono chevron que refuerza la affordance.

• Separadores por país para agrupar mejor.
• Ciudad como título principal.
• Autor como dato para decidir si entrar.
• Chevron para indicar que se puede tapear.

¿Cómo se impulsa la interacción con un botón flotante?

Se propone un botón flotante grande y llamativo, fijo al hacer scroll, para agregar ciudades o planes. Aunque no es lo más habitual en iOS, aquí se toma esa licencia para disparar acción sin perderlo de vista.

¿Qué estados vacíos deben contemplarse?

Se deben diseñar estados sin ciudades o sin planes. Aunque el ejemplo asume que ya hay contenido, es clave prever cómo guiar al usuario cuando aún no se agregó nada.

¿Cómo se diseña el destino con hospedaje y planes visuales?

El destino hereda la navegación inferior y el encabezado. El título muestra el nombre de la ciudad y la segunda línea puede incluir autor. Se prioriza un módulo para cargar hospedaje con ícono y texto que explique el beneficio de hacerlo, visible casi al inicio.

Para los planes del destino se propone una presentación más visual: nombre atractivo, descripción atractiva e imagen que podría venir de Google Maps. También se contemplan sugerencias que, asumiendo soporte de devs, nutren el contenido y la toma de decisiones.

• Módulo destacado para agregar hospedaje.
• Planes con imagen, nombre y descripción.
• Consistencia en navegación inferior y encabezado.

¿Qué habilidades y conceptos se practican aquí?

• Diseño de navegación inferior con tres ítems claros: viajes, actividad y perfil.
• Flujo lineal que ordena viaje > destino > planes.
• Uso del encabezado en iOS con título a la izquierda, back y acción contextual.
• Componentización: lista de destinos por país, autor y affordance con chevron.
• Jerarquía visual y foco: listado en vez de mapa para priorizar entrada a ciudades.
• Llamados a la acción persistentes con botón flotante fijo al hacer scroll.
• Diseño de estados vacíos para guiar cuando no hay ciudades ni planes.
• Prototipado en papel para explorar antes de definir la UI final.
• Trabajo alineado a los guidelines de iOS.

¿Qué sumarías o ajustarías en los bosquejos en papel? Comparte tus ideas y cuéntame cómo organizarías tus componentes.