Konu Başlıkları
Yükleniyor...

Katlanabilir Ekranlar Arayüz Tasarımına Ne Yapıyor?

Katlanabilir Cihazlarda Arayüz: Katlama Anı ve Durum Sürekliliği

Katlanabilir cihazlar arayüz tarafında yeni bir ekran boyutu getirmedi, yeni bir an getirdi: kullanıcının uygulamayı kullanırken cihazın şeklini değiştirdiği an. Tasarım tartışmaları çoğunlukla açık haldeki geniş ekranda dönüyor, oysa deneyim asıl o geçişte kırılıyor: yeniden başlayan uygulama, sıfırlanan kaydırma, uçan form. Geniş ekran düzeni bundan sonra gelen sorun.

İki form faktörü, iki ayrı tasarım sorusu

Yatay katlanan (fold-out) cihazlarda kapalı haldeki telefon açıldığında tablet genişliğine çıkar. Buradaki soru düzen sorusudur: iki sütuna mı geçilecek, liste ve detay yan yana mı duracak, tek sütunu ortalayıp kenarları boş mu bırakacaksınız. Dikey katlanan (flip) cihazlarda ise ana ekran zaten normal telefon boyutunda; yeni olan, kapaktaki küçük ekran. Oradaki soru düzen değil, seçim sorusudur: bir uygulamanın hangi tek işlevi o küçük yüzeye çıkmayı hak eder?

Bu ikisini aynı "katlanabilir uyumluluk" başlığı altında toplamak yaygın bir hata. Fold-out'ta içeriği yeniden yerleştirirsiniz, flip'te içeriği acımasızca elersiniz. Kapak ekranı için tasarım yapmak, akıllı saat için tasarım yapmaya çok daha yakın duruyor.

Asıl kırılma noktası: katlama anı

Kullanıcı bir ürünü listelerken cihazı açtı diyelim. Peki ya o anda ne oluyor? İyi durumda: liste aynı yerinde kalıyor, sadece iki sütuna yayılıyor. Kötü durumda: uygulama yeniden başlıyor, kaydırma konumu sıfırlanıyor, yarım doldurulmuş form uçuyor, oynayan video baştan alıyor.

Bu kötü durum bir tasarım tercihi değil, varsayılan davranış. Android tarafında ekran yapılandırması değiştiğinde aktivite yeniden yaratılır; geliştirici durumu bilinçli olarak korumazsa (kaydedilmiş durum, ViewModel, configChanges yönetimi) kullanıcının işi başa döner. Web tarafında da benzeri var: düzeni yeniden kuran bir bileşen, kaydırma konumunu ve odaklanmış alanı kendiliğinden taşımaz.

Dolayısıyla katlanabilir uyumluluğun ilk maddesi geniş ekran düzeni değil, geçişte hiçbir şey kaybetmemek. Bir arayüz iddiasının kodda karşılığı olup olmadığını en hızlı ölçen test de bu: uygulamayı aç, bir formu yarıya kadar doldur, cihazı katla, geri aç. Yazdığın metin duruyorsa gerisi düzen ayarıdır.

Cihaz başına breakpoint tutmaz

Sık verilen tavsiye şu: "katlanabilir cihazlar için uygun breakpoint'ler belirleyin". Bu tavsiye kendi ağırlığı altında çöküyor, çünkü liste kapanmıyor. Her yeni model kapalı genişlik, açık genişlik, dikey, yatay ve yarı açık duruşların çarpımı kadar yeni durum ekliyor. Cihaz adına göre kural yazmaya başlarsanız bakım maliyeti cihaz sayısıyla değil, durum sayısıyla büyür.

Sürdürülebilir yol, cihazı değil geometriyi sormaktan geçiyor. Tarayıcı tarafında viewport segment sorguları ekranın kaç parçaya bölündüğünü, device posture sorgusu cihazın katlı olup olmadığını bildiriyor; Android tarafında Jetpack WindowManager menteşenin konumunu ve duruşunu doğrudan veriyor. Bileşen düzeyinde container query kullanmak da işe yarıyor: bileşen kendi kabına bakar, cihazın kim olduğunu bilmesi gerekmez.

Menteşe hattının kendisi ayrı bir kısıt. Katlanma çizgisi bir metin bloğunun ortasına ya da bir düğmenin üstüne denk geldiğinde okuma ve dokunma bozulur; hattı boşluk olarak kabul edip içeriği iki tarafa dağıtmak gerekiyor.

Yarı açık duruş ne getiriyor?

Cihaz yaklaşık dik açıda bırakıldığında ekran fiziksel olarak ikiye ayrılır: üst yarı bakılan, alt yarı dokunulan yüzey olur. Video görüşmesinde görüntü üstte kontroller altta, kamerada vizör üstte deklanşör altta, not alırken metin üstte klavye altta. Peki bu duruşu desteklemeyen bir uygulama ne yapar? Genelde ekranı olduğu gibi bükülmüş halde gösterir ve kullanıcı cihazı düzleştirmek zorunda kalır.

Bunu her uygulamaya eklemek gerekmiyor. Elleri serbest bırakmanın anlamlı olduğu bir durum varsa değer üretiyor, yoksa süs kalıyor.

Test etmeden bitmiş sayılmaz

  • Katla ve aç: kaydırma konumu, form girdisi, video konumu korunuyor mu?
  • Menteşe hattı: metin ya da etkileşim hedefi çizginin üstüne düşüyor mu?
  • Kapak ekranı: tek işlev seçildi mi, yoksa ana ekran küçültülüp mü konuldu?
  • Yarı açık duruş: arayüz bükülmüş ekranda okunabiliyor mu?

Fiziksel cihaz olmadan da ilerlenebiliyor; Android Studio'nun yeniden boyutlanabilir emülatörü katlanır duruşları taklit ediyor, tarayıcı geliştirici araçları çift segmentli görünümü simüle ediyor. Elde cihaz yoksa mazeret değil, sadece daha yavaş bir döngü.