Fitness Teknolojileri
SmartFit: Egzersiz Deneyimini Cihaz Ekranına Taşımak
Seans takibi, cihaz kontrolleri ve medya deneyimini aynı ekranda bir araya getiren SmartFit arayüzünün tasarımı ve teknik yapısı.
Egzersiz sırasında ekran ne yapmalı?
Koşu bandında bir ekranın değeri, gösterdiği bilgi miktarıyla ölçülmez. Kullanıcı hareket ederken geçen süreyi, hızını ve katettiği mesafeyi kısa bir bakışla anlayabilmelidir. Bir ayarı değiştirmek için de egzersiz akışından kopması gerekmemelidir.
SmartFit bu ihtiyacı merkezine alan bir koşu bandı yazılımı çalışmasıdır. Seans bilgileri, ayar kontrolleri ve medya ekranları ortak bir arayüz içinde ele alınır. Projenin Almanya pazarına yönelik ticari teslimatı, cihaz ekranı deneyiminin uluslararası bir ürün bağlamında kullanılmasına örnek oluşturur.
Tek ekranda üç farklı ihtiyaç
Arayüzün merkezinde seans süresi ve Start/Stop kontrolü bulunur. Dairesel göstergeler kadans ve enerji bilgilerini bu merkezin çevresine yerleştirir. Alt bölüm hız, vakum ve kızılötesi seviye ayarlarına ayrılır; yan paneller ise ek cihaz kontrollerini ve medya seçimini taşır.
Bu yerleşim, sık bakılan bilgilerle daha seyrek kullanılan işlevler arasında bir hiyerarşi kurar. Kullanıcı önce seansın durumunu görür, ardından ihtiyacı olan kontrole ulaşır. Amaç her işlevi eşit büyüklükte sunmak değil, kullanım sırasını ekrana yansıtmaktır.
Seansın durumunu görünür kılmak
Başlangıçta üç saniyelik bir geri sayım gösterilir. Seans çalışırken sayaç ilerler; durdurulduğunda süre güncellemesi kesilir. Süre, mesafe ve diğer alanlar WorkoutStats adlı ortak veri modeliyle temsil edilir.
React tarafında seansın çalışıp çalışmadığı ve geri sayım ayrı durumlar olarak tutulur. Zamanlayıcı useEffect içinde yönetilir ve kapanışta temizlenir. Böylece ekrandaki hareket ile seansın yaşam döngüsü aynı akışta ele alınır. Kullanıcı açısından bunun karşılığı, verdiği komutun ekranda anlaşılır bir durum değişikliği oluşturmasıdır.
Göstergeleri yeniden kullanılabilir parçalara ayırmak
CircularGauge bileşeni değer, üst sınır, etiket, birim ve renk bilgilerini alarak SVG tabanlı bir gösterge üretir. Aynı bileşen farklı metrikleri aynı görsel kuralla gösterebilir. Bu yaklaşım, ekranı büyütürken her göstergeyi yeniden tasarlama ihtiyacını azaltır.
Tempo grafiği Recharts ile, ekran bileşenleri React ve TypeScript ile hazırlanır. TypeScript veri alanlarını açık hale getirirken bileşen sınırları sayaç, kontrol ve medya davranışlarını ayrı ayrı geliştirmeyi kolaylaştırır. Arayüzün farklı ekran genişliklerinde yan panelleri sadeleştirmesi de bu yapının bir parçasıdır.
Medya ekranından egzersize geri dönmek
SmartFit’te medya seçimi ayrı bir katman olarak açılır. Kullanıcı bu ekranı kapatarak egzersiz görünümüne geri döner; medya alanı seans verisini tutan ana bileşenden ayrıdır.
İncelenen arayüzde medya içerikleri örnek kartlarla temsil edilir. Buradaki tasarım çalışması, video servisleriyle tamamlanmış bir entegrasyondan çok, içerik seçimi ve egzersize dönüş akışını gösterir. Cihaz ekranında bu ayrım önemlidir: medya deneyimi genişleyebilir, ancak kullanıcı temel seans bilgilerine nasıl döneceğini her zaman bilmelidir.
Arayüz modelinden cihaz verisine
Yerel arayüzde kadans, kalori ve mesafe değerleri simülasyonla güncellenir; tempo grafiği de örnek veri kullanır. Bu model, ekranın farklı durumlarını donanım olmadan incelemeyi sağlar. Gerçek cihaz entegrasyonunda aynı veri alanlarının kaynağı cihazın ölçüm ve kontrol katmanı olur.
Kontrol isteği ile cihazdan doğrulanmış durumun ayrılması bu noktada önem kazanır. Hız artırma düğmesine dokunulması bir istektir; cihazın o hıza ulaştığı bilgisi ayrı bir geri bildirimdir. SmartFit’in ekran yapısı, kullanıcı deneyimiyle bu cihaz sorumluluklarını birlikte düşünmek için somut bir çalışma alanı sunar.