Yayın Uygulaması Tasarımı: Koyu Ana Ekran Yeniden Tasarımı, Önce ve Sonra

Biri oynat tuşuna basmak için bir yayın uygulaması açıyor. Aşağıdaki ilk taslağın satacak iyi bir dizisi var, ama önemli olan tek butonu başka şeylerle çevreliyor: dört ikonlu bir başlık, 9 px yazıyla altı bilgilik bir satır, aynı ağırlıkta üç buton ve camgöbeği bir uygulamada kırmızı rozetler. Düzeltme aynı diziyi ve aynı satırları korur, ekranın sırasını izleyicinin yaptığı işlerin sırasıyla eşleştirir.

Ekranın tamamı, önce ve sonra

Acemi taslak

Düzeltilmiş

Solda hero'daki ilk şey büyük harfli bir başlık ve okunamayacak kadar küçük bir satır. Sağda hero'da bir ad, bir satır ve bir buton var.

Düzeltme 1: iki iş yapan bir başlık

Önce

Sonra

Dört küçük ikon, iki yuvarlak buton karşısında.

Taslağın başlığında arama, yayınlama, kırmızı noktalı bir zil ve izleyicinin avatarı var, her biri yaklaşık 20 px genişliğinde. Satır kalabalık ve avatar, altta duran Profil sekmesini tekrar ediyor.

Düzeltme, arama ve bildirimleri 40 px'lik iki yuvarlak buton olarak tutar, yayınlama ikonunu ve avatarı çıkarır. Zilin noktası camgöbeği. Profilin zaten sekmesi var, başlığın onu tekrarlamasına gerek yok.

Tekrar kullanılacak kural: her kontrol tek bir yerde yaşamalı. Sekme çubuğunda Profil varsa, başlıkta profil fotoğrafına gerek yok.

Düzeltme 2: tek Oynat butonu

Önce

Sonra

Bir başlık, minik bir bilgi satırı ve üç buton; karşısında bir başlık, bir satır ve bir buton.

Hero, ekranın en değerli alanı ve taslak onu dolduruyor. Başlık, afişin alt ortasında, kırmızı bir "YENİ BÖLÜMLER" rozetinin altında büyük harflerle yazılmış. Altında 9 px'lik bir satır altı bilgi taşıyor: "2025 • TV-MA • 2 Sezon • Bilim Kurgu, Aksiyon, Dram • ★ 8.3". Sonra üç buton geliyor: OYNAT, LİSTEM ve BİLGİ, hepsi büyük harfle ve hemen hemen aynı ağırlıkta, yani izleyici basmadan önce seçim yapmak zorunda.

Düzeltme başlığı görselin sol altına taşır, okunaklı kalması için altına koyu bir geçiş koyar ve başlığın altına kısa bir satır ekler: "Bilim kurgu · 2. Sezon · 2025". Rozet, marka camgöbeğiyle "Yeni sezon" der.

Görselin altında genişliğin çoğunu tek geniş beyaz "Oynat" butonu alır ve liste için yanında yuvarlak bir "+" durur. BİLGİ ekranda yok.

Tekrar kullanılacak kural: bir hero'nun tek eylemi olmalı. Ona ekrandaki en büyük butonu verin, geri kalan her şeyi daha küçük yapın.

Düzeltme 3: ne kadar kaldığını söyleyen geniş kartlar

Önce

Sonra

İnce kırmızı çubuklu üç uzun afiş; karşısında kalan süreli iki geniş kart.

Taslağın "Alex için İzlemeye Devam Et" satırı üç uzun afiş gösteriyor. Her birinin altında 3 px'lik kırmızı bir ilerleme çubuğu ve 10 px yazıyla "S2:E5" gibi bir etiket var. Afiş dizinin ne olduğunu söyler. İzleyicinin nerede kaldığını söylemez ve kırmızı çubuk, camgöbeği bir uygulamada ikinci bir renk.

Düzeltme iki geniş kart kullanır; ilerleme çubuğu görselin içinde camgöbeği, her birinin altında bir başlık var. Başlığın altındaki satır "S2 B5 · 12 dk kaldı" der; bu, birinin bir şeye kaldığı yerden devam ederken sorduğu soruyu yanıtlar: buna vaktim var mı?

Tekrar kullanılacak kural: devam satırı izleyicinin yeri içindir. Yalnızca bölüm kodunu değil, kalan süreyi gösterin.

Düzeltme 4: okunabilen sıralar

Önce

Sonra

Aynı rozetli dört afiş; karşısında sıralarıyla dört afiş.

Taslağın "TRENDLER" satırında dört afiş var ve her biri aynı kırmızı "TOP 10" rozetini taşıyor. Rozet hepsinin ilk onda olduğunu söylüyor, kaçıncı sırada olduğunu söylemiyor. İzleyici birincinin dördüncüden farkını göremiyor.

Düzeltme satırı "Bugünün Top 10'u" olarak yeniden adlandırır ve her afişin yanına büyük çerçeveli bir numara koyar: 1, 2, 3, 4. Satırın artık soldan sağa okunacak bir sırası var. "Tümünü gör" bağlantısı, ilerleme çubuklarıyla aynı renk olan marka camgöbeğini kullanır.

Tekrar kullanılacak kural: bir sıralama sırayı göstermeli. Her öğede aynı olan bir rozet süstür.

Daha küçük düzeltmeler

• Tek marka rengi. Düzeltme logo, ilerleme ve bağlantılar için camgöbeği #22D3EE kullanır. Kırmızı rozetler ve kırmızı ilerleme çubukları gitti.
• Hero ile eşleşen zemin. Düzeltme hero'nun kehribarından, #3A2510'dan, #0E0E12'ye solar; böylece ilk ekran tek bir görsel gibi hissettirir. Taslak saf siyah #000000 üzerinde duruyor.
• Tek sol kenar. Taslağın kenar boşlukları solda 14 px, sağda 12 px'ti. Düzeltme iki yanda 20 px, bölümler arasında 16 px kullanır.
• Gerçek bir yazı ölçeği. Metin, 7 ile 30 px arasından 11 ile 28 pt arası iOS boyutlarına geçti.
• Beş değil dört sekme. Ana Sayfa, Ara, Yakında, İndirilenler ve Daha Fazla; Ana Sayfa, Ara, İndirilenler ve Profil oldu.

Kendi yayın ekranınızı denetleyin

SSS

Bir yayın uygulaması ana ekranı önce ne göstermeli?

Dizinin adını, kısa bir bilgi satırını ve tek büyük Oynat butonunu içeren bir hero. İzleyicinin kendi yeri olan izlemeye devam et satırı hemen ardından gelir.

Bir hero banner'ında kaç buton olmalı?

Bir ana buton ve en fazla liste için artı gibi küçük bir ikincil buton. Aynı ağırlıkta üç buton, izleyiciyi oynata basmadan önce seçim yapmaya zorlar.

İzlemeye devam et satırı nasıl tasarlanır?

İlerleme çubuğu, başlık ve "12 dk kaldı" gibi kalan süreyi içeren geniş kartlar kullanın. Uzun bir afiş dizinin ne olduğunu gösterir, geniş bir kart izleyicinin nerede kaldığını gösterir.

Top 10 satırı nasıl tasarlanır?

Satırın bir sırası olsun diye her afişin yanına büyük bir sıra numarası koyun. Her afişte "Top 10" yazan bir rozet, dizinin kaçıncı sırada olduğunu söylemez.

Koyu bir yayın uygulaması için hangi renkler işe yarar?

Koyu bir zeminde ilerleme ve bağlantılar için tek bir vurgu rengi. Düzeltilmiş ekran, hero'nun kehribarından #0E0E12'ye solan bir zeminde camgöbeği #22D3EE kullanır.

Bir yayın uygulaması hangi yazı boyutunu kullanmalı?

Platformun metin ölçeğini. Düzeltilmiş ekran 11 ile 28 pt arası iOS boyutlarını kullanır, yani hero'da hiçbir şey 11'in altında değil.

Kaynaklar

• Her iki ekran da bize ait, Figma'da tasarlandı ve ölçüldü. İzleyici, diziler ve Streamix uygulaması uydurmadır ve her afiş düz bir renk ile yazıyla dizilmiş bir başlıktan ibarettir.
• Avatar fotoğrafı Pexels üzerinden Amir SeilSepour'dan.
• Apple Human Interface Guidelines: Typography, düzeltilmiş ekranda kullanılan iOS yazı boyutları için.
• Apple Human Interface Guidelines: Dark Mode, koyu zeminde çalışan bir arayüz tasarlamak için.
• İlk olarak App Brainy üzerinde bir carousel olarak yayımlandı.