Diseño de apps de transporte: la pantalla de inicio de una app de viajes, antes y después
Una pantalla de inicio junior de una app de viajes con seis controles en el mapa, un banner promocional y dos campos de dirección, y la misma pantalla corregida. Cada cambio lado a lado, la razón detrás de cada uno y el archivo gratis de Figma.
Quien abre una app de viajes normalmente está parado en algún sitio y quiere estar en otro. El primer borrador de abajo funciona, pero les pide mucho antes del primer toque: un mapa con seis controles flotantes y un banner amarillo, una hoja con dos campos de dirección, seis servicios en seis colores y una fila de chips. La corrección conserva cada capacidad que importa y hace una sola pregunta.
La pantalla completa, antes y después
Borrador junior
Corregida
A la izquierda, el mapa está cubierto de controles y la hoja es un formulario. A la derecha, el mapa es un mapa, y la hoja tiene un campo, cuatro filas y cuatro servicios. Además el mapa se acortó, de 380 px de alto a 270 px, así que la hoja que importa empieza más arriba.
| Borrador junior | Corregida | |
|---|---|---|
| Controles del mapa | 6, en cuatro formas | 2 |
| Campos de dirección | 2 y un botón de intercambio | 1, "¿A dónde?" |
| Servicios | 6, sobre seis fondos teñidos | 4, en un solo estilo |
| Promo | Banner amarillo en mayúsculas | Una fila, "Código NEWRIDE" |
| Lugares recientes | 2, direcciones completas en una línea | Filas con nombre y dirección corta |
| Pestañas | 5 | 4 |
| Margen lateral | 14 px a la izquierda, 12 px a la derecha | 20 px en ambos lados |
| Tamaños de texto | 9 a 12 px | 13 a 17 pt |
Corrección 1: dos botones en el mapa
Antes
Después
Seis controles en cuatro formas y un banner, frente a un menú y un botón de ubicación.
El borrador pone un cuadrado de menú, un círculo de búsqueda, un cuadrado de capas, una píldora de Tráfico, una pila de zoom y un círculo verde de ubicación encima de las calles, y un banner promocional en mayúsculas en la parte superior. Todos son cosas que un pasajero podría querer. Ninguno es lo que el pasajero vino a hacer, y juntos tapan el mapa que la persona intenta leer.
La corrección conserva dos botones de 44 px: el menú y tu ubicación. El círculo de búsqueda era una segunda puerta a la misma búsqueda que ya tiene la hoja. El banner bajó a la hoja como una fila.
Capas, Tráfico y la pila de zoom no están en esta pantalla, y este rediseño no dibuja dónde viven, así que una app real necesita un hogar para ellos. El zoom con pellizco en un mapa no necesita dos botones.
La regla para reutilizar: pon en el mapa solo los controles que cambian lo que ves ahora mismo, y dale a los demás otro hogar.
Corrección 2: una pregunta en lugar de dos campos
Antes
Después
Dos campos de dirección y un botón de intercambio, frente a un campo que pregunta ¿A dónde?
El borrador abre un formulario: un campo de recogida con un punto verde, un campo de destino con un punto negro y una flecha de intercambio. El mapa de arriba ya tiene un punto azul que muestra dónde está el pasajero, así que el primer campo pide algo que la pantalla ya dice.
La corrección pregunta "¿A dónde?" en un campo de 52 px. A la derecha va un chip Ahora, que es donde vive la hora: quien quiere un viaje más tarde lo cambia, y todos los demás nunca lo leen. El botón de intercambio desapareció junto con el campo de recogida.
La regla para reutilizar: pregunta lo único que no sabes, y haz de lo que puedes adivinar un chip que se pueda cambiar.
Corrección 3: cuatro servicios en un solo estilo
Antes
Después
Seis servicios en seis colores, frente a cuatro en un solo gris con un solo verde.
Cuando cada servicio tiene su propio color, el color deja de significar algo. Los seis mosaicos del borrador son verde, naranja, azul, morado, rosa y cian, y cada icono repite el color de su mosaico, con texto de 9 a 12 px. Nada en la fila dice cuál suele querer un pasajero.
La corrección dibuja cuatro servicios, Viaje, Paquete, Reserva y Alquiler, como mosaicos grandes sobre un solo gris suave con iconos en el verde de la marca, #16A34A. Son lo bastante anchos para tocarlos y leerlos a la vez. Moto y XL no están en esta pantalla de inicio, un intercambio que este rediseño no esconde, porque no dibuja adónde van.
La regla para reutilizar: deja que un color de marca signifique "esta es la app", y deja que la forma y el icono distingan las opciones.
Corrección 4: lugares guardados como filas, con la dirección
Antes
Después
Chips sin direcciones y dos líneas largas de recientes, frente a filas con nombre, dirección y área de toque.
Un chip que dice "Casa" le dice al pasajero adónde va solo si confía en él. Los chips del borrador no muestran una dirección, y los recientes de abajo son líneas largas como "Ferry Building, The Embarcadero, San Francisco, CA 94111", escritas hasta el código postal en 12 px.
La corrección hace de cada uno una fila: un icono, el nombre en negrita y una dirección corta debajo, "Casa, 24 Hayes St". Ferry Building es un lugar reciente, con "The Embarcadero" debajo, y la ciudad y el código postal se fueron porque el pasajero ya está en esa ciudad. El 30% de descuento pasó a ser la cuarta fila, con una etiqueta verde y "Código NEWRIDE" debajo, del mismo tamaño que los lugares.
La oferta sigue ahí. Ya no grita sobre el mapa.
La regla para reutilizar: un atajo debe mostrar adónde lleva, y una promo puede ser una fila.
Las correcciones menores
- Un solo borde izquierdo. La hoja del borrador usaba 14 px a la izquierda y 12 px a la derecha. La corrección usa 20 px en ambos lados.
- Un solo acento. El borrador usaba amarillo para el banner, verde para el botón de ubicación y seis tintes para los servicios. La corrección usa el verde de la marca para la pestaña activa, los iconos de servicio y la etiqueta de la oferta, y gris para el resto.
- Una escala tipográfica real. El texto pasó de 9 a 12 px a tamaños de iOS de 13 a 17 pt.
- Cuatro pestañas, no cinco. Inicio, Viajes, Billetera, Ofertas y Cuenta pasaron a ser Inicio, Actividad, Billetera y Cuenta. Ofertas desaparece, porque la oferta ahora es una fila en Inicio.
- Un mapa más corto. El mapa pasó de 380 px a 270 px de alto, así que la pregunta queda más arriba.
Audita tu propia app de viajes
| Pregunta | Por qué importa |
|---|---|
| ¿Cuántos controles hay en el mapa? | Cada uno tapa una calle |
| ¿Le pides al pasajero algo que la pantalla ya sabe? | Un campo de recogida repite el punto azul |
| ¿Significa algo el color de cada servicio? | Si no, usa un solo color |
| ¿Muestra cada atajo su dirección? | Un chip que esconde adónde lleva es una apuesta |
| ¿La promo es una fila o un banner? | Un banner tapa el mapa |
| ¿La hora es un chip? | La mayoría de los viajes son para ahora |
Consigue el archivo de Figma
El archivo gratis tiene ambas pantallas como componentes, cada corrección como un par antes y después, las variables de color y los estilos de texto de iOS.
Archivo gratis de Figma
Pantalla de inicio de app de viajes, antes y después
Ambas pantallas y cada pieza corregida como componentes de Figma. Gratis, solo lectura, duplícalo a tus borradores.
FAQ
¿Qué debe mostrar la pantalla de inicio de una app de viajes?
Un mapa con dos botones, un único campo "¿A dónde?" y unos pocos atajos debajo. Los servicios, los lugares guardados y las ofertas van en la hoja, no en el mapa.
¿Cuántos controles debe tener una pantalla de mapa?
Dos bastan en la pantalla de inicio: el menú y tu ubicación. Capas, tráfico y zoom pueden vivir en otro lado, ya que los mapas se acercan con un pellizco.
¿Cómo se diseña el campo de búsqueda "¿A dónde?"?
Hazlo un campo grande con la pregunta dentro y un chip Ahora a la derecha para la hora. No pidas primero la recogida cuando el mapa ya muestra dónde está la persona.
¿Cómo debe una app de viajes mostrar servicios como Viaje, XL y Paquete?
En un solo estilo, como mosaicos grandes, con iconos en el color de la marca. Cuatro caben en la pantalla de inicio; el resto necesita un lugar propio.
¿Cómo se muestran los códigos promocionales en una app de viajes?
Como una fila con el mismo estilo que los lugares, con un título corto y el código debajo. Un banner en el mapa tapa lo que los pasajeros vinieron a leer.
¿Qué tamaño de fuente debe usar una app de viajes?
La escala de texto de la plataforma. La pantalla corregida usa tamaños de iOS de 13 a 17 pt, con botones de mapa de 44 px.
Fuentes
- Ambas pantallas son nuestras, diseñadas y medidas en Figma. El mapa es nuestro propio dibujo vectorial de calles, un parque y un arroyo. Ferry Building y Oracle Park son lugares públicos emblemáticos de San Francisco; las direcciones de casa y trabajo son inventadas. Sin fotos.
- Apple Human Interface Guidelines: Typography, para los tamaños de texto de iOS usados en la pantalla corregida.
- Apple Human Interface Guidelines: Accessibility, para el tamaño del área táctil de 44 pt.
- Publicado primero como carrusel en App Brainy.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
