iPhone ve iPad için Adaptive User Interfaces
En son güncellendiği tarih: May 30
Uygulamalar, ekran boyutuna veya en boy oranına bakılmaksızın tüm iPhone ve iPad modellerinde düzgün görünmelidir. Xcode, storyboard ve Auto Layout gibi özelliklerle uygulamanızın arayüz öğeleri ve düzenleri ekrana otomatik olarak sığar. WWDC19'da duyurulduğu şekilde, 1 Nisan 2020'den itibaren App Store'a gönderilecek uygulamaların başlangıç ekranınında storyboard kullanmalıdır. Ayrıca uygulamaların tüm ekran boyutlarını destekleyen bir arayüze sahip olması gerekiyor.
iPad 'de Multitasking desteği şiddetle öneriliyor. Birden çok pencere için destek eklemek ve Üzerinde Kaydırma(Slide Over), Bölünmüş Görünüm(Split View) ve Resim İçinde Resim(Picture in Picture) de dahil olmak üzere Multitasking özelliklerini kullanmak, uygulamanızın iPadOS'ta eksiksiz bir deneyim sunmasını sağlıyor.
Uyumluluk ve Düzen
iOS'de arayüz öğeleri ve düzenleri, farklı cihazlarda, iPad'de çoklu görev sırasında, bölünmüş görünümde, ekran döndürüldüğünde ve daha pek çok şekli ve boyutu otomatik olarak değiştirecek şekilde yapılandırılabilir. Her ortamda destek sağlayan uyarlanabilir bir arayüz tasarlamanız önemlidir.
Cihazların Ekran Boyutları ve Yönleri
Auto Layout
Auto Layout uyarlanabilir arayüz oluşturmak için bir geliştirme aracıdır. Auto Layout kullanarak, uygulamanızdaki içeriği yöneten constraints (kısıtlamalar olarak bilinir) tanımlayabilirsiniz. Örneğin, bir buton'u mevcut ekran alanından bağımsız olarak her zaman yatay olarak ortalanacak ve ekrandaki görüntünün altına yerleştirecek şekilde sınırlandırabilirsiniz.
Yerleşim Kılavuzları ve Safe Area
Düzen (Layout) kılavuzları, gerçekte ekranda görünmeyen, ancak içeriğin konumlandırılmasına, hizalanmasına ve aralığına yardımcı olan dikdörtgen bölgeleri tanımlar. Sistem, içeriğin etrafına standart kenar boşlukları uygulanmasını kolaylaştıran ve en iyi okunabilirlik için metnin genişliğini kısıtlayan önceden tanımlanmış düzen kılavuzları içerir. Custom layout kılavuzları da tanımlayabilirsiniz.
UIKit tarafından tanımlanan safe area ve düzen kenar boşluklarına(layout margins) uymanız gerekir. Düzen kılavuzları, cihaza ve bağlama göre uygun yerleştirme sağlar. Güvenli alan ayrıca içeriğin durum çubuğunun, gezinme çubuğunun, araç çubuğunun ve sekme çubuğunun altını çizmesini önler. Standart sistem tarafından sağlanan görünümler otomatik olarak güvenli bir alan düzeni kılavuzu kullanır.
Boyut Sınıfları
Boyut sınıfları (size classes), boyutlarına göre içerik alanlarına otomatik olarak atanan özelliklerdir. Sistem, bir görünümün yüksekliğini ve genişliğini tanımlayan düzenli (geniş alanı belirtir) ve kompakt (kısıtlanmış alanı belirtir) olmak üzere iki boyut sınıfı tanımlar.
Genel Yerleşim Konuları
Birincil içeriğin varsayılan boyutunun net olduğundan emin olun. Bu insanların içeriği yakınlaştırmadan ya da boyutunu değiştirmeden anlayabileceği şekilde olmalıdır.
Uygulamanız genelinde genel olarak tutarlı bir görünüm elde edin. Genel olarak, benzer işlevlere sahip elemanlar benzer görünmelidir.
Büyük item'lar dikkat çeker ve küçük olanlardan daha önemli görünür. Daha büyük öğelere dokunmak daha kolaydır, bu da özellikle mutfak veya spor salonu gibi dikkat dağıtıcı bir ortamda bir uygulama kullanıldığında önemlidir.
Taramayı kolaylaştırmak, organizasyon ve hiyerarşiyi iletmek için alignment'ı kullanın. Alignment, bir uygulamanın düzgün ve düzenli görünmesini sağlar, kaydırırken odaklanmaya yardımcı olur ve bilgi bulmayı kolaylaştırır. Girinti ve hizalama, içerik gruplarının nasıl bir ilişkide olduğunu da gösterebilir.
Mümkünse, hem dikey hem de yatay yönlendirmeleri (orientation) destekleyin. Kullanıcılar uygulamaları farklı yönlerde kullanmayı tercih eder, bu nedenle bu beklentiyi yerine getirebilmeniz önemlidir.
Metin boyutu değişikliklerini dikkate alın. Kullanıcılar, çoğu uygulamanın, işletim sistemi ayarlarında farklı bir metin boyutu seçildiğinde yanıt vermesini bekler.
Etkileşimli öğeler için geniş dokunma alanları sağlayın. Tüm kontroller için minimum dokunma alanı 44pt x 44pt tutmaya çalışın.
Uygulamanızı birden çok cihazda deneyin. Uygulamanız yatay modu destekliyorsa, cihazın sola veya sağa döndürülmesine bakılmaksızın düzgün göründüğünden emin olun.
Daha büyük cihazlarda metin görüntülerken okunabilir kenar boşluklarını uygulayın. Bu kenar boşlukları, rahat bir okuma deneyimi sağlamak için metin satırlarını yeterince kısa tutar.
İçerikteki Değişikliklere Uyum
İçerik değişiklikleri sırasında mevcut içeriğe odaklanın. Ortam değiştiğinde odağı değiştirmek yönü bozabilir ve insanların uygulamanın kontrolünü kaybetmiş gibi hissetmelerini sağlayabilir.
Nedensiz düzen değişikliklerinden kaçının. Kullanıcı cihazı döndürdüğünde, tüm içeriğin değişmesi gerekmez.
Uygulamanızın sadece dikey ya da sadece yatay çalışması gerekiyorsa, ters ya da düz iki taraflı çalışmasını sağlayın. Yalnızca yatay modda çalışan bir uygulama, kullanıcının cihazı sola veya sağa döndürüp döndürmediğine bakılmaksızın kullanılabilir olmalıdır.
Uygulamanızın ekranı döndürmenize verdiği yanıtı içeriğe göre özelleştirin. Örneğin, cihazı döndürerek insanların bir karakteri hareket ettirmesine izin veren bir oyun, muhtemelen oyun sırasında yön değiştirmemelidir.
Uygulamanızın yalnızca iPhone'da değil, iPad'de de çalıştığından emin olun. Kullanıcılar, uygulamanızı her iki iOS cihazında da çalıştıracak esnekliğe sahip olduğunu düşünürler.
Mevcut resimleri kullanırken en-boy oranı farklılıklarına dikkat edin. Farklı ekran boyutlarının farklı en boy oranları olabilir, bu da resimlerin kırpılmış, sinemaskoplu veya sütunlu görünmesine neden olabilir.
Tam Ekran Deneyimi Tasarlama
Ekranı doldurmak için görsel öğeleri genişletin. Arka planların ekranın kenarlarına kadar uzandığından emin olun.
İnteraktif kontrolleri ekranın en altına ve köşelerine yerleştirmekten kaçının. Ekranın uzak köşeleri insanların rahatça ulaşabileceği zor alanlardır.
Genel olarak, içerik ortalanmalı ve simetrik olarak yerleştirilmelidir, böylece her yönden düzgün görünür. Yuvarlatılmış köşelerle kırpılmamalı, sensör muhafazası tarafından gizlenmemeli ve ana ekrana erişim göstergesi tarafından gizlenmemelidir.
Ekranın kenarlarına kadar uzanan bir buton düzgün görünmeyebilir. Tam genişlikteki butonların yanlarındaki standart UIKit kenar boşluklarına uyun.
Ana ekran özelliklerini maskelemeyin. Ekranın üstüne ve altına siyah çubuklar yerleştirerek bir cihazın yuvarlak köşelerini, sensör muhafazasını veya ana ekran erişim göstergesini saklamaya çalışmayın.
Durum çubuğu yüksekliğine dikkat edin. Durum çubuğu, tam ekran iPhone'larda eski iPhone'lardan daha uzundur. Uygulamanız, içeriğini durum çubuğunun altına konumlandırmak için sabit bir durum çubuğu yüksekliği kullanırsa, hatalı görünüm elde eder. İçeriği, kullanıcının cihazına göre dinamik olarak konumlandırmanız gerekir.
Ana ekrana erişebilmek için göstergenin otomatik olarak gizlenmesine izin verin. Otomatik gizleme etkinleştirildiğinde, kullanıcı ekrana birkaç saniye dokunmamışsa gösterge kaybolur. Kullanıcı ekrana tekrar dokunduğunda yeniden görünür. Bu davranış, yalnızca video oynatma veya fotoğraf slayt gösterileri gibi pasif görüntüleme deneyimleri için etkinleştirilmelidir.
Bu yazıda bir iOS veya iPad uygulaması arayüzü geliştirirken nelere dikkat etmeniz gerektiğinden bahsettik. Daha detaylı bilgi almak için aşağıdaki linkleri ziyaret edebilirsiniz.
#userinterfaces #ipad #ios #UI
