Meditasyon Uygulaması Tasarımı: Ana Ekran Yeniden Tasarımı, Önce ve Sonra

Bir meditasyon uygulamasının tek bir vaadi var: ekran sizi geldiğinizden daha sakin yapsın. Aşağıdaki ilk taslak bunu istiyor, sonra dokuz renkle, soluk bir fotoğrafın üstündeki beyaz yazılarla ve rakamların olması gereken yerdeki bir paragrafla kendi kendini baltalıyor. Düzeltme her özelliği koruyor ve sesi kısıyor.

Ekranın tamamı, önce ve sonra

Junior taslak

Düzeltilmiş

Soldaki ekran cana yakın ve gürültülü. Sağdaki aynı ürün, daha kısık sesle ve kısık ses tam da özellik.

Her iki tarafta gözün neyi ayıklamak zorunda olduğunu sayın. Taslak, kimse tek kelime okumadan önce beş ruh hali rengi ve dört kutu rengi, üstüne bir şeftali kutusu ve üstünde yazı olan bir fotoğraf gösteriyor. Düzeltilmiş ekranda tek bir marka adaçayı yeşili var, #4F7A5A, bir de seri anlamına gelen tek şey için saklanan şeftali rengi bir alev, #E0784A.

Düzeltme 1: ruh hali sorusunu bir kez, tek renkle sorun

Önce

Sonra

Altlarında birer kelime olan beş renkli daire ve tek bir soruya karşı beş sakin yüz ile seçilmiş tek bir cevap.

Ruh hali kontrolü, beş cevabı olan bir sorudur. Taslakta her cevabın kendi rengi var, yani kullanıcı daha hiçbir şey seçmeden satır zaten cevaplanmış görünüyor ve neyin seçili olduğu belli değil. Renk bilgi işini değil, süs işini yapıyor.

Düzeltme, beş yüzü de aynı griyle çiziyor ve yalnızca seçilen yüzü marka yeşiliyle dolduruyor, kelimesi de sorunun yanındaki bir çipte: "Sakin". Artık renk tam olarak tek bir şey anlatıyor: şu anki durum bu. Yüzlerin altındaki kelimeler satırdan kalktı, çünkü çip seçilen yüzün kelimesini bir kez söylüyor.

İlke, puanlama ya da seçim içeren her uygulamaya taşınır: her seçenek renkliyse renk kullanıcıya hiçbir şey söylemez. Seçenekleri nötr tutun, vurgu rengini seçime harcayın.

Düzeltme 2: fotoğraf üstte, yazılar altta

Önce

Sonra

Soluk bir plaj fotoğrafında beyaz yazılar ve dört minik etiket, karşısında altında başlığı, süresi ve tek bir oynat düğmesi olan bir fotoğraf.

Taslak, 17 px'lik beyaz bir başlığı ve dört adet 8 px'lik etiketi doğrudan parlak kumun ve denizin üstüne koyuyor. Soluk fotoğraf üstünde beyaz, olabilecek en zayıf ikili ve etiketler, kullanıcının ne oynatacağına karar verdiği noktada ekrandaki en küçük yazı. Fotoğrafın üstündeki yazı ayrıca her fotoğrafla değişir: daha koyu bir görsel geldiği gün yerleşim farklı okunur.

Düzeltme tüm kelimeleri karta, fotoğrafın altına, düz bir yüzeyde koyu yazıya taşıyor. Fotoğraf artık sadece bir fotoğraf. Dört etiket tek satırlık bir bilgiye iniyor, "Daily Calm, 10 min, Sleep", köşedeki Play hapı da satırın sonunda, başparmağın zaten durduğu yerde yuvarlak bir düğmeye dönüşüyor. Aynı seansın artık tek başlığı, tek süresi ve tek eylemi var.

Yeniden kullanılacak kural: kelimeler önemliyse onlara kendi yüzeylerini verin. Fotoğrafın üstüne yazı koymak, bazı fotoğrafların onu bozacağını kabul etme kararıdır.

Düzeltme 3: dört renkli kutu yerine iki fotoğraf kartı

Önce

Sonra

Her birinde bir ikon olan dört pastel kutu ve seansın nasıl hissettirdiğini gösteren iki fotoğraf kartı.

Kutular hiçbir şeye benzemiyor. Aylı mor bir kutu "uyku" diyor, akciğerli mavi bir kutu "nefes" diyor, ikisi de aynı düz biçimde ve dört renk ekranın sakinliğini götürüyor. Fotoğraflar şeyin kendisini gösteriyor: uyku seansı için bir gece gökyüzü, sabah seansı için sisli bir göl. Bir meditasyon uygulamasında görsel ürünün parçasıdır, çünkü sesten önce ruh halini o belirler.

Düzeltilmiş satır iki kart gösteriyor ve her biri adını, süresini ve kategorisini iki satırda taşıyor. İki kart, her fotoğrafı okunacak kadar geniş bırakıyor. Breathe ve Focus Music kutuları bu ekranda yok ve bölümün başlığı "Recommended For You"dan "For you"ya çevrildi, çünkü ana ekrandaki bir liste zaten sizin için.

Düzeltme 4: paragraf yerine üç sayı

Önce

Sonra

Aynı üç gerçeğin içine gömüldüğü bir cümle ve aynı üç gerçeğin etiketli sayılar olarak hali.

İki sürüm de aynı şeyi söylüyor: art arda yedi gün, toplam iki saat otuz beş dakika, yirmi üç seans. Taslak bunları iki ünlemli ve "so far, amazing!" ibareli tek bir cümleye tıkıyor. Okuyucunun aradığı sayıyı bulmak için cümlenin tamamını okuması gerekiyor ve bir yan cümlenin içinde yaşayan bir sayı bir bakışta karşılaştırılamaz.

Düzeltme her gerçeğe kendi sütununu veriyor: büyük bir sayı ve küçük bir etiket. Şeftali rengi alev serinin yanında duruyor, çünkü insanları yarın geri getiren sayı seri. Artık kullanıcı ilerlemesini bakmak için gereken sürede kontrol ediyor.

Daha küçük düzeltmeler

• Beş değil dört sekme. Today, Explore, Sleep ve Profile; Home, Sleep, Meditate, Music ve Profile'ın yerini alıyor. Meditate ve Music'in artık kendi sekmeleri yok.
• Tek boşluk. Taslak solda 14 px, sağda 12 px kullanmıştı. Düzeltme iki yanda 20 px, kartlar arasında 14 px kullanıyor.
• Daha temiz bir selamlama. "How are you feeling today???" başlıktan kalktı, çünkü ruh hali kartı bunu bir kez, tek soru işaretiyle soruyor.
• Tek başlık eylemi. Zil kalıyor ve küçük bir nokta alıyor. Avatar başlıktan çıktı, Profile hâlâ bir sekme.
• Gerçek bir yazı ölçeği. Yazılar 8 ile 18 px'ten, 11 ile 28 pt'lik iOS boyutlarına geçti; böylece en küçük yazı okunabilir ve başlık açıkça bir başlık.
• Sessiz bölüm bağlantıları. "View all >" oldu "See all", her bölümde aynı kelimeler.

Kendi wellness uygulamanızı denetleyin

Figma dosyasını alın

Ücretsiz dosyada iki ekran bileşen olarak, her düzeltme önce ve sonra çifti olarak, renk değişkenleri ve iOS yazı stilleri yer alıyor.

Ücretsiz Figma dosyası

Meditasyon uygulaması ana ekranı, önce ve sonra

Her iki ekran ve düzeltilen her parça Figma bileşeni olarak. Ücretsiz, yalnızca görüntüleme, taslaklarınıza kopyalayın.

Figma'da aç

SSS

Bir meditasyon uygulaması ana ekranı ne göstermeli?

Bir selamlama, tek bir ruh hali sorusu, bugünün seansı tek oynat düğmeli tek bir fotoğraf kartı olarak, kısa bir öneri satırı ve kullanıcının ilerlemesi. Geri kalan her şey bir dokunuş ötede bekleyebilir.

Bir uygulamada ruh hali kontrolü nasıl görünmeli?

Üstlerinde tek bir soru olan, beş eşit ve sakin seçenek. Yalnızca kullanıcının seçtiği seçeneği renklendirin ve kelimesini bir kez söyleyin. Her yüzün kendi rengi varsa, neyin seçili olduğunu hiçbir şey söylemez.

Bir uygulamada fotoğrafın üstüne yazı koymak sorun olur mu?

Yalnızca yazı koyu bir katman gibi kontrollü bir alanda duruyorsa ve asgari kontrastı geçiyorsa. Parlak ve değişen bir fotoğrafta kelimeleri bunun yerine görselin altındaki düz bir yüzeye koyun.

Bir wellness uygulamasında seriler ve ilerleme nasıl gösterilir?

Gün serisi, toplam süre ve seans gibi etiketli birkaç sayı olarak. Seri, alev gibi küçük bir vurgu hak eder. Cesaretlendirme cümlesi, sayının yerine geçmez.

Bir meditasyon uygulamasında kaç sekme olmalı?

Dört ya da beş. İki sekme aynı kütüphaneye çıkıyorsa birleştirin. Düzeltilmiş ekran beş sekmeden dörde indi.

Kaynaklar

• Her iki ekran da bize ait, Figma'da tasarlandı ve ölçüldü. Kullanıcı, seanslar ve sayılar alıştırma için uyduruldu.
• Fotoğraflar Pexels üzerinden Татьяна Танатова, olia danilevich, Felipe Barboza ve Jean-Daniel Francoeur'dan.
• Apple Human Interface Guidelines: Typography, düzeltilmiş ekranda kullanılan iOS yazı boyutları için.
• W3C: Web Content Accessibility Guidelines 2.2, Contrast (Minimum), görseller ve arka planlar üzerindeki yazı için.
• İlk olarak App Brainy üzerinde carousel olarak yayımlandı.