Diseño de apps de podcasts: rediseño de la pantalla de inicio, antes y después
Una pantalla de inicio de app de podcasts hecha por un junior, con una línea finísima de progreso, tres iconos en cada fila del ranking y seis colores de género, y la misma pantalla corregida. Cada cambio lado a lado, la razón detrás de cada uno y el archivo gratis de Figma.
Lo que más hace una persona en una app de podcasts es retomar donde lo dejó. El primer borrador de abajo tiene todo lo que necesita un oyente, y esconde justo eso: el episodio que estaba a la mitad vive en una tarjeta pequeña con una línea finísima de progreso, entre tres portadas. La corrección mantiene los programas, el ranking y los géneros, y convierte el episodio pausado en lo más grande de la pantalla.
La pantalla completa, antes y después
Borrador junior
Corregida
A la izquierda, el episodio de la persona es una de tres portadas iguales con 2 px de progreso debajo, y cada fila del ranking termina en tres iconos. A la derecha, el episodio pausado tiene su propia tarjeta con una barra de progreso de 6 px y tres controles grandes, y las filas de la lista terminan en un botón.
| Borrador junior | Corregida | |
|---|---|---|
| Episodio pausado | Una de 3 portadas, línea de progreso de 2 px | Una tarjeta, barra de progreso de 6 px, 3 controles |
| Iconos en cada fila de la lista | 3 | 1 |
| Colores de género | 6 | 1 |
| Controles del mini reproductor | Anterior, pausa, siguiente | Atrás 30, pausa, adelante 30 |
| Pestañas | 5 | 4 |
| Margen lateral | 14 px izquierda, 12 px derecha | 20 px en ambos lados |
| Tamaños de texto | 8 a 20 px | 11 a 28 pt |
Corrección 1: una tarjeta grande para el episodio que dejaste
Antes
Después
Tres portadas con una línea finísima de progreso, frente a una tarjeta con el tiempo restante y los controles.
El "Continue Listening" del borrador es un estante. Tres portadas lado a lado del mismo tamaño, cada una con una línea de progreso de 2 px, un título cortado en "Ep. 142: Why Great Apps Feel Calm (And..." y "23 min left" en letra gris pequeña. Para retomar el que importa, el oyente abre un episodio, espera a que cargue un reproductor y pulsa play.
La corrección le da una tarjeta al episodio pausado. La portada, una etiqueta morada, "Continue listening · 23 min left", el título completo, "Why great apps feel calm", y el programa, "Studio Hour · Episode 142", van arriba. Debajo, una barra de progreso de 6 px junto a tres controles: atrás 30, play y adelante 30. Las otras dos portadas salieron de esta sección.
Los botones de atrás y adelante 30 son una flecha circular con un 30 dentro, en áreas de 44 px, el patrón que usa Audible. Un oyente que fue interrumpido puede retroceder medio minuto sin salir de la pantalla de inicio.
La regla para reutilizar: lo que la persona estaba haciendo es la acción siguiente más probable, así que dale una tarjeta y sus controles.
Corrección 2: títulos a dos líneas y un solo botón de play
Antes
Después
Títulos cortados, números de posición y tres iconos, frente a títulos completos y un solo botón de play.
Las filas del ranking del borrador terminan cada una en una flecha de descarga, un menú de tres puntos y un triángulo de play, así que el título tiene que caber en lo que sobra, y no cabe: "The Week in Tech, in 20 Minutes: Al...", "How to Learn Anything in 30 Days...", "Live from Brooklyn Part 2 (Uncut Ex...". La posición es un número morado enorme, y bajo cada título una línea reúne el programa, la categoría y la duración.
La corrección deja que el título ocupe dos líneas: "The week in tech, in 20 minutes". Debajo va una sola línea, el día y la duración, "Today · 21 min". A la derecha hay un botón de play redondo, que es la única acción que necesita una fila, y su área es lo bastante grande para acertar. La descarga y el menú no están en la fila, y este rediseño no dibuja dónde van.
Este rediseño cambió el trabajo de la lista además de su aspecto. Cinco filas de "Top Charts" con posición se volvieron tres filas de "Up next", así que una app real todavía necesita un lugar para el ranking.
La regla para reutilizar: deja que el título ocupe varias líneas, porque un título cortado no se puede leer, y da a cada fila una sola acción.
Corrección 3: géneros en un solo estilo
Antes
Después
Seis colores sólidos en dos filas, frente a una fila de píldoras con una rellena.
Las etiquetas de género del borrador son rosa, azul, rojo, verde, naranja y turquesa, cada una con texto blanco sólido. Ocupan dos filas.
La corrección es una fila de píldoras en un solo estilo. "All" va rellena con el morado de marca, #8B5CF6, y el resto son blancas. "More" queda al final para los géneros que no caben. Una píldora rellena es la única que significa algo, que es "esto es lo que estás viendo".
La regla para reutilizar: el color debe decir cuál está elegido. No debe decir cuál es cuál.
Corrección 4: un mini reproductor con los controles que la gente usa
Antes
Después
Anterior, pausa y siguiente, frente a atrás 30, pausa y adelante 30.
Un mini reproductor tiene el menor espacio de la pantalla, así que cada control debe ganarse su lugar. Los tres del borrador son anterior, pausa y siguiente. Anterior y siguiente saltan a otro episodio.
La corrección usa atrás 30, pausa y adelante 30. La portada y el título, "Why great apps feel...", se quedan a la izquierda, con el programa debajo. La línea de progreso recorre el borde superior del reproductor, así muestra cuánto va del episodio sin gastar una fila.
La regla para reutilizar: un mini reproductor debe tener los tres botones que la gente realmente usa mientras escucha.
Las correcciones menores
- Un solo borde izquierdo. Los márgenes del borrador eran de 14 px a la izquierda y 12 px a la derecha. La corrección usa 20 px en ambos lados y 16 px entre tarjetas.
- Un solo morado de marca. La corrección usa #8B5CF6 para rellenos y botones de play, y un #7C3AED más oscuro para texto morado pequeño, que necesita más contraste para leerse.
- Una escala tipográfica real. El texto pasó de 8 a 20 px a tamaños de iOS de 11 a 28 pt.
- Un título más grande, una cabecera más pequeña. La cabecera del borrador tenía un icono de búsqueda, una campana y un avatar. La corrección mantiene el avatar y un título grande "Podcasts".
- Cuatro pestañas, no cinco. Home, Browse, Library, Search y Profile pasaron a ser Listen now, Browse, Library y Search. El perfil es el avatar de la cabecera.
Audita tu propia app de podcasts
| Pregunta | Por qué importa |
|---|---|
| ¿El episodio pausado es más grande que las otras portadas? | Es el toque siguiente más probable |
| ¿Puede un oyente retroceder 30 segundos desde la pantalla de inicio? | Los oyentes interrumpidos lo necesitan primero |
| ¿Los títulos ocupan varias líneas o se cortan? | Un título cortado no se puede leer |
| ¿Cuántos iconos terminan cada fila? | Una acción se encuentra, tres se escanean |
| ¿El color de género significa una sola cosa? | El color debe marcar el elegido |
| ¿El mini reproductor tiene los botones que la gente usa? | Atrás y adelante 30 son los que más usan quienes escuchan audiolibros y podcasts |
Consigue el archivo de Figma
El archivo gratis tiene ambas pantallas como componentes, cada corrección como par de antes y después, las variables de color y los estilos de texto de iOS.
Archivo gratis de Figma
Pantalla de inicio de podcasts, antes y después
Ambas pantallas y cada parte corregida como componentes de Figma. Gratis, solo lectura, duplícalo a tus borradores.
FAQ
¿Qué debe mostrar primero la pantalla de inicio de una app de podcasts?
El episodio que el oyente tenía a la mitad, en una tarjeta grande con el tiempo restante, play, y atrás y adelante 30. Los rankings, géneros y programas nuevos van después.
¿Qué botones debe tener el mini reproductor de una app de podcasts?
Atrás 30, pausa y adelante 30. Episodio anterior y siguiente saltan a otro episodio, así que déjalos para el reproductor completo.
¿Cómo se diseña una sección de continuar escuchando?
Una tarjeta para el último episodio pausado, con la portada, el título completo, el programa, el tiempo restante y una barra de progreso, más los controles para retomar. No le des el mismo tamaño que a las otras portadas.
¿Cómo debe listar episodios una app de podcasts?
Deja que el título ocupe dos líneas, pon el día y la duración en una línea gris y termina la fila con un botón de play. Mueve la descarga y el menú a la página del episodio.
¿Cómo se diseñan los filtros de género de una app de podcasts?
Una fila de píldoras en un solo estilo, con la seleccionada rellena con el color de marca y More al final. Seis colores en seis etiquetas hacen que el color no signifique nada.
¿Qué tamaño de fuente debe usar una app de podcasts?
La escala de texto de la plataforma. La pantalla corregida usa tamaños de iOS de 11 a 28 pt, con un título grande.
Fuentes
- Ambas pantallas son nuestras, diseñadas y medidas en Figma. Los nombres de programas, episodios y personas son inventados; las portadas son fotos con el nombre del programa encima.
- Fotos vía Pexels de Jace Oner, Somogro Bangladesh, Sound On, Brett Sayles, Ali Dashti, frank minjarez y pessoas uem.
- 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 de área táctil de 44 pt.
- Publicado por primera vez 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
