Technologie de remise en forme
SmartFit : amener l'expérience d'entraînement sur l'écran d'un appareil
La conception et la structure technique d'une interface SmartFit qui rassemble le suivi de session, les commandes d'appareils et les interactions multimédias.
Que doit faire un écran pendant une séance d’entraînement ?
La valeur d’un écran de tapis roulant ne se mesure pas par la quantité d’informations qu’il affiche. Une personne qui fait de l'exercice doit être capable de lire le temps, la vitesse et la distance d'un seul coup d'œil, et de modifier un réglage sans perdre sa place dans la séance.
SmartFit est un projet logiciel de tapis roulant construit autour de ce besoin. Les informations de session, les commandes d'ajustement et les vues multimédias sont traitées comme des parties d'une seule interface. Sa livraison commerciale sur le marché allemand offre un contexte produit international pour ce travail d'écran-appareil.
Trois besoins sur un seul écran
Le temps de session et la commande Start/Stop occupent le centre. Les jauges circulaires placent les informations de cadence et d’énergie autour de ce point focal. La zone inférieure contient les réglages de vitesse, de vide et de niveau infrarouge, tandis que les panneaux latéraux contiennent des commandes supplémentaires et une sélection de médias.
La mise en page établit une hiérarchie entre les informations fréquemment consultées et les actions moins fréquentes. Les utilisateurs voient d’abord l’état de la session, puis accèdent au contrôle dont ils ont besoin. L’objectif est de refléter l’ordre d’utilisation plutôt que de donner à chaque fonction le même poids visuel.
Rendre l'état de la session visible
Le démarrage d’une session ouvre un compte à rebours de trois secondes. Le minuteur avance pendant une session en cours et arrête la mise à jour lorsqu'il est arrêté. Le temps, la distance et d'autres champs partagent un modèle de données WorkoutStats.
React maintient les états d'exécution et de compte à rebours séparément. Un hook useEffect gère et nettoie la minuterie. Cela connecte les mises à jour d’écran au cycle de vie de la session. Pour l’utilisateur, le résultat est un changement d’état compréhensible après chaque action.
Jauges réutilisables et limites claires des composants
CircularGauge accepte une valeur, un maximum, une étiquette, une unité et une couleur pour restituer une jauge SVG. Le même composant peut représenter différentes métriques avec une règle visuelle cohérente, réduisant ainsi le travail répété à mesure que l'écran évolue.
React et TypeScript définissent l'interface, tandis que Recharts gère le diagramme de rythme. Les champs saisis rendent le modèle de données explicite ; les limites des composants séparent le comportement de la minuterie, du contrôle et du média. Les panneaux latéraux sont simplifiés pour les largeurs d'écran plus étroites.
De retour des médias à l'entraînement
La sélection multimédia s'ouvre sous la forme d'une superposition distincte que les utilisateurs peuvent fermer pour revenir à l'entraînement. La vue multimédia est distincte du composant principal contenant les données de session.
Dans l'interface inspectée, des exemples de cartes représentent du contenu multimédia. Ce travail démontre des flux de sélection et de retour plutôt qu'une intégration complète de service vidéo. Les médias peuvent occuper l’écran, mais les utilisateurs ont toujours besoin d’un chemin évident pour revenir à leur session.
De l'état de l'interface aux données de l'appareil
L'interface locale simule les mises à jour de cadence, de calories et de distance, et utilise des exemples de données pour le diagramme d'allure. Cela permet d'explorer les états de l'écran sans matériel. Dans une intégration de dispositif, les couches de mesure et de contrôle fourniraient les données correspondantes.
Une demande de contrôle et un état confirmé de l'appareil sont distincts : toucher le bouton d'accélération exprime une demande, tandis que le retour de l'appareil confirme la vitesse résultante. SmartFit fournit un modèle d'interface concret pour prendre en compte l'expérience utilisateur ainsi que les responsabilités liées aux appareils.