📱 Wireframes - Saúde Livre
Visualização interativa dos wireframes das principais telas do MVP Saúde Livre.
🎨 Visualização
Os wireframes podem ser visualizados diretamente no navegador através do arquivo HTML interativo:
Nota: O arquivo HTML contém 12 wireframes completos das principais telas do MVP, visualizados em formato mobile (375x667px). Os wireframes são interativos e podem ser visualizados em qualquer navegador moderno.
📋 Telas Desenvolvidas
1. Splash / Login
- Tela inicial com logo
- Botões: Entrar / Criar Conta
- Design gradient (teal → blue)
2. Escolha de Cadastro
- Seleção CPF ou CNPJ
- Cards interativos
- Navegação clara
3. Formulário Cadastro CPF
- Nome completo
- CPF
- Data de nascimento
- Cartão SUS (opcional)
- Telefone
- Validações em tempo real
4. Home - Tela Principal
- Header com foto do usuário
- Banner rotativo (3 slides)
- Grid de serviços (3x3):
- Médicos, Clínicas, Hospitais
- Laboratórios, Farmácias, Dentista
- Fisioterapia, Estética, Meu Pet
- Tab bar de navegação
5. Lista de Profissionais
- Filtros por especialidade
- Cards com:
- Foto do profissional
- Nome, especialidade
- Rating (estrelas)
- Preço
- Botão "Agendar"
- Scroll infinito
6. Detalhes do Profissional
- Banner com imagem
- Informações completas:
- Nome, especialidade, CRM
- Rating e reviews
- Distância (geolocalização)
- Lista de serviços com preços:
- Preço tabela (riscado)
- Preço plataforma (destaque)
- Botão de pagamento total
7. Formulário de Agendamento
- Resumo do profissional
- Seleção de data (dropdown)
- Seleção de horário
- Formato (presencial/teleconsulta)
- Checkbox: agendamento para dependente
- Campo observações
- Botão finalizar
8. Tela de Pagamento
- Resumo dos serviços
- Total
- Métodos: PIX, Cartão, Dinheiro
- Geração de QR Code PIX
- Status do pagamento
9. Meus Agendamentos
- Tabs: Agendamentos / Serviços / Pagamento Avulso
- Cards com status:
- Amarelo: Aguardando liberação
- Verde: Confirmado
- Cinza: Concluído
- Informações:
- Código, local, data/hora
- Tipo de serviço, valor
- Botões de ação
10. Crédito Saúde
- Card de crédito visual
- Limite disponível (grande)
- Limite total vs usado
- Lista de produtos:
- Auto Credi
- Poupança Saúde
- Seguros (internação, cirurgia)
11. Perfil do Usuário
- Header com foto e dados
- Seções organizadas:
- Meus Dados, Dependentes
- Meus Exames, Vacinas
- Minhas Receitas, Pets
- Notificações, Ajuda
- Termos, Privacidade
- Botão sair (vermelho)
12. Painel Admin - Agenda
- Seleção de estabelecimento
- Date picker
- Tabs: Agendamentos / Serviços / Pagamento
- Lista de horários:
- Agendamentos pendentes
- Horários livres
- Botões de ação (confirmar, editar)
🔄 Fluxos Principais
- Cadastro → Home → Serviço → Agendamento → Pagamento
- Meus Agendamentos → Acompanhamento de status
- Crédito Saúde → Produtos financeiros
- Perfil → Documentos e configurações
- Admin → Gestão de agenda da clínica
📐 Especificações
- Resolução base: 375x667px (iPhone SE/8)
- Design: Mobile First
- Fidelidade: Baixa (wireframes)
- Próximo passo: Protótipos de alta fidelidade no Figma
📝 Notas Técnicas
- Wireframes em baixa fidelidade para validação de fluxo
- Design responsivo mobile-first
- Padrões de UI seguindo Material Design e iOS Guidelines
- Foco em usabilidade e acessibilidade
- Próximos passos: protótipos de alta fidelidade no Figma
Última atualização: Dezembro 2025