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

Bir podcast uygulamasında insanların en sık yaptığı şey kaldığı yerden devam etmektir. Aşağıdaki ilk taslakta dinleyicinin ihtiyacı olan her şey var, ama tam o tek şeyi saklıyor: yarıda bıraktığı bölüm, üç kapak arasında, kıl payı bir ilerleme çizgisi olan küçük bir kartta duruyor. Düzeltme programları, listeyi ve türleri koruyor ve duraklatılan bölümü ekrandaki en büyük şey yapıyor.

Tüm ekran, önce ve sonra

Acemi taslak

Düzeltilmiş

Solda, kişinin bölümü üç eşit kapaktan biri ve altında 2 px ilerleme var, liste satırlarının her biri üç ikonla bitiyor. Sağda, duraklatılan bölümün kendi kartı, 6 px ilerleme çubuğu ve üç büyük kontrolü var, liste satırları ise tek bir düğmeyle bitiyor.

Düzeltme 1: bıraktığınız bölüm için tek büyük kart

Önce

Sonra

Kıl payı ilerleme çizgili üç kapak, kalan süreyi ve kontrolleri gösteren tek bir kartın karşısında.

Taslaktaki "Dinlemeye Devam Et" bir raf. Üç kapak aynı boyutta yan yana duruyor, her birinde 2 px ilerleme çizgisi var, başlık "Ep. 142: Why Great Apps Feel Calm (And..." yerinde kesiliyor ve "23 dk kaldı" küçük gri yazıyla duruyor. Önemli olana devam etmek için dinleyici bir bölüm açıyor, oynatıcının yüklenmesini bekliyor ve oynata basıyor.

Düzeltme, duraklatılan bölüme bir kart veriyor. Kapak, mor bir etiket, "Dinlemeye devam et · 23 dk kaldı", tam başlık, "Why great apps feel calm" ve program, "Studio Hour · Bölüm 142", üstte yer alıyor. Altta 6 px'lik bir ilerleme çubuğu üç kontrolün yanında duruyor: 30 geri, oynat ve 30 ileri. Diğer iki kapak bu bölümden çıktı.

30 geri ve ileri düğmeleri, içinde 30 yazan dairesel bir ok ve 44 px'lik hedefler, Audible'ın kullandığı kalıp. Bölünen bir dinleyici ana ekrandan ayrılmadan yarım dakika geri gidebiliyor.

Yeniden kullanılacak kural: kişinin yaptığı şey en olası sonraki eylemdir, o yüzden ona bir kart ve kontrolleri verin.

Düzeltme 2: iki satırlık başlıklar ve tek oynat düğmesi

Önce

Sonra

Kesilmiş başlıklar, sıra numaraları ve üç ikon, tam başlıklar ve tek oynat düğmesinin karşısında.

Taslaktaki liste satırlarının her biri bir indirme oku, üç nokta menüsü ve bir oynat üçgeniyle bitiyor, bu yüzden başlığın kalan yere sığması gerekiyor ve sığmıyor: "The Week in Tech, in 20 Minutes: Al...", "How to Learn Anything in 30 Days...", "Live from Brooklyn Part 2 (Uncut Ex...". Sıra büyük mor bir sayı ve her başlığın altında program, kategori ve süreyi tutan bir satır var.

Düzeltme başlığın iki satıra sarmasına izin veriyor: "The week in tech, in 20 minutes". Altına tek bir satır geliyor, gün ve süre, "Bugün · 21 dk". Sağda tek bir yuvarlak oynat düğmesi duruyor, bir satırın ihtiyaç duyduğu tek eylem bu ve hedefi basılacak kadar büyük. İndirme ve menü satırda değil, ve bu yeniden tasarım bunların nereye gideceğini çizmiyor.

Bu yeniden tasarım listenin sadece görünüşünü değil, işini de değiştirdi. Beş sıralı "En Çok Dinlenenler" satırı üç "Sıradaki" satırına dönüştü, bu yüzden gerçek bir uygulamanın liste için hâlâ bir yere ihtiyacı var.

Yeniden kullanılacak kural: başlığın sarmasına izin verin, çünkü kesilmiş bir başlık okunamaz, ve her satıra tek bir eylem verin.

Düzeltme 3: türler tek stilde

Önce

Sonra

İki sıraya yayılan altı düz renk, tek biri dolgulu bir sıra hapın karşısında.

Taslaktaki tür etiketleri pembe, mavi, kırmızı, yeşil, turuncu ve turkuaz, her biri düz beyaz yazıyla. İki sıra yer kaplıyorlar.

Düzeltme tek stilde tek bir sıra hap. "Tümü" marka moru #8B5CF6 ile dolgulu, geri kalanlar beyaz. Sığmayan türler için sonda "Daha Fazla" duruyor. Dolgulu hap anlam taşıyan tek hap, yani "baktığınız şey bu".

Yeniden kullanılacak kural: renk hangisinin seçili olduğunu söylemeli. Hangisinin hangisi olduğunu söylememeli.

Düzeltme 4: insanların kullandığı kontrollere sahip mini oynatıcı

Önce

Sonra

Önceki, duraklat ve sonraki, 30 geri, duraklat ve 30 ileri düğmelerinin karşısında.

Mini oynatıcı ekrandaki en az alana sahip, bu yüzden içindeki her kontrol yerini hak etmeli. Taslaktaki üçü önceki, duraklat ve sonraki. Önceki ve sonraki başka bir bölüme atlıyor.

Düzeltme 30 geri, duraklat ve 30 ileri kullanıyor. Kapak ve başlık, "Why great apps feel...", solda kalıyor, altında program var. İlerleme çizgisi oynatıcının üst kenarı boyunca uzanıyor, böylece bir satır kaplamadan bölümün ne kadar ilerlediğini gösteriyor.

Yeniden kullanılacak kural: mini oynatıcıda insanların dinlerken gerçekten kullandığı üç düğme olmalı.

Küçük düzeltmeler

• Tek sol kenar. Taslağın boşlukları solda 14 px, sağda 12 px idi. Düzeltme iki yanda 20 px, kartlar arasında 16 px kullanıyor.
• Tek marka moru. Düzeltme dolgular ve oynat düğmeleri için #8B5CF6, okunması için daha fazla kontrast gereken küçük mor yazılar için daha koyu #7C3AED kullanıyor.
• Gerçek bir yazı ölçeği. Yazı 8 ile 20 px'ten iOS'un 11 ile 28 pt boyutlarına geçti.
• Daha büyük başlık, daha küçük üst alan. Taslağın üst alanında bir arama ikonu, bir zil ve bir avatar vardı. Düzeltme avatarı ve büyük bir "Podcast'ler" başlığını tutuyor.
• Beş değil dört sekme. Ana Sayfa, Gözat, Kitaplık, Ara ve Profil; Şimdi dinle, Gözat, Kitaplık ve Ara oldu. Profil, üst alandaki avatar.

Kendi podcast 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 var.

Ücretsiz Figma dosyası

Podcast ana ekranı, önce ve sonra

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

Figma'da aç

SSS

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

Dinleyicinin yarıda bıraktığı bölümü, kalan süre, oynat ve 30 geri ile ileri düğmeleri olan tek büyük bir kartta. Listeler, türler ve yeni programlar bundan sonra gelir.

Bir podcast mini oynatıcısında hangi düğmeler olmalı?

30 geri, duraklat ve 30 ileri. Önceki ve sonraki bölüm başka bir bölüme atlar, bu yüzden onları tam oynatıcıya bırakın.

Dinlemeye devam et bölümü nasıl tasarlanır?

Son duraklatılan bölüm için tek bir kart: kapak, tam başlık, program, kalan süre ve ilerleme çubuğu, ayrıca devam etmek için kontroller. Ona diğer kapaklarla aynı boyutu vermeyin.

Bir podcast uygulaması bölümleri nasıl listelemeli?

Başlığın iki satıra sarmasına izin verin, günü ve süreyi tek bir gri satıra koyun ve satırı tek bir oynat düğmesiyle bitirin. İndirme ve menüyü bölüm sayfasına taşıyın.

Bir podcast uygulaması için tür filtreleri nasıl tasarlanır?

Tek stilde tek bir hap sırası, seçilen marka rengiyle dolgulu ve sonda Daha Fazla. Altı etikette altı renk, rengi anlamsız kılar.

Bir podcast uygulaması hangi yazı boyutunu kullanmalı?

Platformun yazı ölçeğini. Düzeltilmiş ekran, büyük bir başlıkla birlikte iOS'un 11 ile 28 pt arasındaki boyutlarını kullanıyor.

Kaynaklar

• Her iki ekran da bize ait, Figma'da tasarlandı ve ölçüldü. Program adları, bölümler ve kişiler uydurma, kapaklar üzerine program adı yazılmış fotoğraflar.
• Fotoğraflar Pexels üzerinden Jace Oner, Somogro Bangladesh, Sound On, Brett Sayles, Ali Dashti, frank minjarez ve pessoas uem'e ait.
• Apple Human Interface Guidelines: Typography, düzeltilmiş ekranda kullanılan iOS yazı boyutları için.
• Apple Human Interface Guidelines: Accessibility, 44 pt dokunma hedefi boyutu için.
• İlk olarak App Brainy üzerinde bir carousel olarak yayımlandı.