Mobil Geliştirmede UI/UX ve Bileşenler: Nedir, Türleri ve Nasıl Kullanılır

Tasarım Sistemleri: Material Design ve Human Interface Guidelines

Her platform kendi kural ve bileşen setini sunar. Android için bu, 2014 yılında Google tarafından geliştirilen Material Design'dır. Material Design, fiziksel malzeme metaforunu kullanır — katmanlar, gölgeler (Elevation), animasyonlu geçişler ve uyarlanabilir düzenler. Temel ilkeler arasında yükseltme yoluyla hiyerarşi, anlamlı hareket ve farklı form faktörlerine uyarlanabilirlik bulunur. Material Design 3 (Material You) — dinamik tema ve kişiselleştirilmiş renklere sahip en son sürüm — keşfetmenizi öneririz.

Apple, Human Interface Guidelines (HIG) sunar — iOS, iPadOS, macOS, watchOS ve tvOS için bir kurallar seti. HIG, net tipografi (San Francisco), Notch ve Dynamic Island'ı hesaba katmak için Safe Area, jest tabanlı navigasyon ve tutarlılığı vurgular. Material Design'ın aksine HIG, "katmanlar" ve Elevation kullanmaz — bunun yerine bulanıklık (vibrancy), gölgeler ve ince ayırıcılar kullanır. Tam HIG belgeleri, yeni iOS sürümleriyle düzenli olarak güncellenir.

IT Sectr'de, müşterinin platformuna bağlı olarak her iki tasarım sistemini de kullanıyoruz. Platformlar arası Flutter projeleri için, Material Design ve HIG'in en iyi uygulamalarını birleştiren birleşik bir tasarım sistemi geliştiriyoruz. Bu yaklaşım, kod tekrarı olmadan her platformda yerel bir kullanıcı deneyimi sağlar.

Bildirimsel UI Çerçeveleri: SwiftUI ve Jetpack Compose

UI oluşturmada geleneksel yaklaşım, XML (Android) veya Interface Builder / kod (iOS) aracılığıyla buyurgan düzendir. Modern alternatif ise bildirimsel çerçevelerdir; burada geliştirici, arayüzün her durumda nasıl görünmesi gerektiğini tanımlar ve çerçeve güncellemeleri yönetir.

Jetpack Compose (Android)

Jetpack Compose, Kotlin'de yerel UI oluşturmak için Google'ın modern araç takımıdır. XML düzenleri yerine, Kotlin birleştirilebilir işlevler (@Composable) kullanılır. Compose tamamen bildirimseldir: veriler değiştiğinde, ekranın yalnızca değişen kısımları yeniden çizilir. Metin ve düğme içeren basit bir ekran örneği:

@Composable
fun GreetingScreen() {
    var count = remember { mutableStateOf(0) }
    Column {
        Text(text = "Нажато: $count")
        Button(onClick = { count++ }) {
            Text("Нажми меня")
        }
    }
}

SwiftUI (iOS)

SwiftUI, 2019'da tanıtılan Apple'ın bildirimsel çerçevesidir. Birleşik bir API aracılığıyla tüm Apple platformlarında (iOS, iPadOS, macOS, watchOS, tvOS) çalışır. SwiftUI, veri yönetimi için View yapıları, @State ve @Binding özellikleri ve stil oluşturma için değiştiriciler kullanır. SwiftUI'de yukarıdaki örneğin eşdeğeri:

struct GreetingView: View {
    @State private var count = 0
    var body: some View {
        VStack {
            Text("Нажато: \(count)")
            Button("Нажми меня") {
                count += 1
            }
        }
    }
}

Flutter Widgets

Google'ın Flutter'ı kendi widget kütüphanesini kullanır. Flutter'da her şey bir widget'tır — dolgudan tüm ekrana kadar. Widget'lar StatelessWidget (değişmez) ve StatefulWidget (durumlu) olarak ikiye ayrılır. Temel kapsayıcılar Container, Row, Column, Stack'tir. Flutter, platformun yerel bileşenlerini kullanmaz — her şeyi Skia Engine aracılığıyla çizer ve hem Android hem de iOS'ta tutarlı bir görünüm sağlar.

class GreetingWidget extends StatefulWidget {
    @override
    State createState() => _GreetingWidgetState();
}
class _GreetingWidgetState extends State<GreetingWidget> {
    int count = 0;
    @override
    Widget build(BuildContext context) {
        return Column(
            children: [
                Text('Нажато: $count'),
                ElevatedButton(
                    onPressed: () => setState(() => count++),
                    child: Text('Нажми меня'),
                ),
            ],
        );
    }
}

Android ve iOS İçin Yerel UI Bileşenleri

Bildirimsel çerçevelerin yaygınlaşmasına rağmen, eski projeleri desteklemek ve derin özelleştirme için yerel bileşenleri anlamak önemini koruyor.

Navigasyon

Android'de navigasyon, Activity (ekran etkinlikleri) ve Fragment (bir Activity içindeki parçalar) üzerine kuruludur. Jetpack Navigation Component, bir navigasyon grafiği aracılığıyla ekranlar arasındaki geçişleri basitleştirir. iOS'ta navigasyon, NavigationController — animasyonlu geçişlere sahip bir denetleyici yığını — aracılığıyla uygulanır. Tab Bar ve Bottom Navigation, uygulamanın ana bölümleri arasında geçiş yapmayı sağlar. Drawer (yan menü) ve Toolbar/ActionBar ek eylemler için kullanılır. Android Navigation Component tüm yeni projeler için önerilir.

Listeler

Büyük miktarda veri görüntülemek için Android, RecyclerView — ViewHolder yeniden kullanımına sahip verimli bir kapsayıcı — kullanır. iOS'taki karşılıkları UITableView (dikey listeler) ve UICollectionView'dir (ızgara). Jetpack Compose, LazyColumn ve LazyVerticalGrid sunarken, SwiftUI List ve LazyVStack/LazyHStack sağlar. Lazy bileşenlerinin temel avantajı, yalnızca görünür öğeleri işlemeleridir.

Düzenler ve Konumlandırma

Android View Sistemi, birkaç düzen kapsayıcısı sunar: ConstraintLayout (esnek kısıtlama sistemi), LinearLayout (doğrusal düzen), RelativeLayout (göreceli konumlandırma), FrameLayout (katman istifleme). iOS'ta, Core Auto Layout, öğelerin konumunu tanımlamak için bir kısıtlama sistemi (NSLayoutConstraint) kullanır. SwiftUI ve Flutter sırasıyla VStack/HStack/ZStack ve Row/Column/Stack kullanır.

Ölçüm Birimleri ve Duyarlı Düzen

Mobil cihazların UI bileşenleri, farklı piksel yoğunlukları dikkate alınarak görüntülenir. Arayüzün tüm ekranlarda aynı görünmesini sağlamak için yoğunluktan bağımsız birimler kullanılır.

Ekran yoğunlukları şu şekilde sınıflandırılır: mdpi (160 dpi, 1x), hdpi (240 dpi, 1.5x), xhdpi (320 dpi, 2x), xxhdpi (480 dpi, 3x), xxxhdpi (640 dpi, 4x). Görüntüleri hazırlarken, tüm yoğunluklar için kaynak oluşturmanız gerekir: icon.png, icon_hdpi.png, icon_xhdpi.png vb. Vektör biçimleri (Android'de VectorDrawable, iOS'ta SF Symbols) birden çok raster kaynak sorununu çözer.

IT Sectr'de, Figma'dan simgeleri dışa aktarmak için bir ölçekleme faktörü kullanıyoruz: iOS için 1x, 2x, 3x ve Android için mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi olarak dışa aktarıyoruz. Bu, tabletler ve katlanabilir akıllı telefonlar dahil tüm cihazlarda keskin görüntüleme sağlar.

Modern UI Kavramları: Karanlık Mod, Safe Area, Erişilebilirlik

Modern mobil uygulama UI bileşenleri, bir dizi standardı desteklemelidir; aksi takdirde kullanıcı deneyimi eksik kalır.

Karanlık Mod / Aydınlık Mod

Karanlık Mod, modern uygulamalarda zorunlu bir seçenektir. Material Design 3 ve iOS 13+, karanlık tema için yerleşik destek sağlar. Renkleri tersine çevirmek değil, ayrı renk paletleri kullanmak önemlidir: koyu arka plan, açık metin, ikincil öğeler için düşük kontrast. Otomatik geçiş, cihazın sistem temasına bağlanabilir.

Safe Area ve Notch / Dynamic Island Desteği

Modern iPhone'lar bir Notch'a (ön kamera için çentik) ve Dynamic Island'a sahiptir. Android cihazlar da çentiklere ve yuvarlatılmış köşelere (Corner Radius) sahiptir. Safe Area, sistem öğelerinden (durum çubuğu, ana ekran göstergesi), navigasyon çubuğundan ve çentiklerden arınmış olduğu garanti edilen ekran alanıdır. iOS, Safe Area Insets'i otomatik olarak uygular; Android, WindowInsets veya DisplayCutout aracılığıyla açık kontrol gerektirir.

Erişilebilirlik (a11y)

Erişilebilirlik, uygulamanın engelli kişiler tarafından kullanılabilirliğini sağlar. Temel gereksinimler: TalkBack (Android) ve VoiceOver (iOS) desteği, ImageView için doğru contentDescription, yeterli renk kontrastı (metin için minimum 4.5:1), yazı tipi ölçekleme için Dynamic Type (iOS) desteği, görüşsüz navigasyon ve jest alternatifleri. WCAG 2.1 uluslararası erişilebilirlik standardıdır.

Küreselleşme ve Yerelleştirme (i18n / l10n)

Uluslararasılaştırma (i18n), uygulamanın birden çok dili ve bölgesel biçimi desteklemeye hazırlanmasıdır. Yerelleştirme (l10n), dizelerin, tarihlerin, para birimlerinin ve kültürel özelliklerin çevrilmesidir. Android, kaynak dizinlerini (values-ru, values-de) kullanır; iOS, Localizable.strings ve XLIFF kullanır. Flutter, ARB çeviri dosyalarıyla flutter_localizations'ı destekler.

Jestler ve Etkileşim

Dokunma etkileşimi birçok jesti içerir: Dokunma, Uzun Basma, Kaydırma, Kıstırma-Yakınlaştırma, Çek-Yenile, Sürükle-Bırak. Android, GestureDetector kullanır; iOS, UIGestureRecognizer kullanır. iOS ayrıca Taptic Engine aracılığıyla dokunsal geri bildirimle 3D Touch (Force Touch) ve Haptic Touch'ı da destekler.