Mobil UI tasarıma yeni başlayanlar için farklı ekran boyutları göz korkutmasın. Responsive mantık, safe area, breakpoint ve Xcode gibi preview araçlarıyla süreç daha yönetilebilir.
Mobil UI tasarıma yeni başlayan birçok kişi aynı yerde geriliyor.
iPhone küçük, iPhone büyük, Android başka, tablet başka.
Bir de işin içine safe area, notch, navigation bar, tab bar, keyboard, landscape, responsive ve adaptive gibi kavramlar girince konu daha zor görünmeye başlıyor.
Ama bence burada panik yapmaya gerek yok.
Mobil app UI tasarımında amaç her cihazı tek tek ezberlemek değildir.
Asıl amaç, arayüzün farklı ekranlarda nasıl davranacağını doğru düşünmektir.
Bu mantık oturduğunda ekran boyutları korkutucu olmaktan çıkar.
Her cihaz için ayrı tasarım yapmak zorunda değilsin
Yeni başlayanlarda en sık gördüğüm düşünce şu:
“Her telefon boyutu için ayrı ekran mı çizeceğim?”
Hayır.
Tabii bazı kritik ekranları farklı boyutlarda kontrol etmek gerekir.
Ama her cihaz için baştan ayrı tasarım yapmak doğru yöntem değil.
Mobil UI tasarımda temel yaklaşım şudur:
- İçerik nasıl büyür?
- Alan daralınca ne olur?
- Buton nerede kalır?
- Liste uzayınca nasıl davranır?
- Keyboard açılınca form bozulur mu?
- Tablet ekranda aynı yapı çok boş kalır mı?
Bunları düşünürsen tek tek cihaz kovalamak yerine sistemli ilerlersin.
Responsive sadece web sitesi için değil
Responsive denince çoğu kişinin aklına web tasarım geliyor.
Ama mobil app tarafında da benzer bir düşünme biçimi var.
Ekranın genişliği, yüksekliği, güvenli alanları ve kullanılan componentler tasarım kararını etkiler.
Bir kart yapısı küçük telefonda tek kolon olabilir.
Daha geniş bir ekranda iki kolon gibi çalışabilir.
Bir bottom sheet küçük ekranda daha dikkatli kullanılmalı.
Tablet tarafında ise aynı içerik split view ya da daha geniş layout ile daha rahat sunulabilir.
Yani responsive düşünmek sadece “ekran küçülünce küçült” demek değildir.
İçeriğin önceliğini ve davranışını yeniden düşünmektir.
Adaptive design mantığını erken öğren
Responsive ve adaptive kavramları bazen karışıyor.
Basit düşünelim.
Responsive tasarım, arayüzün alana göre esnemesidir.
Adaptive design ise farklı ekran bağlamlarına göre layout kararının değişmesidir.
Mesela telefonda alt menü kullanırken tablette yan menü kullanmak adaptive bir yaklaşımdır.
Mobilde tek kolon, tablette iki panel göstermek de buna örnek olabilir.
Google tarafında Material Design bu konuyu breakpoint ve window size class mantığıyla ele alıyor.
Apple tarafında da Human Interface Guidelines içinde layout, safe area ve platform davranışları önemli yer tutuyor.
Yeni başlayan bir tasarımcı için bu belgeleri ezberlemek gerekmiyor.
Ama mantığını bilmek çok iş görür.
Xcode ve Android Studio burada neden önemli?
Bir UI/UX tasarımcı doğrudan kod yazmak zorunda olmayabilir.
Ama mobil app tasarlıyorsa geliştirici araçlarının nasıl düşündüğünü biraz anlamalı.
Mesela Xcode içinde SwiftUI Preview ile farklı cihazlarda ekranın nasıl göründüğü kontrol edilebilir.
Android Studio ve Jetpack Compose tarafında da preview ve farklı ekran sınıflarıyla layout kontrolü yapılabilir.
Bu tasarımcı için şu anlama gelir:
Sen Figma’da sadece güzel bir ekran çizmezsin.
Geliştirici o ekranı farklı cihazlarda yaşatmak zorunda kalır.
Bu yüzden tasarım kararın kod tarafında nasıl davranacak, bunu biraz düşünmen gerekir.
Button fixed mi kalacak?
Liste scroll olacak mı?
Header yüksekliği sabit mi?
Image alanı oranla mı büyüyecek?
Form alanı keyboard altında kalacak mı?
Bunları tasarım aşamasında düşünmek geliştiriciyle iletişimi çok rahatlatır.
Figma’da sadece tek frame çizip bırakma
Figma’da mobil app UI tasarlarken tek bir popüler ekran boyutu seçip bütün işi orada bitirmek zayıf kalabilir.
Ben olsam en az üç kontrol yapardım:
- Küçük telefon ekranı
- Orta / standart telefon ekranı
- Büyük telefon veya tablet benzeri geniş ekran
Bu üç kontrol sana çoğu problemi gösterir.
Metin taşıyor mu?
Buton aşağıda kayboluyor mu?
Card alanları fazla mı sıkışıyor?
Liste öğeleri okunuyor mu?
Boşluklar küçük ekranda fazla mı lüks kalıyor?
Büyük ekranda içerik çok mu dağınık duruyor?
Bunları erken fark etmek sonradan düzeltmekten daha kolaydır.
Güncel ekran ölçüleri için daha önce yazdığım Mobil Arayüz Tasarımı Ekran Boyutları Nedir? yazısına bakabilirsin.
Safe area konusu küçük ama önemlidir
Mobil arayüz tasarımında safe area çok önemli.
Çünkü ekranın her alanı rahat kullanılabilir alan değildir.
Üstte kamera alanı olabilir.
Altta home indicator olabilir.
Sistem gesture alanları olabilir.
Keyboard açıldığında içerik yukarı taşınmak zorunda kalabilir.
Yeni başlayanlar bazen butonu ekranın en altına fazla yaklaştırıyor.
Ya da header içeriğini üstteki sistem alanına çok yakın bırakıyor.
Bu küçük detaylar gerçek cihazda kötü hissettirir.
Figma’da güzel görünen bir ekran, cihazda rahatsız çalışabilir.
Bu yüzden mobil UI tasarımda safe area rehberlerini açık kullanmak iyi alışkanlık.
Component mantığı ekran boyutlarını kolaylaştırır
Farklı ekran boyutlarıyla çalışmayı kolaylaştıran şeylerden biri component mantığıdır.
Buton, card, input, tab bar, navigation, list item gibi parçalar sistemli kurulursa farklı ekranlarda davranış daha kontrollü olur.
Mesela bir kart componentinin minimum genişliği, iç boşluğu, görsel oranı ve metin davranışı belliyse tasarım daha rahat ölçeklenir.
Her şeyi elle yerleştirirsen küçük bir ekran değişikliğinde bütün yapı bozulur.
Bu yüzden mobil app UI tasarlarken design system düşüncesi lüks değil, iş kolaylaştıran bir temel.
Bu konu için Design Systems for Beginners yazısı iyi bir başlangıç olabilir.
Junior tasarımcılar nerede hata yapıyor?
Yeni başlayanlarda gördüğüm birkaç tipik hata var.
Birincisi, sadece en güzel görünen cihaz boyutunda çalışmak.
İkincisi, uzun metinleri hiç test etmemek.
Üçüncüsü, keyboard açılınca ne olacağını düşünmemek.
Dördüncüsü, empty state ve error state gibi gerçek ürün durumlarını atlamak.
Beşincisi, geliştiriciye sadece final ekran görseli verip davranışı açıklamamak.
Oysa iyi mobil UI tasarımda ekranın davranışı da anlatılmalı.
Şu alan scroll olur.
Bu buton sticky kalır.
Bu görsel oranını korur.
Bu liste boşsa empty state görünür.
Bu hata durumunda input mesaj gösterir.
Bunları yazmak ve göstermek seni daha profesyonel gösterir.
Responsive mobil UI için basit kontrol listesi
Bir mobil app ekranını teslim etmeden önce şu liste işe yarar:
- Küçük ekranda içerik okunuyor mu?
- Büyük ekranda layout fazla boş kalıyor mu?
- Safe area dikkate alındı mı?
- Keyboard açılınca form alanları görünür kalıyor mu?
- Uzun metinler taşmadan çalışıyor mu?
- Butonlar dokunulabilir boyutta mı?
- Liste, kart ve görsel alanları esneyebiliyor mu?
- Empty state ve error state tasarlandı mı?
- Tablet veya geniş ekran davranışı düşünüldü mü?
- Geliştiriciye davranış notları verildi mi?
Bu listeyi alışkanlık haline getirmek, farklı ekran boyutları korkusunu bayağı azaltır.
AI burada nasıl yardımcı olabilir?
AI bu konuda da yardımcı olabilir.
Mesela bir ekran için farklı responsive senaryoları sorabilirsin.
Küçük ekranda hangi alanlar öncelikli olmalı diye fikir alabilirsin.
Form akışında keyboard davranışı için kontrol listesi çıkarabilirsin.
Geliştiriciye vereceğin handoff notlarını toparlatabilirsin.
Ama AI’a sadece “bu ekranı responsive yap” demek yeterli değil.
Önce sen ekranın mantığını bilmelisin.
Hangi alan sabit, hangi alan esnek, hangi alan scroll, hangi alan gizlenebilir?
Bu kararlar sende net değilse AI da karışık sonuç verir.
AI destekli UI/UX konusunda Yeni Başlayanlar İçin UI/UX Tasarımda AI Kullanma Mantığı yazısı da bu düşünceye yakın bir yerden ilerliyor.
Benim düşüncem
Mobil UI tasarımda farklı ekran boyutları göz korkutmamalı.
Çünkü mesele cihaz ezberlemek değil.
Mesele layout mantığını anlamak.
Safe area’yı bilmek.
Componentleri sistemli kurmak.
Responsive ve adaptive davranışı düşünmek.
Ve tasarımın geliştirici tarafında nasıl hayata geçeceğini biraz anlamak.
Xcode, Android Studio, preview araçları ve platform rehberleri tasarımcı için yabancı dünyalar gibi görünmemeli.
Hepsini kod seviyesinde bilmek zorunda değilsin.
Ama bu araçların neden farklı ekranları kontrol ettiğini anlarsan daha doğru UI kararları verirsin.
Bence junior tasarımcı için güzel hedef şu:
Tek bir güzel ekran değil, farklı ekranlarda bozulmadan çalışan bir arayüz düşünmek.
Gerçek mobil UI tasarım burada başlıyor.
UI/UX ve product design tarafında daha fazla içerik için UI/UX, Product Design ve Technology kategorilerine bakabilirsin.
