Görev Uygulaması Tasarımı: Bugün Ekranının Önce ve Sonra Yeniden Tasarımı

Bir görev uygulaması yardım gibi hissettirmeli. Aşağıdaki ilk taslak bugün neyin yapılacağını çok iyi biliyor, sonra bunu her satırda kırmızı bir tarihle, her öncelik için renkli çiplerle ve son görevin üstüne park edilmiş bir düğmeyle söylüyor. Alarm gibi okunuyor. Düzeltme her görevi ve her bilgiyi koruyor, sadece alarmı sakin bir listenin seviyesine indiriyor.

Tüm ekran, önce ve sonra

Junior taslak

Düzeltilmiş

Solda her görev bir açıklama, en fazla üç etiket, kırmızı bir tarih ve bir yığın yüz taşıyor. Sağda her görev bir buçuk satır ve gözün ilk indiği yer liste.

Gözün neyi işlemesi gerektiğini sayın. Taslakta renkli bir ilerleme kutusu, beş renkte beş filtre çipi ve her görevde bir açıklama, renkli etiketler, kırmızı bir son tarih ve çoğu zaman bir avatar kümesi var. Düzeltilmiş ekranda bir halka, üç parçalı bir anahtar ve bir liste var.

Düzeltme 1: ilerleme bir halka ve tek bir cümle

Önce

Sonra

Bir kesir, iki ondalıklı bir yüzde, bir çubuk ve bir tezahürat; karşısında bir halka ve bir cümle.

Taslak aynı şeyi üç kez söylüyor: "1/5", "%20,00" ve beşte biri dolu bir çubuk. İki ondalık ele veriyor: "%20,00" bir programın yazdırdığı bir sayı, bir insanın ihtiyaç duyduğu değil. Altındaki satır ise küçük, gri ve iki ünlemle bitiyor.

Düzeltme tek bir resim seçiyor, %20'de bir halka, ve önemli iki olguyu içeren tek bir cümle: beşte biri tamam, dördü kaldı. Cümle faydalı kısımla bitiyor, "sıradaki 16:00", yani kullanıcıyı alkışlamak yerine sırada ne yapacağını söylüyor.

Halka marka kırmızısıyla çizilmiş, ekleme satırı ve aktif sekmeyle aynı kırmızı.

Düzeltme 2: renge göre değil, zamana göre filtrele

Önce

Sonra

Beş renkte öncelik ve durum için beş çip; karşısında tek anahtarda üç kelime.

Taslaktaki çipler iki soruyu karıştırıyor. Yüksek, Orta ve Düşük bir görevin ne kadar önemli olduğunu sorar, Tamamlandı hangi durumda olduğunu sorar, Tümü (5) ise hepsini ister. Beş çip beş renk ve iki köşe yarıçapı kullanıyor, yani şekiller bile birbiriyle anlaşamıyor.

Kullanabilmek için kullanıcının önce kırmızının acil, turuncunun orta, yeşilin düşük demek olduğunu öğrenmesi gerekiyor, ve

Düzeltme bir soru soruyor, insanların bir yapılacaklar listesine sorduğu soruyu: ne zaman. Tümü, Bugün ve Yaklaşan tek bir anahtarda üç kelime; bu tek bir kontrol ve tek bir seçili durum gibi okunuyor, ve aşağıdaki sekmelerle de örtüşüyor: Bugün sekmesi, Yaklaşan sekmesi. Öncelik kaybolmadı. Satırlara taşındı, küçük bir nokta olarak (düzeltme 3).

Düzeltme 3: bir görev bir buçuk satırdır

Önce

Sonra

Her görevde başlık, açıklama, etiketler, kırmızı son tarih satırı ve avatarlar; karşısında bir başlık, bir saat ve bir liste.

Taslaktaki her görev beş tür bilgi taşıyabiliyor: bir açıklama, en fazla üç renkli etiket, kırmızı bir "Son: 24.10.2026 17:00", bir avatar grubu ve bir onay kutusu. "Acil!!" zaten son tarih satırında kırmızı olan bir görevde etiket olarak da görünüyor. Her görev bugün bitiyor ve her son tarih kırmızı, bu yüzden kırmızı gecikmiş demeyi bırakıp "bir görev var" demeye başlıyor.

Düzeltme her göreve bir başlık ve bir gri satır veriyor: saat ve ait olduğu liste. "17:00, İş". Tarih gitti çünkü başlık zaten hangi gün olduğunu söylüyor.

Etiketler liste adının içinde eridi. Öncelik sağda küçük bir noktaya dönüştü, ilk görev için kırmızı, ikincisi için turuncu, işaretlenecek bir şey olmayan yerde nokta yok. Biten görev listede kalıyor, üstü çizili ve "Tamam" etiketli, marka kırmızısıyla dolu bir onayla.

Görevler arada ince bir ayırıcı olan tek bir beyaz kartta duruyor, böylece liste tek bir şey gibi okunuyor.

Düzeltme 4: "Görev Ekle" listenin sonunda

Önce

Sonra

Son görevi kapatan yüzen bir düğme; karşısında listenin sonunda bir satır.

Yüzen bir düğme kullanıcıyı takip eder ve altındaki her şeyi kapatır. Taslakta son görevin üstünde duruyor, satırın sağındaki avatarları kesiyor ve ekrandaki en ağır nesne: 56 px, doygun kırmızı, gölgeli.

Düzeltme bir listenin yaptığını yapıyor: sonunda ona ekleyebileceğiniz şey var. "Görev Ekle" son görevin bittiği yerde, küçük bir artı ve diğer eylemlerle aynı kırmızıyla bir satırda duruyor. Gölge yok ve hiçbir şey kapanmıyor. Bir listeyi kaydıran okuyucu zaten sonuna bakıyor, bu yüzden ekleme eylemi gözün durduğu yerde bulunuyor.

Küçük düzeltmeler

• Beş değil dört sekme. Bugün, Yaklaşan, Göz At ve Profil; Bugün, Yaklaşan, Projeler, Ara ve Profil'in yerini alıyor.
• Tek kenar boşluğu. Taslak solda 14 px, sağda 12 px kullanıyordu. Düzeltme iki yanda 20 px kullanıyor.
• Gerçek bir başlık. Tam tarihli "Görevlerim", büyük bir "Bugün" üstünde küçük bir "Cumartesi, 24 Eki" oldu ve avatar bir zile dönüştü.
• Tek kırmızı. Marka kırmızısı #E5484D halkayı, ekleme simgesini ve aktif sekmeyi kapsıyor. Kırmızı metin daha koyu bir #D92D20 kullanıyor, böylece okunur kalıyor.
• Gerçek bir yazı ölçeği. Yazı 8 ile 20 px arasından iOS'un 11 ile 28 pt boyutlarına geçti.

Kendi görev 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ı

Görev uygulaması bugün ekranı, önce ve sonra

İki ekran ve düzeltilmiş her parça Figma bileşeni olarak. Ücretsiz, sadece görüntüleme, taslaklarınıza kopyalayın.

Figma'da aç

SSS

Bir görev uygulamasının bugün ekranı ne göstermeli?

Bugünün ilerlemesini, Tümü, Bugün ve Yaklaşan arasında geçiş yapmanın bir yolunu, saatleriyle birlikte görev listesini ve bir Görev Ekle eylemini. Açıklamalar ve uzun tarihler görev detayında bekleyebilir.

Bir görev uygulaması ilerlemeyi nasıl göstermeli?

Bir halka ya da çubuk artı "5'te 1 tamam" gibi tek bir cümleyle. Aynı sayıyı kesir, yüzde ve çubuk olarak yazdırmayın. Yüzde gösteriyorsanız yuvarlayın.

Bir görev uygulaması önceliği nasıl göstermeli?

Her görevde renkli etiketlerle değil, ihtiyaç duyan satırlarda küçük bir nokta ya da bayrakla. Öncelik bir filtre ya da sıralama da olabilir ama ana olması gerekmez.

Bir yapılacaklar uygulaması yüzen ekleme düğmesi kullanmalı mı?

Yüzen düğme yaygındır ama bir liste ekranında son öğeyi kapatabilir. Listenin sonundaki "Görev Ekle" satırı hiçbir şeyi kapatmaz ve gözün durduğu yerde durur.

Bir yapılacaklar uygulamasının filtreleri ne olmalı?

İnsanların sorduğu sorular: tümü, bugün ve yaklaşan. Kontrol başına bir soru tutun ve aynı satırda öncelik filtresini durum filtresiyle karıştırmayın.

Kaynaklar

• İki ekran da bize ait, Figma'da tasarlandı ve ölçüldü. Görevler, kişiler ve müşteri alıştırma için uydurulmuştur. 5 görevden 1'inin tamamlanması %20'dir.
• Fotoğraflar Pexels üzerinden pessoas uem, Iphanyi Ezemenari ve Ajan Yogi'den.
• Apple Human Interface Guidelines: Typography, düzeltilmiş ekranda kullanılan iOS yazı boyutları için.
• Apple Human Interface Guidelines: Color, anlamı taşımak için yalnızca renge güvenmemek üzerine.
• İlk olarak App Brainy üzerinde bir karusel olarak yayımlandı.