Kazanimlar:
- Jetpack Compose ve SwiftUI için amaç, bileşen, dört durum (yükleniyor/boş/hata/dolu), tasarım sistemi ve erişilebilirlik sırasıyla sağlam arayüz kodu ürettirebilme
- Erişilebilirliği baştan tanımlayarak doğru etiketleme, yeterli kontrast ve uygun dokunma hedefiyle tüm kullanıcılara açık arayüz üretebilme
- Renk ve boşluğu merkezî temadan okutarak tutarlı, çok dile ve açık/koyu temaya hazır arayüzler kurabilme
Mobil bir uygulamanın başarısını büyük ölçüde kullanıcı arayüzü (UI — kullanıcının gördüğü ve dokunduğu ekranlar) ve kullanıcı deneyimi (UX — kullanmanın ne kadar akıcı ve keyifli olduğu) belirler. Kullanıcı, kötü kodu görmez ama kötü arayüzü ilk saniyede hisseder. YZ, arayüz geliştirmede iki güçlü rol oynar: bir yandan tasarım fikri, akış ve metin (UX writing) üretir; öte yandan bu tasarımı doğrudan çalışan arayüz koduna dönüştürür. Bu ünitede modern bildirimsel arayüz araçları olan Jetpack Compose (Android) ve SwiftUI (iOS) odağında, YZ ile hızlı, erişilebilir ve tutarlı arayüzler üretmeyi öğreneceğiz. "Bildirimsel" (declarative) şu demektir: ekranın nasıl çizileceğini adım adım anlatmak yerine, "ekran şu duruma göre böyle görünsün" diye tarif edersiniz; araç gerisini halleder.
Tasarımdan koda: doğru sıra
YZ'ye "güzel bir ekran yap" demek belirsizdir çünkü "güzel" ölçülemez. İyi arayüz üretimi şu sırayı izler:
- Amaç ve içerik. Ekran ne işe yarıyor, hangi bilgiyi gösteriyor, kullanıcı ne yapacak?
- Bileşen listesi. Başlık, liste, buton, form alanı gibi parçalar.
- Durumlar. Yükleniyor, boş (veri yok), hata, dolu — dört temel ekran durumu.
- Tasarım sistemi. Renk, tipografi, boşluk kuralları; genelde Material 3 (Android) veya iOS'un Human Interface Guidelines kurallarına uyum.
- Erişilebilirlik. Ekran okuyucu etiketleri, yeterli kontrast, dokunma hedefi boyutu.
- Kod. Tüm bunları söyledikten sonra Composable veya SwiftUI View üretimi.
En sık atlanan adım üçüncüsüdür. Geliştiriciler yalnızca "dolu" durumu düşünür; oysa gerçek uygulamada kullanıcı en çok "yükleniyor" ve "hata" durumlarıyla karşılaşır. YZ'ye dört durumu birden yazdırmak, sağlam arayüzün sırrıdır.
İpucu: İstemin sonuna "yükleniyor, boş, hata ve dolu durumlarının hepsini ayrı ayrı üret" cümlesini ekleyin. Bu tek cümle, arayüzünüzü gerçek dünyaya hazır hale getirir ve QA (kalite testi) aşamasındaki hata sayısını ciddi düşürür.
Erişilebilirlik pazarlık konusu değil
Erişilebilirlik (accessibility — uygulamanın görme, işitme veya motor engelli kullanıcılarca da kullanılabilmesi) hem etik bir sorumluluk hem de mağaza ve yasal beklentidir. YZ, istenirse erişilebilir kod üretir; istenmezse etiketsiz, düşük kontrastlı arayüz verir. Üç temel kural: her etkileşimli öğeye ekran okuyucu için anlamlı bir etiket (contentDescription / accessibilityLabel), metin ile arka plan arasında yeterli renk kontrastı (en az 4.5:1 oranı), ve en az 48x48 dp/44x44 pt dokunma hedefi. YZ'ye bunları açıkça isteyin.
Dikkat: YZ dekoratif bir ikona da uzun bir erişilebilirlik etiketi ekleyebilir; bu, ekran okuyucu kullanıcısını gereksiz konuşmayla boğar. Salt dekoratif öğeler "erişilebilirlikten gizlenmeli" (ekran okuyucunun atlaması sağlanmalı). Üretilen etiketleri gözden geçirin: anlamlı olan konuşsun, dekoratif olan sussun.
Tutarlılık: tasarım sistemi ve tema
Profesyonel uygulamalar rastgele renk ve boşluk kullanmaz; bir tasarım sistemine (renk, yazı tipi, boşluk ve bileşenlerin standart kümesi) uyar. YZ'ye tema değerlerinizi (ana renk, ikincil renk, köşe yarıçapı, tipografi ölçeği) verirseniz, tüm ekranlar tutarlı çıkar. Vermezseniz her ekran farklı bir mavi tonu kullanır ve uygulama derme çatma görünür. En verimli yol, YZ'den önce bir tema/tasarım token'ları dosyası üretmesini istemek, sonra tüm ekranları o temaya bağlamaktır.
Konu
Zayıf yaklaşım
Güçlü yaklaşım
Renk
Her ekranda elle renk kodu
Merkezî tema, ekranlar temadan okur
Durumlar
Sadece "dolu" ekran
Yükleniyor/boş/hata/dolu dört durum
Erişilebilirlik
Sonradan eklenir
Baştan istemde tanımlanır
Metin
Kod içine gömülü
Ayrı kaynak, çok dil desteğine hazır
Üç mini vaka
Vaka 1 — Boş durum kurtardı. Bir haber uygulaması ekibi, YZ'ye ekran durumlarını ayrı ayrı yazdırdı. "Boş durum" ekranı ("Henüz kaydedilmiş haber yok") sayesinde kullanıcı testinde katılımcıların %70'i uygulamayı boş ekranda terk etmedi; önceki sürümde boş ekran beyaz kalıyor ve kullanıcılar "bozuk" sanıp çıkıyordu. Küçük bir metin, elde tutma oranını yükseltti.
Vaka 2 — Kontrast reddi. Bir ekip App Store'a marka rengi olan açık gri metinli ekranlarla başvurdu. Apple, düşük kontrast nedeniyle erişilebilirlik gerekçesiyle uyarı verdi. YZ'ye "metin-arka plan kontrastını 4.5:1'in üstüne çek" denildiğinde renkler koyulaştı ve sorun çözüldü. Baştan istenmiş olsa gecikme yaşanmayacaktı.
Vaka 3 — Dekoratif etiket gürültüsü. Görme engelli bir test kullanıcısı, YZ'nin ürettiği ekranda her süsleme ikonunun ("çizgi", "nokta", "gölge") sesli okunduğunu, bunun ekranı kullanılamaz kıldığını bildirdi. Dekoratif öğeler erişilebilirlikten gizlenince ekran okuyucu deneyimi akıcılaştı. Ders: erişilebilirlik "çok etiket" değil, "doğru etiket" demektir.
Zayıf prompt / Güçlü prompt
Zayıf prompt:"Bir profil ekranı tasarla."
Güçlü prompt:"iOS/SwiftUI için kullanıcı profil ekranı üret.İçerik: avatar, ad, e-posta, 'Profili düzenle' butonu, ayarlar listesi.Durumlar: yükleniyor (skeleton), hata (yeniden dene butonu), dolu.Tasarım: Material değil, iOS HIG'e uygun; sistem renkleri, Dynamic Type.Erişilebilirlik: her öğeye accessibilityLabel, dekoratif ikonlar gizli,dokunma hedefi min 44pt.Tema değerlerini ayrı bir dosyadan oku, ekrana renk kodu gömme.Önce bileşen ağacını çiz, sonra kodu ver."
Kopyalanabilir şablonlar
Ekran üretim şablonu:"[Platform/araç] için [ekran adı] üret.İçerik: [öğeler]. Kullanıcı eylemleri: [eylemler].Dört durumu ayrı üret: yükleniyor, boş, hata, dolu.Tasarım sistemi: [Material 3 / iOS HIG], tema token'larından oku.Erişilebilirlik: etiketler, kontrast >=4.5:1, dokunma hedefi standart."
Tema/tasarım sistemi şablonu:"Uygulamam için merkezî bir tema tanımı üret ([Compose Theme /SwiftUI'da bir tasarım token yapısı]):- Ana renk [hex], ikincil [hex], hata rengi, yüzey rengi- Tipografi ölçeği (başlık, gövde, açıklama)- Boşluk ölçeği (4,8,16,24)- Köşe yarıçapı standardıAçık ve koyu tema desteği ekle."
Erişilebilirlik denetim şablonu:"Bu ekran kodunu erişilebilirlik açısından denetle:1) Etiketsiz etkileşimli öğe var mı?2) Kontrast oranları yeterli mi?3) Dokunma hedefleri yeterince büyük mü?4) Dekoratif öğeler ekran okuyucudan gizli mi?Her sorun için düzeltme öner. [kod]"
Tasarımdan koda şablonu:"Şu tasarımı tarif ediyorum: [ekran açıklaması veya ekran görüntüsü].Bunu [Compose/SwiftUI] koduna çevir. Boşluk ve hizalamayıtasarıma sadık tut, ama dört durumu da ekle."
Sık yapılan hatalar
- Sadece dolu durumu düşünmek. Gerçek kullanıcı çoğu zaman yükleniyor/hata ekranını görür.
- Rengi ve boşluğu koda gömmek. Tema merkezî olmazsa tutarlılık kaybolur, bakım zorlaşır.
- Erişilebilirliği sona bırakmak. Sonradan eklemek pahalıdır; baştan istenirse maliyetsizdir.
- Aşırı etiketleme. Dekoratif öğeleri de okutmak ekran okuyucu deneyimini bozar.
- Metni koda gömmek. Çok dilli destek gerektiğinde her ekranı elle değiştirmek gerekir; metinleri ayrı tutun.
- Ekran görüntüsünden birebir kopya beklemek. YZ tasarımı yaklaşık üretir; piksel hassasiyeti elle ayarlanır.
Özetle
Arayüz üretiminde YZ güçlüdür ama yönlendirme ister. Doğru sıra: amaç, bileşenler, dört durum (yükleniyor/boş/hata/dolu), tasarım sistemi, erişilebilirlik, sonra kod. Erişilebilirlik pazarlık konusu değildir ve "çok etiket" değil "doğru etiket" demektir. Tutarlılık için renk ve boşluğu merkezî temadan okuyun, koda gömmeyin. Güçlü istem tüm bunları baştan tanımlar; böylece arayüz gerçek dünyaya, mağaza onayına ve tüm kullanıcılara hazır çıkar.
Uygulama görevi
Bir ayarlar ekranı için "Ekran üretim şablonu"nu kullanarak YZ'den Compose veya SwiftUI kodu isteyin ve dört durumu da isteyin. Ardından "Erişilebilirlik denetim şablonu" ile aynı kodu denetletin. En az bir erişilebilirlik iyileştirmesi (eksik etiket, düşük kontrast veya küçük dokunma hedefi) bulup düzeltin ve hangi durumun (yükleniyor/boş/hata) sizce gerçek kullanımda en sık görüneceğini not edin.
Kontrol listesi
- [ ] Ekranın amacını ve bileşenlerini istemde netleştirdim
- [ ] Dört durumu (yükleniyor/boş/hata/dolu) ayrı ayrı ürettirdim
- [ ] Renk ve boşluğu merkezî temadan okuttum, koda gömmedim
- [ ] Erişilebilirlik etiketlerini ve kontrastı baştan istedim
- [ ] Dekoratif öğelerin ekran okuyucudan gizlendiğini doğruladım
- [ ] Metinleri çok dile hazır biçimde ayrı tuttum