Design de app de saúde: a tela inicial de um app de consultas médicas, antes e depois
Um app de consultas médicas que abre com um banner de desconto, e a mesma tela corrigida para que a próxima consulta venha primeiro. Cada mudança lado a lado, o motivo de cada uma e o arquivo grátis do Figma.
As pessoas abrem um app de saúde por um motivo acima de todos: a próxima consulta. O primeiro rascunho abaixo abre com um banner de desconto, e a consulta fica numa faixa fininha perto do rodapé. A correção coloca a consulta em primeiro lugar e corta tudo o que competia com ela.
Todas as funções continuam lá. Você ainda pode buscar, navegar por especialidades, marcar um médico e mandar mensagem para a clínica.
A tela inteira, antes e depois
Rascunho júnior
Corrigido
À esquerda, a primeira coisa grande é uma oferta: um banner verde-azulado com a foto de um médico, um botão e um link. Aquilo que a pessoa veio buscar, a consulta com a Dra. Sarah Lee na terça, é o menor bloco da tela e fica embaixo de duas outras seções.
À direita, a mesma consulta é o maior bloco, com o médico, a data, o horário e um botão para iniciar a videochamada. A oferta saiu da tela inicial, porque um desconto de primeira consulta serve para quem ainda não marcou, e essa pessoa já marcou.
| Rascunho júnior | Corrigido | |
|---|---|---|
| Primeiro bloco da tela | Banner de desconto, 149 px de altura | Próxima consulta, 174 px de altura |
| Margem lateral | 14 à esquerda, 12 à direita | 20 em todas as linhas |
| Tamanhos de texto | 8 a 18 px | 11 a 28 pt, a escala tipográfica do iOS |
| Cores das categorias | 8 | 1, o verde-azulado da marca |
| Itens no card do médico | 9 | 3 linhas e um chevron |
| Ícones no cabeçalho | 3 | 1, mais um avatar |
| Abas | 5 | 4 |
Correção 1: coloque a próxima consulta primeiro
Antes
Depois
"Agende sua primeira consulta agora!" com 20% de desconto na primeira consulta por vídeo, um botão Agendar agora, um link Saiba mais e pontinhos de carrossel, contra um card de Próxima consulta com a Dra. Sarah Lee, Cardiologista, um botão de videochamada e a data e o horário em uma linha.
Uma tela inicial deve responder "o que preciso fazer agora?" antes de responder qualquer outra coisa. Para um paciente que volta, isso é a consulta: com quem, quando e como entrar. No rascunho, essa resposta está lá embaixo, numa linha de texto pequeno com um link "Detalhes".
A correção transforma a consulta no herói. O rosto e o nome do médico dizem quem é, a data e o horário ficam numa linha, e o ícone de vídeo é um toque para entrar. Um banner teria que ser dispensado, um card com botão é usado.
A data também ficou mais curta e fácil de ler. "Ter, 28 de out de 2026 • 10:30 - 11:00" virou "Ter, 28 out" e "10:30", porque o ano não está em dúvida e o horário de término raramente é necessário para decidir se você vai aparecer.
Regra para reutilizar: o topo de uma tela inicial pertence àquilo pelo qual as pessoas voltam, não àquilo que você quer vender.
Correção 2: quatro especialidades, uma cor
Antes
Depois
Oito ícones redondos em oito cores, Cardiologia, Dentista, Oftalmologia, Pneumologia, Neurologia, Ortopedia, Pediatria e Mais, contra quatro blocos brancos com ícones verde-azulados: Cardio, Dental, Olhos e Mais.
Oito cores em oito ícones dão ao olho oito lugares para parar e nenhum motivo para parar em qualquer um deles. Cor é um sinal, e aqui ela não diz nada: o coração vermelho não é mais urgente que o olho roxo.
A correção mantém uma cor, o verde-azulado da marca, para que a cor volte a significar algo. Os rótulos são mais curtos ("Cardio", "Dental", "Olhos") para caber cada um em uma linha num tamanho legível. E só quatro aparecem, com um bloco "Mais", porque quem precisa de uma especialidade mais rara vai usar a busca, que está logo acima.
Correção 3: um card de médico que vira linha
Antes
Depois
Um card com foto, nome, "Cardiologista | City Heart Clinic", cinco estrelas, 4,8 (120 avaliações), "Valor: R$ 50", uma pílula Disponível hoje, um botão Agendar agora e um coração, com o próximo card cortado, contra duas linhas com uma foto pequena, nome, "Cardiologista · 1,2 km" e uma nota de 4,9 (212).
O card do rascunho carrega nove informações e duas ações. Cada uma é razoável sozinha. Juntas, transformam o card num formulário que o leitor precisa escanear linha por linha, e o botão Agendar agora em cada card faz de uma tela de navegação um balcão de vendas.
A correção mantém três linhas: o nome, depois a especialidade e a distância, que decide se você realmente pode ir, depois uma avaliação com o número de comentários. O valor, a disponibilidade e o botão de agendar vão para a página do próprio médico, onde há espaço para explicá-los. Um chevron diz "toque para abrir".
As linhas também são verticais, não um carrossel lateral. Um card cortado na borda é uma dica razoável de que há mais, mas uma lista deixa comparar dois médicos de relance, que é a tarefa de verdade.
Correção 4: um ícone no cabeçalho
Antes
Depois
"Olá, Leo!" com "Como você está se sentindo hoje?" e ícones de busca, sino e chat, contra um avatar verde com iniciais, "Bom dia, Leo Martins" e um sino com uma bolinha vermelha.
O cabeçalho do rascunho tem três ícones, e dois deles são repetidos. O sino no cabeçalho e a aba Notificações abrem o mesmo lugar, e o ícone de chat e a aba Chat também. Quando duas portas levam à mesma sala, as pessoas se perguntam qual é a verdadeira.
O ícone de busca faz as vezes de um campo de busca. A correção mostra o próprio campo, uma linha abaixo da consulta, então não há nada para abrir. O sino fica porque um lembrete ou uma mensagem da clínica é a única coisa que merece uma bolinha vermelha.
As correções menores
- Quatro abas, não cinco. Notificações saiu da barra de abas porque o sino já cobre isso. "Chat" virou "Mensagens", a palavra do outro lado da maioria das caixas de entrada.
- Um avatar com iniciais. Um círculo verde-azulado sólido com LM diz de quem é a conta, como todos os outros apps fazem.
- Uma margem. O rascunho usa 14 à esquerda e 12 à direita. A correção usa 20 dos dois lados de todas as linhas, com espaçamentos de 8, 12, 14 e 20.
- Saudação simples. "Olá, Leo! Como você está se sentindo hoje?" fazia uma pergunta que a tela não sabia responder. "Bom dia, Leo Martins" não faz.
- Sem carrossel de ofertas. O banner tinha três pontinhos e um segundo link ao lado do botão. A correção tira a oferta desta tela e deixa uma ação clara no herói.
Audite seu próprio app de saúde
| Pergunta | Por que importa |
|---|---|
| A próxima consulta é a primeira coisa na tela? | É o motivo pelo qual as pessoas voltam |
| Dá para entrar numa videochamada com um toque? | A consulta é o produto |
| Toda cor significa alguma coisa? | Oito cores não significam nada |
| A linha do médico mostra quem, o quê, a que distância e quão bom? | É assim que as pessoas escolhem |
| Algum ícone do cabeçalho repete uma aba? | Portas duplicadas reduzem a confiança |
| A oferta aparece só para quem ainda não agendou? | Um paciente que volta não precisa de desconto de primeira consulta |
Baixe o arquivo do Figma
O arquivo grátis tem as duas telas, cada parte corrigida como componente de antes e depois, as variáveis de cor da interface, os estilos de texto do iOS e um leia-me com os créditos das fotos.
Arquivo grátis do Figma
Tela inicial de consultas médicas, antes e depois
As duas telas e cada parte corrigida como componentes do Figma. Grátis, somente visualização, duplique para seus rascunhos.
FAQ
O que a tela inicial de um app de consultas médicas deve mostrar primeiro?
A próxima consulta, com o médico, a data, o horário e uma forma de entrar na videochamada. Busca e especialidades vêm depois.
Quantas especialidades um app de saúde deve mostrar na tela inicial?
Quatro ou mais ou menos isso, mais um bloco Mais. Quem procura algo mais raro usa a busca, então uma grade longa de oito ou mais ícones coloridos só adiciona ruído.
O que o card de um médico deve mostrar em um app de saúde?
O nome, a especialidade, a distância do médico e uma avaliação com o número de comentários. Valores, disponibilidade e o botão de agendar pertencem à página do médico.
Um app de saúde deve usar um banner promocional na tela inicial?
Não acima de uma consulta próxima. Uma oferta de primeira consulta serve para quem ainda não agendou, e pacientes que voltam vieram por outro motivo.
De quantas abas um app de saúde precisa?
Quatro bastam: Início, Consultas, Mensagens e Perfil. Notificações podem ficar no cabeçalho como um sino com uma bolinha.
Fontes
- As duas telas são nossas, desenhadas e medidas no Figma.
- Fotos via Unsplash de Jonathan Borba, Bruno Rodrigues e vaibhav vivian, sob a Licença Unsplash.
- Publicado originalmente 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
