Tecnologia de condicionamento físico
SmartFit: Trazendo a experiência de treino para a tela do dispositivo
O design e a estrutura técnica de uma interface SmartFit que reúne rastreamento de sessões, controles de dispositivos e interações de mídia.
O que uma tela deve fazer durante um treino?
O valor da tela de uma esteira não é medido pela quantidade de informações que ela exibe. Uma pessoa que se exercita deve ser capaz de ler rapidamente o tempo, a velocidade e a distância e alterar uma configuração sem perder o lugar na sessão.
SmartFit é um projeto de software de esteira desenvolvido em torno dessa necessidade. As informações da sessão, os controles de ajuste e as visualizações de mídia são tratados como partes de uma interface. A sua entrega comercial para o mercado alemão fornece um contexto de produto internacional para este trabalho de dispositivo-tela.
Três necessidades em uma tela
O tempo da sessão e o controle Start/Stop ocupam o centro. Os medidores circulares colocam informações de cadência e energia em torno desse ponto focal. A área inferior contém ajustes de velocidade, vácuo e nível de infravermelho, enquanto os painéis laterais possuem controles adicionais e seleção de mídia.
O layout estabelece uma hierarquia entre informações visualizadas com frequência e ações menos frequentes. Os usuários primeiro veem o estado da sessão e depois alcançam o controle necessário. O objetivo é refletir a ordem de uso, em vez de dar a cada função o mesmo peso visual.
Tornando o estado da sessão visível
Iniciar uma sessão abre uma contagem regressiva de três segundos. O cronômetro avança durante uma sessão em execução e para de atualizar quando é interrompido. Tempo, distância e outros campos compartilham um modelo de dados WorkoutStats.
O React mantém os estados de execução e contagem regressiva separadamente. Um gancho useEffect gerencia e limpa o cronômetro. Isso conecta as atualizações de tela ao ciclo de vida da sessão. Para o usuário, o resultado é uma mudança de estado compreensível após cada ação.
Medidores reutilizáveis e limites claros de componentes
CircularGauge aceita valor, máximo, rótulo, unidade e cor para renderizar um medidor SVG. O mesmo componente pode representar métricas diferentes com uma regra visual consistente, reduzindo o trabalho repetido conforme a tela evolui.
React e TypeScript definem a interface, enquanto Recharts cuida do gráfico de ritmo. Os campos digitados tornam o modelo de dados explícito; os limites dos componentes separam o comportamento do temporizador, do controle e da mídia. Os painéis laterais são simplificados em larguras de tela mais estreitas.
Voltando da mídia para o treino
A seleção de mídia abre como uma sobreposição separada que os usuários podem fechar para retornar ao treino. A visualização da mídia é separada do componente principal que contém os dados da sessão.
Na interface inspecionada, cartões de exemplo representam conteúdo de mídia. Este trabalho demonstra fluxos de seleção e retorno em vez de uma integração completa de serviços de vídeo. A mídia pode ocupar a tela, mas os usuários ainda precisam de um caminho óbvio de volta à sessão.
Do estado da interface aos dados do dispositivo
A interface local simula atualizações de cadência, calorias e distância e usa dados de amostra para o gráfico de ritmo. Isso permite que os estados da tela sejam explorados sem hardware. Numa integração de dispositivos, as camadas de medição e controle forneceriam os dados correspondentes.
Uma solicitação de controle e um estado confirmado do dispositivo são distintos: tocar no botão de aceleração expressa uma solicitação, enquanto o feedback do dispositivo confirma a velocidade resultante. SmartFit fornece um modelo de interface concreto para considerar a experiência do usuário juntamente com as responsabilidades do dispositivo.