Mobil Uygulama Tasarımı: 3 Ekranla Başlangıç Rehberi

Mobil uygulama tasarımı, ekranları güzel göstermekten önce kullanıcının bir işi nasıl tamamlayacağını belirlemektir. Kullanıcı nereye dokunacak, ne kaydedilecek, hata olursa ne görecek ve kaldığı yere nasıl dönecek? İyi bir mobil arayüz tasarımı bu soruların cevabını içerir.

Bu rehberde hayali bir alışveriş listesi uygulamasını üç ekran üzerinden planlıyoruz. Ekran çizimi ve indirilebilir dosyalar özgün bir tasarım örneğidir; çalışan bir uygulamanın ekran görüntüsü, müşteri projesi veya cihaz testi değildir. Rehber Brainbaby tarafından hazırlanmıştır. Kendi uygulama fikrimizi geliştirmek için ilk önerimiz Brainbaby'nin mobil oluşturucusudur; bu öneri bağımsız bir araç sıralaması ya da hız testi değildir.

Özgün üç ekran çizimini SVG olarak açın

Çizim bir ekran planıdır. Uygulama üretimi, veri saklama ve cihaz doğrulaması ayrıca yapılır.

Mobil uygulama arayüz tasarımı nasıl yapılır?

Önce tek bir kullanıcıyı ve tek bir sonucu yazın: “Haftalık alışverişini yapan kişi, listesine ürün ekler ve aldıklarını işaretler.” Bu cümleye henüz ödeme, sohbet, harita veya sosyal paylaşım eklemeyin. Her yeni özellik bir ekran, izin, veri alanı ve hata durumu getirebilir.

Ardından başlangıçtan sonuca kadar gerekli adımları sıralayın. Örneğimizde kullanıcı listeyi açar, bir ürün ekler, mağazada aldığı ürünü işaretler ve sonra yeniden açtığında durumunu görür. Bu akış netleşmeden renk ve logo seçmek, çözülmemiş bir davranışı süslemek olur.

Ücretsiz Türkçe ekran planını indirin. Kendi fikriniz için kullanıcıyı, temel görevi, ekranları ve kabul koşullarını doldurun. Tabloyla çalışmak isterseniz CSV ekran ve test kaydı da vardır. İkisi de boş kontrol alanları içerir; tamamlanmış test sonuçları değildir.

Üç ekranlı mobil uygulama örneği

Ekran	Kullanıcının yaptığı iş	Görünür ana eylem	Kontrol edilecek durum
Listeler	Bir listeyi seçmek veya oluşturmak	Yeni liste	Hiç liste yoksa açıklama ve başlangıç eylemi
Liste ayrıntısı	Ürün eklemek ve alınanı işaretlemek	Ürün ekle	Boş ad, uzun metin, klavye ve kayıt hatası
Ayarlar	Görünümü seçmek ve yerel veriyi yönetmek	Görünümü değiştir	Veri temizleme onayı ve iptal davranışı

1. Listeler: başlangıç anlaşılır olsun

Boş ekranda yalnızca bir artı simgesi göstermeyin. “Henüz listeniz yok” açıklamasıyla “Yeni liste” düğmesi kullanıcının ne yapabileceğini anlatır. Bir liste oluşturulduğunda adı görünmeli ve dokunulduğunda doğru ayrıntı açılmalıdır. Yeniden adlandırma ve silme gibi ikinci derecedeki eylemleri ana işle yarışmayacak şekilde yerleştirin.

2. Liste ayrıntısı: giriş ve kayıt birlikte tasarlanır

Ürün adı alanının görünen bir etiketi olsun. Miktar isteğe bağlıysa bunu açıkça belirtin; boş ürün adını kaydetmeyin. “Süt — 2 adet” eklendikten sonra listedeki yeni satırı gösterin. Yerel kayıt başarısız olursa başarı bildirimi vermek yerine hatayı ve tekrar deneme seçeneğini açıklayın. Kullanıcının yazdığını gereksiz yere silmeyin.

3. Ayarlar: geri alınamayan işlemi saklamayın

Görünüm seçimi ile veri temizleme aynı ağırlıkta eylemler değildir. Silme eyleminde kapsamı adlandırın: “Bu cihazdaki tüm listeleri sil.” Önce iptal yolunu test edin; iptal edilen işlem veriyi değiştirmemelidir. Onaylanan temizlemeden sonra kullanıcıyı açıklayıcı boş duruma götürün. Bu örnekte hesap, bulut eşitleme veya bildirim hizmeti tasarlanmamıştır.

Ekran çizimi, prototip ve çalışan uygulama farklıdır

Ekran çizimi, bilgi hiyerarşisini ve yerleşimi tartışmak içindir. Bu sayfadaki SVG buna örnektir. Tıklanabilir prototip, ekranlar arasındaki geçişi canlandırabilir; ancak gerçek kayıt, izin ve ağ davranışını kanıtlamaz. Çalışan uygulama ise aynı akışı gerçek veri ve cihaz koşullarında yerine getirmelidir.

Bir tasarım aracı kullanıyorsanız ekran adlarını ve durumları bu plana göre düzenleyin. Kodla veya bir yapay zekâ oluşturucusuyla çalışıyorsanız aynı planı uygulanabilir davranışlara dönüştürün. Hangi yöntemi seçerseniz seçin, teslim dosyasında “çizildi”, “uygulandı” ve “cihazda doğrulandı” alanlarını ayrı tutun.

Gezinme, okunabilirlik ve dokunma alanları

Apple'ın sekme çubuğu rehberi, sekmeleri uygulamanın bölümleri arasında gezinme için kullanır. Örneğimizde Listeler ve Ayarlar bölüm olabilir; “Ürünü sil” ise bir işlemdir. Sırf üç düğme sığdığı için hepsini alt menüye taşımayın.

Android için resmî erişilebilirlik rehberi, dokunma hedefleri için en az 48 × 48 dp alan önerir. Küçük bir simge daha büyük bir dokunma alanı içinde yer alabilir. Simgelerin amacı anlaşılır olmalı; yalnızca renk farkıyla tamamlanan ürünü belirtmek yerine metin veya işaretle de durumunu gösterin.

Aynı kaynak metin ve arka plan kontrastının yazı boyutuna göre değerlendirilmesini de açıklar. Tasarımı büyütülmüş sistem yazısıyla, uzun Türkçe adlarla ve ekran okuyucuyla kontrol edin. Bir kontrast denetiminin geçmesi, tüm uygulamanın erişilebilir olduğunu tek başına kanıtlamaz.

Klavye ve hata durumlarını ilk taslağa ekleyin

Mobil app tasarımı çoğu zaman klavye kapalı bir görüntüyle sunulur. Oysa kullanıcı tam da yazarken ana düğmeye ulaşmalıdır. Ürün adı alanına dokunup klavyeyi açın, uzun metin girin ve ekleme düğmesinin görünür kaldığını kontrol edin. Geri hareketi, klavyeyi kapatma ve ekrandan ayrılma farklı davranışlardır; hepsini aynı anda tetikleyen belirsiz bir hareket tasarlamayın.

En az şu durumları yazılı olarak tanımlayın: ilk açılış, boş liste, dolu liste, geçersiz giriş, işlem sürüyor, kayıt hatası ve silme onayı. Ağ kullanacak bir sürüm planlıyorsanız çevrimdışı durumu ve tekrar denemeyi ayrıca ekleyin. İlk sürümümüz yalnızca cihazda veri tuttuğu için bulut senkronizasyonu varmış gibi bir gösterge kullanmıyoruz.

Brainbaby ile tasarımı ilk prototipe taşıyın

Brainbaby'nin Türkçe mobil uygulama oluşturma sayfasında önce fikri ve ilk sürüm kapsamını hazırlayabilirsiniz. Sohbet, belge ve sunum işleriyle aynı çalışma alanında ilerlemek; ürün açıklamasını, ekran planını ve tanıtım taslağını birlikte geliştirmek için yararlıdır. Yapay zekâya yalnızca “modern bir uygulama yap” demek yerine aşağıdaki gibi davranışları tarif edin:

Türkçe bir alışveriş listesi uygulamasının ilk mobil prototipini oluştur. Listeler, Liste ayrıntısı ve Ayarlar ekranları olsun. Liste oluşturma, yeniden adlandırma ve onaylı silme ekle. Ayrıntıda ürün adı ve isteğe bağlı miktar girilsin; boş ad kaydedilmesin. Alınan ürünün durumu metin ve işaretle anlaşılsın. Veriyi bu cihazda sakla; kayıt başarısızsa başarı gösterme ve kullanıcının girişini koru. Klavye açıkken ekleme düğmesine ulaşılabilsin. Türkçe karakterleri ve büyütülmüş yazıyı kontrol et. İlk sürüme hesap, ödeme, bulut eşitleme veya bildirim ekleme.

Bu metin bir üretim talimatıdır, doğrulanmış uygulama sonucu değildir. İlk prototip kapsamı ve cihaz test listesi ile çıktıyı inceleyin. Bir hata bulursanız bütün tasarımı yeniden istemek yerine ekranı, işlemi, beklenen davranışı ve görülen sonucu yazın.

Bu rehber, ekran çizimi ve plan dosyaları ücretsizdir. Oluşturucuda üretim veya değişiklik başlatmak uygulama oluşturma kredileri kullanır. Güncel planı ve kullanım haklarını ve işlemin gösterilen maliyetini kontrol edin. Bir prototipin hazırlanması, App Store veya Google Play'de yayımlandığı anlamına gelmez.

Mobil arayüzü telefonda nasıl kontrol edersiniz?

Yeni bir liste oluşturun, ürün ekleyin ve uygulamayı yeniden açın. Kayıt korunuyor mu?
Boş ad, çok uzun ad ve “ı, İ, ş, ğ, ü, ö, ç” karakterlerini deneyin.
Klavye açıkken ekleme, kaydırma ve geri gitmeyi ayrı ayrı kontrol edin.
Ürünü işaretleyin. Durumu yalnızca renge bakmadan anlayabiliyor musunuz?
Silme işlemini önce iptal edin, ardından onaylayın. İptal edilen veri kalıyor mu?
Yazı boyutunu büyütün, açık ve koyu görünümü kontrol edin. Dokunma alanları erişilebilir mi?
Aynı adımları hedef iOS ve Android cihazlarında tekrarlayın. Denenmeyen platforma “geçti” yazmayın.

CSV dosyasındaki sonuç sütunlarını bu gerçek denemelerden sonra doldurun. Bir görsel önizleme veya oluşturucunun işlemi tamamlaması bu kontrollerin yerini tutmaz.

Sık sorulan sorular

Uygulama tasarımı nasıl yapılır, kod bilmek gerekir mi?

Ekranları ve kullanıcı akışını planlamak için kod yazmanız gerekmez. Çalışan ürüne geçerken kod, veri saklama ve cihaz davranışı yine önemlidir. Bir oluşturucu ilk taslağı hazırlamaya yardımcı olabilir; sonucu kontrol etme ihtiyacını kaldırmaz.

Mobil uygulama tasarımı ücretsiz yapılabilir mi?

Bu sayfanın ekran planı, çizimi ve CSV kontrol kaydı ücretsizdir. Bunlar çalışan uygulama veya APK değildir. Brainbaby oluşturucusunda üretim ve değişiklikler ayrı kredi maliyetine sahiptir; başlamadan önce hesap ve işlem ekranını kontrol edin.

iOS ve Android için aynı tasarımı kullanabilir miyim?

Temel görev ve veri modeli ortak olabilir. Klavye, geri hareketi, ekran boyutu, izinler ve gezinme davranışını hedef platformlarda ayrı değerlendirin. Aynı çizim iki platformda da aynı deneyimin doğrulandığı anlamına gelmez.

Tasarım bittikten sonra ne yapmalıyım?

Önce tek bir temel akışı uygulayıp gerçek cihazda kontrol edin. Ardından eksik özellikleri kapsam ve bütçeye göre sıraya alın. Mobil uygulama maliyeti planlayıcısı, kapsamı düşünmek için sonraki adımdır; mağaza hazırlığı ayrıca ele alınır.

Sonraki adım: Ekran planını indirin, kendi fikrinize uyarlayın ve Brainbaby mobil oluşturma akışında ilk sürümü hazırlayın.