Design de app de podcast: redesign da tela inicial, antes e depois
Uma tela inicial de app de podcast feita por júnior, com um fio de progresso, três ícones em cada linha do ranking e seis cores de gênero, e a mesma tela corrigida. Cada mudança lado a lado, o motivo de cada uma e o arquivo grátis do Figma.
A coisa que mais se faz em um app de podcast é retomar de onde parou. O primeiro rascunho abaixo tem tudo o que um ouvinte precisa e esconde justamente isso: o episódio que a pessoa estava ouvindo fica num cardzinho com um fio de progresso, entre três capas. A correção mantém os programas, o ranking e os gêneros, e faz do episódio pausado a maior coisa da tela.
A tela inteira, antes e depois
Rascunho júnior
Corrigido
À esquerda, o episódio da pessoa é uma de três capas iguais com 2 px de progresso embaixo, e cada linha do ranking termina em três ícones. À direita, o episódio pausado tem seu próprio card com barra de progresso de 6 px e três controles grandes, e as linhas da lista terminam em um botão.
| Rascunho júnior | Corrigido | |
|---|---|---|
| Episódio pausado | Uma de 3 capas, linha de progresso de 2 px | Um card, barra de progresso de 6 px, 3 controles |
| Ícones em cada linha da lista | 3 | 1 |
| Cores de gênero | 6 | 1 |
| Controles do mini player | Anterior, pausar, próximo | Voltar 30, pausar, avançar 30 |
| Abas | 5 | 4 |
| Margem lateral | 14 px à esquerda, 12 px à direita | 20 px nos dois lados |
| Tamanhos de texto | 8 a 20 px | 11 a 28 pt |
Correção 1: um card grande para o episódio que você deixou
Antes
Depois
Três capas com um fio de progresso, contra um card com o tempo restante e os controles.
O "Continuar ouvindo" do rascunho é uma prateleira. Três capas lado a lado, do mesmo tamanho, cada uma com uma linha de progresso de 2 px, um título cortado em "Ep. 142: Why Great Apps Feel Calm (And..." e "23 min restantes" em letra cinza pequena. Para retomar o que importa, o ouvinte abre um episódio, espera um player e aperta play.
A correção dá um card ao episódio pausado. A capa, um rótulo roxo, "Continuar ouvindo · 23 min restantes", o título completo, "Why great apps feel calm", e o programa, "Studio Hour · Episódio 142", ficam no topo. Embaixo, uma barra de progresso de 6 px fica ao lado de três controles: voltar 30, play e avançar 30. As outras duas capas saíram desta seção.
Os botões de voltar e avançar 30 são uma seta circular com 30 dentro, em áreas de toque de 44 px, o padrão que o Audible usa. Um ouvinte que foi interrompido pode voltar meio minuto sem sair da tela inicial.
A regra para reaproveitar: o que a pessoa estava fazendo é a próxima ação mais provável, então dê a isso um card e seus controles.
Correção 2: títulos em duas linhas e um botão de play
Antes
Depois
Títulos cortados, números de posição e três ícones, contra títulos inteiros e um botão de play.
As linhas do ranking no rascunho terminam cada uma em uma seta de download, um menu de três pontos e um triângulo de play, então o título precisa caber no que sobra, e não cabe: "The Week in Tech, in 20 Minutes: Al...", "How to Learn Anything in 30 Days...", "Live from Brooklyn Part 2 (Uncut Ex...". A posição é um número roxo grande, e sob cada título uma linha traz o programa, a categoria e a duração.
A correção deixa o título quebrar em duas linhas: "The week in tech, in 20 minutes". Embaixo vai uma linha só, o dia e a duração, "Hoje · 21 min". À direita fica um botão redondo de play, a única ação que uma linha precisa, e a área de toque é grande o bastante para acertar. O download e o menu não estão na linha, e este redesign não desenha para onde eles vão.
Este redesign mudou a função da lista, não só a aparência. Cinco linhas ranqueadas de "Top Charts" viraram três linhas de "Próximos", então um app de verdade ainda precisa de um lugar para o ranking.
A regra para reaproveitar: deixe o título quebrar, porque um título cortado não dá para ler, e dê a cada linha uma ação.
Correção 3: gêneros em um só estilo
Antes
Depois
Seis cores sólidas em duas linhas, contra uma fileira de pílulas com uma preenchida.
As tags de gênero do rascunho são rosa, azul, vermelha, verde, laranja e verde-azulada, cada uma com texto branco sólido. Ocupam duas linhas.
A correção é uma fileira de pílulas em um só estilo. "Todos" é preenchido com o roxo da marca, #8B5CF6, e o resto é branco. "Mais" fica no fim para os gêneros que não cabem. Uma pílula preenchida é a única que significa algo: "é isto que você está vendo".
A regra para reaproveitar: a cor deve dizer qual está escolhido. Não deve dizer qual é qual.
Correção 4: um mini player com os controles que as pessoas usam
Antes
Depois
Anterior, pausar e próximo, contra voltar 30, pausar e avançar 30.
Um mini player tem o menor espaço da tela, então cada controle nele precisa merecer seu lugar. Os três do rascunho são anterior, pausar e próximo. Anterior e próximo pulam para outro episódio.
A correção usa voltar 30, pausar e avançar 30. A capa e o título, "Why great apps feel...", ficam à esquerda, com o programa embaixo. A linha de progresso corre pela borda superior do player, então mostra quanto do episódio já passou sem ocupar uma linha.
A regra para reaproveitar: um mini player deve ter os três botões que as pessoas realmente usam enquanto ouvem.
As correções menores
- Uma borda esquerda só. As margens do rascunho eram 14 px à esquerda e 12 px à direita. A correção usa 20 px nos dois lados e 16 px entre os cards.
- Um roxo de marca só. A correção usa #8B5CF6 para preenchimentos e botões de play, e um #7C3AED mais escuro para texto roxo pequeno, que precisa de mais contraste para ser lido.
- Uma escala tipográfica de verdade. O texto foi de 8 a 20 px para os tamanhos do iOS, de 11 a 28 pt.
- Um título maior, um cabeçalho menor. O cabeçalho do rascunho tinha um ícone de busca, um sino e um avatar. A correção mantém o avatar e um título grande "Podcasts".
- Quatro abas, não cinco. Início, Explorar, Biblioteca, Busca e Perfil viraram Ouvir agora, Explorar, Biblioteca e Busca. O perfil é o avatar no cabeçalho.
Faça a auditoria do seu app de podcast
| Pergunta | Por que importa |
|---|---|
| O episódio pausado é maior que as outras capas? | É o próximo toque mais provável |
| O ouvinte consegue voltar 30 segundos a partir da tela inicial? | Ouvintes interrompidos precisam disso primeiro |
| Os títulos quebram ou são cortados? | Um título cortado não dá para ler |
| Quantos ícones terminam cada linha? | Uma ação se encontra, três se escaneiam |
| A cor de gênero significa uma coisa só? | A cor deve marcar o escolhido |
| O mini player tem os botões que as pessoas usam? | Voltar e avançar 30 são os que quem ouve audiolivro e podcast mais usa |
Pegue o arquivo do Figma
O arquivo grátis tem as duas telas como componentes, cada correção em um par de antes e depois, as variáveis de cor e os estilos de texto do iOS.
Arquivo grátis do Figma
Tela inicial de podcast, antes e depois
As duas telas e cada parte corrigida como componentes do Figma. Grátis, só visualização, duplique para os seus rascunhos.
FAQ
O que a tela inicial de um app de podcast deve mostrar primeiro?
O episódio que o ouvinte estava ouvindo, em um card grande com o tempo restante, play, e voltar e avançar 30. Rankings, gêneros e programas novos vêm depois.
Que botões um mini player de podcast deve ter?
Voltar 30, pausar e avançar 30. Episódio anterior e próximo pulam para outro episódio, então deixe-os para o player completo.
Como desenhar uma seção de continuar ouvindo?
Um card para o último episódio pausado, com a capa, o título completo, o programa, o tempo restante e uma barra de progresso, mais os controles para retomar. Não dê a ele o mesmo tamanho das outras capas.
Como um app de podcast deve listar episódios?
Deixe o título quebrar em duas linhas, ponha o dia e a duração em uma linha cinza e termine a linha com um botão de play. Leve o download e o menu para a página do episódio.
Como desenhar filtros de gênero para um app de podcast?
Uma fileira de pílulas em um só estilo, com a selecionada preenchida na cor da marca e Mais no fim. Seis cores em seis tags fazem a cor não significar nada.
Que tamanho de fonte um app de podcast deve usar?
A escala de texto da plataforma. A tela corrigida usa tamanhos do iOS de 11 a 28 pt, com um título grande.
Fontes
- As duas telas são nossas, desenhadas e medidas no Figma. Nomes de programas, episódios e pessoas são inventados; as capas são fotos com o nome do programa aplicado sobre elas.
- Fotos via Pexels por Jace Oner, Somogro Bangladesh, Sound On, Brett Sayles, Ali Dashti, frank minjarez e pessoas uem.
- Apple Human Interface Guidelines: Typography, para os tamanhos de texto do iOS usados na tela corrigida.
- Apple Human Interface Guidelines: Accessibility, para o tamanho de área de toque de 44 pt.
- Publicado pela primeira vez como carrossel no 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
