Durante a série
Carga, repetições e avanço próximos um do outro. A navegação não deve disputar atenção com o exercício.
PB.FIT
Uma interface para
o momento do treino.
Design de produto para uma PWA de treino: séries, descanso, histórico e continuidade de sessão, com propostas de IA revisadas antes de salvar.
- Escopo
- Produto · Interface · Interação
- Plataforma
- PWA / celular primeiro
PLANEJAR. TREINAR. CONTINUAR.
O próximo passo,
sem procurar.
Séries, descanso e memória do exercício.Experimentar a interface ↘
01 / O CONTEXTO
Atenção dividida.
Uma mão no celular.
O app é usado entre séries, com luz variável e pouco tempo para procurar uma função. A interface precisa tornar a próxima ação evidente.
Entre sessões
O último registro pertence ao exercício, mesmo quando ele aparece em outro treino.
Ao voltar
Pausar, retomar e concluir são estados diferentes. A continuidade precisa preservar o que já foi registrado.
02 / DO PROGRAMA À SÉRIE
Uma rotina tem
mais de um treino.
O programa reúne os treinos. Cada treino tem seus exercícios, dias e horários. Durante a sessão, a interface muda de prioridade: sai a organização da semana, entra a próxima série.
- 01 / PROGRAMA
A estrutura da rotina
Nome, identidade visual e um conjunto de treinos. Mais de um programa pode coexistir.
- 02 / TREINO
O plano para aquele dia
Exercícios, ordem, dias da semana, período e horário. Treinos avulsos também têm espaço.
- 03 / EXECUÇÃO
O que acontece na série
Referência de movimento, registro anterior, carga, repetições e descanso no contexto do exercício.
INTERFACE REAL DO APLICATIVO
Entre no fluxo.
Role as telas.
Deslize entre os programas e role para encontrar os treinos. Você pode abrir, criar e editar nesta demonstração.
O código e as telas são do PB.FIT. Os programas e registros são fictícios; as alterações ficam apenas nesta demonstração e são reiniciadas ao trocar de tela.
↕ Role dentro da tela para explorar
FEEDBACK → AJUSTE
Arrastar precisava
de uma alternativa.
“A organização dos treinos com arraste também não está funcionando bem no iPhone, não está intuitiva também.”
Relato de uso registrado durante o desenvolvimento · outubro de 2026
Problema
Rolar a lista e reorganizar um treino disputavam o mesmo gesto. O ponto de arraste não deixava claro como começar.
Decisão
“Organizar” revela alças de 44 px. O card acompanha o dedo, a lista rola nas bordas e o toque na alça oferece mover uma posição.
Conferência
Ordem salva, rolagem, cancelamento e alternativa por toque foram conferidos em simulação móvel. O histórico não registra uma validação posterior no iPhone físico.
03 / LINGUAGEM DE MOVIMENTO
O exercício também
precisa ser entendido.
A biblioteca conecta o nome do exercício à sua execução. A sessão mantém a referência visual acima do registro de séries, sem tirar a pessoa do treino.
MOVIMENTOS REVISADOS / CÓDIGO VETORIAL
Um vocabulário
para o movimento.
O estudo articula o corpo, desenha o equipamento e marca a trajetória em azul. O mesmo sistema visual se aplica a diferentes exercícios.
No leg press, a vista lateral destaca a flexão e a extensão das pernas e a trajetória da plataforma. A animação pode ser pausada para observar o movimento.
04 / IA NO PROCESSO
A proposta passa
por uma pessoa.
A geração assistida parte das preferências e do contexto do usuário. A proposta pode ser revisada antes de entrar nos treinos.
- 01
Contexto
Objetivos, rotina e preferências.
- 02
Proposta
Uma estrutura de treino sugerida.
- 03
Revisão
Ajustar e decidir antes de salvar.
- 04
Execução
Registrar o que foi realizado.
O Companion e a biblioteca conectam a proposta à organização do treino. O histórico registra a execução, não apenas o planejamento.
05 / A ENTREGA
Um produto para a rotina de treino.
Uma PWA que conecta organização de treinos, execução por séries, referências de exercícios e histórico pessoal. O case se concentra nas decisões de interface e continuidade.
Abrir PB.FIT ↗O produto requer acesso à conta.