Pantallas iOS para app de viajes

Diseñar para iOS exige precisión y consistencia. Aquí se presenta un recorrido claro por las pantallas clave de una app de viajes, priorizando las Human Interface Guidelines y la idea central de que las interfaces son data: primero se define la información, luego la forma. El resultado: un onboarding conciso, una home efectiva en blank state y populada, y un flujo de creación de viaje por pasos con componentes reutilizables, CTA visibles y opciones de cancelar en todo momento.

¿Cómo alinear el diseño con Human Interface Guidelines y el onboarding?

Seguir las Human Interface Guidelines de iOS asegura patrones de diseño familiares y decisiones coherentes. Se mantiene una lectura simple y predecible para el usuario.

¿Qué estructura tiene el slideshow de onboarding?

• Formato de slideshow con interacción principal de swipear entre slides.
• Cada slide incluye: ilustración, título y bajada.
• Elementos consistentes: paginación y call to action visible.
• Regla clave: la menor cantidad de pantallas posible y contenido conciso.

¿Por qué “las interfaces son data” importa aquí?

• Se define primero la información y las unidades de contenido.
• Luego se decide cómo presentarla en cada componente.
• Beneficio: se mantiene un sistema escalable y coherente en todas las vistas.

¿Qué define la home y el flujo de “nuevo viaje” en iOS?

Al finalizar el onboarding, la home aparece en blank state o empty state. El objetivo: llevar al usuario a crear su primer viaje con claridad y sin fricción.

¿Cómo se diseña la home en blank state y populada?

• Patrón repetido del onboarding: ilustración, título, bajada y botón prominente para crear viaje.
• Encabezado con título e icono para nuevo viaje.
• Navegación inferior con tres secciones: viajes, actividad y perfil.
• Estado populado: lista de viajes con título, descripción, avatares de compañeros, y contadores de ciudades y planes.

¿Cómo es el flujo por pasos de “nuevo viaje”?

• Paso 1: nombre y descripción en dos inputs, CTA destacado, teclado visible, título y opción de cancelar.
• Paso 2: selección del tipo de viaje entre tres opciones, cada una con imagen o icono, nombre y breve descripción. Incluye back y cancelar.
• Checkbox “viajo solo”: permite asumir si viajará con amigos y habilitar invitaciones más adelante en el flow.
• Paso 3: selección de zona con mapa y lista de continentes, título y CTA.

¿Cómo se gestionan invitaciones durante y después del flujo?

• Dentro del flujo: título, bajada, input y CTA, con teclado expandido por defecto para ahorrar pasos.
• En un viaje ya creado: lista de invitados con avatar, nombre, email y opción de eliminar. Input para agregar una persona nueva.

¿Cómo funcionan sugerencias, ciudades y planes dentro de un viaje?

Las vistas se construyen con componentes coherentes y un sistema unificado. Cuando no hay datos, se muestran sugerencias relevantes para avanzar.

¿Qué muestra el viaje individual y su blank state?

• Acceso de back en iOS, nombre del viaje y avatares de amigos.
• CTA para invitar y acceso a menú contextual para acciones secundarias.
• Blank state de ciudades: lista de ciudades sugeridas con nombre, país y señal de precio. CTA para agregar ciudad.

¿Cómo se ven las sugerencias de ciudad y plan?

• Ciudad sugerida: carrusel de imágenes, nombre, país, precio, descripción, mapa y actividades sugeridas. CTA grande para agregar.
• Plan sugerido: diseño similar, con mapa arriba y fotos en carrusel abajo. Incluye rating, descripción y, si aplica, reseñas. CTA visible.

¿Qué incluye la vista de ciudad agregada y el “nuevo plan”?

• Ciudad agregada: encabezado como en el viaje, nombre de la ciudad, país o persona que la agregó, acceso para agregar hospedaje, lista de planes y CTA flotante.
• Nuevo plan: campos para nombre, link, comentario y ubicación.

¿Qué habilidades y conceptos se practican en estas pantallas?

• Aplicación de Human Interface Guidelines de iOS para patrones consistentes.
• Diseño por pasos con cancelar y back en cada etapa.
• Manejo de blank state y empty state para guiar acciones.
• Uso de CTA prominentes, paginación y teclado expandido para reducir fricción.
• Pensamiento en componentes, reutilización y escalabilidad del sistema de diseño.
• Priorización de la data: títulos, bajadas, avatares, contadores, rating y reseñas.

¿Te gustaría aportar una pantalla que complemente este flujo o proponer mejoras de microinteracciones? Comparte tus ideas y comenta cómo resolverías los estados vacíos y las sugerencias en tu propio diseño.