Modül 02 · Mobil Uygulama

Mobil Uygulama Arayüz Tasarımı (UI/UX)

Mobil uygulama arayüzü, geliştirme ekibi tek satır kod yazmadan önce kullanıcı akışı, wireframe ve yüksek çözünürlüklü Figma ekranlarıyla netleşir; TasarımMania bu tasarım aşamasını erişilebilirlik standartlarına uygun şekilde uçtan uca yürütür.

Kapsam ve fiyat aralığı çıkaralım WhatsApp'tan yaz
Derinlemesine
01

Kullanıcı akışından yüksek çözünürlüklü ekrana nasıl geçilir?

Süreç bilgi mimarisiyle başlar: ekranlar arası geçişler, kullanıcı senaryoları ve olası hata durumları önce düşük çözünürlüklü wireframe üzerinde çizilir.

Bu aşamada renk, tipografi veya görsel detay yoktur; amaç akışın mantığını ve buton hiyerarşisini test etmektir. Onay sonrası wireframe, marka kimliğine uygun tipografi, renk paleti ve mikro etkileşimlerle yüksek çözünürlüklü tasarıma dönüşür. Figma üzerinde kurulan bileşen kütüphanesi -- buton, form alanı, kart, navigasyon çubuğu -- her ekranda tutarlı kalır ve geliştirme ekibine tek referans noktası sunar.

02

Erişilebilirlik ve Dokunma Alanı Standartları

Erişilebilirlik kontrol listesi her ekranda uygulanır: metin ile arka plan arasındaki kontrast oranı, renk körlüğüne duyarlı palet seçimi ve ekran okuyucu uyumlu etiketleme bu listenin başında gelir.

Dokunma alanları iOS ve Android platform kılavuzlarının önerdiği minimum boyutun altına düşürülmez, böylece parmakla etkileşimde yanlış tıklama riski azalır. Form alanları, hata mesajları ve yükleme durumları da tasarım aşamasında senaryolandırılır; kullanıcı bir işlemi yarıda bıraktığında ne göreceği önceden netleşir. Teslim edilen Figma dosyasında geliştirici modu açık tutulur, böylece mühendislik ekibi spacing, renk kodu ve bileşen özelliklerini doğrudan dosyadan okuyabilir. Dokunma hedefi ve erişilebilirlik ölçüleri Apple’ın arayüz kılavuzunda sayısal olarak tanımlıdır.

01 Bilgi mimarisi Bilgi mimarisi: ekranlar arası geçiş şeması ve ayrılan hata durumları düğümü — temsilî görsel Üstte tek bir ekran düğümü; ondan aşağı ayrılan üç bağlantı, yan yana duran üç ekran düğümüne iniyor. Sağdaki ekrandan aşağı kesik çizgili bir "Hata durumları" düğümü ayrılıyor, yanında bir ünlem işareti var. Solda "Kullanıcı senaryoları" kutusu, altta "Ekranlar arası geçişler" notu. Canlanmada bağlantılar çizilir, düğümler soldan sağa sırayla girer. Bilgi mimarisi Geçiş haritası Ekran Hata durumları Kullanıcı senaryoları Ekranlar arası geçişler
02 Wireframe → Ekran Aynı iskelet: solda wireframe, sağda yüksek çözünürlüklü ekran — temsilî görsel Yan yana iki telefon çerçevesi ve aralarında sağa bakan bir ok. Soldaki "Wireframe": yalnızca gri kutular, çapraz çizgili bir görsel yer tutucu ve kalın çubuklar. Sağdaki "Yüksek çözünürlük": aynı yerleşim, ama gerçek görsel, ince tipografi çubukları, yuvarlatılmış köşeler ve aksan renkli bir düğme. Altta "Tipografi", "Renk paleti" ve "İkonografi" çipleri, en altta "Bileşen kütüphanesi" notu. Canlanmada önce wireframe, sonra ok, sonra yüksek çözünürlüklü ekran girer. Aynı iskelet Wireframe Yüksek çözünürlük Tipografi Renk paleti İkonografi Bileşen kütüphanesi
03 Erişilebilirlik Erişilebilirlik kontrol listesi ve dokunma alanı gösterimi — temsilî görsel Üç satırlık bir kontrol listesi: "Kontrast oranı", "Renk körlüğüne duyarlı palet" ve "Ekran okuyucu". Her satırın solunda konuyu anlatan bir simge, sağında onay işareti var. Altta ayrı bir gösterim: bir düğme ve onu çevreleyen daha büyük kesik çizgili dokunma çerçevesi, yanında çift yönlü bir ölçü oku ve "Dokunma alanı" etiketi. Gösterimde bilerek sayı yok. En altta "Platform kılavuzları" notu. Canlanmada satırlar sağdan girer, onay işaretleri arkadan belirir. Erişilebilirlik Kontrol listesi Kontrast oranı Renk körlüğüne duyarlı palet Ekran okuyucu Dokunma alanı Platform kılavuzları
Temsilî görsel. Sayfanın anlattığı yolu çiziyor: bilgi mimarisiyle ekranlar arası geçişlerin ve hata durumlarının haritalanması, aynı iskeletin wireframe'den yüksek çözünürlüklü ekrana giydirilmesi ve erişilebilirlik kontrol listesinin uygulanması. Kutular örnek arayüz çizimidir, gerçek bir uygulamadan alınmadı; ekran başlıkları ad uydurmamak için çubukla temsil edildi. Üçüncü duraktaki kontrast simgesi ve dokunma alanı çerçevesi yalnızca "bu kalem kontrol ediliyor" demek için var: bir ölçü, oran ya da eşik göstermezler, bu yüzden üzerlerinde bilerek rakam yok. Renk körlüğü satırındaki üç leke temsilî palet lekesidir, bir simülasyon değildir.

Güncel fiyat ve süre bandı için Mobil Uygulama sayfasının fiyatlandırma bölümüne göz atın — kapsamınıza göre bandı iki dakikada netleştirebilirsiniz.

Kapsamı birlikte çıkaralımBeş adım, iki dakika. Ekranda süre ve fiyat aralığı çıkar.

Kapsam çıkaralım 0554 791 65 45
Sık sorulanlar

Sık sorulan sorular: mobil uygulama arayüz tasarımı

Mobil uygulama arayüz tasarımı geliştirmeden önce mi yapılıyor, süreç nasıl işliyor?

Evet, arayüz tasarımı geliştirme adımından önce tamamlanan ayrı bir aşamadır. Kullanıcı akışı ve wireframe onaylandıktan sonra yüksek çözünürlüklü ekranlar hazırlanır, prototip üzerinde son kontroller yapılır ve ancak bu onaydan sonra kod yazımına geçilir.

Wireframe ile yüksek çözünürlüklü tasarım arasındaki fark ne?

Wireframe, ekranın iskeletini gösteren düşük detaylı bir taslaktır; renk, görsel veya marka unsuru içermez, sadece yerleşim ve akışı test eder. Yüksek çözünürlüklü tasarım ise aynı iskeletin tipografi, renk paleti, ikonografi ve gerçek içerikle giydirilmiş, yayına hazır halidir.

Tasarım kullanıcı testinden geçiyor mu, yoksa doğrudan kodlamaya mı geçiliyor?

Tıklanabilir prototip üzerinden kullanıcı senaryoları denenir ve akışta takılma yaşanan noktalar tasarım aşamasında düzeltilir. Bu doğrulama tamamlanmadan ekranlar geliştirme ekibine devredilmez, çünkü kodlama sonrası değişiklik maliyeti çok daha yüksektir.

Erişilebilirlik ve dokunma alanı standartları neden önemli?

Yetersiz kontrast veya küçük dokunma alanı, kullanıcıların önemli bir bölümünü uygulamadan uzaklaştırabilir ve mağaza değerlendirmelerine olumsuz yansır. Platform kılavuzlarına uyumlu tasarım hem daha geniş bir kullanıcı kitlesine erişimi hem de mağaza inceleme sürecinin sorunsuz geçmesini kolaylaştırır.

Figma dosyası bize teslim ediliyor mu, yoksa sadece ajansta mı kalıyor?

Figma dosyası proje sahibine teslim edilir ve geliştirici modu açık bırakılır. Böylece mühendislik ekibiniz spacing, renk kodu ve bileşen özelliklerine doğrudan dosya üzerinden erişebilir, ayrı bir doküman beklemeden geliştirmeye başlayabilir.

Mevcut bir uygulamanın arayüzünü yenilemek, sıfırdan tasarım kadar sürer mi?

Yenileme projelerinde mevcut kullanıcı akışı ve veri yapısı zaten bilindiği için analiz adımı kısalır, ancak ekran sayısı ve teknik borç miktarına göre kapsam değişebilir. Süre, fiyatlandırma bölümünde proje bazında paylaşılır.

Sorunuz farklı mı? WhatsApp'tan sorun →
Ayrıntılar

Karar vermeden önce bakmak isterseniz

  1. 01

    Bilgi Mimarisi ve Wireframe

    Ekranlar arası geçiş haritası çıkarılır, her ekranın hangi bilgiyi taşıyacağı ve kullanıcıyı bir sonraki adıma nasıl yönlendireceği düşük çözünürlüklü taslaklarla netleştirilir. Bu aşamada geri bildirim almak, ileride yüksek çözünürlüklü ekranlarda yapılacak değişiklik sayısını azaltır.

  2. 02

    Tasarım Sistemi ve Bileşen Kütüphanesi

    Buton, form alanı, kart ve navigasyon gibi tekrar eden öğeler tek bir bileşen kütüphanesinde toplanır. Bu kütüphane sayesinde yeni bir ekran eklendiğinde tasarım tutarlılığı bozulmaz ve geliştirme ekibi aynı bileşeni farklı ekranlarda yeniden kullanabilir.

  3. 03

    Kullanıcı Testi ve Prototip Doğrulama

    Tıklanabilir prototip gerçek kullanıcılarla veya iç ekiple test edilerek akışta kafa karışıklığı yaratan noktalar tespit edilir. Bulgular yüksek çözünürlüklü tasarıma işlenir ve geliştirme ekibine yalnızca doğrulanmış ekranlar teslim edilir.

CANLI DÖNGÜ

Arayüz Tasarımıyla Geliştirmeye Hazır Başlayın

Kullanıcı akışından teslim edilen Figma dosyasına kadar tüm arayüz sürecini birlikte kurgulayalım. Kapsam ve teslim detayları için mobil uygulama hizmet sayfamızdaki fiyatlandırma bölümüne göz atabilir veya doğrudan bize ulaşabilirsiniz.

Kapsam çıkaralım WhatsApp'tan yaz