Harcama Takip Uygulaması Tasarımı: Bütçe Panosu Yeniden Tasarımı, Öncesi ve Sonrası

İnsanlar bir bütçe uygulamasını tek bir şeyi öğrenmek için açar: daha ne kadar harcayabilirim. Aşağıdaki ilk taslak her şeyi raporluyor. Sayı, dört eşit kutunun sonuncunda 10 px boyutunda duruyor, harcamalar 8 px'lik bir göstergeyle sekiz dilimli bir pasta, işlemler ise 9 px'lik beş sütunlu bir tablo.

Düzeltme her işlevi korur, sadece sırayı değiştirir. Sayı en başa gelir ve devasa olur, pasta tek bir düz çubuğa dönüşür, tablo da insanların okuyabileceği dört sade satıra.

Tüm ekran, öncesi ve sonrası

Junior taslağı

Düzeltilmiş

Solda hiçbir şey öne çıkmıyor. Dört kutu, bir pasta, bir çubuk grafik, bir filtre satırı ve bir tablo yaklaşık aynı ağırlıkta duruyor ve tek sorunun cevabı dördüncü kutudaki 10 px'lik bir rakam. Göz onu bulmak için bütün ekranı taramak zorunda.

Sağda ekran sırayla cevap veriyor: ne kadar kaldı, gerisi nereye gitti, son zamanlarda ne oldu. Bir sayı büyük, geri kalan her şey sade metin ve her öğenin tek bir renk görevi var.

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

Düzeltme 1: harcanabilecek kalan tutarı öne al

Önce

Sonra

Bir sırada dört eşit küçük kutu: yeşil Gelir $4,200, kırmızı Gider $1,916, mavi Tasarruf $1,000 ve siyah Bakiye $1,284, hepsi 10 px. Karşısında devasa kalın yazıyla $1,284, altında gri renkte $3,200'dan kalan ve 12 gün kaldı yazısı.

Dört kutu her sayıya aynı boyutu veriyor, dolayısıyla hiçbiri cevap değil. Kullanıcının önemli olanın Bakiye olduğunu bilmesi ve onu 10 px'te okuması gerekiyor.

Düzeltme birini seçiyor. $1,284 48 px kalın ve altındaki satır onu anlamlı kılan iki bilgiyi taşıyor: geldiği bütçe olan $3,200 ve ayın kalan günleri. Bütçesiz bir sayı sadece bilgi kırıntısıdır. Bütçeyle birlikte kullanıcı endişelenip endişelenmeyeceğini bilir.

Sayılar tutuyor, yani hiçbir şey uysun diye uydurulmadı. $4,200 gelirden $1,000 tasarruf düşünce $3,200 bütçe çıkıyor ve harcanan $1,916 ile geriye $1,284 kalıyor. Gelir ve Tasarruf İstatistikler sekmesine taşındı.

Yeniden kullanılabilir kural: ekranın açılma sebebi olan tek sayıyı bul, üzerindeki en büyük öğe yap ve bağlamı altında tek satırla yaz.

Düzeltme 2: pasta yerine tek düz çubuk

Önce

Sonra

Kira, Yemek, Eğlence, Ulaşım, Alışveriş, Sağlık, Faturalar ve Abonelikler etiketli sekiz renkli dilimi olan, minik gösterge ve yüzdelerle büyük bir pasta grafik. Karşısında çivit, mercan, kehribar ve camgöbeği renklerinde soluk uçlu tek ince yığılmış çubuk, Kira $1,100, Yemek $412, Eğlence $186 ve Diğer $218 için iki sıra iki sütunluk gösterge ve altlarında ince çubuklu üç bütçe satırı.

Pasta en iyi durumda bile okunması zor, çünkü insanlar açıları kötü karşılaştırır. Sekiz dilim işi daha da kötüleştiriyor. Dilimlerin beşi birkaç yüzdelik, yani birer şerit, onları adlandıran gösterge ise 8 px.

Çubuk soldan sağa okunur, herkesin zaten anladığı bir ilerleme çubuğu gibi. $3,200'lık bütçeye ölçeklenerek çizildi, yani soluk uç hâlâ kalan $1,284 ve ekran aynı sayıyı iki biçimde iki kez gösteriyor. Beş küçük kategori Diğer, $218 altında toplanıyor ve Bütçeler'de açılıyor. Dilimler tutuyor: 1,100 + 412 + 186 + 84 + 62 + 30 + 22 + 20 toplamı $1,916.

Bütçeler hemen altta sade satırlar olarak duruyor: bir ad, "$600'dan $412" ve 4 px'lik bir çubuk. Çubuk bir sınıra doğru dolar, yani kullanıcının sınıra ne kadar yaklaştığını gösterir. Pasta bunu yapamaz.

Yeniden kullanılabilir kural: parçalar bir bütüne tamamlanıyorsa tek çubuk kullan ve küçük parçaları Diğer'de grupla.

Düzeltme 3: tablo değil, dört satır

Önce

Sonra

Tarih, İşyeri, Kategori, Yöntem ve Tutar sütunlarından oluşan beş sütunlu tablonun üstünde Tümü, Gelir ve Gider filtre düğmeleriyle bir İşlemler başlığı, 9 px yazılı on satır ve son tutarları kapatan yüzen mercan artı düğmesi. Karşısında mercan renkli Tümünü Gör bağlantılı bir Son başlığı ve dört satır: Marlow Market için camgöbeği M, Reel House için mor R, Alder Studio için yeşil gelirli kehribar A ve Cityline Transit için yeşil C.

9 px'lik beş sütunlu bir tablo bir elektronik tablodur. Telefonda gözü kısmayı ve bir satır boyunca yatay okumayı gerektirir, üstelik yüzen artı düğmesi tutar sütununun üstüne oturuyor, yani son rakamlar kapanıyor.

Ana ekran için dört satır yeter. İşyerinin harfini taşıyan 36 px'lik daire göze tutunacak bir şey verir, işyeri 15, kategori 13 ve gri, tutar sağda. Gelir listedeki tek yeşil, yani maaş etiketsiz de öne çıkıyor. Tarih, ödeme yöntemi ve filtreler Tümünü Gör'den ve her satırdan açılır, yani hiçbir şey kaybolmaz.

Yeniden kullanılabilir kural: ana ekran son birkaç işlemi gösterir, tüm geçmişi değil. Filtreleri Tümünü Gör'ün arkasına koy.

Düzeltme 4: ayı başlık yap

Önce

Sonra

Menü ikonu, mercan renkli Penny yazısı, Dashboard yazısı, Kasım 2026 açılır listesi, dışa aktarma ikonu ve kırmızı noktalı zil içeren bir başlık satırı. Karşısında Kasım'ın üstünde küçük mercan Penny logosu, 28 punto kalın ve yanında ok, kırmızı noktalı zil ve mercan artı.

Taslağın başlığı altı şeyi aynı boyutta tutuyor: menü, logo, hiçbir şey söylemeyen bir "Dashboard" etiketi, bir açılır liste, dışa aktarma ve bir zil. İnsanların gerçekten kullandığı kontrol açılır liste ve en küçüğü o.

Düzeltme ekrana bir başlık veriyor ve başlık kontrolün kendisi. "Kasım" 28 kalın ve yanında bir ok var, logo kendi satırında küçük, artı yüzen düğmeden başlığa, zilin yanına taşındı. Menü ve Dashboard etiketi Profil sekmesine, dışa aktarma İstatistikler'e taşındı.

Yeniden kullanılabilir kural: ana kontrol bir filtreyse, onu başlık yap.

Daha küçük düzeltmeler

• Her işlev yerinde. Haftalık grafik, Gelir ve Tasarruf İstatistikler'e taşınır. Beş küçük kategori Diğer altında toplanır ve Hedefler'le birlikte Bütçeler'de açılır. Filtreler, tarihler ve ödeme yöntemi Tümünü Gör'den ve her satırdan açılır.
• Eşit kenar boşlukları. Taslakta solda 14 px, sağda 12 px var. Düzeltme iki yanda 20 kullanır.
• Kutu yok. Düzeltmede kart, karo ve gölge yok. Boşluk ve tipografi öğeleri ayırır.
• Daha az sekme. Beş karışık dolu ve çizgili ikon yerine, ince çizgili düz 78 px çubukta dört sekme.
• Tipografi ölçeği. Metin 13 ile 48 px arasında, taslağın 8 ile 13 px'ine karşılık.
• İçeriğin altında boşluk. Düzeltme sekme çubuğunun 67 px üstünde bitiyor, yani hiçbir şey kesilmiyor ya da kapanmıyor. Taslakta yüzen artı tablonun üstünde duruyor.

Kendi bütçe ekranını denetle

Figma dosyasını al

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

Ücretsiz Figma dosyası

Harcama takip ekranı yeniden tasarımı, öncesi ve sonrası

Her iki ekran ve her parça Figma bileşeni olarak. Ücretsiz, salt görüntüleme, taslaklarına kopyala.

Figma'da aç

SSS

Bir harcama takip uygulamasının ana ekranı nasıl tasarlanmalı?

Harcanabilecek kalan tutarla, büyük bir şekilde başla; altında tek satırda bütçe ve kalan gün olsun. Sonra paranın nereye gittiği için tek düz çubuk, birkaç sade bütçe satırı ve en son dört işlem gelsin, gerisi Tümünü Gör'ün arkasında.

Harcama kategorileri için pasta grafik mi çubuk mu daha iyi?

Parçalar bir bütüne tamamlanıyorsa düz yığılmış çubuk. İnsanlar uzunluğu açıdan daha hızlı okur ve küçük kategoriler şerit yerine çubuk segmenti olarak görünür kalır. En küçükleri Diğer'de grupla.

Bir bütçe grafiği kaç kategori göstermeli?

Üç ya da dört. Bu ekranda beş küçük kategori Diğer, $218 altında toplanıyor ve Bütçeler'de açılıyor, böylece çubuk okunabilir kalıyor.

Bir finans uygulamasında ana sayı ne kadar büyük olmalı?

İlk görülen şey olacak kadar büyük. Burada bakiye 48 px kalın, ay başlığı 28 px, satırlar 15 px.

Bir ana ekran kaç işlem göstermeli?

13 ile 15 px'te dört ila beş satır; tam liste, filtreler ve ödeme yöntemi için bir Tümünü Gör bağlantısı.

Bir bütçe uygulamasının sekme çubuğunda ne olmalı?

Dört sekme yeter: Ana Sayfa, İstatistikler, Bütçeler ve Profil. Hedefler Bütçeler'in içinde yaşar.

Kaynaklar

• Her iki ekran da bize ait, Figma'da tasarlandı ve ölçüldü. Uygulama Penny, işyerleri ve tutarlar uydurma. Rakamlar iki ekranda da tutarlı: $4,200 gelirden $1,000 tasarruf düşünce $3,200 bütçe çıkar, harcanan $1,916 ile geriye $1,284 kalır ve 12 gün kaldı, en yeni işlemin tarihi olan 18 Kasım demektir.
• İncelenen örüntü: Copilot Money ve Monarch; kalan harcama için tek sayı, kategoriler için tek çubuk, sade satırlar ve düz bir sekme çubuğu.
• İkonlar Phosphor'dan (MIT). Fotoğraf kullanılmadı.
• İlk olarak App Brainy üzerinde carousel olarak yayımlandı.