Takvim Uygulaması Tasarımı: Gün Ekranı Yeniden Tasarımı, Önce ve Sonra

Bir takvim gün ekranının tek bir işi var: sırada ne olduğunu ve günün ne kadarının kaldığını söylemek. Aşağıdaki ilk taslak bütün günü biliyor, ama beş etkinliği beş gürültülü renge boyuyor, bir ay ızgarası ekliyor ve en üste kırmızı bir uyarı koyuyor. Sonuçta hiçbir şey diğerinden daha önemli görünmüyor. 19 dakika sonraki bir toplantı, öğle yemeğiyle aynı ağırlığı taşıyor.

Düzeltme her işlevi koruyor, sadece ağırlığı değiştiriyor. Uzun toplantılar uzun görünüyor, boş zaman gerçekten boş duruyor ve şu an önemli olan tek toplantı kendi sakin satırını alıyor.

Tüm ekran, önce ve sonra

Junior taslağı

Düzeltilmiş

Soldaki ekranda göz konacak bir yer bulamıyor. Başlık, dört düğme, kırmızı bir bant, bir ay ızgarası ve bir yığın doygun kart ilk bakışı kapmak için kavga ediyor. Etkinlik kartları ekrandaki en gürültülü şey ve hepsi eşit derecede gürültülü. Kırmızı iki kez kullanılmış: bir kez uyarı için, bir kez etkinlik için. Böylece kırmızı hiçbir şey ifade etmiyor.

Sağdaki ekranın yukarıdan aşağıya net bir sırası var: haftanın neresindeyim, sırada ne var ve günün geri kalanı nasıl görünüyor. Renk sessiz ve tek bir iş için kullanılıyor: etkinlikleri birbirinden ayırmak.

Ne değişti, ölçülerle

Düzeltme 1: kartları zaman çizelgesine çevirin

Önce

Sonra

Hepsi aynı yükseklikte, her biri çan, avatar ve etiketli beş üst üste tam renkli kart (mavi, kırmızı, turuncu, yeşil, mor); karşısında saat etiketleri, gri bir geçmiş toplantı, 9:41'de kırmızı bir çizgi ve ince renk çubuklu dört soluk blok içeren bir zaman çizelgesi, burada öğle yemeği ve müşteri görüşmesi birebir görüşmeden daha uzun.

Bir kart listesi sadece "işte beş şey" der, başka bir şey demez. Bir saatlik kısa görüşme ile üç saatlik atölye aynı yeri kaplar ve aralarındaki boşluklar, yani insanların takvimde gerçekten görmek istediği kısım, görünmez olur.

Zaman çizelgesi güne bir şekil verir. 45 dakikalık toplantı kısa bir blok, uzun olan yüksek bir bloktur ve boş zaman gözle görebildiğiniz beyaz boşluktur. Renk tüm karttan soldaki ince bir çubuğa ve arkadaki soluk bir tona taşındı; böylece metin bir bakışta okunuyor ve renk yine de iş görüşmesini öğle yemeğinden ayırıyor.

İki küçük dokunuş anlam taşıyor. Team Standup bitmiş olduğu için gri. Kırmızı bir çizgi 9:41'i işaretliyor, böylece günün tam olarak neresinde olduğunuzu görüyorsunuz.

Tekrar kullanılacak kural: zamanı boşluk olarak gösterin ve gürültülü rengi şu an olan tek şey için saklayın.

Düzeltme 2: sıradaki için tek sakin satır

Önce

Sonra

Çan simgeli ve 'Bugün 5 etkinliğiniz var. Sıradaki etkinlik 19 dakika sonra' cümleli kırmızı bir bant; karşısında Roadmap Review yazan beyaz bir satır, ardından kırmızıyla In 19 min, yanında Zoom, üç küçük avatar ve sarı bir Katıl düğmesi.

Taslaktaki uyarı tek cümlede üç şey söylemeye çalışıyor: kaç etkinlik olduğunu, birinin sırada olduğunu ve ne zaman olduğunu. Bir hata mesajı gibi okunuyor. Kimsenin bugünkü etkinlik sayısına ihtiyacı yok, çünkü ekran zaten onları gösteriyor.

Düzeltme, insanların takvimi açtığında sorduğu tek soruyu yanıtlıyor: sırada ne var ve katılabilir miyim? Önce ad geliyor, kırmızı "In 19 min" ekrandaki tek kırmızı ve 36 px Katıl düğmesi başparmağın erişebileceği yerde duruyor. Saatler tutarlı: durum çubuğu 9:41 diyor ve Roadmap Review 10:00'da başlıyor.

Bu, Notion Calendar'ın katıl düğmesinde kullandığı kalıpla aynı: toplantı, geri sayım ve tek bir eylem.

Tekrar kullanılacak kural: günü anlatan bir bandı, sonraki hamleye yardım eden bir satırla değiştirin.

Düzeltme 3: ayı haftayla takas edin

Önce

Sonra

Birçoğunun altında küçük renkli noktalar olan beş satırlık sayılardan oluşan tam bir ay ızgarası ve bugün küçük bir sarı dairede; karşısında her sayının üstünde bir harf olan tek bir hafta satırı, 3 Salı üzerinde büyük dolu sarı daire ve altında 'Salı, 3 Kasım' satırı.

Ay ızgarası, gün ekranının sormadığı bir soruyu yanıtlıyor. 30 günün renkli noktalarını göstermek için telefonun 158 px'ini harcıyor ve noktalar altındaki kartlara benziyor; yani ekranda aynı şeyin iki rakip özeti oluyor.

Hafta şeridi, gün görünümünün ihtiyaç duyduğunu koruyor: bugün ve yanındaki günler. Tek bir dolu daire bugünü işaretliyor ve tam tarih hemen altında yazıyla duruyor. Ay hâlâ orada: başlıktaki Kasım ay görünümüne götürüyor ve şeritte bir kaydırma bir hafta ilerletiyor.

Tekrar kullanılacak kural: ekranın ilgilendiği yakınlaştırma seviyesini gösterin. Gün ekranı ay değil, hafta ister.

Düzeltme 4: dört düğmeyi tek menüye katlayın

Önce

Sonra

Kasım 2026, iki ok, bir logo yazısı, Bugün çipi, arama ve ayar simgeleri olan bir başlık ve altında dört eşit çerçeveli düğme: Gün, Hafta, Ay ve Yıl; karşısında geri oku ve Kasım, okla küçük bir Gün menüsü, bir arama simgesi ve bir artı simgesi olan bir başlık.

Dört eşit düğme, dört görünümün de eşit olasılıkta olduğunu söyler. Değiller: insanlar tek bir görünümde durur ve nadiren değiştirir. Düğmeler tam bir satır kaplıyor ve altlarındaki kartlara benziyor.

Düzeltme onları, geçerli görünümü gösteren tek küçük bir menüye katlıyor. Hafta, Ay ve Yıl bir dokunuş uzakta. Arama ve ekleme sade 24 px simgelere dönüşüyor, Ayarlar sekme çubuğunda kalıyor ve logo yazısı gidiyor, çünkü ürün ekranın kendisi ve Apple Calendar'da da yok.

Tekrar kullanılacak kural: seçenekler eşit kullanılmıyorsa, geçerli olanı gösterin ve gerisini arkasına saklayın.

Daha küçük düzeltmeler

• Her işlev yerinde. Oklar hafta şeridindeki bir kaydırma. Her etkinlikteki çan, etiketler ve yer, etkinlikle birlikte açılıyor.
• Aynı etkinlikler. Beş etkinlik de iki ekranda var ve her biri eski rengini bir ton olarak koruyor. Team Standup bitmiş olduğu için gri, Roadmap Review sırada olduğu için marka sarısı.
• Yüzen sekme çubuğu. 62 px ve altından günün aktığı çubukla ekran tüm yüksekliği kullanıyor ve sekme çubuğu ayrı bir kutu gibi görünmeyi bırakıyor.
• Yüzen düğme yok. 52 px'lik artı eskiden son kartın ve kişilerinin üzerinde duruyordu. Artık bir başlık simgesi.
• Eşit kenar boşlukları. Taslakta solda 14 px, sağda 12 px var. Düzeltilmiş satırlar tek bir ızgarada kenardan kenara uzanıyor.
• İkisinde de Zoom. Roadmap Review iki ekranda da Zoom üzerinde, böylece Katıl bir anlam taşıyor.

Kendi takvim ekranınızı denetleyin

Figma dosyasını alın

Ücretsiz dosyada junior taslağı, düzeltilmiş ekran ve her parça bir bileşen olarak var.

Ücretsiz Figma dosyası

Takvim gün ekranı yeniden tasarımı, önce ve sonra

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

Figma'da aç

SSS

Bir takvim uygulamasının gün görünümü nasıl tasarlanmalı?

Blok yüksekliğinin toplantı süresine eşit olduğu, sönük tonlar ve ince renk çubuğu olan, boş zamanın boş bırakıldığı ve şimdiki zaman için bir çizginin bulunduğu bir zaman çizelgesi olarak. Sıradaki toplantıyı üstüne tek bir satır halinde koyun.

Bir takvim uygulamasında sıradaki toplantı nasıl gösterilir?

Toplantı adı, "In 19 min" gibi bir geri sayım, kişiler ve görüşme varsa bir Katıl düğmesiyle tek bir satırda. Günün etkinliklerini sayan bir banttan kaçının.

Bir takvim uygulaması gün ekranında ay ızgarası göstermeli mi?

Genellikle hayır. Bugünde tek dolu daire olan bir hafta şeridi gün görünümünün ihtiyaç duyduğu bağlamı verir ve ay, başlıktan bir dokunuş uzakta kalır.

Bir takvim uygulamasında kaç görünüm düğmesi gerekir?

Bir tane. Geçerli görünümü küçük bir menüde gösterin, burada Gün, ve Hafta, Ay ve Yıl'ı içine koyun.

Takvimde tam renkli etkinlik kartları neden kötü?

Her etkinlik doygun olduğunda her etkinlik acil görünür ve renk onları ayırmayı bırakır. İnce renk çubuklu soluk bir ton kategoriyi korur ve metnin okunmasına izin verir.

Bir takvimin katıl düğmesi hangi renk olmalı?

Marka rengi, ekrandaki tek dolu düğme olarak; kırmızıyı yalnızca geri sayım için saklayın.

Kaynaklar

• İki ekran da bize ait, Figma'da tasarlandı ve ölçüldü. Uygulama, Sundial, kişiler ve etkinlikler uydurma. Saatler tutarlı: durum çubuğu 9:41 diyor, Roadmap Review 10:00'da başlıyor ve 3 Kasım 2026 bir Salı.
• Metin ve kontrast kontrolleri: marigold #FFC233 üzerinde #1B1A17 mürekkep 10,8'e 1. Tonu üzerindeki etkinlik metni 8,1 (sarı), 6,5 (turuncu), 6,8 (yeşil) ve 8,4 (mor) ila 1. Beyaz üzerinde kırmızı "In 19 min", #D70015, 5,4'e 1.
• İncelenen kalıp: Apple Calendar'ın gün görünümü (sol üstte aya geri dönüş, sade simgeler olarak arama ve ekleme, tek dolu bugünlü hafta şeridi, renk çubuklu tonlu bloklar, boş zaman olarak boş alan) ve Notion Calendar'ın katıl düğmesi.
• Önceki ekrandaki logo yazısı: Playfair Display Bold. Avatar fotoğrafları Pexels'tan: Peter Platou, Son Hoa Nguyen, Luthfi Ramaditya ve Carlos Gutierrez.
• İlk olarak App Brainy'de bir carousel olarak yayımlandı.