Fitnesstechnologie
SmartFit: Bringen Sie das Trainingserlebnis auf den Gerätebildschirm
Das Design und die technische Struktur einer SmartFit-Schnittstelle, die Sitzungsverfolgung, Gerätesteuerung und Medieninteraktionen zusammenbringt.
Was soll ein Bildschirm während des Trainings tun?
Der Wert eines Laufbandbildschirms wird nicht daran gemessen, wie viele Informationen er anzeigt. Eine trainierende Person sollte in der Lage sein, Zeit, Geschwindigkeit und Distanz auf einen Blick abzulesen und eine Einstellung zu ändern, ohne ihren Platz in der Trainingseinheit zu verlieren.
SmartFit ist ein Laufband-Softwareprojekt, das auf diesem Bedarf basiert. Sitzungsinformationen, Anpassungssteuerungen und Medienansichten werden als Teile einer Schnittstelle behandelt. Die kommerzielle Auslieferung für den deutschen Markt bietet einen internationalen Produktkontext für diese Geräte-Bildschirm-Arbeit.
Drei Bedürfnisse auf einem Bildschirm
Die Sitzungszeit und die Start/Stopp-Steuerung stehen im Mittelpunkt. Kreisförmige Messgeräte platzieren Trittfrequenz- und Energieinformationen rund um diesen Brennpunkt. Der untere Bereich enthält Geschwindigkeits-, Vakuum- und Infrarotstufeneinstellungen, während die Seitenwände zusätzliche Bedienelemente und Medienauswahl enthalten.
Das Layout stellt eine Hierarchie zwischen häufig angezeigten Informationen und weniger häufigen Aktionen her. Benutzer sehen zunächst den Sitzungsstatus und gelangen dann zu der Steuerung, die sie benötigen. Das Ziel besteht darin, die Reihenfolge der Verwendung widerzuspiegeln, anstatt jeder Funktion das gleiche visuelle Gewicht zu verleihen.
Sitzungsstatus sichtbar machen
Beim Starten einer Sitzung wird ein Countdown von drei Sekunden gestartet. Der Timer läuft während einer laufenden Sitzung weiter und stoppt die Aktualisierung, wenn er gestoppt wird. Zeit, Distanz und andere Felder teilen sich ein WorkoutStats-Datenmodell.
React verwaltet den Lauf- und Countdown-Status getrennt. Ein useEffect-Hook verwaltet und bereinigt den Timer. Dadurch werden Bildschirmaktualisierungen mit dem Sitzungslebenszyklus verknüpft. Das Ergebnis ist für den Benutzer eine nachvollziehbare Zustandsänderung nach jeder Aktion.
Wiederverwendbare Messgeräte und klare Komponentengrenzen
CircularGauge akzeptiert einen Wert, ein Maximum, eine Beschriftung, eine Einheit und eine Farbe, um ein SVG-Messgerät darzustellen. Dieselbe Komponente kann unterschiedliche Metriken mit einer konsistenten visuellen Regel darstellen, wodurch wiederholte Arbeiten bei der Weiterentwicklung des Bildschirms reduziert werden.
React und TypeScript definieren die Schnittstelle, während Recharts das Pace-Chart übernimmt. Typisierte Felder machen das Datenmodell explizit; Komponentengrenzen trennen Timer, Steuerung und Medienverhalten. Bei schmaleren Bildschirmbreiten werden die Seitenwände vereinfacht.
Rückkehr von den Medien zum Training
Die Medienauswahl wird als separates Overlay geöffnet, das Benutzer schließen können, um zum Training zurückzukehren. Die Medienansicht ist von der Hauptkomponente, die Sitzungsdaten enthält, getrennt.
In der untersuchten Oberfläche stellen Beispielkarten Medieninhalte dar. Diese Arbeit demonstriert eher Auswahl- und Rückströme als eine abgeschlossene Videodienstintegration. Medien können den Bildschirm belegen, aber Benutzer benötigen dennoch einen klaren Weg zurück zu ihrer Sitzung.
Vom Schnittstellenstatus bis zu Gerätedaten
Die lokale Schnittstelle simuliert Trittfrequenz-, Kalorien- und Distanzaktualisierungen und verwendet Beispieldaten für das Tempodiagramm. Dadurch können Bildschirmzustände ohne Hardware erkundet werden. Bei einer Geräteintegration würden Mess- und Steuerungsschichten die entsprechenden Daten bereitstellen.
Eine Steueranforderung und ein bestätigter Gerätestatus sind zu unterscheiden: Durch Berühren der Beschleunigungstaste wird eine Anforderung ausgedrückt, während die Rückmeldung des Geräts die resultierende Geschwindigkeit bestätigt. SmartFit bietet ein konkretes Schnittstellenmodell zur Berücksichtigung der Benutzererfahrung neben den Geräteverantwortlichkeiten.