Fitness Uygulaması Tasarımı: Ana Ekranın Yeniden Tasarımı, Öncesi ve Sonrası

Bir fitness uygulamasının ana ekranının tek bir işi vardır: kullanıcıya bugünün nasıl gittiğini söylemek ve başlamak için net bir yol sunmak. Aşağıdaki ilk taslakta tüm doğru sayılar var, ama dört dar kutuda, yoğun bir fotoğrafın üstünde beyaz yazıyla ve okunacak hiçbir şey söylemeyen bir grafikle sunuluyor. Düzeltme her özelliği koruyor, yalnızca her parçanın göze yüklediği işi değiştiriyor.

Tüm ekran, öncesi ve sonrası

Junior taslak

Düzeltilmiş

Solda göz önce dört öğelik bir başlıkla, sonra dört renkte dört kutuyla, ardından bir fotoğraf, iki düğme ve bir kalple, bir grafikle ve sekme çubuğunun kestiği ikinci bir antrenman satırıyla karşılaşıyor. Sağda üç kart ve bir başlık var: bugün nasıl gidiyor, şimdi ne yapmalı, hafta nasıl görünüyor.

Özellik listesinden kimsenin özleyeceği hiçbir şey silinmedi. Adımlar, kaloriler, su, kalp atışı, günün antrenmanı ve haftanın aktivitesi hâlâ orada. Sadece daha az sayıda, daha büyük şekillere taşındılar.

Düzeltme 1: dört kutu yerine halkalardan oluşan tek kart

Önce

Sonra

Her biri ikon, sayı, etiket ve ince bir çubuk içeren dört pastel kutu; karşısında üç halkalı, her etiketin altında hedef yazan ve kalp atışı küçük bir çip olarak duran tek kart.

Taslaktaki her kutu bir sayı söylüyor ve ince bir çubuk çiziyor, ama çubuğun neye göre ölçüldüğünü söylemiyor. 8.432 adım iyi de olabilir kötü de. Okuyucu hedefi çubuğun ne kadar uzadığından tahmin etmek zorunda, üstelik çubuklar ince.

Halkalar hedefi hem kelimelerle ("10.000 üzerinden", "600 kcal üzerinden", "2 L üzerinden") hem de şekille verir: halka ya doludur ya değildir. Tek bakış "bugün yolunda mıyım?" sorusunu yanıtlar. Kalp atışı bir hedef değil, bir ölçümdür, bu yüzden halka almaz. Köşede küçük bir çipe iner ve bu da onun farklı türden bir sayı olduğunu söyler.

Tekrar kullanılacak kural: bir sayının hedefi varsa hedefi göster. Yoksa onu ilerleme gibi giydirme.

Düzeltme 2: tek oynat düğmesi, yazının arkasında bir gölge

Önce

Sonra

Bir bölüm başlığı, bir YENİ rozeti, fotoğraf üzerinde 9 px beyaz yazı ve altında üç kontrol; karşısında etiketli bir fotoğraf, gölge üzerinde daha büyük yazı ve tek oynat düğmesi.

Fotoğraf üzerindeki beyaz yazı yalnızca fotoğrafın karanlık olduğu yerde okunur. Taslakta detay satırı görselin en açık bölümünden, spor salonu zemininden ve gri bir tişörtten geçiyor ve 9 px'te kayboluyor. Düzeltme, fotoğrafın üstüne alt kenarda %72'ye ulaşan siyah bir gölge koyuyor, tam da yazının durduğu yere, ve yazıyı büyütüyor.

Taslak ayrıca kişi harekete geçmeden önce bir soru soruyor: Hemen Başla mı, Detaylar mı, yoksa kalple kaydet mi? Bugünün antrenmanıyla yapılacak tek şey var, o da başlatmak. Tek yuvarlak bir oynat düğmesi bunu tek kelime etmeden söyler. Detaylar isteyen için bir dokunuş uzakta, ama artık ana eylemle yarışmıyorlar.

"YENİ" rozeti ile "Bugünün antrenmanı" bölüm başlığı neredeyse aynı şeyi iki kez söylüyordu. Düzeltme tek bir etiket bırakıyor: fotoğraf üzerinde bir çip.

Düzeltme 3: grafiği toplamla başlat

Önce

Sonra

Bir açılır menü ve gösterge ile yedi eşit turuncu çubuk; karşısında büyük puntolu haftalık toplam, bir eğilim çipi ve dolu turuncu tek bir çubuk.

Bir grafik bir soruyu yanıtlar ve taslaktaki grafik hangisini yanıtladığını söylemiyor. Aynı güçlü turuncuda yedi çubuk, değer yok ve tek seri için bir gösterge var; okuyucu ondan ne çıkaracağına kendisi karar vermek zorunda. Düzeltme olası soruyu önce kelimelerle yanıtlıyor: bu hafta 4 sa 12 dk, geçen haftadan %18 fazla.

Çubuklar artık mesaj değil, bağlam. Beşi marka renginin soluk tonu, bugün olan cumartesi ise dolu turuncu; böylece göz kişinin haftanın neresinde olduğuna iniyor. Pazar kısa bir çıkıntı olarak kalıyor, bu yüzden hafta bugüne kadar soldan sağa okunuyor. "Bu hafta" açılır menüsü ve "Aktif dakikalar" göstergesi kalktı, çünkü başlık zaten ikisini de söylüyor.

Tekrar kullanılacak kural: grafiğin açıklaması bir dakika sürecek sayıyı en üste koy, gerisini çubuklar yapsın.

Düzeltme 4: başlıkta tek düğme

Önce

Sonra

Bir avatar, ünlemli bir selamlama, iki ünlem daha içeren ikinci bir satır ve üç ikon; karşısında tarih, bir selamlama ve tek bir bildirim düğmesi.

Taslaktaki başlık, herhangi bir içerikten önce yedi şey barındırıyor: bir avatar, iki satır selamlama ve üç ikon. Avatar kişinin hesabına gidiyor ve uygulamada zaten bir Profil sekmesi var, bu yüzden düzeltme onu başlıktan çıkarıyor. Arama ve ayar ikonları da onunla gidiyor, selamlamaya yer açılıyor.

Düzeltme üst köşeyi hak eden tek şeyi koruyor: yeni bir şey olduğunda noktası yanan bildirimler. Selamlama, büyük puntolu bir tarih ve isim oluyor; bu da okuyucuya bugünün sayılarının hangi güne ait olduğunu ünlem işareti olmadan söylüyor.

Daha küçük düzeltmeler

• Beş değil dört sekme. Ana Sayfa, Antrenmanlar, İlerleme ve Profil. İstatistikler ve Topluluk yerini tek bir İlerleme sekmesine bıraktı.
• Tek kenar boşluğu. Taslak solda 14 px, sağda 12 px kullanıyordu, bu yüzden kartlar hafifçe ortadan kaymış görünüyordu. Düzeltme iki yanda 20 px, kartlar arasında 16 px kullanıyor.
• Eylem için tek renk. Taslak şeftali, sarı, pembe ve mavi kutuların yanında turuncu kullanıyordu. Düzeltme turuncuyu eylem için kullanıyor, kehribar ve maviyi yalnızca halkaları birbirinden ayırdıkları iki halkada tutuyor.
• Gerçek bir yazı ölçeği. Yazılar 8 ile 16 px arasından iOS'un 11 ile 28 pt yazı boyutlarına geçti, böylece ekrandaki hiçbir şey sistemin en küçük alt yazısından küçük değil.
• Önerilen satırı yok. Taslağın ikinci fotoğraf satırı sekme çubuğu tarafından kesiliyordu. Düzeltme ana ekranı grafikten sonra bitiriyor.
• Daha sakin selamlama. "Bugünün hedeflerini ezelim!!" ifadesi, isminin üstünde tarihe dönüştü.

Kendi fitness uygulamanı denetle

Figma dosyasını al

Ücretsiz dosyada iki ekran da bileşen olarak, her düzeltme öncesi ve sonrası çifti olarak, renk değişkenleri ve iOS yazı stilleri var.

Ücretsiz Figma dosyası

Fitness ana ekranı, öncesi ve sonrası

İki ekran ve düzeltilen her parça Figma bileşeni olarak. Ücretsiz, yalnızca görüntüleme, taslaklarına çoğalt.

Figma'da aç

SSS

Bir fitness uygulaması ana ekranı önce ne göstermeli?

Bugünün nasıl gittiğini: adımlar, kaloriler ve su, hedeflerine karşı, tek bir kartta. Günün antrenmanını hemen altına, başlamak için tek net yolla koy.

Bir fitness uygulamasında ilerleme halkaları ilerleme çubuklarından daha mı iyi?

Birkaç günlük hedef için evet. Halka bir bakışta okunur, ölçek olmadan dolu ya da dolu değil diye gösterir ve ortasına bir sayı sığar. Kalp atışını halkaların dışında tut, çünkü o bir ölçümdür ve doldurulacak bir hedefi yoktur.

Antrenman fotoğrafı üzerindeki beyaz yazı nasıl okunabilir yapılır?

Yazının arkasına, yazının durduğu yerde en güçlü olan koyu bir gölge koy ve yazıyı okunabilir bir boyutta ayarla. Fotoğrafın doğru yerde karanlık olmasına güvenme.

Bir fitness aktivite grafiği nasıl tasarlanmalı?

Toplamla ve eğilimle kelimelerle başla, sonra çubukları yumuşak bir tonda göster ve mevcut günü marka renginde işaretle. Başlığın zaten kapsadığı göstergeleri ve açılır menüleri at.

Bir fitness uygulamasında kaç sekme olmalı?

Dört ya da beş. İstatistikler ve Topluluk gibi ilişkili sayıları tutan sekmeleri İlerleme gibi tek bir yerde birleştir.

Kaynaklar

• İki ekran da bize ait, Figma'da tasarlandı ve ölçüldü.
• Fotoğraflar Pexels üzerinden pessoas uem, Julia Larson, Tima Miroshnichenko ve Vitaly Gariev'den.
• Apple Human Interface Guidelines: Typography, düzeltilmiş ekranda kullanılan iOS yazı boyutları için.
• İlk olarak App Brainy üzerinde bir carousel olarak yayımlandı.