Bankacılık Uygulaması Tasarımı: Ana Ekran Yeniden Tasarımı, Önce ve Sonra

Bir bankacılık uygulamasının ana ekranı tek bir soruyu bir saniyeden kısa sürede yanıtlamalı: ne kadar param var? Aşağıdaki ilk taslak şık bir gradyan karta sahip, ama bakiyeden sonra ekrandaki en büyük şey kart numarası, eylemler altı renkte geliyor ve neredeyse her işlem kırmızı. Bir kredi kartı reklamına benziyor.

Düzeltme marka morunu ve tüm özellikleri koruyor. Rengi önemli olan sayıya harcıyor, geri kalan her şeyi sessizleştiriyor.

Tüm ekran, önce ve sonra

Junior taslak

Düzeltilmiş

Solda kart bir kart: bakiye, maskelenmiş numara, kart sahibi adı, son kullanma tarihi ve VISA logosu, hepsi tek bir gradyanda. Altında altı renkte altı eylem dairesi, sonra her giderin kırmızı olduğu ve her satıcının kendi logo renginin bulunduğu düz bir işlem listesi geliyor.

Sağda kart bir bakiye. Hesap adı, dolar cinsinden sayı, bu ay nasıl değiştiğini söyleyen bir satır ve köşeye sıkıştırılmış son dört hane var. Altındaki her şey daha sakin, yani göz ilk olarak bakiyeye iniyor.

Düzeltme 1: Moru bakiyeye harca

Önce

Sonra

Parlak bir gradyan üzerinde göz ikonlu "Total Balance" ve tek boyutta $12,450.80, bir sıra yıldız ve 4821, Card Holder ve Expires ile bir VISA logosu; karşısında köşede "Main account" ve 4821, .80 kısmı daha küçük $12,450 ve daha koyu mor üzerinde "+$320.50 this month" hapı.

Taslak, kart gibi görünen bir kartta marka gradyanını kullanıyor, bu yüzden ilk izlenim "bu bir kredi kartı" oluyor. En büyük metin bakiye, ama kart numarası, sahip adı, son kullanma tarihi ve VISA logosu kartın aynı bölümü için yarışıyor. Bunların çoğu kişinin zaten bildiği ya da yalnızca internetten ödeme yaparken ihtiyaç duyduğu bilgi.

Düzeltme aynı mor ve mavi ailesini koruyor ve tek bir fikrin arkasına koyuyor. Dolarlar 42 pt, kuruşlar 22 pt, çünkü $12,450 okuduğunuz sayı, .80 ise ayrıntı. Bir hap, bu ay neyin değiştiğini gösteriyor; bu, insanların bakiye hakkında sorduğu ikinci soru. Kart numarası köşede maskelenmiş bir "4821"e küçülüyor, hangi hesap olduğunu anlamaya yetecek kadar.

Tekrar kullanılacak kural: marka renginiz gürültülüyse ona tek bir iş verin.

Düzeltme 2: Altı değil, üç eylem

Önce

Sonra

Mavi, yeşil, turuncu, pembe, mor ve gri altı yuvarlak ikon: Send, Request, Top Up, Pay Bills, Exchange ve More; karşısında üç geniş buton: dolu bir Send, ardından sade beyaz Request ve Top Up.

Altı eylemde altı renk "bunlar eşit derecede önemli ve hepsi farklı" der. İkisi de doğru değil. Kalan üçü her hesabın ihtiyaç duyduğu eylemler: Send, Request ve Top Up. Pay Bills, Exchange ve More bu ekrandan çıktı, yeni Payments sekmesi bu tür eylemlere kendi evini veriyor.

Düzeltme üçüne bir hiyerarşi de veriyor. Send marka rengiyle dolu, çünkü insanların geldiği eylem bu. Request ve Top Up sade, yani bağırmadan orada duruyorlar. Butonlar geniş, bu yüzden basması kolay ve etiket ikonun altında değil yanında duruyor.

Düzeltme 3: İşlemleri güne göre grupla, rengi anlam için kullan

Önce

Sonra

Her biri renkli bir marka dairesi, "Oct 22, 2026 at 09:41 AM" gibi uzun bir zaman damgası ve kırmızı ya da yeşil tutarlarla beş işlemlik düz bir liste; karşısında Today ve Yesterday olmak üzere iki grup, her biri mor harf karolu tek bir beyaz kartta, her adın altında bir kategori, siyah tutarlar ve tek bir yeşil +$2,500.00.

Kırmızı dur demektir. Her gideri kırmızıya boyayan bir bankacılık uygulaması, normal hayatı, bir yayın aboneliğini, bir yolculuğu, bir kahveyi küçük alarmlar dizisine çevirir. Düzeltme giden parayı düz metinde bırakıyor ve yeşili iyi haber olan tek şey için kullanıyor: gelen para.

Zaman damgaları da değişti. Her satırda tam tarih ve saat çoğunlukla tekrar eden bilgi. "Today" ve "Yesterday" altında gruplamak tarihi bir kez söylüyor, her satırın ikinci satırı ise ödemenin ne için olduğunu söylüyor: "Subscription", "Transport", "Salary". Bir listeye göz gezdirirken insanların gerçekten sorduğu soru bu.

Satıcılar da marka renklerini kaybetti. Kırmızı bir N, siyah bir U, yeşil bir S ve turuncu bir A canlı görünür, ama listeyi söyleyecek hiçbir şeyi olmayan bir gökkuşağına çevirir. Harfli tek bir tonlu karo satırları eşit tutuyor, böylece okuduğunuz şey tutarlar ve isimler oluyor.

Düzeltme 4: Dört sekme, yüzen artı yok

Önce

Sonra

Home, Cards, büyük bir yüzen artı butonu, Stats ve Profile; karşısında Home, Cards, Payments ve Profile, aktif sekme mor.

Yüzen artı butonu "neyi ekleyeyim?" diye soruyor. Bir bankacılık uygulamasında gönder, talep et, kart ekle ya da bakiye yükle anlamına gelebilir ve kişi öğrenmek için onu açmak zorunda. Ayrıca içeriğin üstünde durur ve sekme çubuğunu ikiye böler.

Düzeltme onu, arkasında ne olduğunu söyleyen Payments adlı bir sekmeyle değiştiriyor. Stats sekme çubuğundan çıkıyor ve bakiye kartı artık ondan insanların her gün gördüğü tek sayıyı taşıyor: bu ayki değişim.

Daha küçük düzeltmeler

• Tek ikonlu bir başlık. Taslakta selamlamanın yanında bir QR kodu, bir zil ve bir ayarlar ikonu var. Düzeltme yalnızca zili tutuyor.
• Gerçek bir baş harf avatarı. İçinde "AM" yazan mor daire düz marka moru, bu yüzden zeminden ayrışıyor.
• Tek kenar boşluğu ve tek aralık ölçeği. Satırlar 20 puanlık bir kenar boşluğuna oturuyor, aralıklar kısa bir listeden geliyor.
• Daha sakin bir selamlama. Büyük M ve ünlemle "Good Morning, Alex Moreno!" ifadesi "Good morning" ve bir isme dönüştü.
• Gruplayan kartlar. Her günün işlemleri tek bir beyaz kapta duruyor, satırlar arasında ince bir ayırıcı var, gruplar arasında yok.

Kendi bankacılık uygulamanı denetle

Figma dosyasını al

Ücretsiz dosyada iki ekran, önce ve sonra bileşeni olarak her düzeltilen parça, UI renk değişkenleri, iOS metin stilleri ve kredilerin olduğu bir read-me var.

Ücretsiz Figma dosyası

Bankacılık ana ekranı, önce ve sonra

İki ekran ve her düzeltilen parça Figma bileşeni olarak. Ücretsiz, yalnızca görüntüleme, taslaklarına kopyala.

Figma'da aç

SSS

Bir bankacılık uygulaması ana ekranı önce ne göstermeli?

Bakiyeyi, büyük, bu ay nasıl değiştiğini anlatan kısa bir satırla. Sonra hızlı eylemler, ardından son işlemler gelir.

Bir bankacılık uygulamasında kaç hızlı eylem olmalı?

Üç iyi çalışır: Send, Request ve Top Up. En yaygın olanı dolu, diğerlerini sade yapın ve daha nadir eylemleri Payments sekmesine taşıyın.

Bankacılık uygulamasında giderler kırmızı olmalı mı?

Hayır. Kırmızı uyarı olarak okunur ve sıradan harcama bir uyarı değildir. Giden tutarları düz metinde tutun ve yeşili yalnızca gelen para için kullanın.

Kart numarası bankacılık uygulaması ana ekranında nasıl görünmeli?

Maskeli ve küçük, yalnızca son dört haneyle, böylece insanlar hangi hesaba baktıklarını anlayabilir. Tüm ayrıntılar Cards ekranına aittir.

Bankacılık uygulamasında yüzen artı butonu olmalı mı?

Genellikle hayır. Artı neyi eklediğini söylemez, bu yüzden onu Payments gibi etiketli bir sekmeyle değiştirin.

Kaynaklar

• Her iki ekran da bize ait, Figma'da tasarlandı ve ölçüldü. Satıcı adları genel örneklerdir.
• İlk olarak App Brainy üzerinde bir carousel olarak yayımlandı.